Hướng dẫn thử thách
1 / 1
Build a Product Landing Page
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
1. Your product landing page should have a `header` element with a corresponding `id="header"`.
2. You should have an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here).
3. Within the `#header` element, you should have a `nav` element with a corresponding `id="nav-bar"`.
4. You should have at least three clickable elements inside the `nav` element, each with the class `nav-link`.
5. When you click a `.nav-link` button in the `nav` element, you should be taken to the corresponding section of the landing page.
6. You should have an embedded product video with `id="video"`.
7. Your landing page should have a `form` element with a corresponding `id="form"`.
8. Within the form, there should be an `input` field with `id="email"` where you can enter an email address.
9. The `#email` input field should have placeholder text to let users know what the field is for.
10. The `#email` input field should use HTML5 validation to confirm that the entered text is an email address.
11. Within the form, there should be a submit `input` with a corresponding `id="submit"`.
12. When you click the `#submit` element, the email should be submitted to a static page (use this mock URL: `https://www.freecodecamp.org/email-submit`).
13. The navbar should always be at the top of the viewport.
14. Your product landing page should have at least one media query.
15. Your product landing page should utilize CSS flexbox at least once.
**Note:** Be sure to link your stylesheet in your HTML and apply your CSS.
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.sh
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵