Skip to content

L
landing_pages
Commit 13b7097d by Iren
Options

add style for max-widht 576px for section advertising

parent c3450953
Showing with 160 additions and 111 deletions
css/styles.css
...@@ -562,6 +562,12 @@ video { ...@@ -562,6 +562,12 @@ video {
max-width: 850px; max-width: 850px;
margin-bottom: 40px; margin-bottom: 40px;
} }
@media (max-width: 768px) {
.text-h2-desktop {
font-size: 14px;
letter-spacing: 0.14px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.text-h2-desktop { .text-h2-desktop {
font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
...@@ -573,12 +579,6 @@ video { ...@@ -573,12 +579,6 @@ video {
margin-bottom: 31px; margin-bottom: 31px;
} }
} }
@media (max-width: 768px) {
.text-h2-desktop {
font-size: 14px;
letter-spacing: 0.14px;
}
}
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: SF-UI-Display-Black; font-family: SF-UI-Display-Black;
font-weight: 800; font-weight: 800;
...@@ -774,7 +774,7 @@ video { ...@@ -774,7 +774,7 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-background { .advertising-background {
padding-bottom: 0; padding-bottom: 0;
padding-top: 90px; padding-top: 55px;
} }
} }
.advertising { .advertising {
...@@ -802,12 +802,19 @@ video { ...@@ -802,12 +802,19 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising { .advertising {
flex-flow: wrap; flex-flow: wrap;
height: auto;
margin-bottom: 1px;
} }
} }
.two-img { .two-img {
margin-bottom: 238px; margin-bottom: 238px;
position: relative; position: relative;
} }
@media (max-width: 576px) {
.two-img {
margin-bottom: 10px;
}
}
.advertising-img-position { .advertising-img-position {
position: absolute; position: absolute;
width: 674px; width: 674px;
...@@ -835,6 +842,19 @@ video { ...@@ -835,6 +842,19 @@ video {
right: 290px; right: 290px;
} }
} }
@media (max-width: 576px) {
.advertising-img-position {
width: 290px;
height: 162px;
right: 55px;
top: 340px;
}
}
@media (max-width: 576px) {
.advertising-text-p {
margin-bottom: 0;
}
}
.advertising-text-order { .advertising-text-order {
width: 110%; width: 110%;
} }
...@@ -845,29 +865,13 @@ video { ...@@ -845,29 +865,13 @@ video {
} }
} }
.advertising-text-order h2 { .advertising-text-order h2 {
font-family: SF-UI-Display-Black; /*.h2-desktop;*/
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
line-height: 36px; line-height: 36px;
font-weight: 800; font-weight: 800;
} }
@media (max-width: 576px) {
.advertising-text-order h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.advertising-text-order h2 { .advertising-text-order h2 {
font-size: 30px; font-size: 30px;
...@@ -876,40 +880,28 @@ video { ...@@ -876,40 +880,28 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text-order h2 { .advertising-text-order h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important; width: 300px!important;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;
height: auto;
} }
} }
.advertising-text { .advertising-text {
width: 110%; width: 110%;
} }
.advertising-text h2 { .advertising-text h2 {
font-family: SF-UI-Display-Black; /*.h2-desktop;*/
font-size: 36px;
font-weight: 800;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 4px; margin-top: 4px;
line-height: 36px; line-height: 36px;
} }
@media (max-width: 576px) {
.advertising-text h2 {
font-size: 24px;
line-height: 30px;
margin-bottom: 3px;
letter-spacing: 0.24px;
max-width: 250px;
margin-top: 20px;
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.advertising-text h2 { .advertising-text h2 {
font-size: 30px; font-size: 30px;
...@@ -918,10 +910,15 @@ video { ...@@ -918,10 +910,15 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text h2 { .advertising-text h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important; width: 300px!important;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;
height: auto;
} }
} }
.advertising-text .main-line { .advertising-text .main-line {
...@@ -943,6 +940,17 @@ video { ...@@ -943,6 +940,17 @@ video {
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
@media (min-height: 577px) {
.advertising-img-order {
width: 120%;
padding-top: 0;
margin-top: 0;
}
.advertising-img-order img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-img-order { .advertising-img-order {
min-width: 300px; min-width: 300px;
...@@ -951,20 +959,16 @@ video { ...@@ -951,20 +959,16 @@ video {
.advertising-img-order img { .advertising-img-order img {
min-width: 300px; min-width: 300px;
margin-left: -25px; margin-left: -25px;
height: 190px;
} }
} }
@media (min-height: 577px) { @media (max-width: 1250px) {
.advertising-img-order { .advertising-img-order {
margin-top: -65px; padding-top: 25px;
width: 120%;
padding-top: 0;
}
.advertising-img-order img {
width: 100%;
} }
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.advertising-img-order { .advertising-img {
padding-top: 25px; padding-top: 25px;
} }
} }
...@@ -976,22 +980,20 @@ video { ...@@ -976,22 +980,20 @@ video {
} }
.advertising-img img { .advertising-img img {
width: 100%; width: 100%;
margin-bottom: 70px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-img { .advertising-img {
min-width: 300px; min-width: 300px;
margin-top: 0;
} }
.advertising-img img { .advertising-img img {
min-width: 320px; min-width: 320px;
height: 190px;
margin-left: -25px; margin-left: -25px;
} }
} }
@media (max-width: 1250px) {
.advertising-img {
padding-top: 25px;
}
}
/*option*/ /*option*/
.option h2 { .option h2 {
font-size: 36px; font-size: 36px;
......
css/styles.less
...@@ -476,6 +476,10 @@ video { ...@@ -476,6 +476,10 @@ video {
letter-spacing: 0.18px; letter-spacing: 0.18px;
max-width: 850px; max-width: 850px;
margin-bottom: 40px; margin-bottom: 40px;
@media (max-width: 768px){
font-size: 14px;
letter-spacing: 0.14px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Light; font-family: SFUIDisplay-Light;
font-size: 14px; font-size: 14px;
...@@ -485,10 +489,6 @@ video { ...@@ -485,10 +489,6 @@ video {
letter-spacing: 0.14px; letter-spacing: 0.14px;
margin-bottom: 31px; margin-bottom: 31px;
} }
@media (max-width: 768px){
font-size: 14px;
letter-spacing: 0.14px;
}
} }
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: SF-UI-Display-Black; font-family: SF-UI-Display-Black;
...@@ -653,7 +653,7 @@ video { ...@@ -653,7 +653,7 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
padding-bottom: 0; padding-bottom: 0;
padding-top: 90px; padding-top: 55px;
} }
} }
.advertising { .advertising {
...@@ -673,12 +673,17 @@ video { ...@@ -673,12 +673,17 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
flex-flow: wrap; flex-flow: wrap;
height: auto;
margin-bottom: 1px;
} }
} }
.two-img { .two-img {
margin-bottom: 238px; margin-bottom: 238px;
position: relative; position: relative;
@media (max-width: 576px) {
margin-bottom: 10px;
}
} }
.advertising-img-position { .advertising-img-position {
position: absolute; position: absolute;
...@@ -700,6 +705,17 @@ video { ...@@ -700,6 +705,17 @@ video {
height: 172px; height: 172px;
right: 290px; right: 290px;
} }
@media (max-width: 576px) {
width: 290px;
height: 162px;
right: 55px;
top: 340px;
}
}
.advertising-text-p {
@media (max-width: 576px) {
margin-bottom: 0;
}
} }
.advertising-text-order { .advertising-text-order {
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -708,7 +724,7 @@ video { ...@@ -708,7 +724,7 @@ video {
} }
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; /*.h2-desktop;*/
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
...@@ -719,10 +735,15 @@ video { ...@@ -719,10 +735,15 @@ video {
margin-bottom: 15px; margin-bottom: 15px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important; width: 300px!important;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;
height: auto;
} }
} }
...@@ -732,7 +753,7 @@ video { ...@@ -732,7 +753,7 @@ video {
.advertising-text { .advertising-text {
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; /*.h2-desktop;*/
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
...@@ -743,10 +764,15 @@ video { ...@@ -743,10 +764,15 @@ video {
margin-bottom: 15px; margin-bottom: 15px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important; width: 300px!important;
font-weight: 700; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
color: #303a81;
line-height: 24px;
margin-bottom: 15px; margin-bottom: 15px;
height: auto;
} }
} }
...@@ -768,20 +794,24 @@ video { ...@@ -768,20 +794,24 @@ video {
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
@media (min-height: 577px) {
width: 120%;
padding-top: 0;
margin-top: 0;
img {
width: 100%;
margin-bottom: 70px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
min-width: 300px; min-width: 300px;
order: 5; order: 5;
img { img {
min-width: 300px; min-width: 300px;
margin-left: -25px; margin-left: -25px;
} height: 190px;
}
@media (min-height: 577px) {
margin-top: -65px;
width: 120%;
padding-top: 0;
img {
width: 100%;
} }
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
...@@ -789,24 +819,28 @@ video { ...@@ -789,24 +819,28 @@ video {
} }
} }
.advertising-img { .advertising-img {
@media (max-width: 1250px) {
padding-top: 25px;
}
@media (min-height: 577px) { @media (min-height: 577px) {
margin-top: -65px; margin-top: -65px;
width: 120%; width: 120%;
padding-top: 0; padding-top: 0;
img { img {
width: 100%; width: 100%;
margin-bottom: 70px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
min-width: 300px; min-width: 300px;
margin-top: 0;
img { img {
min-width: 320px; min-width: 320px;
height: 190px;
margin-left: -25px; margin-left: -25px;
} }
} }
@media (max-width: 1250px) {
padding-top: 25px;
}
} }
/*option*/ /*option*/
.option { .option {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment