fix: add width container
This commit is contained in:
@@ -1,7 +1,67 @@
|
||||
.Offer {
|
||||
background: $color-lightgray;
|
||||
border-radius: rem(28px);
|
||||
padding: rem(160px);
|
||||
padding: rem(160px) 0;
|
||||
}
|
||||
|
||||
.InnerContainer {
|
||||
margin: 0 auto;
|
||||
width: rem(1340px);
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(60px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
max-width: rem(1330px);
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.Text {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(20px);
|
||||
}
|
||||
|
||||
.List {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: rem(1330px);
|
||||
margin-bottom: rem(60px);
|
||||
|
||||
.ListItem {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 160%;
|
||||
color: $color-text;
|
||||
list-style-type: decimal;
|
||||
margin-left: rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
.RowForm {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: rem(40px);
|
||||
justify-content: center;
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.Inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: $color-white;
|
||||
border-radius: rem(28px);
|
||||
padding: rem(80px) rem(40px);
|
||||
margin-bottom: rem(130px);
|
||||
|
||||
.Title {
|
||||
font-family: $font-open-sans;
|
||||
@@ -9,155 +69,22 @@
|
||||
font-size: rem(60px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
max-width: rem(1330px);
|
||||
margin-bottom: rem(80px);
|
||||
}
|
||||
|
||||
.Text {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
margin-bottom: rem(20px);
|
||||
}
|
||||
|
||||
.List {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
max-width: rem(1330px);
|
||||
margin-bottom: rem(60px);
|
||||
|
||||
.ListItem {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(32px);
|
||||
line-height: 160%;
|
||||
color: $color-text;
|
||||
list-style-type: decimal;
|
||||
margin-left: rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
.RowForm {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.Grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: rem(40px);
|
||||
justify-content: center;
|
||||
margin-bottom: rem(80px);
|
||||
padding: rem(40px) 0;
|
||||
}
|
||||
|
||||
.Inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
background-color: $color-white;
|
||||
border-radius: rem(28px);
|
||||
padding: rem(80px) rem(40px);
|
||||
margin-bottom: rem(130px);
|
||||
|
||||
.Title {
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-semi-bold;
|
||||
font-size: rem(60px);
|
||||
line-height: 100%;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
.Grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: rem(40px);
|
||||
padding: rem(40px) 0;
|
||||
}
|
||||
|
||||
.Tile {
|
||||
position: relative;
|
||||
padding: rem(25px);
|
||||
height: rem(352px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(#292E3D, .7);
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
background-color: rgba(#292E3D, .5);
|
||||
}
|
||||
|
||||
.Title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Arrow {
|
||||
transform: rotate(45deg);
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.Background {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.Title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(42px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.Description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(24px);
|
||||
line-height: 130%;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.Arrow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: rem(25px);
|
||||
bottom: rem(25px);
|
||||
width: rem(64px);
|
||||
height: rem(64px);
|
||||
transform: rotate(-135deg);
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Form {
|
||||
.Tile {
|
||||
position: relative;
|
||||
padding: rem(40px) rem(60px);
|
||||
background: #292E3D;
|
||||
padding: rem(25px);
|
||||
height: rem(352px);
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
@@ -168,35 +95,31 @@
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background-color: rgba(#163055, .6);
|
||||
background-color: rgba(#292E3D, .7);
|
||||
transition: 250ms background-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:after {
|
||||
background-color: rgba(#292E3D, .5);
|
||||
}
|
||||
|
||||
.Title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Description {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Arrow {
|
||||
transform: rotate(45deg);
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
.Background {
|
||||
position: absolute;
|
||||
object-fit: cover;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.PanelLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.PanelRight {
|
||||
width: 100%;
|
||||
place-self: end end;
|
||||
}
|
||||
|
||||
.SubTitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-light;
|
||||
font-size: rem(30px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
margin-bottom: rem(16px);
|
||||
}
|
||||
|
||||
.Title {
|
||||
@@ -204,11 +127,93 @@
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(48px);
|
||||
font-size: rem(42px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
}
|
||||
|
||||
.Description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: none;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(24px);
|
||||
line-height: 130%;
|
||||
color: $color-white;
|
||||
max-width: rem(660px);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.Arrow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: rem(25px);
|
||||
bottom: rem(25px);
|
||||
width: rem(64px);
|
||||
height: rem(64px);
|
||||
transform: rotate(-135deg);
|
||||
transition: transform 250ms ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Form {
|
||||
position: relative;
|
||||
padding: rem(40px) rem(60px);
|
||||
background: #292E3D;
|
||||
border-radius: rem(28px);
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
&: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;
|
||||
}
|
||||
|
||||
.PanelLeft {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.PanelRight {
|
||||
width: 100%;
|
||||
place-self: end end;
|
||||
}
|
||||
|
||||
.SubTitle {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-light;
|
||||
font-size: rem(30px);
|
||||
line-height: 100%;
|
||||
color: $color-white;
|
||||
margin-bottom: rem(16px);
|
||||
}
|
||||
|
||||
.Title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
font-family: $font-open-sans;
|
||||
font-weight: $font-regular;
|
||||
font-size: rem(48px);
|
||||
line-height: 130%;
|
||||
color: $color-white;
|
||||
max-width: rem(660px);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user