Лендинг яхт-клуба "Под парусом"

Вёрстка лендинга выполнялась во время изучения курса онлайн-школы HTML Academy.

Ссылка на лендинг

Ссылка на макет в Figma

Процесс создания

Вёрстка проводилась в 4 этапа:

• разметка веб-страницы;
• базовая стилизация;
• построение крупных сеток страницы;
• финальная стилизация.

После завершения вёрстки были написаны скрипты, добавляющие лендингу интерактивности.

Этап 1. Разметка

На первом этапе:

• создан базовый шаблон разметки;
• размечены крупные структурные блоки страницы (header, main. footer);
• внутри структурных блоков размечены смысловые разделы (nav, article, section);
• размечены заголовки;
• размечены мелкие элементы страницы.

Этап 2. Базовая стилизация

На втором этапе:

• выполнен экспорт графики из макета;
• создан и подключён к странице файл со стилями;
• экспортированная графика подключена к странице;
• подключен нестандартный шрифт;
• выполнена стилизация текста;
• добавлен блок "Новости" (с нуля до базовой стилизации).

Этап 3. Построение крупных сеток страницы

На третьем этапе:

• задана ширина крупным блокам страницы;
• заданы горизонтальные отступы и поля крупных блоков страницы;
• заданы вертикальные отступы крупных блоков страницы и заголовков;
• содержимое части блоков разбито на колонки с использованием флексбоксов;
• добавлен блок "Галерея" (с нуля до построения сеток страницы).

Этап 4. Финальная стилизация

На четвёртом этапе:

• построены сетки мелких компонентов страницы (микросетки);
• добавлены стили состояний гиперссылок;
• добавлен блок "Аренда яхты" (с нуля до готовой вёрстки).

Этап 5. Создание интерактивных элементов

На пятом этапе разработаны и подключены скрипты, которые позволяют:

• менять тему и шрифт страницы;
• менять раскладку карточек в блоке "Аренда яхты";
• переключать изображения в блоке "Галерея";
• отображать скрытое содержимое в блоке "Новости".