Skip to content

L
landing_pages
Commit c3450953 by Iren
Options

add style for max-widht 576px for section main

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