Your Perfect Assignment is Just a Click Away

We Write Custom Academic Papers

100% Original, Plagiarism Free, Customized to your instructions!


California State University Fullerton Simple Product Landing Page Project

California State University Fullerton Simple Product Landing Page Project

California State University Fullerton Simple Product Landing Page Project


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: (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 ( (Links to an external site.)

It should have the basic format of a page like this: (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.

Order Solution Now

Our Service Charter

1. Professional & Expert Writers: Top Grade Essays only hires the best. Our writers are specially selected and recruited, after which they undergo further training to perfect their skills for specialization purposes. Moreover, our writers are holders of masters and Ph.D. degrees. They have impressive academic records, besides being native English speakers.

2. Top Quality Papers: Our customers are always guaranteed of papers that exceed their expectations. All our writers have +5 years of experience. This implies that all papers are written by individuals who are experts in their fields. In addition, the quality team reviews all the papers before sending them to the customers.

3. Plagiarism-Free Papers: All papers provided by Top Grade Essays are written from scratch. Appropriate referencing and citation of key information are followed. Plagiarism checkers are used by the Quality assurance team and our editors just to double-check that there are no instances of plagiarism.

4. Timely Delivery: Time wasted is equivalent to a failed dedication and commitment. Top Grade Essays is known for timely delivery of any pending customer orders. Customers are well informed of the progress of their papers to ensure they keep track of what the writer is providing before the final draft is sent for grading.

5. Affordable Prices: Our prices are fairly structured to fit in all groups. Any customer willing to place their assignments with us can do so at very affordable prices. In addition, our customers enjoy regular discounts and bonuses.

6. 24/7 Customer Support: At Top Grade Essays, we have put in place a team of experts who answer to all customer inquiries promptly. The best part is the ever-availability of the team. Customers can make inquiries anytime.