- Create a repository `goit-markup-hw-08`.
- Clone the created repository and copy the files of the previous work into it.
- Perform layout of the adaptive version of all pages and layout elements homework #8
- Set up `GitHub Pages` and add a link to the live page in the header of the GitHub-repository.
«A1» BEM methodology is used.
«A2» Used by SASS preprocesses.
«A3» The index.html and portfolio.html files include the minified style file main.min.css from the css folder.
«A4» When viewing the page on any device with a width of 320px, the horizontal scrollbar does not appear.
«A5» The mobile menu script is included in HTML by a separate mobile-menu.js file.
«B1» All pages in the <head> block have the viewport meta tag.
«B2» All background and content bitmaps are responsive and support x1 and x2 screen densities.
«B3» Responsive content images use the <img> element with the srcset attribute and the x descriptor.
«B4» Responsive background images use the min-device-pixel-ratio and min-resolution media functions.
«B5» Mobile menu markup completed.
«C1» When writing styles, the Mobile First approach and the (min-width: ) media function were used.
«C2» Styles required only in a certain range are closed in media queries (min-width: ) and (max-width: ) or just (max-width: ).
«C3» There is no unnecessary duplication of styles in media queries.
«C4» The layout is made with respect to three breakpoints: 480px, 768px and 1200px.
«C5» Designed mobile menu.
- Created render section "Portfolio" from JS.
- A separate class has been made for the modal window.
- The "Order a service" form is rendered from JS. There is data validation as you enter it.
- A modal window has been created for the "Subscribe" button. There is a check for data entry in the input email.
📚 UK 📚 ⬆ Home ⬆
- Створи репозиторій `goit-markup-hw-08`.
- Схиляй створений репозиторій та скопіюй у нього файли попередньої роботи.
- Виконай верстку адаптивної версії всіх сторінок та елементів макета homework #8
- Налаштуйте `GitHub Pages` та додай посилання на живу сторінку в шапку GitHub-репозиторія.
«A1» Використовується методологія BEM.
«A2» Використовується препроцесів SASS.
«A3» У файлах index.html і portfolio.html підключений мініфікований файл стилів main.min.css з папки css.
«A4» При перегляді сторінки на будь-якому пристрої шириною від 320px, не з'являється горизонтальна смуга прокручування.
«A5» Скрипт мобільного меню підключений в HTML окремим файлом mobile-menu.js.
«B1» У всіх сторінок у блоці <head> є метатег viewport.
«B2» Усі фонові та контентні растрові зображення - чуйні, і підтримують екрани з щільністю x1 та x2.
«B3» Для чуйних контентних зображень використаний елемент <img> з атрибутом srcset та дескриптором x.
«B4» Для чуйних фонових зображень використані медіа-фукцнії min-device-pixel-ratio та min-resolution.
«B5» Виконано розмітку мобільного меню.
«C1» При написанні стилів використаний Mobile First підхід та медіа-функція (min-width: ).
«C2» Стилі необхідні тільки в певному проміжку, закриті в медіа-запити (min-width: ) and (max-width: ) або тільки (max-width: ).
«C3» У медіа-запитах відсутнє зайве дублювання стилів.
«C4» Верстка виконана щодо трьох точок перелому: 480px, 768px і 1200px.
«C5» Виконано оформлення мобільного меню.
- Створено рендер секції "Портфоліо" з JS.
- Для модального вікна зроблено окремий клас.
- Форма "Замовити послугу" рендерується з JS. Є перевірка даних під час введення.
- Для кнопки "Підписатися" створено модальне вікно. Існує перевірка на введення даних в input email.
📚 RU 📚 ⬆ Home ⬆
- Создай репозиторий `goit-markup-hw-08`.
- Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
- Выполни вёрстку адаптивной версии всех страниц и элементов макета homework #8
- Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку GitHub-репозитория.
«A1» Используется методология BEM.
«A2» Ипользуется препроцессов SASS.
«A3» В файлах index.html и portfolio.html подключен минифицированный файл стилей main.min.css из папки css.
«A4» При просмотре страницы на любом устройстве шириной от 320px, не появляется горизонтальная полоса прокрутки.
«A5» Скрипт мобильного меню подключен в HTML отдельным файлом mobile-menu.js.
«B1» У всех страниц в блоке <head> есть метатег viewport.
«B2» Все фоновые и контентные растровые изображения - отзывчивые, и поддерживают экраны с плотностью x1 и x2.
«B3» Для отзывчивых контентных изображений использован элемент <img> с атрибутом srcset и дескриптором x.
«B4» Для отзывчивых фоновых изображений использованы медиа-фукцнии min-device-pixel-ratio и min-resolution.
«B5» Выполнена разметка мобильного меню.
«C1» При написании стилей использован Mobile First подход и медиа-функция (min-width: ).
«C2» Стили необходимые только в определённом промежутке, закрыты в медиа-запросы (min-width: ) and (max-width: ) или только (max-width: ).
«C3» В медиа-запросах отсутствует лишнее дублирование стилей.
«C4» Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и 1200px.
«C5» Выполнено оформление мобильного меню.
- Создан рендер секции "Портфолио" из JS.
- Для модального окна сделан отдельный класс.
- Форма "Заказать услугу" рендерится из JS. Есть проверка данных при вводе.
- Для кнопки "Подписаться" создано модальное окно. Есть проверка на ввод данных в input email.