fix: add width container
This commit is contained in:
@@ -1,165 +1,170 @@
|
||||
.Contacts {
|
||||
background: $color-lightgray;
|
||||
border-radius: rem(28px);
|
||||
padding: rem(160px);
|
||||
padding: rem(160px) 0;
|
||||
}
|
||||
|
||||
.Header {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(60px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
.InnerContainer {
|
||||
margin: 0 auto;
|
||||
width: rem(1340px);
|
||||
}
|
||||
|
||||
.Clients {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: rem(40px);
|
||||
max-width: rem(1200px);
|
||||
margin-bottom: rem(160px);
|
||||
.Header {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(60px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.Client {
|
||||
.Clients {
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
gap: rem(40px);
|
||||
max-width: rem(1200px);
|
||||
margin-bottom: rem(160px);
|
||||
|
||||
img {
|
||||
width: rem(300px);
|
||||
height: auto;
|
||||
}
|
||||
.Client {
|
||||
|
||||
img {
|
||||
width: rem(300px);
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Form {
|
||||
position: relative;
|
||||
background: #292E3D;
|
||||
.Form {
|
||||
position: relative;
|
||||
background: #292E3D;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: rem(60px) rem(50px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
|
||||
margin-bottom: rem(80px);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(#163055, .6);
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
.Background {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Offer {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: rem(60px) rem(50px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
|
||||
margin-bottom: rem(80px);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(#163055, .6);
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
.Background {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.Offer {
|
||||
flex: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.Title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(48px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.SubTitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-light;
|
||||
font-size: rem(32px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
max-width: rem(720px);
|
||||
}
|
||||
}
|
||||
|
||||
.Inputs {
|
||||
.Title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: rem(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.Map {
|
||||
position: relative;
|
||||
|
||||
iframe {
|
||||
border-radius: rem(28px);
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(48px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.Contacts {
|
||||
position: absolute;
|
||||
.SubTitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
top: rem(-40px);
|
||||
right: rem(180px);
|
||||
border-radius: rem(28px);
|
||||
background: $color-white;
|
||||
width: rem(440px);
|
||||
padding: rem(40px) rem(35px) rem(20px);
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-light;
|
||||
font-size: rem(32px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
max-width: rem(720px);
|
||||
}
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
.Inputs {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: rem(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.Title {
|
||||
position: relative;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(48px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: right;
|
||||
margin-bottom: rem(32px);
|
||||
align-self: center;
|
||||
.Map {
|
||||
position: relative;
|
||||
|
||||
.LedOn {
|
||||
position: absolute;
|
||||
bottom: rem(6px);
|
||||
left: rem(6px);
|
||||
}
|
||||
iframe {
|
||||
border-radius: rem(28px);
|
||||
}
|
||||
|
||||
.Contacts {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: rem(-40px);
|
||||
right: rem(180px);
|
||||
border-radius: rem(28px);
|
||||
background: $color-white;
|
||||
width: rem(440px);
|
||||
padding: rem(40px) rem(35px) rem(20px);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
|
||||
.Title {
|
||||
position: relative;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(48px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
text-align: right;
|
||||
margin-bottom: rem(32px);
|
||||
align-self: center;
|
||||
|
||||
.LedOn {
|
||||
position: absolute;
|
||||
bottom: rem(6px);
|
||||
left: rem(6px);
|
||||
}
|
||||
}
|
||||
|
||||
.Address {
|
||||
position: relative;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 130%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(20px);
|
||||
margin-left: rem(32px);
|
||||
.Address {
|
||||
position: relative;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 130%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(20px);
|
||||
margin-left: rem(32px);
|
||||
|
||||
.Icon {
|
||||
position: absolute;
|
||||
left: rem(-48px);
|
||||
top: rem(8px);
|
||||
width: rem(32px);
|
||||
height: rem(32px);
|
||||
stroke: #E96526;
|
||||
}
|
||||
.Icon {
|
||||
position: absolute;
|
||||
left: rem(-48px);
|
||||
top: rem(8px);
|
||||
width: rem(32px);
|
||||
height: rem(32px);
|
||||
stroke: #E96526;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user