Начинаем верстку с задания каркаса в index.html пишем одной строкой секцию с классом types.
Внутри container с полосой row, заголовок будет section-header, сразу сделаем все по центру классом text-center.
Заголовок второго уровня типы компьютеров.
Прописали одной строкой в sublime text и нажали tab, с помощью emmet все распакуется.
|
1 |
section#types>.container>.row.section-header.text-center>h2{Типы компьютеров} |
Вторым действием зададим четыре колонки col-md-3 с картинкой и двумя кнопками подробнее и заказать.
Делаем вторую строку для этого.
|
1 |
.row>.col-md-3*4>.comp>img.img-responsive.center-block[img/comp$.jpg]+h3+br+button[data-toggle=modal][data-target=#modal1]*2 |
Добавим одной кнопки у каждого блока название класса btn-more, а другим добавим класс btn-zakaz, чтобы добавить одновременно четыре класса зажимаем ctrl и ставим курсор, в то место где хотим внести изменения.
Добавим все заголовки третьего уровня h3.
Перед тем как добавим модальные окна к двум кнопкам зададим data-target уникальное название, например у кнопок подробнее будут по порядку с 10 #modal10, а у кнопки заказ с 20 #modal20.
Добавим два модального окна.
Первое окно будет большое modal-lg у кнопки подробнее, в нем расположим fotorama, для коллекции изображений и сбоку добавим продающий текст. Внизу кнопку сделаем с классом btn.
Второе модальное окно будет маленьким modal-sm, в нем будет поля имя и телефон. Кнопка btn заказать расположим нижней части модального окна.
Как подключить модальные окна bootstarp 3 можно прочитать тут и добавить код окна из статьи.
У модального окна подробнее добавим идентификатор id=modal10, такой как у кнопки.
У окна заказать добавим id=modal20.
Для всех остальных блоков с кнопками делаем по аналогии.
Получился код в index.html.
|
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 |
<div class="modal fade" id="modal10"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal"><i class="fa fa-close"></i></button> <h3 class="modal-title">Подробнее</h3> </div> <div class="modal-body"> <div class="row"> <div class="col-md-5"> <div class="fotorama"> <img src="img/img4.jpg" alt=""> <img src="img/img5.jpg" alt=""> </div> </div> <div class="col-md-7"> <p>Далеко-далеко за словесными горами в стране, гласных.</p> <p>Далеко-далеко за словесными горами.</p> <p>Далеко-далеко за словесными горами в стране, гласных и согласных.</p> </div> </div> <div class="row text-center"> <div class="col-md-12"> <button type="button" class="btn-zakaz">Заказать</button> </div> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> <div class="modal fade" id="modal20"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal"><i class="fa fa-close"></i></button> <h3 class="modal-title">Заказать</h3> </div> <div class="modal-body"> <p>Введите ваше имя<br>Ввудите ваш телефонтелефон</p> <button type="button" class="btn-zakaz">Заказать</button> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> <section id="types"> <div class="container"> <div class="row section-header text-center"> <h2>Типы компьютеров</h2> </div> <div class="row text-center"> <div class="col-md-3"> <div class="comp"> <img src="img/img1.jpg" alt="" class="img-responsive center-block"> <h3>Компьютеры</h3> <br> <button class ="btn-more" data-toggle="modal" data-target="#modal10">Подробнее</button> <button class="btn-zakaz" data-toggle="modal" data-target="#modal20">Заказать</button> </div> </div> <div class="col-md-3"> <div class="comp"> <img src="img/img2.jpg" alt="" class="img-responsive center-block"> <h3>Ноутбуки</h3> <br> <button class ="btn-more" data-toggle="modal" data-target="#modal11">Подробнее</button> <button class="btn-zakaz" data-toggle="modal" data-target="#modal21">Заказать</button> </div> </div> <div class="col-md-3"> <div class="comp"> <img src="img/img3.jpg" alt="" class="img-responsive center-block"> <h3>Мониторы</h3> <br> <button class ="btn-more" data-toggle="modal" data-target="#modal12">Подробнее</button> <button class="btn-zakaz" data-toggle="modal" data-target="#modal22">Заказать</button> </div> </div> <div class="col-md-3"> <div class="comp"> <img src="img/img4.jpg" alt="" class="img-responsive center-block"> <h3>Моноблоки</h3> <br> <button class ="btn-more" data-toggle="modal" data-target="#modal13">Подробнее</button> <button class="btn-zakaz" data-toggle="modal" data-target="#modal23">Заказать</button> </div> </div> </div> </div> </section> |
Стилизуем кнопки и модальные окна.
Изображение, которое получится в браузере после стилизации.
У всей секции #types сделаем отступ сверху padding-top: 30px.
Между заголовком h2 и изображениями сделаем отступ margin-bottom: 30px.
Добавим у всей секции, чтобы заголовки были большими буквами text-transform: uppercase.
Заголовки под картинками h3 установим пониже margin-top: 20px и сделаем жирным шрифтом font-weight: bold.
Оформим кнопки подробнее и заказать.
- btn-more кнопка подробнее будет прозрачной background-color: transparent с текстом синего цвета. Отступы по краям от слова будут padding: 10px 8px. Добавим анимацию пол секунды transition: all .5s ease для изменения цвета при наведении мышкой. Зададим класс, когда наводим мышкой на кнопку &:hover и поменяем цвета, текст станет белым, а фон синим.
- btn-zakaz кнопка заказа все копируем от кнопки подробнее, меняем только цвета синий на белый. Так как слово заказ будет меньше, делаем отступ padding: 10px 18px от края.
Добавим фиолетовую рамку border: 3px solid #b641b0, когда наводим мышкой &:hover на блок с классом comp и цвет фона внутри сделаем светло-голубым background-color: #dcf4f5.
Чтобы рамка не прилипала зададим отступ пять пикселей padding: 5px.
Код 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 |
.text-center text-align: center .modal-dialog margin-top: 15% .modal-header border-bottom: none h3 text-transform: uppercase color: blue text-align: center .btn &:focus outline: none .modal-content border-radius: 0 #types padding-top: 30px .section-header margin-bottom: 30px section text-transform: uppercase h3 margin-top: 20px font-weight: bold .btn-more color: blue border: 3px solid blue padding: 10px 8px background-color: transparent text-transform: uppercase transition: all .5s ease &:hover background-color: blue color: #fff .btn-zakaz border: 3px solid blue color: #fff padding: 10px 18px background-color: blue text-transform: uppercase transition: all .5s ease &:hover background-color: #fff color: blue border: 3px solid blue .comp padding: 5px &:hover border: 3px solid #b641b0 background-color: #dcf4f5 |