Skip to content

L
landing_pages
Commit aea888c6 by Iren
Options

add style for max-widht 576px for section texnology

parent 83a7d555
Showing with 153 additions and 97 deletions
css/styles.css
...@@ -747,7 +747,7 @@ video { ...@@ -747,7 +747,7 @@ video {
.advertising-background { .advertising-background {
padding-top: 45px; padding-top: 45px;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 50px; margin-bottom: 60px;
background-image: url("../img/background-optuon-modal.jpg"); background-image: url("../img/background-optuon-modal.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -995,6 +995,21 @@ video { ...@@ -995,6 +995,21 @@ video {
} }
} }
/*option*/ /*option*/
.option-container {
position: relative;
display: flex;
margin-top: 46px;
justify-content: space-between;
align-items: baseline;
}
@media (max-width: 576px) {
.option-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
}
}
.option h2 { .option h2 {
font-size: 36px; font-size: 36px;
line-height: 62px; line-height: 62px;
...@@ -1023,22 +1038,6 @@ video { ...@@ -1023,22 +1038,6 @@ video {
font-weight: 800; font-weight: 800;
} }
} }
.option-container {
position: relative;
display: flex;
margin-top: 46px;
justify-content: space-between;
align-items: baseline;
}
@media (max-width: 576px) {
.option-container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
margin-top: 0;
}
}
.option-card-img { .option-card-img {
text-align: center; text-align: center;
max-width: 485px; max-width: 485px;
...@@ -1104,12 +1103,13 @@ video { ...@@ -1104,12 +1103,13 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.option-text { .option-text {
width: 139px; width: 150px;
margin-bottom: 3px;
} }
} }
.option-text p { .option-text p {
font-family: Avenir Next; font-family: Avenir Next;
font-size: 14px; font-size: 13px;
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;
letter-spacing: 0.14px; letter-spacing: 0.14px;
...@@ -1187,17 +1187,17 @@ video { ...@@ -1187,17 +1187,17 @@ video {
} }
} }
.option-btn { .option-btn {
margin-top: 0!important; margin-top: 0;
margin-bottom: 146px!important; margin-bottom: 146px;
} }
@media (max-width: 992px) { @media (max-width: 992px) {
.option-btn { .option-btn {
margin-bottom: 71px!important; margin-bottom: 71px;
} }
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.option-btn { .option-btn {
width: 203px!important; width: 203px;
height: 34px; height: 34px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1207,11 +1207,13 @@ video { ...@@ -1207,11 +1207,13 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.option-btn { .option-btn {
width: 140px!important; width: 143px;
height: 24px!important; height: 44px;
margin-top: 50px!important; margin-top: 50px;
padding-bottom: 6px; border-radius: 24px;
font-size: 12px; background: #c94d4e;
color: white;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
letter-spacing: 0.16px; letter-spacing: 0.16px;
...@@ -1238,10 +1240,15 @@ video { ...@@ -1238,10 +1240,15 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.protection-background { .protection-background {
padding-top: 71px; padding-top: 52px;
padding-bottom: 10px; padding-bottom: 10px;
} }
} }
@media (max-width: 576px) {
.protection-background h2 {
line-height: 24px;
}
}
.protection { .protection {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
...@@ -1270,7 +1277,7 @@ video { ...@@ -1270,7 +1277,7 @@ video {
flex-flow: nowrap; flex-flow: nowrap;
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
height: 103px; height: auto;
} }
} }
.protection-img { .protection-img {
...@@ -1284,6 +1291,12 @@ video { ...@@ -1284,6 +1291,12 @@ video {
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.protection-img {
height: 110px;
margin-left: -10px;
}
}
@media (max-width: 576px) {
.protection-img img { .protection-img img {
width: 70px; width: 70px;
height: 70px; height: 70px;
...@@ -1302,25 +1315,33 @@ video { ...@@ -1302,25 +1315,33 @@ video {
} }
} }
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; font-family: SFUIDisplay-Regular;
height: 90px; height: 90px;
} }
@media (max-width: 768px) {
.protection-text {
height: 150px;
}
}
@media (max-width: 576px) { @media (max-width: 576px) {
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; height: 73px;
height: auto;
margin-bottom: 10px; margin-bottom: 10px;
min-width: 216px; min-width: 216px;
} }
} .protection-text h3 {
@media (max-width: 768px) { line-height: 19px;
.protection-text { margin-bottom: 13px;
height: 150px;
} }
} }
.protection-line { .protection-line {
margin-bottom: 12px; margin-bottom: 12px;
} }
@media (max-width: 576px) {
.protection-line {
margin-top: 13px;
}
}
/*catalog*/ /*catalog*/
.catalog { .catalog {
padding-top: 135px; padding-top: 135px;
...@@ -1547,7 +1568,7 @@ video { ...@@ -1547,7 +1568,7 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.technology { .technology {
padding-top: 72px; padding-top: 55px;
padding-bottom: 35px; padding-bottom: 35px;
margin-bottom: 40px; margin-bottom: 40px;
} }
...@@ -1590,9 +1611,15 @@ video { ...@@ -1590,9 +1611,15 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
.technology-containe { .technology-containe {
justify-content: center; justify-content: center;
height: 190px; /*height: 150px;*/
height: auto;
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 10px;
}
}
@media (max-width: 576px) {
.technology-p-margin {
margin-bottom: 5px;
} }
} }
.technology-card { .technology-card {
...@@ -1608,7 +1635,8 @@ video { ...@@ -1608,7 +1635,8 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.technology-card { .technology-card {
height: 190px; /*height: 120px;*/
height: auto;
padding-right: 0; padding-right: 0;
text-align: center!important; text-align: center!important;
} }
...@@ -1631,6 +1659,8 @@ video { ...@@ -1631,6 +1659,8 @@ video {
padding-right: 5px; padding-right: 5px;
text-align: center; text-align: center;
width: 150px; width: 150px;
font-size: 14px;
line-height: 18px;
} }
} }
@media (max-width: 992px) { @media (max-width: 992px) {
...@@ -1640,7 +1670,7 @@ video { ...@@ -1640,7 +1670,7 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.technology-card img { .technology-card img {
width: 108px; width: 88px;
} }
} }
.technology-card-end { .technology-card-end {
...@@ -1657,8 +1687,8 @@ video { ...@@ -1657,8 +1687,8 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
.technology-img { .technology-img {
width: 145px; width: 145px;
height: 113px; height: 78px;
margin-bottom: 16px; margin-bottom: 2px;
} }
} }
/*price*/ /*price*/
......
css/styles.less
...@@ -634,7 +634,7 @@ video { ...@@ -634,7 +634,7 @@ video {
@media (max-width: 576px) { @media (max-width: 576px) {
padding-top: 45px; padding-top: 45px;
padding-bottom: 20px; padding-bottom: 20px;
margin-bottom: 50px; margin-bottom: 60px;
background-image: url("../img/background-optuon-modal.jpg"); background-image: url("../img/background-optuon-modal.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
...@@ -843,6 +843,19 @@ video { ...@@ -843,6 +843,19 @@ video {
} }
/*option*/ /*option*/
.option-container {
position: relative;
display: flex;
margin-top: 46px;
justify-content: space-between;
align-items: baseline;
@media (max-width: 576px) {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
}
}
.option { .option {
h2 h2
{ {
...@@ -854,23 +867,10 @@ video { ...@@ -854,23 +867,10 @@ video {
margin-bottom: 15px; margin-bottom: 15px;
line-height: 24px; line-height: 24px;
font-weight: 800; font-weight: 800;
} }
} }
} }
.option-container {
position: relative;
display: flex;
margin-top: 46px;
justify-content: space-between;
align-items: baseline;
@media (max-width: 576px) {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: baseline;
margin-top: 0;
}
}
.option-card-img { .option-card-img {
text-align: center; text-align: center;
max-width: 485px; max-width: 485px;
...@@ -925,11 +925,12 @@ video { ...@@ -925,11 +925,12 @@ video {
width: 240px; width: 240px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 139px; width: 150px;
margin-bottom: 3px;
} }
p { p {
font-family: Avenir Next; font-family: Avenir Next;
font-size: 14px; font-size: 13px;
font-weight: 300; font-weight: 300;
line-height: 18px; line-height: 18px;
letter-spacing: 0.14px; letter-spacing: 0.14px;
...@@ -996,13 +997,13 @@ video { ...@@ -996,13 +997,13 @@ video {
} }
} }
.option-btn { .option-btn {
margin-top: 0!important; margin-top: 0;
margin-bottom: 146px!important; margin-bottom: 146px;
@media (max-width: 992px) { @media (max-width: 992px) {
margin-bottom: 71px!important; margin-bottom: 71px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
width: 203px!important; width: 203px;
height: 34px; height: 34px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -1010,11 +1011,13 @@ video { ...@@ -1010,11 +1011,13 @@ video {
letter-spacing: 0.16px; letter-spacing: 0.16px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 140px!important; width: 143px;
height: 24px!important; height: 44px;
margin-top: 50px!important; margin-top: 50px;
padding-bottom: 6px; border-radius: 24px;
font-size: 12px; background: #c94d4e;
color: white;
font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 30px; line-height: 30px;
letter-spacing: 0.16px; letter-spacing: 0.16px;
...@@ -1035,9 +1038,14 @@ video { ...@@ -1035,9 +1038,14 @@ video {
padding-bottom: 145px; padding-bottom: 145px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
padding-top: 71px; padding-top: 52px;
padding-bottom: 10px; padding-bottom: 10px;
} }
h2 {
@media (max-width: 576px) {
line-height: 24px;
}
}
} }
.protection { .protection {
display: flex; display: flex;
...@@ -1061,7 +1069,7 @@ video { ...@@ -1061,7 +1069,7 @@ video {
flex-flow: nowrap; flex-flow: nowrap;
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
height: 103px; height: auto;
} }
} }
.protection-img { .protection-img {
...@@ -1071,6 +1079,10 @@ video { ...@@ -1071,6 +1079,10 @@ video {
height: 126px; height: 126px;
margin-left: -10px; margin-left: -10px;
} }
@media (max-width: 576px) {
height: 110px;
margin-left: -10px;
}
img { img {
@media (max-width: 576px) { @media (max-width: 576px) {
width: 70px; width: 70px;
...@@ -1089,20 +1101,26 @@ video { ...@@ -1089,20 +1101,26 @@ video {
} }
} }
.protection-text { .protection-text {
font-family: AvenirNext-Heavy; font-family: SFUIDisplay-Regular;
height: 90px; height: 90px;
@media (max-width: 768px) {
height: 150px;
}
@media (max-width: 576px) { @media (max-width: 576px) {
font-family: AvenirNext-Heavy; height: 73px;
height: auto;
margin-bottom: 10px; margin-bottom: 10px;
min-width: 216px; min-width: 216px;
h3 {
line-height: 19px;
margin-bottom: 13px;
} }
@media (max-width: 768px) {
height: 150px;
} }
} }
.protection-line { .protection-line {
margin-bottom: 12px; margin-bottom: 12px;
@media (max-width: 576px) {
margin-top: 13px;
}
} }
/*catalog*/ /*catalog*/
.catalog { .catalog {
...@@ -1278,7 +1296,7 @@ video { ...@@ -1278,7 +1296,7 @@ video {
margin-bottom: 40px; margin-bottom: 40px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
padding-top: 72px; padding-top: 55px;
padding-bottom: 35px; padding-bottom: 35px;
margin-bottom: 40px; margin-bottom: 40px;
} }
...@@ -1315,11 +1333,17 @@ video { ...@@ -1315,11 +1333,17 @@ video {
} }
@media (max-width: 576px) { @media (max-width: 576px) {
justify-content: center; justify-content: center;
height: 190px; /*height: 150px;*/
height: auto;
width: 100%; width: 100%;
margin-bottom: 30px; margin-bottom: 10px;
} }
} }
.technology-p-margin {
@media (max-width: 576px) {
margin-bottom: 5px;
}
}
.technology-card { .technology-card {
width: 48%; width: 48%;
text-align: left; text-align: left;
...@@ -1329,7 +1353,8 @@ video { ...@@ -1329,7 +1353,8 @@ video {
padding-right: 15px; padding-right: 15px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
height: 190px; /*height: 120px;*/
height: auto;
padding-right: 0; padding-right: 0;
text-align: center!important; text-align: center!important;
} }
...@@ -1347,6 +1372,8 @@ video { ...@@ -1347,6 +1372,8 @@ video {
padding-right: 5px; padding-right: 5px;
text-align: center; text-align: center;
width: 150px; width: 150px;
font-size: 14px;
line-height: 18px;
} }
} }
img { img {
...@@ -1354,7 +1381,7 @@ video { ...@@ -1354,7 +1381,7 @@ video {
width: 120px; width: 120px;
} }
@media (max-width: 576px) { @media (max-width: 576px) {
width: 108px; width: 88px;
} }
} }
...@@ -1369,8 +1396,8 @@ video { ...@@ -1369,8 +1396,8 @@ video {
height: 110px; height: 110px;
@media (max-width: 576px) { @media (max-width: 576px) {
width: 145px; width: 145px;
height: 113px; height: 78px;
margin-bottom: 16px; margin-bottom: 2px;
} }
} }
/*price*/ /*price*/
......
index.html
...@@ -422,7 +422,6 @@ ...@@ -422,7 +422,6 @@
на исчерпывающую бизнес-аналитику, на исчерпывающую бизнес-аналитику,
прогнозы, отображение на персональных прогнозы, отображение на персональных
dashboard. dashboard.
</p> </p>
</div> </div>
<div class="advertising-img"> <div class="advertising-img">
...@@ -446,7 +445,7 @@ ...@@ -446,7 +445,7 @@
системы с использованием облачных технологий. системы с использованием облачных технологий.
</p> </p>
</div> </div>
<button type="button" class="main-btn option-btn">Заказать</button> <button type="button" class="option-btn">Заказать</button>
</div> </div>
<div class="option-card-line"> <div class="option-card-line">
</div> </div>
...@@ -461,7 +460,7 @@ ...@@ -461,7 +460,7 @@
Более затратно, но и надежно. Более затратно, но и надежно.
</p> </p>
</div> </div>
<button type="button" class="main-btn option-btn">Заказать</button> <button type="button" class="option-btn">Заказать</button>
</div> </div>
</div> </div>
</section> </section>
...@@ -475,9 +474,9 @@ ...@@ -475,9 +474,9 @@
или случайно гибели данных всех своих пользователей благодаря использованию или случайно гибели данных всех своих пользователей благодаря использованию
персональной архитектуры и, как следствие, минимизации рисков. персональной архитектуры и, как следствие, минимизации рисков.
</p> </p>
<div class="main-flex"> <div class="protection-flex">
<div class="protection-card"> <div class="protection-card">
<div class="protection-img"> <div class="main-img">
<img src="img/protection6.png"> <img src="img/protection6.png">
</div> </div>
<div class="protection-text"> <div class="protection-text">
...@@ -510,7 +509,7 @@ ...@@ -510,7 +509,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="main-flex"> <div class="msain-flex">
<div class="protection-card"> <div class="protection-card">
<div class="protection-img"> <div class="protection-img">
<img src="img/protection3.png"> <img src="img/protection3.png">
...@@ -549,7 +548,7 @@ ...@@ -549,7 +548,7 @@
</section> </section>
<section class="main-container catalog"> <section class="main-container catalog">
<h2 class="h2-desktop h2-desktop-tittle">Маркетплейс</h2> <h2 class="h2-desktop">Маркетплейс</h2>
<div class="main-line protection-line"> <div class="main-line protection-line">
</div> </div>
<p class="text-h2-desktop tittle-catalog"> <p class="text-h2-desktop tittle-catalog">
...@@ -600,10 +599,10 @@ ...@@ -600,10 +599,10 @@
<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>
<div class="main-line protection-line"> <div class="main-line protection-line">
</div> </div>
<p class="text-h2-desktop"> <p class="text-h2-desktop technology-p-margin">
На всех этапах разработки, адаптации и внедрения проекта команда использует На всех этапах разработки, адаптации и внедрения проекта команда использует
только самые актуальные на сегодняшний день технологии, позволяющие только самые актуальные на сегодняшний день технологии, позволяющие
клиенту не беспокоиться о будущем MSO. клиенту не беспокоиться о будущем MSO.
...@@ -621,7 +620,7 @@ ...@@ -621,7 +620,7 @@
</div> </div>
<div class="technology-card"> <div class="technology-card">
<div class="technology-img"> <div class="technology-img">
<img src="img/technology2.png"> <img src="img/technology5.png">
</div> </div>
<p> <p>
Удобный менеджер пакетов Удобный менеджер пакетов
...@@ -639,7 +638,7 @@ ...@@ -639,7 +638,7 @@
</div> </div>
<div class="technology-card technology-card-end"> <div class="technology-card technology-card-end">
<div class="technology-img"> <div class="technology-img">
<img src="img/technology4.png"> <img src="img/technology6.png">
</div> </div>
<p> <p>
Для разработки веб-приложений Для разработки веб-приложений
...@@ -652,7 +651,7 @@ ...@@ -652,7 +651,7 @@
<div class="technology-containe"> <div class="technology-containe">
<div class="technology-card"> <div class="technology-card">
<div class="technology-img"> <div class="technology-img">
<img src="img/technology5.png"> <img src="img/technology4.png">
</div> </div>
<p> <p>
Для управления кластерами Для управления кластерами
...@@ -661,7 +660,7 @@ ...@@ -661,7 +660,7 @@
</div> </div>
<div class="technology-card"> <div class="technology-card">
<div class="technology-img"> <div class="technology-img">
<img src="img/technology6.png"> <img src="img/technology2.png">
</div> </div>
<p> <p>
Для фронтенд разработок Для фронтенд разработок
......
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