Давай поверстаем. Сделаем такой блок. В том или ином виде он будет часто встречаться.

Перед началом работ, поиграй шириной браузера, чтобы посмотреть поведение этого элемента на малых экранах. Дальше проверяй все шаги в Berry Builder.

Автор котика Red Junasun

Основа

Понятно, что основа типовая: layout и flex-сетка с двумя ячейками.

<div class="layout-center-wrap mar50-tb">
    <div class="layout-wrap">
        <div class="flex flex-wrap">
            <div class="w55 w100-phone flex-order2-phone">
                первая ячейка
            </div>

            <div class="w40 w100-phone">вторая</div>
        </div>
    </div>
</div>

В принципе ты уже должен легко ориентироваться в данном коде. Flex-сетка, ширина ячеек для десктопа и телефона, а также меняем положение первой ячейки для телефона с помощью flex-order2-phone.

Первая ячейка

Сделаем её вот так:

<div class="w55 w100-phone flex-order2-phone">
    <h1 class="t-bold mar40-t t-center-phone">Call to Action</h1>

    <div class="t120">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

    <div class="mar30-t t-center-phone"><a class="button button1" href="#"><i class="fas fa-check mar5-r"></i>Download</a></div>
</div>

Заголовок H1, который мы делаем полужирным, с верхним отступом и центральным выравниванием для телефона.

Основной текст ставим размер текста в 1.2rem.

Последний контейнер для кнопки. Он имеет отступ сверху и также центральное выравнивание для телефона. Это просто для красоты.

Ссылку мы оформляем в виде кнопки. В Berry CSS есть специальные классы для кнопок, я об этом уже упоминал, но пока мы не рассматривали их устройство. Поэтому пока просто используй классы как есть.

Внутри ссылки-кнопки разместим иконку FontAwesome.

Вторая ячейка

Эта ячейка немного сложней. Фото котика можно взять отсюда (автор: Red Junasun).

<div class="w40 w100-phone h300px-min bg-no-repeat bg-size-cover bg-position-center" style="background-image: url(https://live.staticflickr.com/5019/5502654187_ee44507053_c.jpg)"></div>

Первое, что бросается в глаза, мы не используем IMG, а вместо этого создаём фоновое изображение в style с помощью стиля background-image. У него параметр url(), где в скобках указывается адрес изображения.

Таким способом можно разместить любое изображение, поэтому хорошенько запомни этот вариант.

Свойство background, составное. Background-image, как раз одно из его частей. Поведение фона мы определяем с помощью классов

.bg-no-repeat {background-repeat: no-repeat;}
.bg-position-center {background-position: center}
.bg-size-contain {background-size: contain}
.bg-size-cover {background-size: cover}
.bg-fixed {background-attachment: fixed}

Класс bg-no-repeat запрещает повтор изображения. Если его не указать, то изображение будет повторяться в фоне, если оно меньше своего блока. Как мозаика.

<div class="h300px" style="background-image: url(https://live.staticflickr.com/5019/5502654187_ee44507053_q.jpg)"></div>

Чтобы разместить изображение по центру блока используется bg-position-center. Свойство background-position может принимать разные значения: left, center, right, top, center, bottom. Или в виде чисел, обычно в процентах или пикселях: bg-position-center: 10% 30%.

В Berry CSS это можно делать с помощью css-переменных. Но это более сложная тема, которую обсудим позже.

Свойство background-size очень интересное. С его помощью можно задать размер изображения, как и в обычном IMG. Но в подавляющем большинстве случаев ты будешь использовать только два: contain или cover.

Значение contain заставляет браузер вписать картинку в блок так, чтобы она разместилась в нём целиком. А вот cover разместит картинку так, чтобы она полностью вписалась в блок по ширине или высоте, но если это не получается, то браузер выполнит кадрирование с сохранением пропорций. Эти два способа позволяют размещать изображения, которые могут не подходить по размерам к блокам. Это очень актуально для адаптивного дизайна.

С помощью bg-fixed можно зафиксировать положение фона при скроллинге. Это позволяет получить красивый эффект, который очень часто используется в лендингах.

<div class="h200px bg-position-center bg-no-repeat bg-fixed" style="background-image: url(https://live.staticflickr.com/5019/5502654187_ee44507053_c.jpg)"></div>

Правда стоит отметить, что для bg-fixed нужно грамотно подбирать изображение, которое будет хорошо смотреться при любом положении скроллинга. Часто для этого используют фото с вертикальной градацией яркости.

Ну и для того, чтобы гарантировать показ картинки, используется класс h300px-min — высота минимум 300px. Её, конечно, нужно подбирать под конкретный блок, поскольку объём текста может быть больше или меньше.

Итоговый код

<div class="layout-center-wrap mar50-tb">
    <div class="layout-wrap">
        <div class="flex flex-wrap">
            <div class="w55 w100-phone flex-order2-phone">
                <h1 class="t-bold mar40-t t-center-phone">Call to Action</h1>

                <div class="t120">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

                <div class="mar30-t t-center-phone"><a class="button button1" href="#"><i class="fas fa-check mar5-r"></i>Download</a></div>
            </div>

            <div class="w40 w100-phone h300px-min bg-no-repeat bg-size-cover bg-position-center" style="background-image: url(https://live.staticflickr.com/5019/5502654187_ee44507053_c.jpg);"></div>
        </div>
    </div>
</div>

Задания

Сама по себе работа с фоном не очень сложна, но нужно знать возможности, которые есть в CSS. В качестве задания сделай несколько копий этого блока с разным расположением фоновой картинки. То есть попробуй комбинации разных свойств фона.