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 can’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 class="nav-link" href="contact">contact</a>
        <a class="nav-link" href="details">details</a>
        <a class="nav-link" href="products">products</a> 
  </nav> 
              </header>         
   <section id="contact"><footer id="contact" id="footer">contact</footer></section>
      <section id="details"><footer id="details">details</footer></section>    
      <section id="products"><footer id="products" id="footer">products</footer></section>
             
      
       <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>

</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
  • Each nav-link should have the ‘href’ attribute set to the value that begins with # character.
  • Each section element should have an id with the same value as corresponding ‘href’ attribute, but without #.
  • Delete all footer elements nested in section elements (it is forbidden to have duplicated ids):
3

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