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">
    <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>
    <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>

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

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

    <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.

    <section id="coupons">
        Get a coupon for an extra 15% off the retail price.
        <form id="form" action="" 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">

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?