Адаптируйте новую сетку магазина по продаже репродукций фотографий на холсте. В отличие от прошлого шаблона, в этом изменилась последняя строка. Обратите на это внимание. Используя необходимые классы создайте сетку.
Карточка товара имеет следующую структуру:
<article class="card">
<img src="./images/1.jpg" class="card-img-top" alt="Фотография">
<div class="card-body">
<h2 class="card-title h4">Фотография</h2>
<p class="card-text">Описание фотографии и имя фотографа. Возможности заказа репродукции фотографии на холсте</p>
<a href="#" class="btn btn-primary">Немедленно купить</a>
</div>
</article>Для каждой новой карточки используйте новое изображение. Они пронумерованы от 1 до 7 и находятся в директории images. Добавляйте изображения последовательно. Первая карточка имеет картинку с именем 1.jpg. Последняя карточка содержит картинку с именем 7.jpg.
Задание
Создайте контейнер
Добавьте заголовок h1 с названием Фотографии нашего мира
Создайте три строки и распределите колонки. Bootstrap — 12 колоночная система. Исходя из этого укажите правильные классы для колонок
К каждой колонке добавьте класс mb-3. Это создаст отступ снизу при адаптивности
Используя разметку карточек добавьте их во все колонки. Не забудьте изменить изображение
Адаптивность:
На разрешениях до 576px по ширине: каждая колонка занимает всё доступное пространство
На разрешениях от 576px до 992px по ширине: карточки первой строки располагаются в две строки
На разрешениях от 992px по ширине в первой строке 4 карточки в ряд
Подсказки Последняя строка разбивается на две колонки: первая занимает 4 ячейки, вторая 8 ячеек