Product Landing Page - Build a Product Landing Page

Hello guys,

these are my test fails:

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

To the best of my knowledge, my code satisfies both conditions. Please do take a look and tell me where i go wrong.

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Landing page</title>
        <link href="" rel="stylesheet">
        <link href="" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
        <header id="header" class="header">
            <img id="header-img" src="" alt="logo">
            <p id="header-title">Dreams Nails</p> 
            <nav id="nav-bar">
                <ul class="nav-links">
                    <li  class="nav-link"><a href="#overview">Overview</a></li>
                    <li  class="nav-link"><a href="#perfect-nails">Perfect nails</a></li>
                    <li  class="nav-link"><a href="#pricing">Pricing</a></li>
            <section class="form" id="overview">
                <h1>Looking to relax and pamper yourself? Your beauty journey starts here</h1>
                <p class="form-p">Flawless, stunning and healthy nails</p>
                <form action="" id="form">
                    <label for="email"><input type="email" name="email" id="email" placeholder="Enter your email address" required></label>
                    <input type="submit" id="submit" value="GET STARTED" class="get-started">
                <ul class="form-lists">
                        <p><i class="fas fa-money-bill"></i></p>
                        <h2 class="form-scan">Affordable Prices</h2>
                        <p class="text-f">Some say we have the best prices around, we say we have the best prices in the city</p>
                        <p><i class="fas fa-cash-register"></i></p>
                        <h2 class="form-scan">Easy Payment</h2>
                        <p class="text-f">You can come in with cash or choose to go cashless; our flexible payment options allow</p>
                        <p><i class="fas fa-user-tie"></i></p>
                        <h2 class="form-scan">Best Service</h2>
                        <p class="text-f">Check the ratings. If still in doubt, a trial will convince you</p>

                        <p><i class="fas fa-city"></i></p>
                        <h2 class="form-scan">Near City</h2>
                        <p class="text-f">Our stores are close to major cities. Call today to find the one closest to you and book an appointment</p>

            <section class="video" id="perfect-nails">
                <iframe width="560" height="315" src="" id="video"></iframe>

            <section class="text" id="pricing">
                <div class="texts">
                    <p><span class="left">Basic Manicure</span><span class="right">$25</span></p>
                    <p><span class="left">Lux Spa Manicure</span><span class="right">$30</span></p>
                    <p><span class="left">Gel Manicure</span><span class="right">$35</span></p>
                    <input type="submit" id="submit" value="SELECT" class="select">
                <div class="texts">
                    <p><span class="left">Classic Pedicure</span><span class="right">$28</span></p>
                    <p><span class="left">Deluxe Pedicure</span><span class="right">$35</span></p>
                    <p><span class="left">Zen Spa Pedicure</span><span class="right">$40</span></p>
                    <input type="submit" id="submit" value="SELECT" class="select">
                <div class="texts">
                    <h3>Nail Service</h3>
                    <p><span class="left">Acrylic</span><span class="right">$30</span></p>
                    <p><span class="left">Liquid Gel</span><span class="right">$40</span></p>
                    <p><span class="left">Dip Powder</span><span class="right not">$40+</span></p>
                    <input type="submit" id="submit" value="SELECT" class="select">

            <section class="footer">
                <div class="social-icons">
                    <i class="fab fa-facebook-f"></i>
                    <i class="fab fa-twitter"></i>
                    <i class="fab fa-instagram"></i>
                    <i class="fab fa-youtube"></i>
                <div class="extra-info">  
                    <p>&#169;<span class="dancing">Dreams Nails</span></p>

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

It looks like the problem is coming from the class name “nav-link” on the <li> elements within the nav bar.

I looked at the instructions and tweaked the code where I was able to make those pass by removing the <li> elements (got rid of <ul> too) and then put the class name directly on the <a> tags. You don’t need to remove them but for each element where a class name of “nav-link” is found, it looks like the instructions will check to see if the element contains an href value. So you could leave the code structure as-is and just remove the class names where you can’t have an href value in the <li> elemnts

Sometimes you can create what feels like more organization by using more elements but a lot of the time, more elements isn’t necessarily better due to readability + clutter.

Hope this helps!

1 Like

This worked wonderfully. Thank you so much :blush:

1 Like

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