Вёрстка сайтов — удалённая работа в Москве

Сверстать: Корпоративный сайт. Платформа: HTML. Тип вёрстки: адаптивная. Есть макет. Общая информация: Цель: Создание чистой, компонентной, адаптивной вёрстки по макетам (Figma), на HTML/CSS/JS Будущее использование: Легкая адаптация под React (Next.js, SSR) или WordPress Интерактив: Возможен, но не определён заранее — важна гибкость и модульность Страницы (по макетам): 1. Главная 2. Шаблон страницы по машинам 3. Шаблон страницы по акциям Основные требования к вёрстке HTML - Использовать семантический HTML5 - Чёткое разделение блоков и элементов по БЭМ-методологии - Атрибуты data-* использовать там, где потенциально будет JS (например, data-modal, data-slider) - class, id — только осмысленные и по соглашениям CSS - Использовать чистый CSS или SCSS, без фреймворков - Строго БЭМ-именование классов: .block {} .block__element {} .block--modifier {} - Вся логика оформления — модульно и компонентно: каждый блок автономен - Использовать адаптивную вёрстку: flex, grid, media-запросы - Анимации — через transition,@keyframes при необходимости JS - Только базовый интерактив: бургер-меню, модалки, переключения - Vanilla JS (без jQuery) - Всё, что может быть динамичным в будущем — реализовать как структуру, но без логики - JS-функции писать как initSliders(), setupAccordions() и вызывать при инициализации Шрифты и иконки - Шрифты — подключить через @font-face или Google Fonts. - Иконки — использовать SVG, предпочтительно спрайты. Структура проекта: - /index.html - /pages/ - /css/ - /img/ - /js/ - /components/ - Каждый повторяемый блок (header, footer, карточка услуги) — отдельная структура или выделенная секция с комментарием Адаптивность: - Минимальные брейкпоинты: 320px / 768px / 1200px - Макеты от Figma — адаптировать под мобильные/планшеты/десктоп - Использовать относительные единицы (em, rem, %) там, где уместно Кроссбраузерность: актуальные версии Chrome, Firefox, Safari, Edge Особенности под будущую интеграцию: - Верстка не должна зависеть от контекста (никаких document.write, глобальных зависимостей) - Каждый блок = будущий компонент React или include в WordPress - Можно использовать class=“button button--primary“ — это удобно для дальнейшего переиспользования в логике - Все формы должны иметь data-form=“...“, но не иметь action — отправка будет реализована позже - Предусмотреть стили для состояний (:hover, .is-active, .is-error) Итоговая сдача: - Вся структура проекта должна быть организована по указанной схеме - HTML-код должен быть валидным (проверка через https://validator.w3.org/) - Проект должен запускаться локально через файловую систему (без сервера) - Исходники стилей (если используется SCSS) также передаются - Комментарии в коде приветствуются (особенно в сложных местах) - README с краткой инструкцией (если есть сборка, SCSS и т.п.) будет плюсом Ссылка на макет Figma для определения стоимости: https://www.figma.com/design/SjzpWKoJfJHKw0FDT5KChX/%D0%90%D0%B2%D1%82%D0%BE%D1%81%D0%B5%D1%80%D0%B2%D0%B8%D1%81?node-id=268-1035.