Product Landing Page - Build a Product Landing Page

HTML-CSS
1

When I run the tests it will not pass me for the following reasons:

“Each .nav-link element should have an href attribute.”

“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 ).”

My code clearly has ‘href’ attributes for each ‘nav-link’ linking them to corresponding elements on the page.

   **code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="en">
 
<head>
   <link rel="stylesheet" href="styles.css">
</head>



<body>
  
   

   
   <header id="header">
   <img id="header-img" class="center" src="https://i.postimg.cc/HLpJgrFN/LG-MASON.png"/>

   


<div id="header-div">            

<nav id="nav-bar" class="nav-link">
   <ul>
       <a id="cards-link" class="nav-link" href="#cards">CARDS</a>
       <a id="chips-link" class="nav-link" href="#chips">CHIPS</a>
       <a id="tables-link" class="nav-link" href="#tables">TABLES</a>
       <a id="accessories-link" class="nav-link" href="#accessories">ACCESSORIES</a>
</ul>
</nav>
</div> 
</header>



<div>
<h2>Top Quality Products, For All Casino Night Needs</h2>

<h5>Join Our Subscriber List:</h5>
<form class="center" id="form" placeholder="email adress" action="https://www.freecodecamp.com/email-submit">
   <input class="center" name="email" id="email" type="email" placeholder="Enter your email">
   <input class="center" type="submit" value="Submit" id="submit">
</form>
</div>



<iframe width="560" height="315" src="https://www.youtube.com/embed/1t0X-AQT66A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video" class="center"></iframe>


   <section id="cards"></section>
   <section id="chips"></section>
   <section id="tables"></section>
   <section id="accessories"></section>




<br>
<br>

<img id="header2-img" src="https://i.postimg.cc/sD0wRtfR/5c165529b0164202f1cf04d6.png">

<h2></h2>

<img id="header3-img" src="https://i.postimg.cc/xCxjyWbt/playing-cards-download-clip-art-clip-art-8.png">

   

</body>

/* file: styles.css */
header{
  
}

#nav-bar{
   
}

h1{
   font-family: Arial narrow;
   color: black;
   font-size: 30px;
   border-width: 2;
   margin-left: 5px;
   

}

#header-div{
   text-align: center;
   word-spacing: 30px;
   border: solid grey;
   background: white;
   font-size: large;
   color: black;
}




.center {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
 }



#header2-img{
   animation-name: wheel;
   animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   max-width: 150px;
}

#header3-img{
   animation-name: cards;
   animation-duration: 10s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
   max-width: 150px;
}

h2{
   text-align:center;

}

#video{
   margin-top: 40px;
   max-width: auto;
}

h5{
   Text-align: center;
   margin-bottom: 0px;
}

form{
   margin-top: 0px;
   

}

.flex-container {
   display: flex;
 }

html{
   background-color: lightgrey;
   font-family: Arial narrow;
   font-size: xx-large;
}





@keyframes wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes cards {
   0% {
     transform: rotate(0deg);
   }
   50% {
     transform: rotate(45deg);
   }
  
}

 

   **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Let’s start with the first one:

“Each .nav-link element should have an href attribute.”

This test is looking at every element that has the nav-link class and checking of they have an href element. The four links inside your nav list definitely do. But are there any other elements in your HTML that have the nav-link class and don’t? I think there is at least one. Check your HTML very carefully to find the element with the nav-link class that shouldn’t have it.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.