Skip to content

L
landing_pages
Commit f1625104 by Iren
Options

add style for max-widht 576px и проверила

parent d918fef3
Showing with 123 additions and 40 deletions
css/styles.css
...@@ -27,8 +27,7 @@ body { ...@@ -27,8 +27,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
button.main-btn, button.main-btn {
.header-btn {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
height: 52px; height: 52px;
...@@ -44,8 +43,7 @@ button.main-btn, ...@@ -44,8 +43,7 @@ button.main-btn,
text-align: center; text-align: center;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
button.main-btn, button.main-btn {
.header-btn {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 231px; width: 231px;
height: 49px; height: 49px;
...@@ -314,14 +312,17 @@ h1 { ...@@ -314,14 +312,17 @@ h1 {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
@media (max-width: 768px) {
h1 {
font-size: 26px;
line-height: 36px;
margin-bottom: 5px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
h1 { h1 {
text-align: left;
font-style: unset;
font-size: 36px; font-size: 36px;
line-height: 36px; line-height: 36px;
letter-spacing: 0.36px;
font-weight: 700;
} }
} }
.header-h1-line { .header-h1-line {
...@@ -339,6 +340,12 @@ h1 { ...@@ -339,6 +340,12 @@ h1 {
margin-bottom: 7px; margin-bottom: 7px;
} }
} }
@media (max-width: 768px) {
.header-h1-line {
width: 200px;
margin-bottom: 7px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.header-h1-line { .header-h1-line {
width: 150px; width: 150px;
...@@ -383,6 +390,18 @@ h1 { ...@@ -383,6 +390,18 @@ h1 {
} }
} }
.header-btn { .header-btn {
font-family: SFUIDisplay-Regular;
width: 290px;
height: 52px;
border-radius: 26px;
background: #c94d4e;
margin-bottom: 20px;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
position: relative; position: relative;
z-index: 3; z-index: 3;
border: none; border: none;
...@@ -402,6 +421,12 @@ h1 { ...@@ -402,6 +421,12 @@ h1 {
margin-top: 5px; margin-top: 5px;
} }
} }
@media (max-width: 768px) {
.header-btn {
width: 220px;
font-size: 16px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.header-btn { .header-btn {
margin-bottom: 20px; margin-bottom: 20px;
...@@ -445,6 +470,12 @@ h1 { ...@@ -445,6 +470,12 @@ h1 {
margin-top: 5px; margin-top: 5px;
} }
} }
@media (max-width: 768px) {
.header-btn-background {
width: 220px;
font-size: 16px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.header-btn-background { .header-btn-background {
width: 230px; width: 230px;
...@@ -489,7 +520,7 @@ video { ...@@ -489,7 +520,7 @@ video {
video { video {
width: 85%; width: 85%;
height: 50%; height: 50%;
margin-top: 50px; margin-top: 5px;
margin-left: 25px; margin-left: 25px;
} }
} }
...@@ -736,6 +767,11 @@ video { ...@@ -736,6 +767,11 @@ video {
margin-top: 130px; margin-top: 130px;
} }
} }
@media (max-width: 768px) {
.main-btn-margin {
margin-top: 55px!important;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.main-btn-margin { .main-btn-margin {
margin-top: 15px!important; margin-top: 15px!important;
...@@ -845,9 +881,9 @@ video { ...@@ -845,9 +881,9 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.advertising-img-position { .advertising-img-position {
width: 290px; width: 45%;
height: 172px; height: 50%;
right: 290px; right: 55%;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -1906,16 +1942,6 @@ video { ...@@ -1906,16 +1942,6 @@ video {
font-size: 10px; font-size: 10px;
} }
} }
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
@media (max-width: 768px) {
.price .price-user {
font-size: 10px;
}
}
.price, .price,
.price-active { .price-active {
width: 100%; width: 100%;
...@@ -1951,6 +1977,26 @@ video { ...@@ -1951,6 +1977,26 @@ video {
.price-active span { .price-active span {
font-size: 30px; font-size: 30px;
} }
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
@media (max-width: 768px) {
.price-active .price-user {
font-size: 10px;
}
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
@media (max-width: 768px) {
.price .price-user {
font-size: 10px;
}
}
.price-active { .price-active {
height: 90px; height: 90px;
} }
......
css/styles.less
...@@ -27,7 +27,7 @@ body { ...@@ -27,7 +27,7 @@ body {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
button.main-btn, .header-btn { button.main-btn /*.header-btn */{
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 290px; width: 290px;
height: 52px; height: 52px;
...@@ -263,13 +263,14 @@ h1 { ...@@ -263,13 +263,14 @@ h1 {
line-height: 46px; line-height: 46px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@media (max-width: 768px) {
font-size: 26px;
line-height: 36px;
margin-bottom: 5px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
text-align: left;
font-style: unset;
font-size: 36px; font-size: 36px;
line-height: 36px; line-height: 36px;
letter-spacing: 0.36px;
font-weight: 700;
} }
} }
.header-h1-line{ .header-h1-line{
...@@ -284,6 +285,10 @@ h1 { ...@@ -284,6 +285,10 @@ h1 {
width: 300px; width: 300px;
margin-bottom: 7px; margin-bottom: 7px;
} }
@media (max-width: 768px) {
width: 200px;
margin-bottom: 7px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
width: 150px; width: 150px;
margin-bottom: 13px; margin-bottom: 13px;
...@@ -321,6 +326,18 @@ h1 { ...@@ -321,6 +326,18 @@ h1 {
} }
} }
.header-btn { .header-btn {
font-family: SFUIDisplay-Regular;
width: 290px;
height: 52px;
border-radius: 26px;
background: #c94d4e;
margin-bottom: 20px;
color: #ffffff;
font-size: 18px;
font-weight: 400;
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
position: relative; position: relative;
z-index: 3; z-index: 3;
border: none; border: none;
...@@ -335,6 +352,10 @@ h1 { ...@@ -335,6 +352,10 @@ h1 {
background: #c94d4e; background: #c94d4e;
margin-top: 5px; margin-top: 5px;
} }
@media (max-width: 768px) {
width: 220px;
font-size: 16px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
margin-bottom: 20px; margin-bottom: 20px;
width: 230px; width: 230px;
...@@ -372,6 +393,10 @@ h1 { ...@@ -372,6 +393,10 @@ h1 {
font-size: 12px; font-size: 12px;
margin-top: 5px; margin-top: 5px;
} }
@media (max-width: 768px) {
width: 220px;
font-size: 16px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
width: 230px; width: 230px;
height: 48px; height: 48px;
...@@ -409,7 +434,7 @@ video { ...@@ -409,7 +434,7 @@ video {
@media (max-width: 768px) { @media (max-width: 768px) {
width: 85%; width: 85%;
height: 50%; height: 50%;
margin-top: 50px; margin-top: 5px;
margin-left: 25px; margin-left: 25px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
...@@ -624,6 +649,9 @@ video { ...@@ -624,6 +649,9 @@ video {
@media (max-width: 992px) { @media (max-width: 992px) {
margin-top: 130px; margin-top: 130px;
} }
@media (max-width: 768px) {
margin-top: 55px!important;
}
@media (max-width: 576px) { @media (max-width: 576px) {
margin-top: 15px!important; margin-top: 15px!important;
} }
...@@ -707,9 +735,9 @@ video { ...@@ -707,9 +735,9 @@ video {
right: 53%; right: 53%;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
width: 290px; width: 45%;
height: 172px; height: 50%;
right: 290px; right: 55%;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 290px; width: 290px;
...@@ -1362,7 +1390,7 @@ video { ...@@ -1362,7 +1390,7 @@ video {
.technology-p-margin { .technology-p-margin {
@media (max-width: 576px) { @media (max-width: 576px) {
margin-bottom: 5px; margin-bottom: 5px;
} }
} }
.technology-card { .technology-card {
width: 48%; width: 48%;
...@@ -1567,14 +1595,7 @@ video { ...@@ -1567,14 +1595,7 @@ video {
} }
} }
} }
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
@media (max-width: 768px) {
font-size: 10px;
}
}
.price, .price-active { .price, .price-active {
width: 100%; width: 100%;
height: auto; height: auto;
...@@ -1598,6 +1619,22 @@ video { ...@@ -1598,6 +1619,22 @@ video {
font-size: 30px; font-size: 30px;
} }
} }
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
@media (max-width: 768px) {
font-size: 10px;
}
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
@media (max-width: 768px) {
font-size: 10px;
}
}
.price-active { .price-active {
height: 90px; height: 90px;
} }
......
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