Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

You should have a nav element with an id of nav-bar.
Failed: Your #nav-bar should be a descendant of the #header.
Failed: You should have at least 3 .nav-link elements within the #nav-bar.
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
  <img src="https://www.lg.com/content/dam/lge/global/our-brand/src/mocks/bs0002/brand-elements-logo-primary-d.svg" id="header-img" alt="LG logo width="500" class="stretched-image> 
 <nav id="nav-bar">
   <ul>
    <li><a href="#LG_REFRIGERATORS" class="nav-link">LG REFRIGERATORS</a></li>
    <li><a href="#LG_PHONES" class="nav-link">LG PHONES</a></li>
    <li><a href="#LG_TELEVISIONS" class="nav-link">LG TELEVISIONS</a></li>
    </ul> 
</nav>
</header>
<section id="video-section">
      <iframe id="video" width="400" height="320" src="https://youtu.be/966cJtJ5suQ" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    </section>
<section id="company-description">
      <p>TLG Corp (LG Corp) is a diversified holding company that manufactures and sells electronic products, chemicals and telecommunication products through its subsidiaries and affiliates. Its product portfolio includes consumer electronics, mobile communications, and home appliances. The company also offers petrochemicals, household and cosmetic products, IT and electronic materials, and energy solutions. Its chemical products include polyvinyl chloride, ethylene, propylene, rechargeable batteries, optical materials, automotive solutions, synthetic rubbers, and specialty polymers. It operates subway stations, support center, shared lab center, art center and discovery lab in South Korea. The company has business presence in Asia-Pacific, the Americas, and Europe. LG Corp is headquartered in Seoul, South Korea..</p>
    </section>
    <section id="Refrigerators">
      <ul>
        Refrigerators:
        <li>InstaView Door-in-Door™</li>
        <li>Door-In-Door® Refrigerators</li>
      </ul>
    </section>
    <section id="LG PHONES">
      <ul>LG PHONES:
        <li>LG G7+</li>
        <li>LG Q7+</li>
      </ul>
    </section>
    <section id="TELEVISIONS">
  <ul>TELEVISIONS:
        <li>OLED TVs</li>
        <li>UHD 4K TV</li>
      </ul>
</section>

<form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
      <label for="email">LG Newsletter: </label>
      <input type="email" id="email" name="email" placeholder="Enter your email address" required>
    <input type="submit" id="submit" value="Submit">
   </form>
<footer>
  <p>&copy; 2024 LG</p>
</footer>

</body>
</html>
/* file: styles.css */

#header {
  background-color: grey;
  color: #fff;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}
body {
  font-family: verdana, tahoma;
  position: relative;
  width: 100%;
  top: 25rem;
}
h1 {
  font-family: Trebuchet MS, Segoe UI;
  text-align: center;
}
#header-img {
  width: 200px; 
  
}

#nav-bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
justify-content: center; /* Center items horizontally */
  align-items: center;}

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

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

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

/* Form styles */
#form {
  margin-top: 50px;
  text-align: center;
}

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

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

#submit:hover {
  background-color: #555;
}
/* Media query for smaller screens */
@media (max-width: 768px) {
  #nav-bar ul {
    flex-direction: column; /* Stack items vertically */
    align-items: stretch; /* Stretch items to full width */
  }

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Challenge Information:

Product Landing Page - Build a Product Landing Page

Look at your first two lines of code that come immediately after your <header> opening tag at the very top of the body, you have a couple syntax issues.

1 Like

Check your img element’s attributes and values carefully. You have missing some quotation marks around your attributes values. Also check your section id’s, didn’t matches with your anchor href attribute values.
@Shooki

Wow do not know how I missed that thank you very much

thanks lot can you please clarify this for me again “Also check your section id’s, didn’t matches with your anchor href attribute values.”

In order for links in the navbar to actually navigate a user to those sections of the document, the href attributes in the links to exactly match the id attributes of the sections, with the # symbol appended to the front. You have the # symbols there, but they don’t otherwise match the id values.