Html - product landing page

  • Failed:Each .nav-link element should have an href attribute.

  • Failed: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 wouldnt ask but I tried with different methods… either with div or with ul and li… I got the same problem all the time…

my codes are:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Product Landing Page</title>
</head>
<body>
    <div class="flex-container">
    <header id="header">
        <img src="http://../img.jpg" id="header-img" alt="Product Image"> Product Landing Page
        <nav id="nav-bar">
            <div class="nav-link"><a href="#special">Special Offer!</a></div>
            <div class="nav-link"><a href="#vision">Our Vision</a></div>
            <div class="nav-link"><a href="#preorder">Preorder Now</a></div>
            <div class="nav-link"><a href="#coupons">Get a coupon</a></div>
        </nav>
    </header>

<main id="main-doc">
    <section id="special">
        Special Offer. Get it now!
    </section>

    <section id="vision">
        Our Vision. We want to expand our operations globally.
    </section>

    <section id="preorder">
        Preorder now and get 30% off the retail price
        <video id="video" controls>
        <source src="product-video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    </section>

    <section id="coupons">
        Get a coupon for an extra 15% off the retail price.
        <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
        <label for="email">Enter your email:</label>
        <input type="email" id="email" name="email" placeholder="Your email address" required>
        <input type="submit" id="submit" value="Submit">
    </form> 
    </section>
    </div>
    </main>
</body>
</html>


CSS part
-----------


body {
    font-family: Arial, sans-serif;
    margin: 1;
    padding: 10;
    background-color:rgb(127, 214, 227);

color: rgb(122, 28, 28);
}
#header {
  color: white;
    background-color: #af5050;
    padding: 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header-img {
    width: 100px;
    height: 100px;
    
}

.nav-link a {
  color: rgb(0, 157, 157);
  text-decoration: none;
  padding: 5px 10px;
  transition: color 0.3s ease;
}

.nav-link a:hover {
  color: #FF00FF;
  text-decoration: underline, bold;
  
}


/* Smooth scrolling effect */
html {
    scroll-behavior: smooth;
}

@media (max-width: 600px) {
  header {
    flex-wrap: wrap;
     }
}

.flex-container {
  display: flex;
}

I hope you can help… I spent 2 days on it… :melting_face:

the div elements do not have a hrefattribute, bit if your .nav-link elements need to have href attributes, which element has those?