Создайте сетку для товаров интернет-магазина. Магазин занимается печатью репродукции фотографий на холсте. Ваша задача: сверстать три строки с карточками используя классы, которые были изучены в этом уроке. В качестве карточек товара используется следующая разметка:
<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. Это создаст отступ снизу от строки.
Используя разметку карточек добавьте их во все колонки. Не забудьте изменить изображение.