- Your product landing page should have a header element with a corresponding id="header"
- You can see an image within the header element with a corresponding id="header-img" (A logo would make a good image here)
- Within the #header element, you can see a nav element with a corresponding id="nav-bar"
- You can see at least three clickable elements inside the nav element, each with the class nav-link
- When you click a .nav-link button in the nav element, you are taken to the corresponding section of the landing page
- You can watch an embedded product video with id="video"
- Your landing page has a form element with a corresponding id="form"
- Within the form, there is an input field with id="email" where you can enter an email address
- The #email input field should have placeholder text to let users know what the field is for
- The #email input field uses HTML5 validation to confirm that the entered text is an email address
- Within the form, there is a submit input with a corresponding id="submit"
- When you click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit)
- The navbar should always be at the top of the viewport
- Your product landing page should have at least one media query
- Your product landing page should utilize CSS flexbox at least once
Note: Be sure to add link rel="stylesheet" href="styles.css"
in your HTML to link your stylesheet and apply your CSS.
- Passed:You should have a header element with an id of header.
- Passed:You should have an img element with an id of header-img.
- Passed:Your #header-img should be a descendant of the #header.
- Passed:Your #header-img should have a src attribute.
- Passed:Your #header-img’s src value should be a valid URL (starts with http).
- Passed:You should have a nav element with an id of nav-bar.
- Passed:Your #nav-bar should be a descendant of the #header.
- Passed:You should have at least 3 .nav-link elements within the #nav-bar.
- Passed:Each .nav-link element should have an href attribute.
- Passed:Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).
- Passed:You should have a video or iframe element with an id of video.
- Passed:Your #video should have a src attribute.
- Passed:You should have a form element with an id of form.
- Passed:You should have an input element with an id of email.
- Passed:Your #email should be a descendant of the #form.
- Passed:Your #email should have the placeholder attribute with placeholder text.
- Passed:Your #email should use HTML5 validation by setting its type to email.
- Passed:You should have an input element with an id of submit.
- Passed:Your #submit should be a descendant of the #form.
- Passed:Your #submit should have a type of submit.
- Passed:Your #form should have an action attribute of https://www.freecodecamp.com/email-submit.
- Passed:Your #email should have a name attribute of email.
- Passed:Your #nav-bar should always be at the top of the viewport.
- Passed:Your Product Landing Page should use at least one media query.
- Passed:Your Product Landing Page should use CSS Flexbox at least once.