Скачаем плагин fotorama с одноименного сайта.
Перед версткой подключим fotorama к нашему проекту.
Зайдем в libs.sass пропишем путь к fotorama.css и добавим путь к fotorama.js файлу в gulpfile.js.
Содержание статьи
Задаем section в html
Зададим section с классом sec.
У нас будет темный фон и белые буквы это называется вывертка, поэтому зададим класс inverse.
Картинку фона затемним верхним слоем, для этого зададим класс overley.
Фон будет сделан инлаиновым тегом style=background-image: url (img/img10.jpg).
Разобьем секцию на две колонки.
- в первой колонке будет описание к картинкам
- во второй будет фотогалерея
Если есть колонки, значит есть bootstrap сетка.
Задаем container и строку row.
Внутри расположим див из 5 и 7 колонок.
Для текста подойдет пять колонок col-md-5.
У любого текста есть заголовок h2 и текст в теге p. Первая колонка в index.html.
Сделаем вторую колонку с fotorama
Семь колонок bootstarp col-md-7.
Зададим класс sec-gall.
Класс fotorama сам автоматически определит, что этот контейнер для фотогалереи, этот класс будет родительским для тегов img.
Пропишем все картинки, для галереи тегами img src=img/img1.jpg.
Зададим параметры fotorama через атрибуты data-nav и его значение параметра thumbs.
- dadta-thumbwidth="120" ширина тамба
- data-thumbheights="70" высота
- data-thumbborderwidth="5" ширина бордюра
- data-thumbmargin="10" отступы у тамбов
Стилизуем css у fotorama
- Зададим белый цвет классу inverse
- Вторым зададим отступы в процентах для sec секции padding: 5% 0
- Наложим на картинку верхний затемняющий серый фон overley. Для того, чтобы увидеть картинку под ним сделаем прозрачность opacity: .90
Стилизуем родительский класс fotorama
Бекграунд делаем темным. Настраиваем картинки снизу.
Делаем position: absolute и bottom: 10px.
Отступы делаем снизу 0 по бокам 20 пикселей.
Для стилизации тамба зададим бордюр border: 3px #fff solid.
Цвет у рамки border сделаем красный.
Фотогалерея с плагином fotorama готова.
Получившийся код для index.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="sec inverse overley" style="background-image: url(img/img10.jpg);" > <div class="container"> <div class="row"> <div class="col-md-5"> <h2 class="h2">Компьютеры</h2> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. О агенство безорфографичный однажды его.</p> </div> <div class="col-md-7"> <div class="sec-gall fotorama" data-nav="thumbs" dadta-thumbwidth="120" data-thumbheights="70" data-thumbborderwidth="3" data-thumbmargin="10"> <img src="img/img1.jpg" alt=""> <img src="img/img2.jpg" alt=""> <img src="img/img3.jpg" alt=""> <img src="img/img4.jpg" alt=""> <img src="img/img5.jpg" alt=""> <img src="img/img6.jpg" alt=""> </div> </div> </div> </div> </section> |
Получившийся код для css.
|
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 |
section &.inverse color: #fff .sec padding: 5% 0 .overley &::before content: '' position: absolute top: 0 left: 0 width: 100% height: 100% background-color: #1c1c1c opacity: .90 .fotorama background-color: #c6c6c6 &__nav &-wrap position: absolute bottom: 10px padding: 0 20px width: 100% &__thumb border: 3px #fff solid &-border border-color: red |