56 lines
5.6 KiB
Markdown
56 lines
5.6 KiB
Markdown
|
---
|
|||
|
|
id: 587d78af367417b2b2512b04
|
|||
|
|
title: Створіть цільову сторінку продукту
|
|||
|
|
challengeType: 3
|
|||
|
|
forumTopicId: 301144
|
|||
|
|
dashedName: build-a-product-landing-page
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# --description--
|
|||
|
|
|
|||
|
|
**Objective:** Створіть застосунок [CodePen.io](https://codepen.io), функціонально схожий на цей: <https://codepen.io/freeCodeCamp/full/RKRbwL>.
|
|||
|
|
|
|||
|
|
Заповніть [ історії користувачів ](https://en.wikipedia.org/wiki/User_story), розміщені нижче, і отримайте доступ до всіх тестів, які потрібно пройти. Проявіть при цьому свій власний стиль.
|
|||
|
|
|
|||
|
|
Ви можете використати HTML, JavaScript, and CSS для виконання цього проєкту. Рекомендується використовувати звичайну CSS, тому що саме цю мову ви розглядали на уроках раніше і вам потрібно більше попрактикуватися. Якщо обираєте Bootstrap або SASS, можете користуватися ними. Не бажано використовувати додаткові технології (наприклад: jQuery, React, Angular або Vue), в іншому разі, це лише під вашу власну відповідальність. Під час роботи над іншими проєктами ви зможете попрацювати з різними технологічними стеками, як-от React. Ми звернемо увагу на усі запити щодо проблем стосовно рекомендованої технологічної теки для цього проєкту та спробуємо їх вирішити. Вдалого програмування!
|
|||
|
|
|
|||
|
|
**Історія користувача #1:** На моїй цільовій сторінці продукту повинен бути `header` елемент з відповідним `id="header"`.
|
|||
|
|
|
|||
|
|
**Історія користувача #2:** Я бачу зображення з `header` елементом з відповідним `id="header-img"`. Логотип компанії тут чудово пасуватиме.
|
|||
|
|
|
|||
|
|
**Історія користувача #3:** У межах `#header` елементу, мені потрібно бачити `nav` елемент з відповідним `id="nav-bar"`.
|
|||
|
|
|
|||
|
|
**Історія користувача #4:** Я бачу щонайменше три клікабельні елементи в `nav` елементі, кожен з яких класу `nav-link`.
|
|||
|
|
|
|||
|
|
**Історія користувача #5:** Після натискання кнопки `.nav-link` у `nav` елементі я переходжу до відповідного розділу цільової сторінки.
|
|||
|
|
|
|||
|
|
**Історія користувача #6:** Я можу переглянути вкладений відеоматеріал з `id="video"`.
|
|||
|
|
|
|||
|
|
**Історія користувача #7:** На моїй цільовій сторінці повинен бути `form` елемент з відповідним `id="form"`.
|
|||
|
|
|
|||
|
|
**Історія користувача #8:** У формі наявне `input` поле з `id="email"`, де можна ввести адресу електронної пошти.
|
|||
|
|
|
|||
|
|
**Історія користувача #9:** На `#email` полі введення повинно бути місце для заповнення тексту, щоб користувач розумів, для чого це поле.
|
|||
|
|
|
|||
|
|
**Історія користувача #10:** `#email` Поле введення використовує перевірку HTML5, щоб переконатися, що введений текст є електронною поштою.
|
|||
|
|
|
|||
|
|
**Історія користувача #11:** У формі є можливість підтвердження `input` з відповідним `id="submit"`.
|
|||
|
|
|
|||
|
|
**Історія користувача #12:** Після натискання `#submit` елементу, електронна пошта відправляють на статичну сторінку (використовуйте цю альтернативну URL-адресу: <https://www.freecodecamp.com/email-submit>).
|
|||
|
|
|
|||
|
|
**Історія користувача #13:** Навігаційна панель повинна розміщуватися у верхній частині вікна перегляду.
|
|||
|
|
|
|||
|
|
**Історія користувача #14:** На моїй цільовій сторінці продукту повинен бути щонайменше один медіа-запит.
|
|||
|
|
|
|||
|
|
**Історія користувача #15:** Моя цільова сторінка продукту повинна використовувати CSS Flexbox щонайменше один раз.
|
|||
|
|
|
|||
|
|
Ви можете створити свій проєкт <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> і натиснувши `Save`, аби створити власний фрагмент. Або ви можете використати це посилання CDN для запуску тестів у будь-якому середовищі, яке вам подобається: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
|||
|
|
|
|||
|
|
Після завершення прикріпіть URL адресу із пройденими тестами до проєкту, над яким працюєте.
|
|||
|
|
|
|||
|
|
# --solutions--
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
// solution required
|
|||
|
|
```
|