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