Skip to content

L
landing_pages
Commit c3450953 by Iren
Options

add style for max-widht 576px for section main

parent cbfbd797
Showing with 123 additions and 50 deletions
css/styles.css
...@@ -47,10 +47,8 @@ button.main-btn, ...@@ -47,10 +47,8 @@ button.main-btn,
button.main-btn, button.main-btn,
.header-btn { .header-btn {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 143px; width: 231px;
height: 44px; height: 49px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 24px; border-radius: 24px;
background: #c94d4e; background: #c94d4e;
color: #ffffff; color: #ffffff;
...@@ -62,7 +60,7 @@ button.main-btn, ...@@ -62,7 +60,7 @@ button.main-btn,
header { header {
background-image: url("../img/banner.jpg"); background-image: url("../img/banner.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; /*background-size: 100% 100%;*/
background-position: center; background-position: center;
margin-bottom: 97px; margin-bottom: 97px;
} }
...@@ -74,14 +72,14 @@ header { ...@@ -74,14 +72,14 @@ header {
@media (max-width: 576px) { @media (max-width: 576px) {
header { header {
width: 320px; width: 320px;
height: 550px; height: 560px;
margin-bottom: 50px; margin-bottom: 58px;
} }
} }
.background-banner { .background-banner {
background-image: url("../img/banner-background.png"); background-image: url("../img/banner-background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; /*background-size: 100% 100%;*/
background-position: center; background-position: center;
margin-top: -733px; margin-top: -733px;
opacity: 0.65; opacity: 0.65;
...@@ -117,6 +115,11 @@ header { ...@@ -117,6 +115,11 @@ header {
height: 80px; height: 80px;
} }
} }
@media (max-width: 576px) {
.header-wrapp {
height: 78px;
}
}
.header-img { .header-img {
position: relative; position: relative;
width: 19.6%; width: 19.6%;
...@@ -143,8 +146,9 @@ header { ...@@ -143,8 +146,9 @@ header {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header-img { .header-img {
margin-top: 15px;
height: 92px; height: 92px;
width: 155px; width: 160px;
} }
} }
#header-img-navicon { #header-img-navicon {
...@@ -157,6 +161,7 @@ header { ...@@ -157,6 +161,7 @@ header {
font-size: 36px; font-size: 36px;
color: white; color: white;
left: 260px; left: 260px;
top: -15px;
} }
} }
#cat { #cat {
...@@ -337,7 +342,7 @@ h1 { ...@@ -337,7 +342,7 @@ h1 {
@media (max-width: 576px) { @media (max-width: 576px) {
.header-h1-line { .header-h1-line {
width: 150px; width: 150px;
margin-bottom: 7px; margin-bottom: 13px;
} }
} }
.header-text-center { .header-text-center {
...@@ -374,6 +379,7 @@ h1 { ...@@ -374,6 +379,7 @@ h1 {
font-weight: 400; font-weight: 400;
line-height: 21px; line-height: 21px;
letter-spacing: 0; letter-spacing: 0;
margin-bottom: 22px;
} }
} }
.header-btn { .header-btn {
...@@ -398,7 +404,7 @@ h1 { ...@@ -398,7 +404,7 @@ h1 {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.header-btn { .header-btn {
margin-bottom: 24px; margin-bottom: 20px;
width: 230px; width: 230px;
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
...@@ -642,12 +648,34 @@ video { ...@@ -642,12 +648,34 @@ video {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.main-flex { .main-flex {
height: 330px; height: 350px;
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.main-flex { .main-flex {
flex-flow: wrap; flex-flow: wrap;
height: 380px;
}
}
@media (max-width: 576px) {
.h2-main {
width: 200px;
margin-bottom: 12px;
}
}
@media (max-width: 576px) {
.h3-main {
margin-bottom: 14px;
}
}
@media (max-width: 576px) {
.main-line-margin {
margin-bottom: 15px;
}
}
@media (max-width: 576px) {
.text-h2-desktop-main {
margin-bottom: 40px;
} }
} }
.main-card { .main-card {
...@@ -664,6 +692,7 @@ video { ...@@ -664,6 +692,7 @@ video {
flex-flow: nowrap; flex-flow: nowrap;
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
margin-top: 0;
} }
} }
.main-img { .main-img {
...@@ -673,10 +702,10 @@ video { ...@@ -673,10 +702,10 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.main-img img { .main-img img {
width: 70px; width: 80px;
height: 70px; height: 80px;
margin-bottom: 0; margin-bottom: 0;
margin-right: 16px; margin-right: 23px;
} }
} }
.main-card-text { .main-card-text {
...@@ -696,7 +725,12 @@ video { ...@@ -696,7 +725,12 @@ video {
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.main-btn-margin { .main-btn-margin {
margin-top: 130px!important; margin-top: 130px;
}
}
@media (max-width: 576px) {
.main-btn-margin {
margin-top: 15px!important;
} }
} }
/*advertising*/ /*advertising*/
...@@ -811,13 +845,14 @@ video { ...@@ -811,13 +845,14 @@ video {
} }
} }
.advertising-text-order h2 { .advertising-text-order h2 {
font-family: SF-UI-Display-Black;
font-size: 36px; font-size: 36px;
line-height: 62px; line-height: 62px;
margin-bottom: 3px; margin-bottom: 3px;
color: #315197; color: #315197;
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
font-family: SF-UI-Display-Black; font-family: SFUIDisplay-Regular;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
line-height: 36px; line-height: 36px;
...@@ -842,7 +877,8 @@ video { ...@@ -842,7 +877,8 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text-order h2 { .advertising-text-order h2 {
width: 300px!important; width: 300px!important;
font-size: 30px; font-weight: 700;
letter-spacing: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
...@@ -850,6 +886,7 @@ video { ...@@ -850,6 +886,7 @@ video {
width: 110%; width: 110%;
} }
.advertising-text h2 { .advertising-text h2 {
font-family: SF-UI-Display-Black;
font-size: 36px; font-size: 36px;
font-weight: 800; font-weight: 800;
line-height: 62px; line-height: 62px;
...@@ -857,7 +894,7 @@ video { ...@@ -857,7 +894,7 @@ video {
color: #315197; color: #315197;
letter-spacing: 0.36px; letter-spacing: 0.36px;
max-width: 803px; max-width: 803px;
font-family: SF-UI-Display-Black; font-family: SFUIDisplay-Regular;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 4px; margin-top: 4px;
...@@ -881,8 +918,9 @@ video { ...@@ -881,8 +918,9 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.advertising-text h2 { .advertising-text h2 {
width: 100%; width: 300px!important;
font-size: 30px; font-weight: 700;
letter-spacing: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
} }
......
css/styles.less
...@@ -43,10 +43,8 @@ button.main-btn, .header-btn { ...@@ -43,10 +43,8 @@ button.main-btn, .header-btn {
text-align: center; text-align: center;
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
width: 143px; width: 231px;
height: 44px; height: 49px;
margin-top: 30px;
margin-bottom: 75px;
border-radius: 24px; border-radius: 24px;
background: #c94d4e; background: #c94d4e;
color: #ffffff; color: #ffffff;
...@@ -58,7 +56,7 @@ button.main-btn, .header-btn { ...@@ -58,7 +56,7 @@ button.main-btn, .header-btn {
header { header {
background-image: url("../img/banner.jpg"); background-image: url("../img/banner.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; /*background-size: 100% 100%;*/
background-position: center; background-position: center;
margin-bottom: 97px; margin-bottom: 97px;
@media (max-width: 992px) { @media (max-width: 992px) {
...@@ -66,14 +64,14 @@ header { ...@@ -66,14 +64,14 @@ header {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 320px; width: 320px;
height: 550px; height: 560px;
margin-bottom: 50px; margin-bottom: 58px;
} }
} }
.background-banner { .background-banner {
background-image: url("../img/banner-background.png"); background-image: url("../img/banner-background.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; /*background-size: 100% 100%;*/
background-position: center; background-position: center;
margin-top: -733px; margin-top: -733px;
opacity: 0.65; opacity: 0.65;
...@@ -103,6 +101,9 @@ header { ...@@ -103,6 +101,9 @@ header {
@media (max-width: 992px) { @media (max-width: 992px) {
height: 80px; height: 80px;
} }
@media (max-width: 576px) {
height: 78px;
}
} }
.header-img { .header-img {
position: relative; position: relative;
...@@ -124,8 +125,9 @@ header { ...@@ -124,8 +125,9 @@ header {
width: 100px; width: 100px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
margin-top: 15px;
height: 92px; height: 92px;
width: 155px; width: 160px;
} }
} }
#header-img-navicon { #header-img-navicon {
...@@ -136,6 +138,7 @@ header { ...@@ -136,6 +138,7 @@ header {
font-size: 36px; font-size: 36px;
color: white; color: white;
left: 260px; left: 260px;
top: -15px;
} }
} }
#cat { #cat {
...@@ -283,7 +286,7 @@ h1 { ...@@ -283,7 +286,7 @@ h1 {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 150px; width: 150px;
margin-bottom: 7px; margin-bottom: 13px;
} }
} }
.header-text-center { .header-text-center {
...@@ -314,6 +317,7 @@ h1 { ...@@ -314,6 +317,7 @@ h1 {
font-weight: 400; font-weight: 400;
line-height: 21px; line-height: 21px;
letter-spacing: 0; letter-spacing: 0;
margin-bottom: 22px;
} }
} }
.header-btn { .header-btn {
...@@ -332,7 +336,7 @@ h1 { ...@@ -332,7 +336,7 @@ h1 {
margin-top: 5px; margin-top: 5px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
margin-bottom: 24px; margin-bottom: 20px;
width: 230px; width: 230px;
height: 48px; height: 48px;
font-size: 16px; font-size: 16px;
...@@ -541,10 +545,32 @@ video { ...@@ -541,10 +545,32 @@ video {
height: 430px; height: 430px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
height: 330px; height: 350px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
flex-flow: wrap; flex-flow: wrap;
height: 380px;
}
}
.h2-main {
@media (max-width: 576px) {
width: 200px;
margin-bottom: 12px;
}
}
.h3-main {
@media (max-width: 576px) {
margin-bottom: 14px;
}
}
.main-line-margin {
@media (max-width: 576px) {
margin-bottom: 15px;
}
}
.text-h2-desktop-main {
@media (max-width: 576px) {
margin-bottom: 40px;
} }
} }
.main-card { .main-card {
...@@ -560,6 +586,7 @@ video { ...@@ -560,6 +586,7 @@ video {
flex-flow: nowrap; flex-flow: nowrap;
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
margin-top: 0;
} }
} }
.main-img { .main-img {
...@@ -568,10 +595,10 @@ video { ...@@ -568,10 +595,10 @@ video {
margin-bottom: 10px; margin-bottom: 10px;
img { img {
@media (max-width: 576px) { @media (max-width: 576px) {
width: 70px; width: 80px;
height: 70px; height: 80px;
margin-bottom: 0; margin-bottom: 0;
margin-right: 16px; margin-right: 23px;
} }
} }
} }
...@@ -589,7 +616,10 @@ video { ...@@ -589,7 +616,10 @@ video {
} }
.main-btn-margin { .main-btn-margin {
@media (max-width: 992px) { @media (max-width: 992px) {
margin-top: 130px!important; margin-top: 130px;
}
@media (max-width: 576px) {
margin-top: 15px!important;
} }
} }
/*advertising*/ /*advertising*/
...@@ -679,7 +709,7 @@ video { ...@@ -679,7 +709,7 @@ video {
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; .h2-desktop;
font-family: SF-UI-Display-Black; font-family: SFUIDisplay-Regular;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 8px; margin-top: 8px;
line-height: 36px; line-height: 36px;
...@@ -690,7 +720,8 @@ video { ...@@ -690,7 +720,8 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 300px!important; width: 300px!important;
font-size: 30px; font-weight: 700;
letter-spacing: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
...@@ -702,7 +733,7 @@ video { ...@@ -702,7 +733,7 @@ video {
width: 110%; width: 110%;
h2 { h2 {
.h2-desktop; .h2-desktop;
font-family: SF-UI-Display-Black; font-family: SFUIDisplay-Regular;
font-weight: 700; font-weight: 700;
margin-bottom: 21px; margin-bottom: 21px;
margin-top: 4px; margin-top: 4px;
...@@ -711,9 +742,10 @@ video { ...@@ -711,9 +742,10 @@ video {
font-size: 30px; font-size: 30px;
margin-bottom: 15px; margin-bottom: 15px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 100%; width: 300px!important;
font-size: 30px; font-weight: 700;
letter-spacing: 0;
margin-bottom: 15px; margin-bottom: 15px;
} }
......
index.html
...@@ -17,13 +17,16 @@ ...@@ -17,13 +17,16 @@
<div class="main-container"> <div class="main-container">
<div class="header-container"> <div class="header-container">
<div class="header-wrapp"> <div class="header-wrapp">
<!--
<div id="cat" class="page-header__burger--active"> <div id="cat" class="page-header__burger--active">
hhh hhh
</div> </div>
-->
<div class="header-img"> <div class="header-img">
<div id="header-img-navicon"> <button type="button" id="header-img-navicon">&#9776;</button>
<!--<div id="header-img-navicon">
&#9776; &#9776;
</div> </div>-->
<img src="img/header-logo.png"> <img src="img/header-logo.png">
</div> </div>
<div class="header-nav"> <div class="header-nav">
...@@ -94,10 +97,10 @@ ...@@ -94,10 +97,10 @@
</div> </div>
</header> </header>
<section class="main-container"> <section class="main-container">
<h2 class="h2-desktop h2-desktop-mail">Что такое MySmart Office</h2> <h2 class="h2-desktop h2-main">Что такое MySmart Office</h2>
<div class="main-line"> <div class="main-line main-line-margin">
</div> </div>
<p class="text-h2-desktop text-margin"> <p class="text-h2-desktop text-h2-desktop-main">
Собранный в рамках одной системы инструментарий для владельца бизнеса. Собранный в рамках одной системы инструментарий для владельца бизнеса.
MySmart Office позволяет организовать, реструктурировать и контролировать бизнес-процессы, MySmart Office позволяет организовать, реструктурировать и контролировать бизнес-процессы,
использовать на 100% потенциал команды, работать с прогрессивными интеллектуальными использовать на 100% потенциал команды, работать с прогрессивными интеллектуальными
...@@ -109,7 +112,7 @@ ...@@ -109,7 +112,7 @@
<img src="img/office1.png"> <img src="img/office1.png">
</div> </div>
<div class="main-card-text"> <div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop h3-main">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж. Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
</p> </p>
...@@ -316,7 +319,7 @@ ...@@ -316,7 +319,7 @@
<img src="img/advertising4.png"> <img src="img/advertising4.png">
</div> </div>
<div class="advertising-text-order"> <div class="advertising-text-order">
<h2>МСовместная работа</h2> <h2>Совместная работа</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop">
......
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