https://github.com/codewithmide/product_landing_page

4th freeCodeCamp (new)responsive web design project
https://github.com/codewithmide/product_landing_page

css3 html

Last synced: 1 day ago
JSON representation

4th freeCodeCamp (new)responsive web design project

• Host: GitHub
• URL: https://github.com/codewithmide/product_landing_page
• Owner: codewithmide
• Created: 2022-07-22T14:14:40.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-24T09:51:34.000Z (over 2 years ago)
• Last Synced: 2023-03-05T00:47:06.435Z (over 1 year ago)
• Topics: css3, html
• Language: CSS
• Homepage:
• Size: 22.9 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Build a Product Landing Page

### Objective: Build an app that is functionally similar to https://product-landing-page.freecodecamp.rocks

# User Stories:

- 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

- 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  in your HTML to link your stylesheet and apply your CSS