Расставляем все элементы секции и делаем адаптивный дизайн

Сверстаем секцию 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.

Стилизуем секцию items в main.sass.

Вначале пропишем перед стилями к этой секции описание // section items, чтобы легче искать в будущем, когда захотим изменить или поправить секцию.

Так как у нас все классы начинаются с items, будем делать стиль каждому классу через амперсанд.

1. Начнем с заголовка &-hdr и добавим h2, у него будет относительное позиционирование position: relative. Сместим влево на 20 процентов, все заглавные буквы text-transform: uppercase. У заголовка большие буквы, прозрачность будет opacity: .4 и z-index: 0, чтобы картинка была выше заголовка. Второй элемент img c position: absolute, для выравнивания относительно заголовка. Зададим размер width: 15em и уберем отступы.
2. Добавим подзаголовок &-text в теге span и зададим размер шрифту.
3. Внутри подзаголовка будет две колонки в первой картинка &-box во всю ширину колонки. Во второй будет текст &-txt курсивом фиолетового цвета. Картинка img будет стрелочка, зададим любые размеры и развернем к изображению transform: rotate (130deg).

Посмотрим в браузере как получилось.

Сделаем адаптив к секции в файле 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.