Skip to content

L
landing_pages
Commit c2b4b838 by Iren
Options

add img too main-card

parent 720273b0
Showing with 75 additions and 34 deletions
css/styles.css
......@@ -147,6 +147,7 @@ header {
@media (max-width: 576px) {
.header-nav {
display: none;
left: 5px;
width: 50px;
}
}
......@@ -328,6 +329,16 @@ h1 {
display: flex;
justify-content: space-between;
}
.header-video {
position: relative;
}
@media (max-width: 576px) {
.header-video {
display: none;
width: 150px;
left: 5px;
}
}
video {
width: 100%;
height: 70%;
......@@ -343,6 +354,12 @@ video {
margin-left: 25px;
}
}
@media (max-width: 576px) {
video {
width: 20%;
height: 20%;
}
}
.main-container {
position: relative;
max-width: 1250px;
......@@ -700,11 +717,11 @@ video {
}
@media (max-width: 576px) {
.advertising-img-order {
min-width: 320px;
min-width: 300px;
order: 5;
}
.advertising-img-order img {
min-width: 320px;
min-width: 300px;
margin-left: -25px;
}
}
......@@ -746,7 +763,7 @@ video {
}
@media (max-width: 576px) {
.advertising-img {
min-width: 320px;
min-width: 300px;
}
.advertising-img img {
min-width: 320px;
......
css/styles.less
......@@ -127,6 +127,7 @@ header {
}
@media (max-width: 576px) {
display: none;
left: 5px;
width: 50px;
}
}
......@@ -284,6 +285,14 @@ h1 {
display: flex;
justify-content: space-between;
}
.header-video {
position: relative;
@media (max-width: 576px) {
display: none;
width: 150px;
left: 5px;
}
}
video {
width: 100%;
height: 70%;
......@@ -296,6 +305,10 @@ video {
margin-top: 50px;
margin-left: 25px;
}
@media (max-width: 576px) {
width: 20%;
height: 20%;
}
}
.main-container {
position: relative;
......@@ -575,10 +588,10 @@ video {
}
.advertising-img-order {
@media (max-width: 576px) {
min-width: 320px;
min-width: 300px;
order: 5;
img {
min-width: 320px;
min-width: 300px;
margin-left: -25px;
}
}
......@@ -617,7 +630,7 @@ video {
}
}
@media (max-width: 576px) {
min-width: 320px;
min-width: 300px;
img {
min-width: 320px;
margin-left: -25px;
......
index.html
......@@ -71,7 +71,7 @@
<button type="button" class="header-btn-background header-btn">Узнать больше</button>
</div>
<div>
<div class="header-video">
<video controls="controls" poster="img/video.png">
<source src="video/duel.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/duel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
......@@ -91,6 +91,7 @@
</header>
<section class="main-container">
<h2 class="h2-desktop h2-desktop-tittle">Что такое MySmart Office</h2>
<div class="main-line">
......@@ -118,7 +119,7 @@
<img src="img/office2.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Маркетинг</h3>
<p class="text-h3-desktop">
Адаптируйте свои предложения под запросы
клиентов.
......@@ -130,9 +131,11 @@
<img src="img/office3.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">BI аналитика</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Регулярно анализируйте, делайте выводы
и прогнозируйте результаты управленческих
решений любого уровня.
</p>
</div>
</div>
......@@ -140,21 +143,21 @@
<div class="main-flex">
<div class="main-card">
<div class="main-img">
<img src="img/office1.png">
<img src="img/office4.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Call-center</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Быстро организуйте свою телефонию.
</p>
</div>
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office1.png">
<img src="img/office5.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">POS</h3>
<p class="text-h3-desktop">
Все продажи вашего магазина быстро доступны
у вас в системе.
......@@ -163,12 +166,13 @@
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office4.png">
<img src="img/office6.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Project Managment</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Управляйте проектами, задачами
и ресурсами.
</p>
</div>
</div>
......@@ -176,21 +180,22 @@
<div class="main-flex">
<div class="main-card">
<div class="main-img">
<img src="img/office5.png">
<img src="img/office7.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Склад</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Управляйте складскими резервами, избавляйтесь
от неликвидов, оптимизируйте запасы.
</p>
</div>
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office6.png">
<img src="img/office8.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">HR</h3>
<p class="text-h3-desktop">
Подбор, прием и работа с персоналом
сильно упрощается.
......@@ -199,12 +204,14 @@
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office7.png">
<img src="img/office9.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Mobile</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Сохраняйте мобильность свою и команды. Будьте
доступны и открыты для новых возможностей,
не теряя контроль.
</p>
</div>
</div>
......@@ -215,9 +222,10 @@
<img src="img/office8.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Сервис для клиентов</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Удерживайте клиента, создавайте комфортное
взаимодействие и опережайте его желания
</p>
</div>
</div>
......@@ -226,7 +234,7 @@
<img src="img/office13.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Логистика</h3>
<p class="text-h3-desktop">
Адаптируйте существующие и создавайте
новые логистические цепочки для повышения
......@@ -236,12 +244,13 @@
</div>
<div class="main-card">
<div class="main-img">
<img src="img/office10.png">
<img src="img/office12.png">
</div>
<div class="main-card-text">
<h3 class="h3-desktop">Продажи</h3>
<h3 class="h3-desktop">Производство</h3>
<p class="text-h3-desktop">
Будьте всегда на связи со своими клиентами благодаря автоматизации продаж.
Контролируйте все этапы, качество и стоимость
каждой заготовки своего продукта.
</p>
</div>
</div>
......@@ -417,7 +426,8 @@
</div>
<h4>Cloud</h4>
<div class="option-text">
<p>Быстрый и менее затратный вариант развертывания
<p>
Быстрый и менее затратный вариант развертывания
системы с использованием облачных технологий.
</p>
</div>
......@@ -431,7 +441,8 @@
</div>
<h4>Cloud</h4>
<div class="option-text">
<p>Быстрый и менее затратный вариант развертывания
<p>
Быстрый и менее затратный вариант развертывания
системы с использованием облачных технологий.
</p>
</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