Your task is to create a simple product landing page that meets the following requirements:

• User Story #1: My product landing page should have a header element with a corresponding id="header".
• User Story #2: I can see an image within the header element with a corresponding id="header-img". A company logo would make a good image here.
• User Story #3: Within the #header element I can see a nav element with a corresponding id="nav-bar".
• User Story #4: I can see at least three clickable elements inside the nav element, each with the class nav-link.
• User Story #5: When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
• User Story #6: I can watch an embedded product video with id="video".
• User Story #7: My landing page has a form element with a corresponding id="form".
• User Story #8: Within the form, there is an input field with id="email" where I can enter an email address.
• User Story #9: The #email input field should have placeholder text to let the user know what the field is for.
• User Story #10: The #email input field uses HTML5 validation to confirm that the entered text is an email address.
• User Story #11: Within the form, there is a submit input with a corresponding id="submit".
• User Story #12: When I click the #submit element, the email is submitted to a static page (use this mock URL: https://www.freecodecamp.com/email-submit (Links to an external site.)) that confirms the email address was entered and that it posted successfully.
• User Story #13: The navbar should always be at the top of the viewport.
• User Story #14: My product landing page should have at least one media query.
• User Story #15: My product landing page should utilize CSS flexbox at least once.

This means you will have to be sure to:

• use CSS Flexbox
• use a media query in this project to make the page responsive
• create a fixed navigation menu on the top with at least 3 in-page navigation links
• embed a product video on the page
• include a form that contains an input type for an email (validate that it is in email form and is required) to sign up
• have the form action post to the following mock website URL (https://www.freecodecamp.com/email-submit) (Links to an external site.)

It should have the basic format of a page like this: https://codepen.io/freeCodeCamp/full/RKRbwL (Links to an external site.)

My specific requirements for this page include:

• 3 products with subheadings, responsive image, and a few sentences of text description/sales information like pricing etc.
• use flexbox to create a nice page layout
• include at least one Google fonts and choose a color scheme for your page
• include the FreeCodeCamp test case for your page and be sure that it passes all tests before submitting
• also submit your FreeCodeCamp url on your FCC profile so you get credit toward this project.

Add Test Case Script to Your Project

You’ll want to include the TEST CASE script in your CodePen. You can include the test case file by opening the SETTINGS on your CodePen, navigating to the JavaScript section and including the CDN to the TEST CASE code in the Add External Scripts/Pens area. See my screenshot for an example. Click RUN TESTS to ensure that your code meets the requirements for this activity.