Необходимые инструменты:
Макет в Figma: https://www.figma.com/file/UyCvNmvTXrGgajdKsAHvsQ/%D0%93%D0%B0%D0%B7%D0%BF%D1%80%D0%BE%D0%BC%D0%B1%D0%B0%D0%BD%D0%BA---%D0%94%D0%BE%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8-FWEB-5358?type=design&node-id=0-1&mode=design
Архив проекта
Браузер Chrome последней версии
Этапы работы над задачей:
1) Скачайте архив проекта, разархивируйте его и добавьте в свою рабочую область редактора кода.
2) Откройте макет в Figma и экспортируйте изображения в выделенной области в необходимом формате.
3) Сформируйте в отдельном файле стили для утилитарного класса <div class=”container”> и разместите этот файл в папке css/global.
4) Сверстайте в файле проекта gorod-pay.html после комментария <!-- Hero--блок --> полноэкранный раздел страницы, учитывая высоту шапки и основываясь на дизайне из предоставленного макета в Figma.
5) Найдите в файле gorod-pay.html комментарий <!-- Специальные предложения --> и заранее подготовленные карточки. На их основе сформируйте раздел со специальными предложениями.
6) Наполните имеющиеся карточки специальных предложений дополнительными элементами и доработайте их стилизацию и модификацию, основываясь на дизайне из предоставленного макета в Figma.
7) Доработайте сетку специальных предложений и модификации карточек, основываясь на дизайне из предоставленного макета в Figma.
Критерии оценки:
Cетки разработаны с помощью технологии Grid (в определённых микросетках может быть использован flexbox).
У всех интерактивных элементов есть явная или скрытая текстовая подпись.
Добавлен скрытый заголовок при отсутствии подходящего заголовка из макета.
У кнопки верно заполнен обязательный атрибут type.
Основное содержимое страницы не должно находиться вне разделов. Весь контент внутри тега main должен располагаться в тегах <section>.
При формировании разделов горизонтальная центровка относительно краёв страницы должна выполняться за счёт утилитарного класса <div class=”container”>.
Вёрстка выполнена согласно макету.
Соблюдена логика файловой структуры проекта.
Код отформатирован.
Вёрстка создана с помощью БЭМ.
Разметка сформирована согласно семантике.
Вёрстка прошла проверку на валидность (HTML-валидатор, БЭМ-валидатор).
При переносе из макета текст прошёл обработку типографом.
Графика выбрана в подходящем формате: JPG, PNG или SVG.
Всем ссылкам задано значение # для атрибута href.
Вёрстка проверена на переполнение контентом
Ином
НИТУ МИСИС
Наилучший исполнитель! Все свои задачи буду отправить вам, Дарья. Спасибо огромное!!!
Алексей
Станкин
Всё сделано быстро, качественно, без замечаний, однозначно рекомендую специалиста!
Лолита
Сочинский государственный университет
Заказала очередную задачу у Анжелы. Как обычно , сделала всё досрочно и без замечаний. Анж...
Диана
ОмГУПС
Все очень быстро и качественно, понравилось работа именно с этим исполнителем, работа была...