Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

hi all sorry i am new to this but i am stuck on this bit could someone write what needs to be done as i have tried everything that i can think of.

Failed: 10. 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).

thank you all

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Product Landing Page</title>
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
  <div class="logo">
</body>
</html>
  <img id="header-img" alt="Logo" src="https://cdnb.artstation.com/p/assets/images/images/065/172/703/large/codemans-js-starsquarebeach.jpg?1689701053" width="100" >
  </div>
  <nav id="nav-bar">
      <ul>
    <li>
    <a class="nav-link" href="Section1" >Section1</a>      
      </li>
        <li>
      <a class="nav-link" href="Section2" >Section2</a>      
      </li>
        <li>
      <a class="nav-link" href="Section3" >Section3</a>
      </li>
  </ul>
  </nav>
</header><div class="flex">
   <div id="section-1" class"section"></div>
   <div id="section-2" class"section"></div>
   <div id="section-3" class"section"></div>
</div>
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/JhyEXE7SrUY?si=PjiarG3K0bpwdADG" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<form id="form" action="https://www.freecodecamp.com/email-submit">
  <input id="email" placeholder="email" type="email" name="email"></input>
  <input type="submit" id="submit"></input>
</form>

/* file: styles.css */
#nav-bar {
  position: fixed;
  top: 0;
}
ul {
  margin: 75px;
}
li {
  display: inline-block;
}
@media only screen and (max-width: 200px) {
  body {
    background-color: #00beef;
  }
}  
.flex {
  display: flex;
  margin: 10
}
.section {
  margin: 10px
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Look at where your closing tags are for your body and html elements.

3

Thank you Beldusky i did look but not sure where they should be, sorry as i am a newbe on this.

4

Did you jump way ahead in the curriculum? I’d recommend learning the basics before you jump that far ahead.

<html lang="en">
<head>
</head>
<body>

<!-- all your code goes here -->

</body> <!-- these should be your last two lines of code -->
</html> <!-- these should be your last two lines of code -->
5

Thank you Beldusky i did change some of it but not sure if that worked.

6 
<!-- Fix three broken internal anchor links -->
<!-- Needs hash symbols. href="#Section-1" -->
<li><a class="nav-link" href="Section1" >Section1</a></li>
<li><a class="nav-link" href="Section2" >Section2</a></li>
<li><a class="nav-link" href="Section3" >Section3</a></li>

<!-- Add three missing = in class attribute's -->
<!-- class="section" -->
<div id="section-1" class"section"></div>
<div id="section-2" class"section"></div>
<div id="section-3" class"section"></div>

<!-- Input elements are void elements (self-closing) -->
<!-- Remove unnecessary closing tags </input> -->
<input id="email" placeholder="email" type="email" name="email"></input>
<input type="submit" id="submit"></input>
7

Thank you Beldusky i finished that one great help from you.