- Create a repository `goit-markup-hw-06`.
- Clone the created repository and copy the files of the previous work into it.
- Add markup and form styling for layout pages homework #6.
- Set up `GitHub Pages` and add a link to the live page in the header of the GitHub-repository.
«A1» All styles are written in one styles.css file, which is located in the css folder.
«A2» Source code formatted with Prettier.
«A3» All images and text content are taken from the layout.
«A4» All HTML pages have a style normalizer modern-nomalize.
«A5» The code is written as follows manual.
«B1» Completed HTML markup of all layout elements.
«B2» Tags are used according to their semantic meaning.
«B3» The mailing list subscription form and all its elements in the footer have been marked up.
«B4» The markup of the application form and all its elements in the modal window has been completed.
«B5» All inputs in forms have the name attribute set.
«B6» The name attribute values are descriptive, describing exactly what the form field is for.
«B7» All inputs have an associated <label> element.
«B8» Inputs are given the placeholder attribute if there is a hint text for it in the layout.
«B9» Form "submit" buttons have the type="submit" attribute set.
«B10» All new form icons have been added to the icons.svg SVG sprite.
«C1» The design of the elements of the newsletter subscription form in the footer has been completed.
«C2» The design of the elements of the application form in the modal window has been completed.
«C3» When an input receives focus, its frame and icon change color (as shown in the layout).
«C4» The original checkbox for accepting the license agreement in the application form is hidden.
«C5» The design of the "checkbox" for accepting the license agreement was done manually, using a vector image of a checkmark from an SVG sprite.
«C6» Transitions have been made for all hover and focus effects (color, background, shadow). Time is 250ms, time distribution function is cubic-bezier(0.4, 0, 0.2, 1).
📚 UK 📚 ⬆ Home ⬆
- Створи репозиторій `goit-markup-hw-06`.
- Схиляй створений репозиторій та скопіюй у нього файли попередньої роботи.
- Додай розмітку та оформлення форм для сторінок макета < b>homework #6.
- Налаштуйте `GitHub Pages` та додай посилання на живу сторінку в шапку GitHub-репозиторія.
«A1» Усі стилі написані в одному файлі styles.css, який знаходиться в
папці css.
«A2» Вихідний код відформатований за допомогою Prettier.
«A3» Усі зображення та текстовий контент взяті з макета.
«A4» На всіх HTML-сторінках підключено нормалізатор стилів
[modern-nomalize] (https://github.com/sindresorhus/modern-normalize).
«A5» Код написаний за керівництво.
«B1» Виконано HTML-розмітку всіх елементів макета.
«B2» Теги використані відповідно до їх семантичного змісту.
«B3» Виконано розмітку форми підписки на розсилку та всіх її елементів у футері.
«B4» Виконано розмітку форми заявки та всіх її елементів у модальному вікні.
«B5» У всіх інпутів у формах заданий атрибут name.
«B6» Значення атрибуту name описові, що точно характеризує для чого це поле форми.
«B7» У всіх інпутів є пов'язаний елемент <label>.
«B8» Інпутам заданий атрибут placeholder якщо для нього в макеті є текст-підказка.
«B9» Кнопкам «відправлення» форм заданий атрибут type="submit".
«B10» Всі нові іконки з форм додані до SVG-спрайту icons.svg.
«C1» Виконано оформлення елементів форми підписки на розсилку у футері.
«C2» Виконано оформлення елементів форми заявки в модальному вікні.
«C3» При отриманні інпутом фокусу, його рамка та іконка змінюють колір (як показано на макеті).
«C4» Оригінальний чекбокс про прийняття ліцензійної угоди у формі заявки прихований.
`C5`` Оформлення "чекбокса" про прийняття ліцензійної угоди зроблено вручну, за допомогою векторного зображення галочки зі SVG-спрайту.
«C6» Для всіх ефектів ховеру та фокусу (колір, фон, тінь) зроблено переходи. Час - 250ms, функція розподілу часу - cubic-bezier(0.4, 0, 0.2, 1).
📚 RU 📚 ⬆ Home ⬆
- Создай репозиторий `goit-markup-hw-06`.
- Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
- Добавь разметку и оформление форм для страниц макета homework #6.
- Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку GitHub-репозитория.
«A1» Все стили написаны в одном файле styles.css, который находится в
папке css.
«A2» Исходный код отформатирован при помощи Prettier.
«A3» Все изображения и текстовый контент взяты из макета.
«A4» На всех HTML-страницах подключен нормализатор стилей
modern-nomalize.
«A5» Код написан следуя руководству.
«B1» Выполнена HTML-разметка всех элементов макета.
«B2» Теги использованы согласно их семантического смысла.
«B3» Выполнена разметка формы подписки на рассылку и всех её элементов в футере.
«B4» Выполнена разметка формы заявки и всех её элементов в модальном окне.
«B5» У всех инпутов в формах задан атрибут name.
«B6» Значения атрибута name описательные, точно характеризующий для чего это поле формы.
«B7» У всех инпутов есть связанный элемент <label>.
«B8» Инпутам задан атрибут placeholder если для него в макете есть текст-подсказка.
«B9» Кнопкам «отправки» форм задан атрибут type="submit".
«B10» Все новые иконки из форм добавлены в SVG-спрайт icons.svg.
«C1» Выполнено оформление элементов формы подписки на рассылку в футере.
«C2» Выполнено оформление элементов формы заявки в модальном окне.
«C3» При получении инпутом фокуса, его рамка и иконка меняют цвет (как показано на макете).
«C4» Оригинальный чекбокс о принятии лицензионного соглашения в форме заявки скрыт.
«C5» Оформление «чекбокса» о принятии лицензионного соглашения сделано вручную, при помощи векторного изображения галочки из SVG-спрайта.
«C6» Для всех эффектов ховера и фокуса (цвет, фон, тень) сделаны переходы. Время - 250ms, функция распределения времени - cubic-bezier(0.4, 0, 0.2, 1).