Product Landing Page - Build a Product Landing Page

Hello All!!
I’m still a novice and having trouble passing my tests for the code, not sure what is going on, but I’m sure my position is all screwed, any hits and explanations would be greatly appreciated.

The errors:

  1. Each .nav-link element should have an href attribute.
  2. 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 ).
  3. Your #nav-bar should always be at the top of the viewport.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Better Yourself!!!!</title>
    <link rel="stylesheet" href="styles.css">
    

</head>
<body>
    
<header id="header">
    <nav id="nav-bar">
        <div class="logo">
            <img src="
            id="header-img"/>
            <span class="the-product">Better yourself</span>
        </div>
            <ul class="nav-link">
                <li><a href="#features" class="nav-link">Features</a></li>
                <li><a href="#audio" class="nav-link">Books about time optimazation</a></li>
                <li><a href="#for_sale" class="nav-link">Books on Amazon</a></li>
            </ul>
        
    </nav>
</header>
<!--place the email submit on the footer for feedback-->

    <section id="features">
        <div class="feature">
        <i class="ri-computer-fill ri-4x icon" ></i>
        <div>
        <h2 class="computer">24/7 Customer support</h2>
        <p class="paragraph-computer"> At Better Yourself, our commitment to providing 24/7 customer support underscores our dedication<br>to your success and satisfaction. Our around-the-clock support team is always ready to assist you,<br> ensuring that you have uninterrupted access to expert assistance whenever you need it.</p>
        </div>
    <div class="feature">
        <i class="ri-book-fill ri-4x icon" ></i>
        <div>
            <h2>Books</h2>
            <p > 
                <p> At Better help, we take pride in offering a thoughtfully curated collection of books designed<br> to enhance mental health and optimize your time. Our extensive range covers a spectrum of topics, providing invaluable<br> insights and practical strategies to empower you on your journey to a balanced and fulfilling life.</p>
        </div>
    </div>
    <div class="feature">
        <i class="ri-truck-fill ri-4x icon"></i>
        <div>
            <h2> 2 Day shipping
            </h2>
            <p>At Better help, we understand the importance of receiving your orders promptly,<br. which is why we are thrilled to offer our clients the advantage of 2-day shipping. This commitment to swift delivery is designed to enhance your overall shopping experience and provide unparalleled convenience.</p>
        </div>
    </div>
        <section id="audio">
            <iframe id="video" width="400" height="200" src="https://www.youtube.com/embed/A0CBqHjaY3A?si=MM3U8Nltn2ZWRCzM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                
            </iframe>
        </section>
        <section id="email_section">
            <h2 class="questions">Contact Us</h2>
            <form id="form" action="//">
                <input id="email" type="email" placeholder="Enter your email adress" name="email" required>
                <input id="submit" type="submit"></input>
            </form>
        </section>
    </div>
    </section>

<section id="for_sale">
    <h2 class="Sale">For Sale</h2>
            <div class="product-image product1">
                <div class="inner-card">
                    <div class="author">By James clear</div>
                    <h1 class="header">Atomic Habits</h1>
                    <p class="content">
                        Atomic Habits by James Clear is a comprehensive, practical guide on how to change your habits<br> and get 1% better every day. Using a framework called the Four Laws of Behavior Change, Atomic Habits teaches readers a simple set of rules for creating good habits and breaking bad ones. Read the full summary to glean 3 key lessons from Atomic Habits, learn how to build a habit in 4 simple steps, and get a handy reference guide for the strategies recommended throughout the book.
                    </p>
                    <div class="flex">
                        <p class="main-price"></p>
                        <p class="old-price"></p>
                    </div>
                    <button class="add">Add to cart</button>

                </div>
            </div>
        </div>
        <div class="card_1"></div>
        <div class="card"></div>
    </div>
</section>

</div>
</body>
</html>

Css

:root{
    --white:white;
    --text: #6C7289;
    --pale: tan;
}
*{
    margin: 0;
    
}
body{
    background-color: var(--pale);
    margin-top: 20px;
    height: 80%;
    position: relative;
    width:100%;
}

#header-img{
    width: 60px;
    object-fit: contain;
}

#nav-bar{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    width: 100%;
    top: 0;
    background-color: var(--white);
    margin-top: -20px;
    padding-top: 40px;
    cursor: pointer;
}
.nav-link{
    display: flex;
    list-style: none;
}
.nav-link a {
    text-decoration: none;
    color: var(--text);
    padding: 0 10px;
    margin: 0,10%;



}
.logo{
    display: flex;
    position: absolute;
    align-items: center;
    height: 20px;
    top:18px;
    left:2px;
    padding: 0;
    margin: 0;
    font-size:12px;
    
    
    
}
.logo span{
    display: flex;
    position: absolute;
    font-size: 12px;
    left:50px;
}
.the-product{
    position: relative;
    display: flex;
    font-size: 25px;
    font-weight: 700;
    margin:0;
    font-family: 'Edu TAS Beginner', cursive;
}

/*might have to try flex box on this submission box */

#features{
 display: flex; 
 position: relative;
 align-items: center;
 justify-content: center;
 font-family:'Edu TAS Beginner', cursive;
 align-items: center;
 justify-content: center;
 font-size: 15px;
 margin: 20px;
 padding-top: 150px;
 


}

.questions{
    margin-bottom:10px;
}

#email_section {
    position: relative;
    left: 125px;
    top: 5px;
    text-align: center;
    margin: 0;
}
section{
    background-color: var(pale);
}
#audio{
    position: relative;
    width:100%;
    margin-top: 50px;
    margin-bottom: 0%;
    padding-bottom: 0%;
    align-content: center;
    left: 250px;
    
}
/*make a border radius for submit btn along with the email entry feild*/

.the-product-image{
    width:100%;
    margin:auto;
    height:500px;
}
.product1{
position: relative;
background-image: url("https://images-na.ssl-images-amazon.com/images/I/51mUXHrT4oL.jpg");
background-repeat: no-repeat;
background-size:cover;
border-radius: 10px;
top: 250px;
left: 450px;
width: 500px;
height:450px;
margin-bottom: 100px;
}

.card_1{
    width: 500px;
    position: absolute;
    margin: auto;
    margin-bottom:10px;
    border-style: solid;
    height: 440px;
    left: 450px;
    border-color: white;
    top:250px;
    border-width: 12px;
    border-radius: 30px;
}
#for_sale{
    position: absolute;
    margin-bottom: 0%;
    padding-bottom: 0%;
    height:10px;


}
.product-card{
    position: absolute;
    margin-bottom: 0%;
    padding-bottom: 0%;
    height:10px;
}
.Sale{
    display: flex;
    position: absolute;
    top: 200px;
    right: -250px;
    padding-bottom: 0%;
    margin-bottom: 0%;
    text-decoration: underline;
    font-weight: bold;
}
.inner-card{
    position: absolute;
    bottom: -200px;
    border-style: solid;
    border-radius: 20px;
    border-color: white;
    border-width: 5px;
    left: 50px;
}
.author{
    position: absolute;
    left: 160px;
    top: -30px;
    text-decoration: underline;
}
.header{
    position: absolute;
    left: 130px;
    top: -55px;
    text-decoration: underline;
}
.content{
    position: relative;
    font-size: 12px;
    font-family: 'Playfair Display', serif;
    left:5px;
}
.add{
    position: relative;
    left: 160px;
    cursor: pointer;
    border-radius: 30px;
    background-color: var(--pale);
}
.add:hover{
    background-color: aliceblue;
}
@mdeia only screen and(min-width:600px){
    #nav-bar{
        flex-direction:row;
    }
}
@media only screen and(450px < width < 600px){
    .card{
        display: flex;
        max-width:525px;
}
.inner-card{
    width: 300px;
    padding:20px;
}
.product-image{
    width:400px;
    border-radius: 10px 0 0 10px;
}
}

Hello @R3F3SH, and welcome to the forums!

This is just a friendly notification to please use the Help button in the challenge itself, because it will automatically copy your code and give us more information to better help you!

I have also edited your original post so that the problem is clear, and the code is separated into code blocks. You can use the </> button on the comment editor or wrap the code in three backticks above the code and three backticks below the code (on the same key as the tilde key below Escape on the keyboard).

2 Likes

Thank You Marcus!!!

Apologies for the layout and thank you for making those adjustments.

The nav-link class should (only) be on the a elements.

I would suggest you try and move the positioning from the nav element to the header element.

1 Like

@lasjorg Thank you!!!

That worked!! I appreciate the positive feedback.

1 Like