Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

I’ve been failing these these tasks on 2 different projects. I not sure what’s wrong.

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

Your #nav-bar should always be at the top of the viewport.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fcc Product Landing Page</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500&family=Montserrat:ital,wght@0,500;1,700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/remixicon@4.0.0/fonts/remixicon.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <header id="header">
      <nav id="nav-bar">
        <div class="logo-container">
          <img
            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR6NS_7hk4tXC89WAOjrRZDhS2JVnaRuOwvRuXUfqu4AHsLgaSv11u41Q9hXymnLSFbCk&usqp=CAU"
            alt="logo"
            id="header-img"
          />
          <span class="the-product">Classic Books</span>
          </div>
          <ul class="nav-link">
            <li><a href="#features" class="nav-link">Features</a></li>
            <li><a href="#audio" class="nav-link">Free Audio Book</a></li>
            <li><a href="#for_sale" class="nav-link">For Sale</a></li>
          </ul>
      </nav>
    </header>

    <section id="email-section">
      <h2>Beautifully Written Masterpieces</h2>
      <form action="https://www.freecodecamp.com/email-submit" id="form">
        <input
          id="email"
          type="email"
          required
          placeholder="Enter your email address"
          name="email"
        />
        <input type="submit" id="submit" value="GET STARTED" />
      </form>
    </section>

    <section id="features">
      <div class="feature">
        <i class="ri-file-paper-fill ri-4x icon"></i>
        <div>
          <h2>Premium Materials</h2>
          <p>
            I Our Books use the best paper which is sourced lo increase the
            longevity of your purchase.
          </p>
        </div>
      </div>
      <div class="feature">
        <i class="ri-truck-fill ri-4x icon"></i>
        <div>
          <h2>1 Day Shipping</h2>
          <p>
            We make sure you receive your classic book as so that you can start
            reading immediately. We also if you are not satisfied
          </p>
        </div>
      </div>

      <div class="feature">
        <i class="ri-book-open-line ri-4x icon"></i>
        <div>
          I
          <h2>Quality Books Only</h2>
          <p>
            We make sure to only provide awesome classic boo that the book you
            buy is one of the top classic
          </p>
        </div>
      </div>
    </section>

    <section id="audio">
      <iframe
        id="video"
        height="400"
        src="https://www.youtube.com/embed/YKAfKprBXQc?si=wOCjZdekL6PhH1fF"
        title="YouTube video player"
        
        allowfullscreen
      ></iframe>
    </section>

    <section id="for_sale">
      <h2>For Sale</h2>
      <div class="product-cards">
        <div class="card">
          <div class="product-image product1"></div>
          <div class="inner_card">
            <div class="author">Dale Carnegie</div>

            <h1 class="header">How to Win Friends & Influence People</h1>

            <p class="content">Dale Carnegue's rock-solid, time tested....</p>
            <div class="flex"></div>
            <p class="main-price">$16.12</p>
            <p class="old-price">$22.21</p>
          </div>
          <button class="add">
            <p style="margin-left: 5px">Add To Cart</p>
          </button>
        </div>

        <div class="card">
          <div class="product-image product2"></div>
          <div class="inner_card">
            <div class="author">Robert Kioasakis</div>

            <h1 class="header">Why I want you to become rich!</h1>

            <p class="content">
              Robert Kiyosaki Rich dad poor dad is a great book on why to buy
              assets and not expenses.
            </p>
            <div class="flex"></div>
            <p class="main-price">$22.22</p>
            <p class="old-price">$25.21</p>
          </div>
          <button class="add">
            <p style="margin-left: 5px">Add To Cart</p>
          </button>
        </div>

        <div class="card">
          <div class="product-image product3"></div>
          <div class="inner_card">
            <div class="author">James Clear</div>

            <h1 class="header">Why I want you to become rich!</h1>

            <p class="content">
              James Clear's  Atomic Habits will teach you how to make small changes that will transform your habits and deliver amazing results.
            </p>
            <div class="flex"></div>
            <p class="main-price">$22.22</p>
            <p class="old-price">$25.21</p>
          </div>
          <button class="add">
            <p style="margin-left: 5px">Add To Cart</p>
          </button>
        </div>
      </div>
    

    </section>
  </body>
</html>

:root {
    --white: hsl(0, 0%, 100%);
    --text: hsl(228, 12%, 48%);
    --pale: hsl(32, 37%, 92%);
    --green: hsl(158, 36%, 37%);
    --header-text:hsl(222,21%,14%);

}
*{
    margin:0;

}
body{
    background-color: var(--pale);
    margin: 0;
}
#header-img{
    width:60px;
    object-fit: contain;

}

#navbar{
    display:flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    width: 100vw;
    top:0;
    background-color: var(--white);
    
}
 
.nav-link{
    display: flex;
    list-style: none;

}
.nav-link a{
    text-decoration: none;
    color: var(--text);
    padding: 0 10px;

}
.logo-container{
    display: flex;
    align-items: center;

}
.the-product{
    font-size: 25px;
    margin-left: 10px;
    font-weight: 700;
    font-family: "montserrat";

}
#email-section{
    margin-top: 100px;
}
input{
    padding: 8px;
    border-radius: 5px;
    border: 1px solid var(--green)
}
#submit{
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
}
section::before{
    display: block;
    content: " ";
    margin-top: -100px;
    height: 100px;
    visibility: hidden;
    pointer-events: none;
}

section{
    margin: 40px 20px;
    text-align: center;
}
h2{
    font-family: "fraunces";
    margin-bottom: 10px;
}
.icon{
    color: var(--green);
    margin-right: 30px;
}
#features{
    text-align: left;
    max-width: 800px;
    margin: auto;
}

.feature{
    display:flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
    font-family: "montserrat";
}

#video{
 width: 100%;
}

.product-image{
width: 100%;
margin: auto;
height: 500px;
border: 1px solid var(--text);
border-radius:10px 10px 0 0 ;
background-repeat:no-repeat;
background-size: cover;

}

.product1{
    background-image:url(https://target.scene7.com/is/image/Target/GUEST_12513515-a5ca-411f-9457-ff907de76a6b?wid=600&hei=600&qlt=80&fmt=webp)
}
.product2{background-image: url(https://m.media-amazon.com/images/I/51NuMV9SJ8L._SL500_.jpg)};
.product3{background-image: url(https://m.media-amazon.com/images/I/51NuMV9SJ8L._SL500_.jpg)};



.card{
    background-color: var(--white);
    border-radius: 10px;
    width: 90%;
    margin: auto;
    margin-bottom: 10px;

}
.inner-card{
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    padding:10px;
}
.content{
    font-family:"monserrat";
    color: var(--text);
    margin-bottom: 10px;
}

.flex{
    display: flex;
    align-items: center;
    margin-bottom: 10px;

}

.main-price{
    margin-right: 20px;
    font-size:30px;
    font-family: "fraunces";
    color: var(--green);
}

.old-price{
    text-decoration: line-through;
    color: var(--text);
}

.author{
    font-family: "monserrat";
    letter-spacing: 5px;
    color:var(--text);
    text-transform: uppercase;
}

.header{
    position:fixed;
    top:10px;
    font-family:"fraunces";
    margin: 10px;
    color: var(--header-text);
}

.add{
    background-color: var(--green);
    cursor: pointer;
    padding: 15px;
    border: none;
    border-radius: 10px;
    width:100%;
    color:var(--white);
    font-family: "montserrat";
    font-weight: 700;
    display: flex;
    margin-bottom: 10px;
}

@media only screen and (min-width: 600px) {
    #nav-bar{
        flex-direction: row;

    }
}

@media only screen and (450px < width <600px){
    .card{
        font-size: 0.85rem;
    }
    .product-image{
        height:400px;
    }
}

@media only screen and (450px <= width ){
    .card{
        display: flex;
        max-width: 525px;
    }
    .inner-card{
        width: 300px;
        padding: 20px;
    }
    .product-image{
        width:400px;
        border-radius: 10px 0 0 10px;

    }
}
@media only screen and (width >= 1000px ){
    #video{
        width:70%;

    }
    .product-cards{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

This is a .nav-link element and it doesn’t have an href attribute. The solution here is not to add an href element to it because only links should have href attributes.

1 Like

I removed `class=“nav-link”`` and its working now. As for the css, I read that removing the padding would help but its still not working.

Also my .product3 is not showing up it was nearly identical code to the 2nd one. But it doesn’t seem to be showing.

You do currently have an element that is always at the top of your page, but is it the #nav-bar? You might want to check the spelling of #nav-bar in your CSS very closely.

2 Likes