Итак, нам необходимо внедрить заранее подготовленный макет сайта с блочной вёрсткой. Блочная верстка — это подход, при котором сайт строят на основе блоков,
в качестве которых выступают теги div.

Особенности тегов div:

- это блочный элемент, и если у него не задана ширина, то
растягивается на всю ширину окна браузера;

- высота блока равна содержимому, если она не задана. Высота пустого
блока 0 px, поэтому он не виден;

- не имеет оформления. Нужно задать ему стили в CSS, чтобы увидеть его;

- не несет смысловой нагрузки, это просто способ структурировать сайт;

- может содержать любое количество вложенных элементов (можно
вкладывать другие блоки div, заголовки, параграфы,
изображения и многие другие элементы).

Скачать тестовые материалы.

В архиве макета сайта содержатся:

• папки со стилями шаблона;
• папка с js-файлами;
• папка с картинками;
• html-макет индексной страницы сайта (index.html);
• файл с главными стилями шаблона (styles.css);
• csv-файл с демоданными для импорта (demo.csv).

Разархивируйте скачанный архив с тестовыми материалами (doc.zip).

Это дизайн главной страницы сайта-лендинга. Целевая страница (англ. landing page, также «посадочная страница») — веб-страница, основной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге.

Подробнее... Она состоит из основной заставки с названием сайта, навигации по странице (верхнее горизонтальное меню, кнопки РЫБЫ.НЕТ и Узнать больше), фотогалереи, блока новостей, контактной информации и копирайта.

Пропишем требования, которым должен соответствовать сайт с внедрённым шаблоном.

Техническое задание:

• Основная заставка и навигация должны располагаться в шапке сайта (header).
• Копирайт должен располагаться в подвале сайта (footer).
• Новости сайта нужно выводить из инфоблока новостей с помощью компонентов. Для страницы детального вывода новости создать упрощенный шаблон.
• Остальную информацию считать статической и разместить на индексной странице (тогда контент-менеджер сможет её изменять в публичном разделе, включив режим Правки).
• В качестве дополнительного задания: создать нижнее меню.