Верстка блоков html + css (компонентов веб-страницы)
1. Шапка сайта, которая включает в себя:
- логотип
- меню навигации
2. Вступительная секция (Hero section) включает в себя:
- Заголовок h1
- Подзаголовок h2
- небольшой текст
- изображение
3. Секция с описанием преимуществ (Featured section):
Секция имеет общий заголовок и состоит из трех блоков содержащих подзаголовок, картинку и описание.
4. Секция с отзывами:
по аналогии с Featured section так же имеет три блока содержащих:
- аватар пользователя.
- имя пользователя.
- текст отзыва
5. Секция вопрос-ответ (FAQ):
секция содержащая три блока с вопросами и ответами на них.
6. Секция о нас (About). Секция содержит:
- заголовок h2
- одно или несколько изображений.
- текстовую статьи с описанием деятельности компании разбитую подзаголовками h3.
7. Основной блок (Main section):
- заголовок h2
- изображение (или несколько по тексту)
- текст, разбитый подзаголовками h3.
8. Футер
- логотип.
- ссылки на страницы:
- Cookie Policy
- Privacy Policy
- Intellectual Property Notice
- Terms and Conditions
- Знак копирайта и надпись All right reserved.
Сверстать необходимо используя bootstrap 5.3 подключение фреймворка осуществляем с официального cdn.
- Каждая из вышеописанных секций должна размешаться в отдельном html файле. Необходимо сделать 5 различных вариантов каждой секции.
- Дополнительные стили для всех секций и их вариантов должны находиться в ОДНОМ css файле, например style.css,
- Сторонние js желательно использовать как можно меньше (не требуется особых "красивостей" визуального плана, лучше вообще отказаться от использования js-эффектов, возможно использование jquery так же подключенного с официального cdn.
- Допустимо использование google fonts.
- Расположение блоков в секциях 3, 4, 5 в разных вариантах варьируется (горизонтальное, вертикальное).
В целом блоки могут иметь различный внешний вид, и цветовую палитру, главное, чтобы были соблюдены вышеперечисленные требования.
Основное требование чтобы все дополнительные css стили для всех блоков и их вариантов находились в одном css файле (то есть достаточно было подключить в header один css файл, и любой блок корректно отображался при его использовании.