Product Landing Page - Build a Product Landing Page

HTML-CSS
1

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">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Landing page</title>
        <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Work+Sans&display=swap" rel="stylesheet">
        <link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <header id="header" class="header">
            
            <img id="header-img" src="https://icons.iconarchive.com/icons/dapino/beauty/48/nail-polish-icon.png" 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>
                </ul>
            </nav>
        </header>
        <main>
            <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="https://www.freecodecamp.com/email-submit" 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">
                </form>
                <ul class="form-lists">
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>
                    <li>
                        <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>
                    </li>

                    <li>
                        <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>
                    </li>
                </ul> 
            </section>

            <section class="video" id="perfect-nails">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/zgyFldjaP_w" id="video"></iframe>
            </section>

            <section class="text" id="pricing">
                <div class="texts">
                    <h3>Manicure</h3>
                    <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>
                <div class="texts">
                    <h3>Pedicure</h3>
                    <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>
                <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">
                </div>
            </section>

            <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>
                <div class="extra-info">  
                    <p>Privacy</p>
                    <p>Terms</p>
                    <p>Contact</p>
                </div>
                <div>
                    <p>&#169;<span class="dancing">Dreams Nails</span></p>
                </div>  
            </section>
        </main>
    </body>
</html>

Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

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
3

This worked wonderfully. Thank you so much :blush:

1 Like
4

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