Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

how do i solve for this ,my code is attached.
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).

Your code so far

<!-- file: index.html -->
<!doctype html>
<html lang="en">
  <head></head>
  <title></title>
  <link rel="stylesheet" href="styles.css">
  <body>
     
    <header id="header">
      <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#features">Features</a></li>
        <li><a class="nav-link" href="#pricing">Pricing</a></li>
        <li><a class="nav-link" href="#contact">Contact</a></li>
      </ul>
      </nav>
    <img id="header-img" src="">
        <video id="video" src="video">
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input id="email" placeholder="text" type="email" name="email">
            <input id="submit" type="submit">
    </header>
    <footer>
    <p>This is a footer section</p>
</footer>
  </body>
   <html>

/* file: styles.css */
/* General styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Header styles */
#header {
  background-color: #333;
  color: white;
  padding: 10px 0;
  text-align: center;
}

#header-img {
  width: 100px; /* Adjust size as needed */
  height: auto;
}

#nav-bar {
  margin: 10 20 10 10;
 margin-left:
}

#nav-bar ul {
  list-style-type: none;
  padding: 0;
}

#nav-bar ul li {
  display: inline;
  margin-right: 10px;
}

.nav-link {
  color: white;
  text-decoration: none;
}

.nav-link:hover {
  text-decoration: underline;
}

/* Main section styles */
#video {
  padding: 20px;
  text-align: center;
}

/* Form section styles */
#form {
  padding: 20px;
  text-align: center;
}

#email {
  width: 300px; /* Adjust width as needed */
  padding: 10px;
  margin-bottom: 10px;
}

#submit {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
  cursor: pointer;
}

#submit:hover {
  background-color: #555;
}

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Hi @K.lee ,

Let’s talk example.

We have a link in a nav bar:

<ul>
    <li><a href="">About Me</a></li>
</ul>

And a section below:

<section>
   <h2>About Me</h2>
   <p>.....</p>
</section>

To link the link in the nav bar with the corresponding section, we:

  • Set the id for the section. Example: section-id
  • Set the href in the link to #section-id

Like this:

<ul>
    <li><a href="#about-me">About Me</a></li>
</ul>

<section id="about-me">
   <h2>About Me</h2>
   <p>.....</p>
</section>