Разработка сайта для мобильного приложения. Часть 2

Здравствуйте! В прошлой статье мы разобрали два первых блока, которые будут присутствовать на шаблоне сайта для мобильных приложений. Сегодня и покажу процесс верстки еще двух блоков. В структуру сайта я добавил еще одни блок, который я по непонятным причинам решил исключить - это блок прайс-лист. Так вот сегодня я буду верстать блок с преимуществами и прайс-лист нашего сайта. Приступим.

Сейчас я буду верстать блок с преимуществами. Я пользуюсь стандартной структурой, т.е буду использовать иконки с описанием, а также вставлю дополнительное описание преимуществ и видео-ролик с yoytube.

Структура блока с иконками:

<div class="box_3"> <div class="col_box_3"> <div class="column_3"> <img src="image/bar-chart.png" alt="графики"> <h3>Графики</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="col_box_3"> <div class="column_3"> <img src="image/email.png" alt="уведомления"> <h3>Уведомления</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> <div class="col_box_3"> <div class="column_3"> <img src="image/loon-icon (1).png" alt="синхронизация с ПК"> <h3>Синхронизация с ПК</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>

Иконки я уже подобрал. Кстати, кому интересно, я пользуюсь этими сайтами для поиска иконок на сайты:

ru.freepik.com

icon-icons.com

Значок последней пачки недавно Загрузил | 1 | icon-icons

Оба сайта имеют очень большое количество бесплатных иконок.

Продолжим разговаривать о сайте. Сейчас я продемонстрирую структуру второго блока преимуществ:

<div class="col_box_4"> <iframe width="90%" height="315" src="https://www.youtube.com/embed/kOEnM616ozI" frameborder="0" allowfullscreen style="padding-top: 7%;"> </iframe> </div> <div class="col_box_4"> <h2>Дополнительные выгоды от использования приложения</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> <li>Четвертый пункт</li> </ul> <a href="#" class="button4">Подробнее</a> </div> </div>

Для вставки видео я использую тег <iframe>, говорят, что этот тег устарел и им уже мало кто пользуется, если есть способы лучше, можете написать в комментариях, мне будет очень интересно.

Кстати, кто не знает, чтобы сделать видео через тег <iframe> адаптивным, надо всего лишь указать в атрибуте width размер в процентах (%) и будет чудо.

Пора придать блокам красоту, напишем код css в файле style.css:

/*****block-3*****/ .box_3 { padding: 4%; background-image:url(image/hhh.png); background-size: cover; padding-top: 8%; padding-bottom: 7%; } .box_3::after { content: ""; display: table; clear: both; } .col_box_3 { float: left; width: 33.33%; color: white; text-align: center; } .col_box_3 img { width: 20%; } .column_3 { width: 380px; height: 200px; }

И вот стили второго блока с медиа-запросами:

/*****col-box-4*****/ .col_box_4 { float: left; width: 50%; color: white; text-align: left; padding-top: 7%; } .col_box_4 h2 { font-size: 40px; } .col_box_4 p { font-size: 17px; } a.button4 { display: inline-block; color: white; background-color: #ff149100; font-weight: 500; text-decoration: none; user-select: none; padding: .5em 2em; outline: none; border: 2px solid; border-radius: 1px; margin: 1%; transition: 0.5s; } a.button4:hover { background: rgba(255,255,255,.2); } @media screen and (max-width: 600px) { .box_3 { padding-left: 12%; } .col_box_3 { width: 100%; text-align: center; } .col_box_4 { width: 100%; } .col_box_4 img { width: 90%; } }

Если в моей верстке присутствуют какие-то непростительные ошибки или мелкие косяки, прошу комментировать это, высказываться по делу. Строго не судите!

Пришла пора посмотреть, что получилось:

Неплохо и отображается все корректно. Только скорее всего в плане дизайна надо будет поработать.

На этом я заканчиваю вторую часть своего обзора вёрстки сайта для мобильного приложения. До встречи!