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