Skip to content

L
landing_pages
Commit eb00a506 by Iren
Options

add syule for max-wiht 1250px

parent 23043e1b
Showing with 259 additions and 77 deletions
css/styles.css
......@@ -187,6 +187,13 @@ h1 {
z-index: 3;
border: none;
}
@media (max-width: 1250px) {
.header-btn {
width: 200px;
font-size: 16px;
background: #c94d4e;
}
}
.header-btn-background {
font-family: SFUIDisplay-Regular;
position: relative;
......@@ -205,6 +212,12 @@ h1 {
letter-spacing: 0.18px;
text-align: center;
}
@media (max-width: 1250px) {
.header-btn-background {
width: 200px;
font-size: 16px;
}
}
.header-text-wrapper {
display: flex;
justify-content: space-between;
......@@ -231,7 +244,7 @@ video {
}
}
.h2-desktop {
font-family: HelveticaNeue-Black;
font-family: AvenirNext-Heavy;
font-size: 36px;
font-weight: 800;
line-height: 62px;
......@@ -331,6 +344,9 @@ video {
}
}
/*main*/
.text-margin {
margin-bottom: 52px;
}
.main-flex {
display: flex;
flex-direction: row;
......@@ -359,7 +375,7 @@ video {
.main-img {
width: 90px;
height: 90px;
margin-bottom: 20px;
margin-bottom: 10px;
}
@media (max-width: 576px) {
.main-img img {
......@@ -370,7 +386,7 @@ video {
}
}
.main-card-text {
height: 135px;
height: 141px;
}
@media (max-width: 576px) {
.main-card-text {
......@@ -386,7 +402,7 @@ video {
background: #f9fbff;
padding-top: 182px;
padding-bottom: 60px;
margin-bottom: 75px;
margin-bottom: 70px;
}
@media (max-width: 576px) {
.advertising-background {
......@@ -399,6 +415,12 @@ video {
background-position: center;
}
}
@media (max-width: 1250px) {
.advertising-background {
padding-top: 105px;
padding-bottom: 20px;
}
}
.advertising {
display: flex;
justify-content: space-between;
......@@ -409,6 +431,11 @@ video {
flex-flow: wrap;
}
}
@media (max-width: 1250px) {
.advertising {
margin-bottom: 50px;
}
}
.advertising-text-order {
width: 110%;
}
......@@ -419,7 +446,7 @@ video {
}
}
.advertising-text-order h2 {
font-family: HelveticaNeue-Black;
font-family: AvenirNext-Heavy;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
......@@ -485,11 +512,16 @@ video {
width: 100%;
}
}
@media (max-width: 1250px) {
.advertising-img-order {
padding-top: 25px;
}
}
.advertising-text {
width: 110%;
}
.advertising-text h2 {
font-family: HelveticaNeue-Black;
font-family: AvenirNext-Heavy;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
......@@ -553,15 +585,20 @@ video {
margin-left: -25px;
}
}
@media (max-width: 1250px) {
.advertising-img {
padding-top: 25px;
}
}
/*option*/
.option h2 {
font-family: HelveticaNeue-Black;
font-size: 36px;
line-height: 62px;
margin-bottom: 3px;
color: #315197;
letter-spacing: 0.36px;
max-width: 803px;
font-family: AvenirNext-Heavy;
font-weight: 800;
margin-bottom: 0;
}
......@@ -759,8 +796,10 @@ video {
margin-right: 5%;
margin-bottom: 60px;
}
.catalog-img-container img {
margin-right: 20px;
@media (max-width: 1250px) {
.catalog-img-container img {
width: 100px;
}
}
.catalog-img-container-end {
margin-right: 0;
......@@ -791,14 +830,20 @@ video {
background-size: 100% 100%;
background-position: center;
padding-top: 140px;
padding-bottom: 115px;
margin-bottom: 148px;
padding-bottom: 165px;
margin-bottom: 113px;
}
@media (max-width: 576px) {
.technology {
padding-top: 51px;
}
}
@media (max-width: 1250px) {
.technology {
padding-top: 100px;
padding-bottom: 125px;
}
}
/*technology*/
.technology-container-wrapper {
display: flex;
......@@ -825,7 +870,12 @@ video {
width: 50%;
text-align: left;
padding-right: 80px;
height: 158px;
height: 138px;
}
@media (max-width: 1250px) {
.technology-card {
padding-right: 50px;
}
}
.technology-card p {
font-size: 16px;
......@@ -839,10 +889,8 @@ video {
width: 142px;
}
}
@media (max-width: 576px) {
.technology-card {
padding-right: 0;
}
.technology-card-end {
padding-right: 0;
}
.technology-img {
height: 110px;
......@@ -853,18 +901,16 @@ video {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 143px;
}
@media (max-width: 1250px) {
.price-wrapper {
position: absolute;
margin-bottom: 158px;
/*@media (max-width: 1250px) {
position: absolute;
display: none;
}
}*/
}
.price-container,
.price-container-active {
position: relative;
width: 256px;
max-width: 256px;
height: 834px;
margin-top: 10px;
padding: 30px 16px 32px 16px;
......@@ -872,6 +918,13 @@ video {
border: #e6effa 1px solid;
border-radius: 4px;
}
@media (max-width: 1250px) {
.price-container,
.price-container-active {
width: 190px;
height: 900px;
}
}
.price-container h6,
.price-container-active h6 {
font-family: AvenirNext-Heavy;
......@@ -884,6 +937,12 @@ video {
letter-spacing: 0.3px;
color: white;
}
@media (max-width: 1250px) {
.price-container h6,
.price-container-active h6 {
font-size: 22px;
}
}
.price-container img,
.price-container-active img {
position: absolute;
......@@ -891,6 +950,12 @@ video {
left: 0;
top: 0;
}
@media (max-width: 1250px) {
.price-container img,
.price-container-active img {
width: 223px;
}
}
.price-container {
margin-top: 20px;
}
......@@ -905,6 +970,12 @@ video {
border: #e6effa 1px solid;
border-radius: 4px;
}
@media (max-width: 1250px) {
.price-container-active {
width: 190px;
height: 931px;
}
}
.price-container-active h6 {
font-family: AvenirNext-Heavy;
position: relative;
......@@ -924,11 +995,21 @@ video {
width: 288px;
height: 124px;
}
@media (max-width: 1250px) {
.price-container-active img {
width: 222px;
}
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
}
@media (max-width: 1250px) {
.price-active .price-user p {
font-size: 40px;
}
}
.price .price-user {
font-size: 20px;
text-transform: uppercase;
......@@ -947,6 +1028,12 @@ video {
font-size: 60px;
color: #303a81;
}
@media (max-width: 1250px) {
.price p,
.price-active p {
font-size: 40px;
}
}
.price span,
.price-active span {
font-size: 30px;
......@@ -962,6 +1049,11 @@ video {
letter-spacing: 0;
color: #303a81;
}
@media (max-width: 1250px) {
.price .price-p-margin {
line-height: 30px;
}
}
.price-line-little {
width: 75px;
height: 12px;
......@@ -990,6 +1082,12 @@ video {
margin-left: -16px;
border-bottom: #e6effa 1px solid;
}
@media (max-width: 1250px) {
.price-line,
.price-line-big {
width: 170px;
}
}
.price-line-big {
height: 3px;
}
......@@ -1011,11 +1109,24 @@ video {
letter-spacing: 0.16px;
padding: 10px 20px 12px 20px;
}
.price-btn0active {
@media (max-width: 1250px) {
.price-btn {
margin-left: -2px;
margin-top: 18px;
width: 190px;
font-size: 12px;
}
}
.price-btn-active {
background: #c94d4e;
color: white;
margin-top: 27px;
}
@media (max-width: 1250px) {
.price-btn-active {
margin-top: 8px;
}
}
/*forms*/
.connection {
background-image: url("../img/background-form.jpg");
......@@ -1046,7 +1157,7 @@ video {
color: white;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 55px;
margin-bottom: 27px;
}
.form-wrapper input {
width: 582px;
......
css/styles.less
......@@ -180,6 +180,11 @@ h1 {
position: relative;
z-index: 3;
border: none;
@media (max-width: 1250px) {
width: 200px;
font-size: 16px;
background: #c94d4e;
}
}
.header-btn-background {
font-family: SFUIDisplay-Regular;
......@@ -198,6 +203,10 @@ h1 {
line-height: 30px;
letter-spacing: 0.18px;
text-align: center;
@media (max-width: 1250px) {
width: 200px;
font-size: 16px;
}
}
.header-text-wrapper {
display: flex;
......@@ -223,7 +232,7 @@ video {
}
}
.h2-desktop {
font-family: HelveticaNeue-Black;
font-family: AvenirNext-Heavy;
font-size: 36px;
font-weight: 800;
line-height: 62px;
......@@ -313,6 +322,9 @@ video {
}
}
/*main*/
.text-margin {
margin-bottom: 52px;
}
.main-flex {
display: flex;
flex-direction: row;
......@@ -337,7 +349,7 @@ video {
.main-img {
width: 90px;
height: 90px;
margin-bottom: 20px;
margin-bottom: 10px;
img {
@media (max-width: 576px) {
width: 70px;
......@@ -347,7 +359,7 @@ video {
}}
}
.main-card-text {
height: 135px;
height: 141px;
@media (max-width: 576px) {
height: auto;
margin-bottom: 10px;
......@@ -361,7 +373,7 @@ video {
background: #f9fbff;
padding-top: 182px;
padding-bottom: 60px;
margin-bottom: 75px;
margin-bottom: 70px;
@media (max-width: 576px) {
padding-top: 45px;
padding-bottom: 20px;
......@@ -371,6 +383,10 @@ video {
background-size: 100% 100%;
background-position: center;
}
@media (max-width: 1250px) {
padding-top: 105px;
padding-bottom: 20px;
}
}
.advertising {
display: flex;
......@@ -379,6 +395,9 @@ video {
@media (max-width: 576px) {
flex-flow: wrap;
}
@media (max-width: 1250px) {
margin-bottom: 50px;
}
}
.advertising-text-order {
@media (max-width: 576px) {
......@@ -420,6 +439,9 @@ video {
width: 100%;
}
}
@media (max-width: 1250px) {
padding-top: 25px;
}
}
.advertising-text {
width: 110%;
......@@ -452,11 +474,15 @@ video {
margin-left: -25px;
}
}
@media (max-width: 1250px) {
padding-top: 25px;
}
}
/*option*/
.option {
h2 {
.h2-desktop;
font-family: AvenirNext-Heavy;
font-weight: 800;
margin-bottom: 0;
@media (max-width: 576px) {
......@@ -623,9 +649,12 @@ video {
margin-right: 5%;
margin-bottom: 60px;
img {
margin-right: 20px;
@media (max-width: 1250px) {
width: 100px;
}
}
}
.catalog-img-container-end {
margin-right: 0;
}
......@@ -655,12 +684,15 @@ video {
background-size: 100% 100%;
background-position: center;
padding-top: 140px;
padding-bottom: 115px;
margin-bottom: 148px;
padding-bottom: 165px;
margin-bottom: 113px;
@media (max-width: 576px) {
padding-top: 51px;
}
@media (max-width: 1250px) {
padding-top: 100px;
padding-bottom: 125px;
}
}
/*technology*/
.technology-container-wrapper {
......@@ -684,7 +716,10 @@ video {
width: 50%;
text-align: left;
padding-right: 80px;
height: 158px;
height: 138px;
@media (max-width: 1250px) {
padding-right: 50px;
}
p {
font-size: 16px;
font-weight: 300;
......@@ -697,9 +732,9 @@ video {
width: 142px;
}
}
@media (max-width: 576px) {
padding-right: 0;
}
}
.technology-card-end {
padding-right: 0;
}
.technology-img {
height: 110px;
......@@ -710,21 +745,25 @@ video {
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 143px;
@media (max-width: 1250px) {
margin-bottom: 158px;
/*@media (max-width: 1250px) {
position: absolute;
display: none;
}
}*/
}
.price-container, .price-container-active {
position: relative;
width: 256px;
max-width: 256px;
height: 834px;
margin-top: 10px;
padding: 30px 16px 32px 16px;
background: #f9fbff;
border: #e6effa 1px solid;
border-radius: 4px;
@media (max-width: 1250px) {
width: 190px;
height: 900px;
}
h6 {
font-family: AvenirNext-Heavy;
position: relative;
......@@ -735,12 +774,18 @@ video {
font-weight: 400;
letter-spacing: 0.3px;
color: white;
@media (max-width: 1250px) {
font-size: 22px;
}
}
img {
position: absolute;
z-index: 2;
left: 0;
top: 0;
@media (max-width: 1250px) {
width: 223px;
}
}
}
.price-container {
......@@ -756,6 +801,10 @@ video {
background: white;
border: #e6effa 1px solid;
border-radius: 4px;
@media (max-width: 1250px) {
width: 190px;
height: 931px;
}
h6 {
font-family: AvenirNext-Heavy;
position: relative;
......@@ -774,12 +823,20 @@ video {
top: -20px;
width: 288px;
height: 124px;
@media (max-width: 1250px) {
width: 222px;
}
}
}
.price-active .price-user {
font-size: 20px;
text-transform: uppercase;
color: #303a81;
p {
@media (max-width: 1250px) {
font-size: 40px;
}
}
}
.price .price-user {
font-size: 20px;
......@@ -795,6 +852,9 @@ video {
p {
font-size: 60px;
color: #303a81;
@media (max-width: 1250px) {
font-size: 40px;
}
}
span {
font-size: 30px;
......@@ -810,6 +870,9 @@ video {
text-transform: none;
letter-spacing: 0;
color: #303a81;
@media (max-width: 1250px) {
line-height: 30px;
}
}
.price-line-little {
width: 75px;
......@@ -837,6 +900,9 @@ video {
height: 3px;
margin-left: -16px;
border-bottom: #e6effa 1px solid;
@media (max-width: 1250px) {
width: 170px;
}
}
.price-line-big {
height: 3px;
......@@ -858,11 +924,20 @@ video {
font-weight: 400;
letter-spacing: 0.16px;
padding: 10px 20px 12px 20px;
@media (max-width: 1250px) {
margin-left: -2px;
margin-top: 18px;
width: 190px;
font-size: 12px;
}
}
.price-btn0active {
.price-btn-active {
background: #c94d4e;
color: white;
margin-top: 27px;
@media (max-width: 1250px) {
margin-top: 8px;
}
}
/*forms*/
.connection {
......@@ -893,7 +968,7 @@ video {
color: white;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 55px;
margin-bottom: 27px;
}
input {
width: 582px;
......
index.html
......@@ -65,8 +65,10 @@
и неограниченными возможностями масштабирования.<br>
С помощью MSO вы сможете автоматизировать любой бизнес-процесс.
</p>
<button type="button" class="main-btn header-btn">Зарегистрироваться</button>
<button type="button" class="header-btn-background">Узнать больше</button>
<!--<button type="button" class="main-btn header-btn">Зарегистрироваться</button>
<button type="button" class="header-btn-background">Узнать больше</button>-->
<button type="button" class="header-btn">Зарегистрироваться</button>
<button type="button" class="header-btn-background header-btn">Узнать больше</button>
</div>
<div>
<video controls="controls" poster="img/video.png">
......@@ -90,7 +92,7 @@
<h2 class="h2-desktop h2-desktop-tittle">Что такое MySmart Office</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop">
<p class="text-h2-desktop text-margin">
Собранный в рамках одной системы инструментарий для владельца бизнеса.
MySmart Office позволяет организовать, реструктурировать и контролировать бизнес-процессы,
использовать на 100% потенциал команды, работать с прогрессивными интеллектуальными
......@@ -115,9 +117,8 @@
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop">
Адаптируйте существующие и создавайте
новые логистические цепочки для повышения
эффективности и сокращения издержек.
Адаптируйте свои предложения под запросы
клиентов.
</p>
</div>
</div>
......@@ -152,9 +153,8 @@
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop">
Адаптируйте существующие и создавайте
новые логистические цепочки для повышения
эффективности и сокращения издержек.
Все продажи вашего магазина быстро доступны
у вас в системе.
</p>
</div>
</div>
......@@ -189,9 +189,8 @@
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<p class="text-h3-desktop">
Адаптируйте существующие и создавайте
новые логистические цепочки для повышения
эффективности и сокращения издержек.
Подбор, прием и работа с персоналом
сильно упрощается.
</p>
</div>
</div>
......@@ -221,7 +220,7 @@
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office9.png">
<img src="img/office13.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
......@@ -282,14 +281,10 @@
конструирует и оптимизирует их своими руками.
</p>
</div>
<!--<div class="advertising-img-order">
<img src="img/advertising1.png">
</div>-->
</div>
<div class="advertising main-container">
<div class="advertising-text">
<h2 class="h2-desktop">Сокращение затрат
<br>на разработку</h2>
<h2 class="h2-desktop">Workflow и события</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop">
......@@ -308,7 +303,7 @@
<img src="img/advertising1.png">
</div>
<div class="advertising-text-order">
<h2>Масштабируемость</h2>
<h2>МСовместная работа</h2>
<div class="main-line">
</div>
<p>
......@@ -322,8 +317,8 @@
</div>
<div class="advertising main-container">
<div class="advertising-text">
<h2 class="h2-desktop">Сокращение затрат
<br>на разработку</h2>
<h2 class="h2-desktop">Возможности визуального
представления</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop">
......@@ -342,7 +337,7 @@
<img src="img/advertising1.png">
</div>
<div class="advertising-text-order">
<h2>Масштабируемость</h2>
<h2>AI референт на связи</h2>
<div class="main-line">
</div>
<p>
......@@ -356,8 +351,8 @@
</div>
<div class="advertising main-container">
<div class="advertising-text">
<h2 class="h2-desktop">Сокращение затрат
<br>на разработку</h2>
<h2 class="h2-desktop">Любые формы
для вашего приложения</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop">
......@@ -376,7 +371,8 @@
<img src="img/advertising1.png">
</div>
<div class="advertising-text-order">
<h2>Масштабируемость</h2>
<h2>Широкие возможности
для интеграции (Открытое API)</h2>
<div class="main-line">
</div>
<p>
......@@ -390,8 +386,7 @@
</div>
<div class="advertising main-container">
<div class="advertising-text">
<h2 class="h2-desktop">Сокращение затрат
<br>на разработку</h2>
<h2 class="h2-desktop">Аналитика</h2>
<div class="main-line">
</div>
<p class="text-h2-desktop">
......@@ -536,7 +531,7 @@
<h5>Автоматизация:</h5>
<img src="img/catalog2.png">
<img src="img/catalog7.png">
<img src="img/catalog11.png">
<img class="img-size-middle" src="img/catalog11.png">
</div>
<div class="catalog-img-container">
<h5>Телефония:</h5>
......@@ -545,9 +540,9 @@
</div>
<div class="catalog-img-container catalog-img-container-end">
<h5>Автоматизация:</h5>
<img src="img/catalog10.png">
<img src="img/catalog4.png">
<img src="img/catalog12.png">
<img class="img-size-middle" src="img/catalog10.png">
<img class="img-size-middle" src="img/catalog4.png">
<img class="img-size-middle" src="img/catalog12.png">
</div>
</div>
<div class="catalog-container">
......@@ -609,7 +604,7 @@
Для выполнения JavaScript
</p>
</div>
<div class="technology-card">
<div class="technology-card technology-card-end">
<div class="technology-img">
<img src="img/technology4.png">
</div>
......@@ -862,7 +857,7 @@
</p>
</li>
</ol>
<button type="button" class="price-btn price-btn0active">Попробовать бесплатно</button>
<button type="button" class="price-btn price-btn-active">Попробовать бесплатно</button>
</div>
<div class="price-container">
<img src="img/price.png">
......@@ -1070,7 +1065,8 @@
<button type="button" class="price-btn">Попробовать бесплатно</button>
</div>
</div>
</section>o<section class="connection">
</section>
<section class="connection">
<div class="main-container">
<div class="form-wrapper">
<h6>Остались вопросы?</h6>
......
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