FCC - Product Landing page

Hello guys!
I’d like you to take a look at my project looks and My code…
https://codepen.io/eliot6001/full/oKxNzr
and i kinda know its bad but i’m still a beginner and i’ll keep practicing until i get better :slight_smile:

also here’s the code:
https://codepen.io/eliot6001/pen/oKxNzr

In the HTML and CSS windows of codepen click the down arrow and then click analyze. Fix all those errors. the CSS window there will be a red bar near the error instead of a summary at the top so you’ll have to scroll to find it.

It’s unusual for a beginner in FCC to use position for more than a sticky header. So please add height:100vh; to #form now scroll up and down all the way to the end. Notice that everything that is position-ed scrolls over the top of the header and the un-position-ed text is below the header. You can solve this by:

  • using z-index on elements with position

or

  • only position the header and center the other things with margin

Notice that when you click an in-page nav-link that the section anchor moves to the top of the screen. Since there is a fixed header the anchor needs to be offset by the height of the header so it will stop below the header and be readable.

Or with margin-top depending upon which layer everything is on.

1 Like

It’s not bad, it just could use some improvements.

  • First of all, let’s introduce a new font, like this:
    • Go to Pen Settings -> HTML -> Stuff in the <head> section -> Put <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> -> Save & Close
    • In the CSS, in the body style rule, put this: font-family: "Open Sans", sans-serif;
  • The navbar at the top is a little big.
  • All the style rules inside a media query, but don’t they apply to all devices?
  • blue on black is kinda hard to read. You can change the links inside the navbar to have a text color of white
  • The navbar is squished onto the video. On the video, you could add some margin-top.
  • The text is going really wide, how about give it a max-width?
  • To make the navbar look correct, you can add margin: 0 to body, maybe remove border radius, and set width: 100% to the navbar
  • The input could use some padding, border: 1px solid #ccc, and border-radius
  • Button: padding again, maybe a different background color, a color for text easier to read (e.g. black), border-radius, cursor: pointer, and a hover color.
  • Well, nice start! :smiley: Ask me if you need help with something.
2 Likes