Сентябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Верстаем секцию тарифов с ценой price из трех колонок


Верстаем секцию тарифов с ценой price из трех колонок

Зададим три колонки для трех тарифов, например.

В первом тарифе будет большая цена, потом поменьше и минимальная.

Человек читает с лева на право, поэтому важно делать минимальную цену справа, на этом блоке остановится взгляд и запомнит минимальную цену, это важная особенность.

Этим немного увеличивается вероятность заказа тарифа, то есть поднимаем конверсию сайта.

Сделаем каркас в html.

Создаем новую секцию с идентификатором id=price, внутри будет контейнер.

Вначале будет заголовок второго уровня во всю ширину col-xs-12 с классом price-header.

Затем все классы будут с названием price- и через черточку название со смыслом элемента.

После заголовка добавим тег p, с текстом.

Пропишем в одну строку три колонки для col-md-4*3 умножить на три, после заголовок третьего уровня h3 плюс див с классом price-table.

Внутри текст и изображение picture>sourceс типом image/svg+xml и srcset.

Добавим img с путем и alt для описания изображения.

Код в emmt.

После распаковки, получится основной каркас, останется добавить изображения иконок и по блоку внизу каждой колонки с ценой.

Эти блоки будут разбиты на две колонки, в первой col-xs-5 будет тег span и иконка из шрифта font awesome для рубля.

Во второй колонке добавим кнопку с классом price-btn заказать тариф.

Перейдем к стилизации section price.

Зададим серый фон всей секции section#price.

Заголовок второго уровня сделаем большим шрифтом с шрифтом, например, font-family: BeerRegular.

Новый шрифт подключается в файле font.sass.

У заголовков всегда шрифт заглавными буквами text-transform: uppercase.

У каждой колонки есть стой заголовок третьего уровня h3.

Выравняем по центру text-align: center.

Чтобы иконки и текст, стали в одну строку и в блоке добавим свойство display: inline-block к тегу p.

К изображению добавим класс price-check и зададим position: absolute и отодвинем иконку right: 2em.

Плюс добавим размеры у картинки.

У всех price-table будет позиция position: relative, чтобы выровнять.

Фон будет фиолетовый.

Добавим стили кнопке с ценой.

Установим у span с ценой и иконкой рубля размер font-size: 2.2em.

Высота строки текста в блоке будет line-height: 2em.

У кнопки price-btn сделаем размер во всю ширину width: 100%, с синим фоном.

Уберем border: none.

Закруглим и установим по центру вертикально, для этого добавим свойство position: relative, чтобы задать отступ сверху top: 10px.

Код в main.sass.

готовая section price.

Секция будет адаптивной, потому что использовали bootstrap колонки, но если задали большой шрифт у блоков, то чтобы не смещались иконки в media.sass зададим для каждого экрана свой шрифт, например.

Секция будет адаптивной, потому что использовали bootstrap

Комментариев нет