I need help please product landing page project

HTML-CSS
1

I need help, it says that each .nav-link element should have an href attribute but the code won’t pass. Also at the end it says that the #nav-bar should always be at the top of the viewport. please help.

  **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html lang="eng">
<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" type="text/css"
  />
  </head>
  <body>
      <header id="header">
        <h1 id="header-title-1">
          bark Thins
          </h1>
          <h2 id="header-title-2">
            SNACKING CHOCOLATE
        </h2>
        <img src="https://s3.amazonaws.com/secretsaucefiles/photos/images/000/135/789/large/Screen_Shot_2017-02-21_at_11.16.59_PM.png?1487737024"
        alt="barkthins favorites"
        loading="lazy"
        id="header-img"
        />
        <nav id="nav-bar">
          <ul class="nav-link">
          <li id="flavor-1"></a href="#flavor-1">almond with seasalt</a></li>
          <img id="product-1" src="https://m.media-amazon.com/images/I/81iA2o495wL._SX385_.jpg" />
          </ul>
          <ul class="nav-link">
            <li id="flavor-2"><a href="#flavor-2">toasted coconut with almonds</a></li>
            <img id="product-2" src="https://m.media-amazon.com/images/I/81qWYXIrBDL._SL1500_.jpg" />
            </ul>
          <ul class="nav-link">
            <li id="flavor-3"><a href="#flavor-3">pretzel & seasalt</a></li>
            <img id="product-3" src="https://m.media-amazon.com/images/I/81RlXI4edyL._SL1500_.jpg" />
            </ul>
          <video id="video" src="https://www.youtube.com/watch?v=yCIhDe6MOsQ">
          </video>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
          <input name="email" id="email" placeholder="Enter your email here" type="email">
          </input>
          <input type="submit" id="submit">
          </input>
          </form>
          </nav>
          </header>
    </body>
</html>

/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
* {
  scroll-behavior: smooth;
}
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
}
#header {
text-align: center;
}
#header-title-1 {
font-family: Arial, 'Times New Roman';
font-size: 80px;
font-style: normal;
font-weight: 100;
height: 40px;
}

#header-title-2 {
display: block;
width: 100%;
font-weight: 100;
}
#nav-bar {
font-family: Copperplate, 'fantasy';
font-size: 25px;
position: relative;
right: 225px;
}
#flavor-1, #product-1 {
margin-right: 49rem;
}
#product-2 {
max-width: 100%;
width: 385px;
position: relative;
}
#flavor-2, #product-2 {
margin-left: 26rem;
position: relative;
top: -460px;
}
#product-3 {
max-width: 100%;
width: 385px;
position: relative;
}
#flavor-3, #product-3 {
margin-right: -100rem;
top: -57rem;
position: relative;
}
.nav-link #product-1 {
border-style: solid;
padding-top: 10px;
}
.nav-link #product-2 {
border-style: solid;
}
.nav-link #product-3 {
border-style: solid;
}
#form {
display: inline-block;
padding-bottom: 100rem;
height: 100rem;
}

  **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/15.3 Safari/605.1.15

Challenge: Build a Product Landing Page

Link to the challenge:

1 Like
2

Hi @antoniooov5

I am still working on my projects but you might find some ideas here:

And also check out all your code with an editor to find typos.
Other thing, if you want a simple navigation using an unordered list, you need to do something like this:

<nav id="nav-bar"> // Navigation
  <ul> // Unordered list
     <li>
         <a href="#Section1" class="nav-link"> // anchor element wich leads to an element with id="Section1"
       </li> 
</ul>
</nav>

I hope that helps. Keep the good work!! :muscle: :ok_hand:

1 Like
3

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

The <ul> and <li> tag do not have a href attribute, so you should assign the .nav-link to an anchor tag instead <a class="nav-link" href=""></a>

To keep the position of #nav-bar fixed (in this case, always at the top of the viewport), use position:fixed in css.

Also, sidenote, currently, your code creates multiple unordered lists, each with 1 list item. To create one unordered list with multiple list items:

<ul>
   <li>
      <a class = "nav-link" href="#flavor-1">almond with seasalt</a>
      <img />
   </li>
   <li>
      <a></a>
      <img />
   </li>
   <li>
   </li>
</ul>
4 Likes
4

Thank you @prieton

Rushing lol

1 Like
5

thanks for your help!

1 Like
6

I tried your tips and they worked, thanks for the help!

1 Like
7

Finally passed this project thanks to you!

1 Like