---
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
```