Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here. – I am stuck on the step 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 ). I have tried for the last couple of hours to figure this one out but doesnt work out

Your code so far

<!-- file: index.html -->
<!DOCType html>
<html lang="en">
   <head id="head">
  <title>Crocs</title>
  </head>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<header id="header">
  <img id="header-img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDPh1nacWP8MbMJriwhYclU8IH6WizBaSgFQ&usqp=CAU">
   <nav id="nav-bar">
    <ul>
      <li>
        <a class="nav-link" href="#head">Home</a>
    </li>
    <li>
      <a class="nav-link" href="#header">About</a>
    </li>
    <li>
      <a class="nav-link" href="#footer">News</a>
      </li>
   </ul>
</nav>
    <video src="https://twitter.com/crocs" id="video" width="580" height="340" controls>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <label for="email">Email</label><br>
  <input type="email" id="email" name="email" placeholder="text"><br>
  <label for="submit">Submit</label>
  <input type="submit" id="submit" name="submit">
</form>
</header>
<footer id="footer">
  <p>Bye-bye</p
</footer>


/* file: styles.css */
header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background-color:  rgba(225, 225, 50);
  color: white;
  font-family: 'Exo 2', sans-serif;
  padding: 1em;
}
nav {
  position: center;
  background-color: magenta;
}
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
body{
display:flex;
}

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Where is your closing ‘p’ element’s angle bracket?
image

3

Thank you for that, missed it, but still doesn’t go further :melting_face:

4

The instruction: “13. The navbar should always be at the top of the viewport.” Your navbar isn’t positioned at the top (there is a picture above it).

1 Like
5

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