МастерСтирка-сайт визитка

Клиент хотел простой и понятный сайт, который сразу покажет, чем компания полезна, и поможет клиентам быстро принять решение. Был разработан одностраничный сайт с чёткими блоками: цены, преимущества, отрасли, форма связи. Были выделены ключевые услуги и упростить навигацию.

1. Получение и анализ макета

• Изучил макет: структуру, сетку, шрифты, цвета, отступы, состояния кнопок и полей формы.

• Разбил страницу на секции: шапка, первый экран, услуги, преимущества, форма связи, подвал.

2. Подготовка структуры HTML

• Семантическая разметка: header, nav, main, section, footer.

• Иерархия заголовков h1–h3.

• Разметка формы связи: поля имени, телефона, email, текстовое поле, кнопка отправки.

3. Базовые стили CSS

• Подключил reset, задал переменные для цветов и шрифтов.

• Настроил контейнеры, типографику, отступы.

• Стилизовал форму: поля, состояния focus, hover, error, success.

4. Вёрстка основных блоков

• Использовал Flexbox и Grid для раскладки.

• Сверстал десктопную версию, затем адаптировал под планшеты и мобильные.

• Проверил соответствие макету.

5. Адаптивность

• Контрольные точки: 1200px, 992px, 768px, 480px.

• Через @media перестраивал сетки, менял размеры шрифтов, скрывал/показывал элементы.

• Мобильное меню-бургер.

• Форма корректно перестраивается на узких экранах: поля становятся в одну колонку.

6. Интерактив и форма связи на JavaScript

Клиент получил-Одностраничную структуру, адаптивную вёрстку, блоки с ценами, преимуществами и отраслевыми категориями, форма связи и быстрая навигация по блокам.