Build a Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

I’m building a landing page for my certification for responsive web design. I have went over other people doing tutorials and everything on youtube. It’s failing me on steps 13-22 but passing the rest. I’m not sure what im doing wrong can some one take a look at my code and help me figure this out? please and thank you

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang='en'>
  <head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial scale=1'/>
  <meta name='description' content='landing page'/>
  <meta name='author'content='Michelle Jackson'/>
  <title>landing page</title>
  <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
    <header id="header">
      <img id='header-img' src='https://img.freepik.com/premium-photo/musical-notes-music-notes-are-painted-watercolor-style-generative-ai_900321-43793.jpg?w=360' alt='musical notes'>
    <nav id="nav-bar">
      <ul><a class="nav-link" href="#section1">Artists</a>
<div id="section1">Meet your faves</div>
<a class="nav-link" href="#section2">Songs</a>
<div id="section2">See the lyrics of ur faves</div>
<a class="nav-link" href="#section3">Questions?Suggestions?</a>
<div id="section3">Feel free to contact us </div>
</nav>
      </header>
      <div class='container'></div>
      <section id='music'>
        <h2>Music...let it be your escape
 <iframe width="560" height="315" src="https://www.youtube.com/embed/4RgvFZBeJDg?si=JZ4rohrs8rKt-Bk-" 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 id="video"</iframe></section>
<footer>
  <form action="https://www.freecodecamp.com/email-submit" id="form"</form>
  <input type="text" id="text" name="text" placeholder="Question/Comment" required />
<br>
  <input type="email" id="email" name="email" placeholder="What's your email?" required />
</footer>
        <div class='container'>
          <section id='artists'>
            <div class='grid'>
 </body>
    </html>
  

/* file: styles.css */
/* Header and Navigation */
#header {
    text-align: center;
    padding: 20px;
}

#header-img {
    width: 100%;
    height: auto;   /* Keeps the aspect ratio */
    position: sticky;
}

#nav-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #fff;
    padding: 10px;
    z-index: 1000;
    display: flex;
    justify-content: space-around;
}

.nav-link {
    text-decoration: none;
    color: #333;
    padding: 10px;
}

.nav-link:hover {
    color: #007BFF;
}

/* Form Section */
#form {
    margin-top: 80px; /* Push the form below the fixed navbar */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

#email {
    margin: 10px;
    padding: 10px;
    width: 300px;
    font-size: 16px;
}

#submit {
    margin: 10px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
}

#submit:hover {
    background-color: #45a049;
}

/* Sections for content */
#section1, #section2, #section3 {
    padding: 50px;
}

@media (max-width: 600px) {
    #header-img {
        width: 100%;
        height: auto;
    }

    .nav-link {
        display: block;
        text-align: center;
    }
}

Your browser information:

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

Challenge Information:

Build a Product Landing Page - Build a Product Landing Page

2

please dismiss i figured out where i went wrong got it fixed and passed