Сверстаем секцию id=items с заголовком, тремя изображениями и двумя абзацами, расположим в одном container.
В первой строке row будет 10 колонок col-sm-10, с отступом сбоку col-sm-offset-1.
Вначале идет заголовок h2 и векторное изображение в теге picture.
Этот тег сам определяет размер окна и подставляет нужный формат изображения.
У тега picture будет два элемента, первый source тут укажем векторное изображение svg формата.
Векторное изображение растягивается на любые разрешения экрана, не теряя в качестве.
Все современные браузеры будут брать изображение svg формата.
Второе элемент это img с форматом png, дополнительная картинка, если браузер не смог прочитать svg формат он подставит альтернативный png.
Например, браузер internet explorer не поддерживает формат файла svg.
После картинки делаем строку row col-sm-offset-3 col-sm-9 для текста.
В этой строке будет вложенность из двух колонок по col-sm-6.
В первой колонке будет изображение img, как ссылка, во второй колонке, будет текст и изображение стрелки.
Код в 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 |
<section id="items"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1 items-hdr"> <h2>Заголовок h2</h2> <picture> <source type="image/svg+xml" srcset=""> <img src="img/man.png" alt="111"> </picture> <div class="row"> <div class="col-sm-offset-3 col-sm-9 items-text"> <span><p>Далеко-далеко за словесными горами в стране, <br>гласных и согласных живут рыбные тексты. Там, щеке!</p></span> <div class="row"> <div class="col-sm-6 items-box"> <a href="#"> <picture> <source type="image/svg+xml" srcset=""> <img src="img/14.jpg" alt="111"> </picture> </a> </div> <div class="row"> <div class="col-sm-6 items-txt"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> <picture> <source type="image/svg+xml" srcset=""> <img class="items-arrow" src="img/16.png" alt="111"> </picture> </div> </div> </div> </div> </div> </div> </div> </div> </section> |
Стилизуем секцию items в main.sass.
Вначале пропишем перед стилями к этой секции описание // section items, чтобы легче искать в будущем, когда захотим изменить или поправить секцию.
Так как у нас все классы начинаются с items, будем делать стиль каждому классу через амперсанд.
- Начнем с заголовка &-hdr и добавим h2, у него будет относительное позиционирование position: relative. Сместим влево на 20 процентов, все заглавные буквы text-transform: uppercase. У заголовка большие буквы, прозрачность будет opacity: .4 и z-index: 0, чтобы картинка была выше заголовка. Второй элемент img c position: absolute, для выравнивания относительно заголовка. Зададим размер width: 15em и уберем отступы.
- Добавим подзаголовок &-text в теге span и зададим размер шрифту.
- Внутри подзаголовка будет две колонки в первой картинка &-box во всю ширину колонки. Во второй будет текст &-txt курсивом фиолетового цвета. Картинка img будет стрелочка, зададим любые размеры и развернем к изображению transform: rotate (130deg).
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 |
// section items .items &-hdr h2 position: relative text-transform: uppercase left: 20% color: blue font-size: 5em font-weight: bold z-index: 0 opacity: .4 img position: absolute width: 15em left: 0 top: 0px &-text span font-size: 1.4em &-box img width: 100% &-txt font-style: italic font-weight: bold color: #b641b0 img width: 30% position: absolute top: 100px left: 50px transform: rotate(130deg)@import "media" // Всегда в конце |
Посмотрим в браузере как получилось.
Сделаем адаптив к секции в файле media.sass.
- @media only screen and (max-width : 1200px). Для больших экранов Large devices, где используем класс col-lg, секция будет как на картинке выше. Изначально верстка делается под большой экран, потом адаптируется под другие разрешения.
- @media only screen and (max-width : 992px). Для средних экранов Medium devices с классом col-md, секция будет как и на большом экране.
- @media only screen and (max-width : 768px). Маленькие экраны Small devices, с классом col-sm мы использовали при верстке, проверим в браузере.
Видим, что блоки наехали друг на друга.
Поэтому поправим свойства.
Зададим тексту отступ сверху margin-top: 12em.
Изображение сделаем поменьше width: 70% и сместим влево на 15 процентов.
Уберем отображение стрелочки display: none и второй блок с текстом сделаем также пониже margin-top: 9em.
Проверим в браузере как изменилась расстановка всех элементов.
- @media only screen and (max-width : 480px) до 320px это минимальное разрешение для экранов Extra small devices с классом col-xs. Проверим и увидим, что большие отступы между блоками, сделаем поменьше. Проверим в браузере для экранов около 480px и экранов 320px.
Код в файле media.sass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
@media only screen and (max-width : 768px) .items-text p margin-top: 12em .items-box left: 15% width: 70% .items-txt position: absolute margin-top: 9em .items-arrow display: none /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) .items-text p margin-top: 8em .items-txt position: absolute margin-top: 6em .items-arrow display: none |