Верстка сайта: HTML/CSS секция с фоном и проектами

Добавим секцию с фоновым изображением и секцию с проектами. Код и домашние задания доступны на сайте itproger.com (ссылка в описании).

Секция с характеристиками проекта

Эта секция содержит градиентный фон, фоновое изображение и снова градиентный фон. Изображение добавим с помощью CSS, без использования HTML.

HTML-код секции

Выходим из блока rer и создаём блок с классом features. Внутри него размещаем div с классом container. Далее:

• <h3> (текст из дизайна).
• <p> (текст из дизайна).
• div с классом info: внутри него будут div-ы с классом block (блоки с изображением, текстом и стрелкой).
• Каждый block содержит:
  • <img> (заранее скачанные картинки).
  • <p> (соответствующий текст).
  • <img> (стрелка).

Создаём шесть таких блоков.

CSS-код секции

Фоновое изображение

Для блока features устанавливаем свойство background:

background: url('./img/bg.png') no-repeat center center fixed;
background-size: cover;
padding: 80px 0;

Подключаем изображение bg.png из папки img, не повторяем его, располагаем по центру и фиксируем. background-size: cover растягивает изображение на всю ширину блока.

Стили для текста и блоков

• <h3>:
  • margin-bottom (отступ снизу).
  • text-align: center; (текст по центру).
  • max-width: 800px; (максимальная ширина).
  • margin: 0 auto; (центрирование с помощью margin).
  • font-size: 30px; (размер шрифта).
• <p>:
  • text-align: center; (текст по центру).
  • margin-top, margin-bottom (вертикальные отступы).
• .info:
  • display: flex; (Flexbox).
  • justify-content: center; (элементы по центру).
  • flex-wrap: wrap; (перенос на новые строки).
• .info .block:
  • text-align: center; (текст по центру).
  • width: 20%; (ширина блока).
  • margin: 30px 2%; (отступы).
• .info img:
  • margin-bottom: 15px; (отступ снизу от изображения).

Секция с нашими проектами

После секции с изображением снова используется градиент (rer). Внутри создаём блок с классом container и projects. Внутри него:

• <h3> (заголовок из макета).
• <p> (текст из макета).
• Два блока images (по три изображения в каждом).
• Ссылка с классом see-all: «See All».

CSS-код секции

• .projects:
  • padding: 100px 0; (вертикальные отступы).
• .projects h3:
  • font-size: 30px;
  • text-align: center;
• .projects p:
  • padding: 40px 0; (вертикальные отступы).
  • text-align: center;
• .projects .images:
  • display: flex; (Flexbox).
  • justify-content: space-around; (элементы по центру с отступами).
  • margin-bottom: 25px; (отступ снизу).
• .projects .see-all: (стили скопированы из предыдущей кнопки, float: none;, width: 60px;, text-align: center;, margin: 0 auto;)

Добавлены новые секции, улучшающие внешний вид проекта в соответствии с макетом.