All Tracks/build a product landing page project/
Đang tải...
Hướng dẫn thử thách
1 / 1

Build a Product Landing Page

**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>. **Do not copy this demo project**. **User Stories:** 1. Your product landing page should have a `header` element with a corresponding `id="header"` 1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here) 1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"` 1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link` 1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page 1. You can watch an embedded product video with `id="video"` 1. Your landing page has a `form` element with a corresponding `id="form"` 1. Within the form, there is an `input` field with `id="email"` where you can enter an email address 1. The `#email` input field should have placeholder text to let users know what the field is for 1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address 1. Within the form, there is a submit `input` with a corresponding `id="submit"` 1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`) 1. The navbar should always be at the top of the viewport 1. Your product landing page should have at least one media query 1. Your product landing page should utilize CSS flexbox at least once Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding! **Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet 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:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.