Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Your code so far
I couldn’t figure this out. “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 )”

<!-- file: index.html -->
<html>
<head>
  <meta charset='UFC-8'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css"> 
<title>Product Landing Page</title>
</head>
<body>
<header id="header">
  <img id="header-img" src="https://www.freecodecamp.com/email-submit"></img>
  <nav id="nav-bar"> 
    <a href="#features" class="nav-link" id="#features">Features</a> 
    <a href="#how-it-works" class="nav-link" id="#how-it-works"> How it works</a> 
    <a href="#pricing" class="nav-link" id="#pricing" > Pricing</a>
    
     
      <section id="#features"> 
        </section> 
        <section id="#how-it-works"></section> <footer id="#pricing"></footer>
    </nav>      
            <video id="video" src="" ></video>
  
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" placeholder="Enter your email" type="email" name="email"></input>
    <input id="submit" type="submit"><a href="https://www.freecodecamp.com/email-submit"></a></input>
  </form>
  
</header>
</body>
</html>




/* file: styles.css */
@media (max-width: 650px) {
   body {
     background-color: purple;
   }
}
navbar{
position: top;
}
header {
position: fixed;
width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2 
<section id="#features">

You normally don’t start id’s with the # character. That’s only used when you want to refer to an id in CSS or you want to create an internal link to an id on the page. In that case, the # is used in the href of the link, not the id of the element.

3

i’ve removed all the '#" but it’s still not working

4

Please paste your updated HTML in here so we can see exactly what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.