Проект «A1» Все стили написаны в одном файле styles.css, который находится в папке css.
«A2» Исходный код отформатирован при помощи Prettier.
«A3» Все изображения и текстовый контент взяты из макета.
«A4» На всех HTML-страницах подключен нормализатор стилей modern-normalize.
«A5» Код написан следуя руководству.
«A6» Скрипт модального окна подключен в HTML отдельным файлом modal.js.
Разметка «B1» Выполнена HTML-разметка всех элементов макета.
«B2» Теги использованы согласно их семантического смысла.
Оформление «C1» Для всех эффектов ховера и фокуса (цвет, фон, тень) сделаны переходы. Время - 250ms, функция распределения времени - cubic-bezier(0.4, 0, 0.2, 1).
«C2» В переходах и анимациях явно указаны анимируемые свойства. Нигде нет значения all.
«C3» В секции Чем мы занимаемся текст с фоном спозиционирован поверх изображения.
«C4» В главной навигации, при помощи псевдоэлемента ::after, сделано подчёркивание ссылки текущей страницы (на которой сейчас находится пользователь).
«C5» Синий оверлей с текстом на карточках страницы Портфолио появляется при ховере в любом месте карточки.
«C6» Синий оверлей в карточках страницы Портфолио выезжает снизу, как показано на видео.
card overlay preview «C7» У псевдоэлементов нет текстового контента в свойстве content. Они использованы исключительно для декоративного оформления.
Модальное окно «D1» Выполнена разметка и оформление «бекдропа» (тёмного полупрозрачного фона) модального окна.
«D2» «Бекдроп» заполняет 100% высоты и ширины вьюпорта браузера и фиксирован в нём.
«D3» Выполнена разметка и оформление модального окна.
«D4» Модальное окно вертикально и горизонтально спозиционировано посередине бекдропа.
«D5» Выполнена разметка и оформление кнопки закрытия модального окна в верхнем правом углу.
«D6» Изначально модальное окно и бекдроп скрыты при помощи класса is-hidden на бекдропе, в селекторе которого используются свойства visibility, opacity и pointer-events.
«D7» Если убрать с бекдропа класс is-hidden - появляется бекдроп и модальное окно.
«D8» Появление и скрытие модального окна анимировано при помощи перехода с произвольным эффектом, например scale или translate, и opacity.
Открытие/закрытие модального окна Модальное окно с формой заявки открывается по клику на кнопку "Заказать услугу". Для того чтобы скрипт сработал необходимо добавить в разметку специальные атрибуты, по которым скрипт ищет элементы:
data-modal-open - на кнопку открытия модального окна. data-modal-close - на кнопку закрытия модального окна. data-modal - на бекдроп модального окна. После чего, перед закрывающим тегом body добавить тег script со ссылкой на файл скрипта для модально окна. Можно посмотреть видео-инструкцию.
<script src="./js/modal.js"></script>Скрипт который необходимо скопировать и вставить в файл modal.js.
(() => { const refs = { openModalBtn: document.querySelector("[data-modal-open]"), closeModalBtn: document.querySelector("[data-modal-close]"), modal: document.querySelector("[data-modal]"), };
refs.openModalBtn.addEventListener("click", toggleModal); refs.closeModalBtn.addEventListener("click", toggleModal);
function toggleModal() { refs.modal.classList.toggle("is-hidden"); } })();