Создание блоков превью, карточек и футера, а также применение стилей для завершения работы над сайтом.
Блоки превью
Создадим новые блоки, используя существующий div контейнер с классом container-fluid в качестве шаблона. Внутри разместим div с классом row, а в нём — div с классами col-lg-12 и text-center для центрирования контента. Добавим заголовок <h1 class="display-4">Языки программирования</h1> и горизонтальную линию <hr>.
Карточки превью
Под заголовком создадим карточки. Каждый блок будет использовать div с классом container-fluid. Внутри – div с классом row и div с классом col-md-4 (или col- с другим значением, в зависимости от количества колонок). Для меньших разрешений (ниже md) блоки будут растягиваться на всю ширину (col-12).
Внутри col-md-4 создадим карточку (div с классом card) со следующим содержимым:
- <img> — изображение (источник указывается через атрибут src). Изображения берутся с [ссылка опущена].
- <div class="card-body">
- <h5 class="card-title"> — заголовок карточки (например, «Unreal Engine»).
- <p class="card-text"> — текст карточки (например, «Описание»).
- <a class="btn btn-warning"> — кнопка (например, «Посмотреть»).
Этот фрагмент кода копируется и модифицируется для создания нескольких карточек (Java, GameDev и т.д.). Важно добавить класс col-md-4 для каждой карточки. Использование container вместо container-fluid обеспечит отступы по бокам.
Футер
Для футера создадим div с классом container-fluid. Внутри него — div с классом container (для отступов) и div с классом row и text-center. Внутри row создадим div с классом col-12 для заголовка «Наши контакты».
Далее создадим div с классом col-12 и классом social для социальных ссылок. Добавим отступы сверху и снизу с помощью свойства padding. Внутри разместим ссылки на социальные сети (<a> теги с классами fab fa-, например, fab fa-twitter).
Стили
В файле main.css пропишем стили:
.social a {
font-size: 4em;
padding: 10px;
}
.social a:hover {
color: #ccc;
}
footer {
background-color: #333;
padding: 50px;
border-top: 4px solid silver;
color: white;
}
@media (max-width: 750px) {
.display-4 {
font-size: 1.5em;
}
}Результат
В результате получился адаптивный сайт, созданный с использованием Bootstrap 4 и собственных стилей. Сайт демонстрирует основные принципы адаптивной верстки.