Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Please help me with this BS… Always so poorly written what to do… Mumbling information, who writes these guides…?

Describe your issue in detail here.
Well, im stuck please see my code… thank you
Your code so far

<!-- file: index.html -->
<header id="header">
  <img id="header-img" src="https://postimg.cc/XBdRjq9r"></img>
  <nav id="nav-bar">
    <a href="#Front-page" class="nav-link"</a>
    <a href="#Contact" class="nav-link"</a>
    <a href="#About-us" class="nav-link"</a>
  </nav>
  <video id="video" href="" src=""></video>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
  <input id="email" type="email" name="email" placeholder="Text"></input>
  <input id="submit" type="submit" >
  </form>
  
  
</header>

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Can you be more specific? Which user stories are failing? What words or phrases in those user stories do you need explained?

3

thank you for getting back so quickly. please see below:

  • Failed:Your #nav-bar should always be at the top of the viewport.

  • Failed:Your Product Landing Page should use at least one media query.

  • Failed:Your Product Landing Page should use CSS Flexbox at least once.

4

And which words or phrases in those error messages do you not understand?

5

I tried using CSS… don’t know how to do the viewport thingy… nor do I remember the CSS flexbox what to write it… Usually, there are help along the way…

6

Start with this one:

  • Failed:Your #nav-bar should always be at the top of the viewport.

So how do i compose it…?

7

While I look for the exact step that covered this, can you tell me things you have tried to Google to find a solution to this?

8

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 ).

my code is like this:

1 Like
9

Screenshot 2022-11-30 at 01.21.55
Screenshot 2022-11-30 at 01.21.551398×528 48.8 KB

10

There is NO corresponding element???

This is freecodecamp guide to do:
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 ).

11

I don’t see where you did that

12

So should I write it like this then?

<nav-link href=“#bottom”</ nav-link>

13

Do you have an element with that id?

1 Like
14
15

i read it thanks, but nothing of value in the post you sent?

16

The answer to one of your issues is in there…

17

Specifically this one.

By the way, you never answered this…

19

i placed nav-bar right after header… it said it needs to be within the header… I did…

So why doesnt it works creating nav-links?

20

Did you use fixed positioning, like that article talked about?

21

you mean in In CSS?

Should I edit there as well?