Skip to content

L
landing_pages
Commit aeb50226 by Iren
Options

add syule for max-wiht 992px

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