Skip to content

L
landing_pages
Commit 3dccf1a3 by Iren
Options

add style for max-widht 576px add tabs

parent f1625104
Showing with 72 additions and 54 deletions
css/styles.css
......@@ -58,7 +58,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;
}
......@@ -69,7 +69,7 @@ header {
}
@media (max-width: 576px) {
header {
width: 320px;
/* width: 320px;*/
height: 560px;
margin-bottom: 58px;
}
......@@ -77,7 +77,7 @@ header {
.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;
......@@ -651,7 +651,7 @@ video {
}
}
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-family: Avenir Next;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -661,7 +661,6 @@ video {
}
@media (max-width: 576px) {
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
......@@ -864,12 +863,14 @@ video {
width: 674px;
height: 445px;
right: 640px;
top: 30px;
}
@media (max-width: 1250px) {
.advertising-img-position {
width: 524px;
height: 342px;
right: 500px;
top: 0;
}
}
@media (max-width: 992px) {
......@@ -877,6 +878,7 @@ video {
width: 50%;
height: 90%;
right: 53%;
top: 0;
}
}
@media (max-width: 768px) {
......@@ -884,6 +886,7 @@ video {
width: 45%;
height: 50%;
right: 55%;
top: 0;
}
}
@media (max-width: 576px) {
......@@ -910,7 +913,10 @@ video {
}
.advertising-text-order h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
margin-bottom: 21px;
margin-top: 8px;
line-height: 36px;
......@@ -924,7 +930,6 @@ video {
}
@media (max-width: 576px) {
.advertising-text-order h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
......@@ -940,7 +945,10 @@ video {
}
.advertising-text h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
font-weight: 700;
margin-bottom: 21px;
margin-top: 4px;
......@@ -954,7 +962,6 @@ video {
}
@media (max-width: 576px) {
.advertising-text h2 {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
......@@ -1080,6 +1087,7 @@ video {
margin-bottom: 15px;
line-height: 24px;
font-weight: 800;
margin-top: -22px;
}
}
.option-card-img {
......@@ -1233,6 +1241,14 @@ video {
.option-btn {
margin-top: 0;
margin-bottom: 146px;
width: 290px;
height: 52px;
border-radius: 26px;
background: #c94d4e;
color: white;
font-size: 18px;
line-height: 30px;
letter-spacing: 0.18px;
}
@media (max-width: 992px) {
.option-btn {
......@@ -1379,7 +1395,7 @@ video {
}
}
.protection-text {
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
height: 90px;
}
@media (max-width: 768px) {
......@@ -2219,8 +2235,7 @@ video {
}
@media (max-width: 576px) {
.form-wrapper p {
margin-left: 21px;
margin-right: 21px;
margin: 0 auto;
width: 281px;
font-family: SFUIDisplay-Regular;
font-size: 14px;
......@@ -2246,6 +2261,12 @@ input {
padding-left: 16px;
}
}
@media (max-width: 576px) {
form {
max-width: 350px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.form-wrapper input {
width: 500px;
......
css/styles.less
......@@ -56,14 +56,14 @@ 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) {
margin-bottom: 57px;
}
@media (max-width: 576px) {
width: 320px;
/* width: 320px;*/
height: 560px;
margin-bottom: 58px;
}
......@@ -71,7 +71,7 @@ header {
.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;
......@@ -93,7 +93,6 @@ header {
height: 200px;
}
}
.header-wrapp {
display: flex;
justify-content: space-between;
......@@ -246,7 +245,6 @@ header {
margin-left: 0!important;
}
}
h1 {
position: relative;
z-index: 3;
......@@ -452,7 +450,6 @@ video {
@media (max-width: 576px) {
padding-left: 10px;
padding-right: 10px;
}
}
.h2-desktop {
......@@ -548,7 +545,7 @@ video {
}
}
.text-h3-desktop {
font-family: SFUIDisplay-Light;
font-family: Avenir Next;
margin-top: -12px;
font-size: 16px;
font-weight: 300;
......@@ -556,7 +553,6 @@ video {
color: #303a81;
letter-spacing: 0.16px;
@media (max-width: 576px) {
font-family: SFUIDisplay-Light;
font-size: 14px;
line-height: 18px;
letter-spacing: 0;
......@@ -709,7 +705,6 @@ video {
flex-flow: wrap;
height: auto;
margin-bottom: 1px;
}
}
.two-img {
......@@ -724,20 +719,24 @@ video {
width: 674px;
height: 445px;
right: 640px;
top: 30px;
@media (max-width: 1250px) {
width: 524px;
height: 342px;
right: 500px;
top: 0;
}
@media (max-width: 992px) {
width: 50%;
height: 90%;
right: 53%;
top: 0;
}
@media (max-width: 768px) {
width: 45%;
height: 50%;
right: 55%;
top: 0;
}
@media (max-width: 576px) {
width: 290px;
......@@ -759,7 +758,10 @@ video {
width: 110%;
h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
margin-bottom: 21px;
margin-top: 8px;
line-height: 36px;
......@@ -769,7 +771,6 @@ video {
margin-bottom: 15px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
......@@ -779,16 +780,16 @@ video {
margin-bottom: 15px;
height: auto;
}
}
}
.advertising-text {
width: 110%;
h2 {
/*.h2-desktop;*/
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
font-size: 36px;
color: #303a81;
letter-spacing: 0.36px;
font-weight: 700;
margin-bottom: 21px;
margin-top: 4px;
......@@ -798,7 +799,6 @@ video {
margin-bottom: 15px;
}
@media (max-width: 576px) {
font-family: SFUIDisplay-Regular;
font-size: 24px;
width: 300px!important;
font-weight: 700;
......@@ -808,7 +808,6 @@ video {
margin-bottom: 15px;
height: auto;
}
}
}
.advertising-text .main-line {
......@@ -816,7 +815,6 @@ video {
@media (max-width: 768px) {
margin-bottom: 15px;
}
}
.advertising-text-order .main-line {
margin-bottom: 24px;
......@@ -828,9 +826,7 @@ video {
position: relative;
z-index: 3;
}
@media (min-height: 577px) {
width: 120%;
padding-top: 0;
margin-top: 0;
......@@ -874,7 +870,6 @@ video {
margin-left: -25px;
}
}
}
/*option*/
.option-container {
......@@ -901,7 +896,7 @@ video {
margin-bottom: 15px;
line-height: 24px;
font-weight: 800;
margin-top: -22px;
}
}
}
......@@ -1033,6 +1028,14 @@ video {
.option-btn {
margin-top: 0;
margin-bottom: 146px;
width: 290px;
height: 52px;
border-radius: 26px;
background: #c94d4e;
color: white;
font-size: 18px;
line-height: 30px;
letter-spacing: 0.18px;
@media (max-width: 992px) {
margin-bottom: 71px;
}
......@@ -1149,7 +1152,7 @@ video {
}
}
.protection-text {
font-family: SFUIDisplay-Regular;
font-family: SF-UI-Display-Black;
height: 90px;
@media (max-width: 768px) {
height: 150px;
......@@ -1268,7 +1271,6 @@ video {
width: 70px;
}
}
}
.catalig-img {
margin-top: -20px;
......@@ -1432,7 +1434,6 @@ video {
width: 88px;
}
}
}
.technology-card-end {
padding-right: 0;
......@@ -1471,7 +1472,6 @@ video {
position: relative;
display: none;
}
}
.price-container, .price-container-active {
position: relative;
......@@ -1819,8 +1819,7 @@ video {
margin-bottom: 27px;
@media (max-width: 576px) {
margin-left: 21px;
margin-right: 21px;
margin: 0 auto;
width: 281px;
font-family: SFUIDisplay-Regular;
font-size: 14px;
......@@ -1845,7 +1844,13 @@ input {
padding-left: 16px;
}
}
form {
@media (max-width: 576px) {
max-width: 350px;
margin: 0 auto;
}
}
.form-wrapper input {
@media (max-width: 768px) {
width: 500px;
......@@ -1954,7 +1959,6 @@ footer {
letter-spacing: 0.14px;
}
}
}
.footer-wrapper-info {
display: flex;
......@@ -2015,7 +2019,6 @@ footer {
order: 0;
width: 320px;
text-align: left;
}
a {
font-family: SFUIDisplay-Regular;
......@@ -2062,7 +2065,6 @@ footer {
}
@media (max-width: 576px) {
width: 5px;
}
}
......
index.html
......@@ -87,7 +87,6 @@
<a href="video/duel.mp4">Скачайте видео</a>.
</video>
</div>
</div>
</div>
</div>
......@@ -368,7 +367,6 @@
планирует встречи, организует процессы,
ставит задачи, предупреждает/информирует
команду, контролирует исполнение.
</p>
</div>
</div>
......@@ -389,7 +387,6 @@
<img src="img/advertising7.png">
</div>
</div>
<div class="advertising two-img main-container">
<img class="advertising-img-position" src="img/advertising2.png">
<div class="advertising-img-order">
......@@ -407,8 +404,6 @@
для отдельных сфер бизнеса. RestAPI позволит
без проблем интегрировать ваши локальные
и прикладные разработки в общую систему.
</p>
</div>
</div>
......@@ -788,7 +783,6 @@
</ol>
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div>
<div class="price-container-active">
<img src="img/price1.png">
<h6>Standard</h6>
......@@ -944,6 +938,12 @@
</div>
</li>
<li class="price-display-none">
<p>
Оперативная поддержка <span>+</span>
</p>
<div class="price-line-big">
</div>
</li>
<li>
<p>
Модуль dashboard <span>+</span>
......@@ -986,11 +986,6 @@
<div class="price-line-big">
</div>
</li>
<li class="price-display-none">
<p>
Собственный домен<span>-</span>
</p>
</li>
</ol>
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div>
......
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