Skip to content

L
landing_pages
Commit aeb50226 by Iren
Options

add syule for max-wiht 992px

parent eb00a506
Showing with 256 additions and 13 deletions
css/styles.css
...@@ -66,6 +66,11 @@ header { ...@@ -66,6 +66,11 @@ header {
margin-bottom: 0; margin-bottom: 0;
} }
} }
@media (max-width: 992px) {
header {
margin-bottom: 57px;
}
}
.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;
...@@ -80,6 +85,11 @@ header { ...@@ -80,6 +85,11 @@ header {
width: 100%; width: 100%;
height: 733px; height: 733px;
} }
@media (max-width: 992px) {
.ooo {
height: 510px;
}
}
.header-container { .header-container {
height: 733px; height: 733px;
color: red; color: red;
...@@ -94,6 +104,11 @@ header { ...@@ -94,6 +104,11 @@ header {
justify-content: space-between; justify-content: space-between;
height: 19%; height: 19%;
} }
@media (max-width: 992px) {
.header-wrapp {
height: 80px;
}
}
.header-img { .header-img {
width: 19.6%; width: 19.6%;
margin-top: 1.8%; margin-top: 1.8%;
...@@ -104,6 +119,12 @@ header { ...@@ -104,6 +119,12 @@ header {
width: 100%; width: 100%;
height: 37%; height: 37%;
} }
@media (max-width: 992px) {
.header-img {
height: 80px;
width: 150px;
}
}
.header-nav { .header-nav {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -113,9 +134,21 @@ header { ...@@ -113,9 +134,21 @@ header {
height: 4.7%; height: 4.7%;
margin-top: 3%; margin-top: 3%;
} }
@media (max-width: 992px) {
.header-nav {
width: 570px;
height: 5px;
margin-top: 20px;
}
}
.header-link { .header-link {
margin-right: 2.5%; margin-right: 2.5%;
} }
@media (max-width: 992px) {
.header-link {
margin-right: 10px;
}
}
.header-link a { .header-link a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -124,9 +157,19 @@ header { ...@@ -124,9 +157,19 @@ header {
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
} }
@media (max-width: 992px) {
.header-link a {
font-size: 12px;
}
}
.header-link-language { .header-link-language {
margin-right: 2.5%; margin-right: 2.5%;
} }
@media (max-width: 992px) {
.header-link-language {
margin-right: 10px;
}
}
.header-link-language a { .header-link-language a {
color: white; color: white;
text-decoration: none; text-decoration: none;
...@@ -135,17 +178,36 @@ header { ...@@ -135,17 +178,36 @@ header {
letter-spacing: 0.14px; letter-spacing: 0.14px;
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
} }
@media (max-width: 992px) {
.header-link-language a {
font-size: 12px;
}
}
.header-line { .header-line {
width: 30px; width: 30px;
height: 35px; height: 35px;
margin-top: -6px; margin-top: -6px;
border-left: white 1px solid; border-left: white 1px solid;
} }
@media (max-width: 992px) {
.header-line {
margin-right: 5px;
width: 4px;
height: 20px;
margin-top: 0;
}
}
.header-icon i { .header-icon i {
color: white; color: white;
font-size: 18px; font-size: 18px;
margin-right: 5px; margin-right: 5px;
} }
@media (max-width: 992px) {
.header-icon i {
font-size: 12px;
margin-left: 0;
}
}
.header-icon i:last-child { .header-icon i:last-child {
margin-right: 0!important; margin-right: 0!important;
} }
...@@ -163,6 +225,13 @@ h1 { ...@@ -163,6 +225,13 @@ h1 {
letter-spacing: 0.6px; letter-spacing: 0.6px;
margin-bottom: 2.5%; margin-bottom: 2.5%;
} }
@media (max-width: 992px) {
h1 {
font-size: 36px;
line-height: 46px;
margin-bottom: 5px;
}
}
.header-h1-line { .header-h1-line {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -172,6 +241,12 @@ h1 { ...@@ -172,6 +241,12 @@ h1 {
border-bottom: #c94d4e 2px solid; border-bottom: #c94d4e 2px solid;
margin-bottom: 4.2%; margin-bottom: 4.2%;
} }
@media (max-width: 992px) {
.header-h1-line {
width: 300px;
margin-bottom: 7px;
}
}
.header-text { .header-text {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -182,6 +257,12 @@ h1 { ...@@ -182,6 +257,12 @@ h1 {
letter-spacing: 0; letter-spacing: 0;
color: white; color: white;
} }
@media (max-width: 992px) {
.header-text {
font-size: 16px;
line-height: 18px;
}
}
.header-btn { .header-btn {
position: relative; position: relative;
z-index: 3; z-index: 3;
...@@ -194,6 +275,14 @@ h1 { ...@@ -194,6 +275,14 @@ h1 {
background: #c94d4e; background: #c94d4e;
} }
} }
@media (max-width: 992px) {
.header-btn {
width: 150px;
font-size: 12px;
background: #c94d4e;
margin-top: 5px;
}
}
.header-btn-background { .header-btn-background {
font-family: SFUIDisplay-Regular; font-family: SFUIDisplay-Regular;
position: relative; position: relative;
...@@ -218,6 +307,13 @@ h1 { ...@@ -218,6 +307,13 @@ h1 {
font-size: 16px; font-size: 16px;
} }
} }
@media (max-width: 992px) {
.header-btn-background {
width: 150px;
font-size: 12px;
margin-top: 5px;
}
}
.header-text-wrapper { .header-text-wrapper {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -229,6 +325,14 @@ video { ...@@ -229,6 +325,14 @@ video {
position: relative; position: relative;
z-index: 3; z-index: 3;
} }
@media (max-width: 992px) {
video {
width: 90%;
height: 50%;
margin-top: 50px;
margin-left: 25px;
}
}
.main-container { .main-container {
position: relative; position: relative;
max-width: 1250px; max-width: 1250px;
...@@ -304,7 +408,6 @@ video { ...@@ -304,7 +408,6 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.h2-desktop-tittle { .h2-desktop-tittle {
font-family: HelveticaNeue-Black;
max-width: 170px; max-width: 170px;
} }
} }
...@@ -394,6 +497,11 @@ video { ...@@ -394,6 +497,11 @@ video {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
@media (max-width: 992px) {
.main-btn-margin {
margin-top: 130px!important;
}
}
/*advertising*/ /*advertising*/
.advertising-background { .advertising-background {
/*background-repeat: no-repeat; /*background-repeat: no-repeat;
...@@ -421,6 +529,11 @@ video { ...@@ -421,6 +529,11 @@ video {
padding-bottom: 20px; padding-bottom: 20px;
} }
} }
@media (max-width: 992px) {
.advertising-background {
padding-bottom: 20px;
}
}
.advertising { .advertising {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -721,10 +834,25 @@ video { ...@@ -721,10 +834,25 @@ video {
top: 2%; top: 2%;
} }
} }
@media (max-width: 992px) {
.option-card-line {
position: absolute;
width: 2px;
height: 343px;
transform: rotate(0deg);
left: 50%;
top: 2%;
}
}
.option-btn { .option-btn {
margin-top: 0!important; margin-top: 0!important;
margin-bottom: 146px!important; margin-bottom: 146px!important;
} }
@media (max-width: 992px) {
.option-btn {
margin-bottom: 71px!important;
}
}
/*protection*/ /*protection*/
.protection-background { .protection-background {
background: #f9fbff; background: #f9fbff;
...@@ -738,6 +866,12 @@ video { ...@@ -738,6 +866,12 @@ video {
padding-top: 51px; padding-top: 51px;
} }
} }
@media (max-width: 992px) {
.protection-background {
padding-top: 71px;
padding-bottom: 145px;
}
}
.protection { .protection {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -753,6 +887,11 @@ video { ...@@ -753,6 +887,11 @@ video {
margin-right: 16px; margin-right: 16px;
} }
} }
@media (max-width: 992px) {
.protection-text-margin {
margin-bottom: 40px;
}
}
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
height: 90px; height: 90px;
...@@ -772,6 +911,11 @@ video { ...@@ -772,6 +911,11 @@ video {
.catalog { .catalog {
padding-top: 135px; padding-top: 135px;
} }
@media (max-width: 992px) {
.catalog {
padding-top: 65px;
}
}
.catalog-container { .catalog-container {
display: flex; display: flex;
} }
...@@ -795,6 +939,24 @@ video { ...@@ -795,6 +939,24 @@ video {
font-family: AvenirNext-Heavy sans-serif; font-family: AvenirNext-Heavy sans-serif;
margin-right: 5%; margin-right: 5%;
margin-bottom: 60px; margin-bottom: 60px;
width: 400px;
}
@media (max-width: 1250px) {
.catalog-img-container {
width: 400px;
margin-right: 2%;
}
}
@media (max-width: 992px) {
.catalog-img-container {
margin-right: 0;
width: 340px;
}
}
@media (max-width: 992px) {
.catalog-img-container img {
width: 75px;
}
} }
@media (max-width: 1250px) { @media (max-width: 1250px) {
.catalog-img-container img { .catalog-img-container img {
...@@ -825,6 +987,7 @@ video { ...@@ -825,6 +987,7 @@ video {
letter-spacing: 0.24px; letter-spacing: 0.24px;
color: #303a81; color: #303a81;
} }
/*technology*/
.technology { .technology {
background: #f9fbff; background: #f9fbff;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -844,6 +1007,13 @@ video { ...@@ -844,6 +1007,13 @@ video {
padding-bottom: 125px; padding-bottom: 125px;
} }
} }
@media (max-width: 992px) {
.technology {
padding-top: 80px;
padding-bottom: 85px;
margin-bottom: 70px;
}
}
/*technology*/ /*technology*/
.technology-container-wrapper { .technology-container-wrapper {
display: flex; display: flex;
...@@ -866,6 +1036,12 @@ video { ...@@ -866,6 +1036,12 @@ video {
width: 100%; width: 100%;
} }
} }
@media (max-width: 992px) {
.technology-containe {
height: 200px;
margin-top: 20px;
}
}
.technology-card { .technology-card {
width: 50%; width: 50%;
text-align: left; text-align: left;
...@@ -884,8 +1060,13 @@ video { ...@@ -884,8 +1060,13 @@ video {
color: #303a81; color: #303a81;
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
@media (max-width: 576px) { @media (max-width: 992px) {
.technology-card img { .technology-card img {
width: 100px;
}
}
@media (max-width: 576px) {
.technology-card {
width: 142px; width: 142px;
} }
} }
...@@ -901,12 +1082,17 @@ video { ...@@ -901,12 +1082,17 @@ video {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 158px; margin-bottom: 128px;
/*@media (max-width: 1250px) { /*@media (max-width: 1250px) {
position: absolute; position: absolute;
display: none; display: none;
}*/ }*/
} }
@media (max-width: 992px) {
.price-wrapper {
margin-left: -15px;
}
}
.price-container, .price-container,
.price-container-active { .price-container-active {
position: relative; position: relative;
...@@ -925,6 +1111,14 @@ video { ...@@ -925,6 +1111,14 @@ video {
height: 900px; height: 900px;
} }
} }
@media (max-width: 992px) {
.price-container,
.price-container-active {
width: 174px;
height: 990px;
padding: 30px 8px 32px 8px;
}
}
.price-container h6, .price-container h6,
.price-container-active h6 { .price-container-active h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
...@@ -956,6 +1150,12 @@ video { ...@@ -956,6 +1150,12 @@ video {
width: 223px; width: 223px;
} }
} }
@media (max-width: 992px) {
.price-container img,
.price-container-active img {
width: 190px;
}
}
.price-container { .price-container {
margin-top: 20px; margin-top: 20px;
} }
...@@ -976,6 +1176,13 @@ video { ...@@ -976,6 +1176,13 @@ video {
height: 931px; height: 931px;
} }
} }
@media (max-width: 992px) {
.price-container-active {
width: 174px;
height: 1020px;
padding: 30px 8px 32px 8px;
}
}
.price-container-active h6 { .price-container-active h6 {
font-family: AvenirNext-Heavy; font-family: AvenirNext-Heavy;
position: relative; position: relative;
...@@ -1000,6 +1207,11 @@ video { ...@@ -1000,6 +1207,11 @@ video {
width: 222px; width: 222px;
} }
} }
@media (max-width: 992px) {
.price-container-active img {
width: 191px;
}
}
.price-active .price-user { .price-active .price-user {
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
...@@ -1010,6 +1222,11 @@ video { ...@@ -1010,6 +1222,11 @@ video {
font-size: 40px; font-size: 40px;
} }
} }
@media (max-width: 992px) {
.price-active .price-user p {
font-size: 30px;
}
}
.price .price-user { .price .price-user {
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
...@@ -1034,6 +1251,12 @@ video { ...@@ -1034,6 +1251,12 @@ video {
font-size: 40px; font-size: 40px;
} }
} }
@media (max-width: 992px) {
.price p,
.price-active p {
font-size: 30px;
}
}
.price span, .price span,
.price-active span { .price-active span {
font-size: 30px; font-size: 30px;
...@@ -1054,6 +1277,12 @@ video { ...@@ -1054,6 +1277,12 @@ video {
line-height: 30px; line-height: 30px;
} }
} }
@media (max-width: 992px) {
.price .price-p-margin {
line-height: 30px;
font-size: 24px;
}
}
.price-line-little { .price-line-little {
width: 75px; width: 75px;
height: 12px; height: 12px;
...@@ -1117,6 +1346,13 @@ video { ...@@ -1117,6 +1346,13 @@ video {
font-size: 12px; font-size: 12px;
} }
} }
@media (max-width: 992px) {
.price-btn {
width: 180px;
padding: 12px 10px 15px 10px;
margin-left: -8px;
}
}
.price-btn-active { .price-btn-active {
background: #c94d4e; background: #c94d4e;
color: white; color: white;
...@@ -1127,6 +1363,12 @@ video { ...@@ -1127,6 +1363,12 @@ video {
margin-top: 8px; margin-top: 8px;
} }
} }
@media (max-width: 992px) {
.price-btn-active {
width: 180px;
padding: 12px 10px 15px 10px;
}
}
/*forms*/ /*forms*/
.connection { .connection {
background-image: url("../img/background-form.jpg"); background-image: url("../img/background-form.jpg");
......
index.html
...@@ -84,7 +84,6 @@ ...@@ -84,7 +84,6 @@
</div> </div>
<div class="background-banner"> <div class="background-banner">
<div class="ooo"> <div class="ooo">
jjjj
</div> </div>
</div> </div>
</header> </header>
...@@ -118,7 +117,7 @@ ...@@ -118,7 +117,7 @@
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Адаптируйте свои предложения под запросы Адаптируйте свои предложения под запросы
клиентов. клиентов.
</p> </p>
</div> </div>
</div> </div>
...@@ -153,8 +152,8 @@ ...@@ -153,8 +152,8 @@
<div class="main-card-text"> <div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Все продажи вашего магазина быстро доступны Все продажи вашего магазина быстро доступны
у вас в системе. у вас в системе.
</p> </p>
</div> </div>
</div> </div>
...@@ -190,7 +189,7 @@ ...@@ -190,7 +189,7 @@
<h3 class="h3-desktop">Продажи</h3> <h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop"> <p class="text-h3-desktop">
Подбор, прием и работа с персоналом Подбор, прием и работа с персоналом
сильно упрощается. сильно упрощается.
</p> </p>
</div> </div>
</div> </div>
...@@ -244,7 +243,7 @@ ...@@ -244,7 +243,7 @@
</div> </div>
</div> </div>
<div class="main-flex-btn"> <div class="main-flex-btn">
<button type="button" class="main-btn">Узнать больше</button> <button type="button" class="main-btn main-btn-margin">Узнать больше</button>
</div> </div>
</section> </section>
<section class="advertising-background"> <section class="advertising-background">
...@@ -318,7 +317,7 @@ ...@@ -318,7 +317,7 @@
<div class="advertising main-container"> <div class="advertising main-container">
<div class="advertising-text"> <div class="advertising-text">
<h2 class="h2-desktop">Возможности визуального <h2 class="h2-desktop">Возможности визуального
представления</h2> представления</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop">
...@@ -352,7 +351,7 @@ ...@@ -352,7 +351,7 @@
<div class="advertising main-container"> <div class="advertising main-container">
<div class="advertising-text"> <div class="advertising-text">
<h2 class="h2-desktop">Любые формы <h2 class="h2-desktop">Любые формы
для вашего приложения</h2> для вашего приложения</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop">
...@@ -372,7 +371,7 @@ ...@@ -372,7 +371,7 @@
</div> </div>
<div class="advertising-text-order"> <div class="advertising-text-order">
<h2>Широкие возможности <h2>Широкие возможности
для интеграции (Открытое API)</h2> для интеграции (Открытое API)</h2>
<div class="main-line"> <div class="main-line">
</div> </div>
<p> <p>
...@@ -439,7 +438,7 @@ ...@@ -439,7 +438,7 @@
<h2 class="h2-desktop h2-desktop-tittle">Защита данных в облаке</h2> <h2 class="h2-desktop h2-desktop-tittle">Защита данных в облаке</h2>
<div class="main-line protection-line"> <div class="main-line protection-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop protection-text-margin">
Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной Используемая архитектура Single tenant позволяет оградить от рисков злонамеренной
или случайно гибели данных всех своих пользователей благодаря использованию или случайно гибели данных всех своих пользователей благодаря использованию
персональной архитектуры и, как следствие, минимизации рисков. персональной архитектуры и, как следствие, минимизации рисков.
...@@ -565,6 +564,7 @@ ...@@ -565,6 +564,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="technology"> <section class="technology">
<div class="main-container"> <div class="main-container">
<h2 class="h2-desktop h2-desktop-tittle">Технологии</h2> <h2 class="h2-desktop h2-desktop-tittle">Технологии</h2>
...@@ -649,6 +649,7 @@ ...@@ -649,6 +649,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="main-container"> <section class="main-container">
<h2 class="h2-desktop">Цены</h2> <h2 class="h2-desktop">Цены</h2>
<div class="main-line"> <div class="main-line">
......
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