Зададим три колонки для трех тарифов, например.
В первом тарифе будет большая цена, потом поменьше и минимальная.
Человек читает с лева на право, поэтому важно делать минимальную цену справа, на этом блоке остановится взгляд и запомнит минимальную цену, это важная особенность.
Этим немного увеличивается вероятность заказа тарифа, то есть поднимаем конверсию сайта.
Сделаем каркас в 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 для описания изображения.
|
1 |
.col-md-4*3>h3+.price-table*3>p+picture>source[type='image/svg+xml'][srcset="img/name.svg"]+img[src=img/name.png][alt=описание].col-sm-4*3>h3+.price-table*3>p+picture>source[type='image/svg+xml'][srcset="img/name.svg"]+img[src=img/name.png][alt=описание] |
После распаковки, получится основной каркас, останется добавить изображения иконок и по блоку внизу каждой колонки с ценой.
Эти блоки будут разбиты на две колонки, в первой col-xs-5 будет тег span и иконка из шрифта font awesome для рубля.
Во второй колонке добавим кнопку с классом price-btn заказать тариф.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<section id="price"> <div class="container"> <div class="row"> <div class="col-xs-12 price-header"> <h2>Стоимость</h2> <p>Если не подойдет тариф, то составим для вас индивидуальный тариф.</p> </div> </div> <div class="col-md-4"> <h3>Под ключ</h3> <div class="price-table"> <p>Продающий прототип</p> <picture> <source type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-table"> <p>Уникальный дизайн</p> <picture> <source type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-table"> <p>Адаптивная верстка</p> <picture> <source type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-zakaz text-center"> <div class="row"> <div class="col-xs-5"> <span>300<i class="fa fa-rub" aria-hidden="true"></i></span> </div> <div class="col-xs-7"> <button class="price-btn">Заказать тариф</button> </div> </div> </div> </div> <div class="col-md-4"> <h3>Стандарт</h3> <div class="price-table"> <p>Продающий прототип</p> <picture> <picture type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-table"> <p>Уникальный дизайн</p> <picture> <source type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-table price-op"> <p>Адаптивная верстка</p> <picture> <source type="image/svg+xml" srcset="img/cross.svg"> <img class="price-check" src="img/cross.png" alt="описание"></picture> </div> <div class="price-zakaz text-center"> <div class="row"> <div class="col-xs-5"> <span>200<i class="fa fa-rub" aria-hidden="true"></i></span> </div> <div class="col-xs-7"> <button class="price-btn">Заказать тариф</button> </div> </div> </div> </div> <div class="col-md-4"> <h3>Эконом</h3> <div class="price-table"> <p>Продающий прототип</p> <picture> <source type="image/svg+xml" srcset="img/ok-mark.svg"> <img class="price-check" src="img/ok-mark.png" alt="описание"></picture> </div> <div class="price-table price-op"> <p>Уникальный дизайн</p> <picture> <source type="image/svg+xml" srcset="img/cross.svg"> <img class="price-check" src="img/cross.png" alt="описание"></picture> </div> <div class="price-table price-op"> <p>Адаптивная верстка</p> <picture> <source type="image/svg+xml" srcset="img/cross.svg"> <img class="price-check" src="img/cross.png" alt="описание"></picture> </div> <div class="price-zakaz text-center"> <div class="row"> <div class="col-xs-5"> <span>100<i class="fa fa-rub" aria-hidden="true"></i></span> </div> <div class="col-xs-7"> <button class="price-btn">Заказать тариф</button> </div> </div> </div> </div> </div> </div> </section> |
Перейдем к стилизации 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
section#price background-color: #f1f1f1 h3 text-align: center font-family: "BeerRegular" font-weight: bold color: blue p display: inline-block margin-bottom: 0 font-size: 1.8em font-family: "BeerRegular" .price &-header font-family: "BeerRegular" text-align: center h2 text-transform: uppercase font-size: 3em color: blue font-weight: bold &-table position: relative background-color: #b641b0 color: #fff margin-top: 1em padding: 1em line-height: 3em &-zakaz position: relative background-color: #fff border: 3px solid #b641b0 color: blue margin-top: 3em padding: .4em line-height: 2em span font-size: 2.2em font-weight: bold line-height: 2em &-check position: absolute right: 2em width: 36px height: 36px &-btn width: 100% background-color: blue color: #fff border: none border-radius: 10em min-height: 3em position: relative top: 10px &-op opacity: .7 |
Секция будет адаптивной, потому что использовали bootstrap колонки, но если задали большой шрифт у блоков, то чтобы не смещались иконки в media.sass зададим для каждого экрана свой шрифт, например.
|
1 2 3 4 |
@media only screen and (max-width : 1200px) section#price p font-size: 1.3em |
