Product Landing Page - Build a Product Landing Page

HTML-CSS
1

What’s happening:
I’m struggling with step 10: 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 ).

My code so far

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta charset="utf-8" />
        <title>Original Trombones</title>
        <link rel="stylesheet" href="styles.css" />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
            integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <header id="header" class="flex-container">
            <img
                src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
                alt="Original Trombones"
                id="header-img"
            />
            <nav id="nav-bar">
                <ul class="flex-container">
                    <li><a class="nav-link" href="#features">Features</a></li>
                    <li>
                        <a class="nav-link" href="#how-it-works"
                            >How It Works</a
                        >
                    </li>
                    <li><a class="nav-link" href="#pricing">Pricing</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <div id="hero">
                <h2 id="hero-title">Handcrafted, home-made masterpieces</h2>
                <form
                    action="https://www.freecodecamp.com/email-submit"
                    id="form"
                >
                    <input
                        type="email"
                        name="email"
                        id="email"
                        placeholder="Enter your email address"
                    />
                    <input id="submit" type="submit" value="Get started" />
                </form>
            </div>

            <section id="features">
                <div class="flex-container">
                    <div class="icon flex-container flex-center">
                        <i class="fa fa-fire fa-3x"></i>
                    </div>
                    <div class="desc flex-container flex-column">
                        <h2>Premium Materials</h2>
                        <p>
                            Our trombones use the shiniest brass which is
                            sourced locally. This will increase the longevity of
                            your purchase.
                        </p>
                    </div>
                </div>
                <div class="flex-container">
                    <div class="icon flex-container flex-center">
                        <i class="fa fa-truck fa-3x"></i>
                    </div>
                    <div class="desc flex-container flex-column">
                        <h2>Fast Shipping</h2>
                        <p>
                            We make sure you recieve your trombone as soon as we
                            have finished making it. We also provide free
                            returns if you are not satisfied.
                        </p>
                    </div>
                </div>
                <div class="flex-container">
                    <div class="icon flex-container flex-center">
                        <i class="fa fa-battery-full fa-3x"></i>
                    </div>
                    <div class="desc flex-container flex-column">
                        <h2>Quality Assurance</h2>
                        <p>
                            For every purchase you make, we will ensure there
                            are no damages or faults and we will check and test
                            the pitch of your instrument.
                        </p>
                    </div>
                </div>
            </section>

            <section id="how-it-works" class="flex-container flex-center">
                <iframe
                    id="video"
                    width="560"
                    height="315"
                    src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc"
                    title="YouTube video player"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    allowfullscreen
                ></iframe>
            </section>

            <section id="pricing" class="flex-container flex-center">
                <div class="product">
                    <div class="product-title">
                        <p>TENOR TROMBONE</p>
                    </div>
                    <h2>$600</h2>
                    <div class="product-desc">
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum dolor.</p>
                        <p>Lorem ipsum.</p>
                    </div>
                    <button>Select</button>
                </div>
                <div class="product">
                    <div class="product-title">
                        <p>BASS TROMBONE</p>
                    </div>
                    <h2>$900</h2>
                    <div class="product-desc">
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum dolor.</p>
                        <p>Lorem ipsum.</p>
                    </div>
                    <button>Select</button>
                </div>
                <div class="product">
                    <div class="product-title">
                        <p>VALVE TROMBONE</p>
                    </div>
                    <h2>$1200</h2>
                    <div class="product-desc">
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum.</p>
                        <p>Lorem ipsum dolor.</p>
                        <p>Lorem ipsum.</p>
                    </div>
                    <button>Select</button>
                </div>
            </section>
        </main>
        <footer id="footer">
            <div class="flex-container flex-column">
                <nav>
                    <ul class="flex-container">
                        <li><a href="#" class="nav-link">Privacy</a></li>
                        <li><a href="#" class="nav-link">Terms</a></li>
                        <li><a href="#" class="nav-link">Contact</a></li>
                    </ul>
                </nav>
                <p class="copyright">Copyright 2016, Original Tromboness</p>
            </div>
        </footer>
    </body>
</html>

CSS:

:root {
    --gray: #eee;
    --gray2: #525252;
    --gray3: #d8d8d8;
    --yellow: #f1c40f;
    --orange: #ffa723;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    font-family: sans-serif;
}

body {
    background-color: var(--gray);
}

.flex-container {
    display: flex;
}

.flex-center {
    align-items: center;
    justify-content: center;
}

.flex-column {
    flex-direction: column;
}

#header,
#footer {
    width: 100vw;
}

#header {
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    padding: 15px 30px;
    background-color: var(--gray);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

#header-img {
    width: auto;
    height: 40px;
    padding: 5px;
}

nav ul {
    list-style-type: none;
}

#nav-bar a {
    padding: 10px 20px;
}

#nav-bar a:hover {
    background-color: var(--gray2);
    color: white;
}

.nav-link {
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    color: black;
}

main,
#footer div {
    max-width: 1000px;
    width: 100%;
}

main {
    position: relative;
    margin: auto;
    z-index: 0;
    margin-top: 80px;
}

#hero {
    margin: 0 auto;
    padding-top: 20px;
    width: fit-content;
}

#hero-title {
    font-weight: 600;
    font-size: 1.3rem;
}

#hero input {
    display: block;
    margin: 15px auto;
}

#email {
    width: 250px;
    text-align: center;
    padding: 5px 0;
}

#email::placeholder {
    color: var(--gray2);
}

#submit {
    font-weight: bold;
    font-size: 1rem;
    text-transform: uppercase;
    padding: 5px 10px;
    border: none;
    background-color: var(--yellow);
}

#features {
    margin: 100px 20px 50px 20px;
}

.icon {
    width: 20%;
    height: 120px;
    color: var(--orange);
}

.desc {
    justify-content: center;
    width: 80%;
}

.desc h2 {
    font-weight: 600;
}

.desc p {
    margin-top: 5px;
    font-size: 0.9rem;
}

#yt-video {
    margin: 0 20px;
}

#pricing {
    flex-wrap: wrap;
    margin: 50px 0 30px 0;
}

.product {
    width: 30%;
    min-width: 250px;
    margin: 0 10px 20px 10px;
    border: 1px solid black;
}

.product p,
.product h2 {
    text-align: center;
}

.product h2 {
    margin-top: 15px;
    font-weight: 600;
}

.product-desc {
    margin: 15px 0;
}

.product-title {
    font-weight: 600;
    padding: 10px 70px;
    background-color: var(--gray3);
}

.product button {
    display: block;
    margin: 30px auto 15px auto;
    padding: 10px 20px;
    border: none;
    background-color: var(--yellow);
    text-transform: uppercase;
    font-size: 1.05rem;
}

#footer {
    padding: 20px;
    background-color: var(--gray3);
    font-size: 0.9rem;
}

#footer div {
    margin: auto;
    align-items: flex-end;
    justify-content: center;
}

#footer a {
    padding-left: 20px;
}

#footer p {
    margin-top: 3px;
    color: var(--gray2);
}

@media only screen and (max-width: 755px) {
    #header {
        flex-direction: column;
        padding-top: 15px;
    }

    #nav-link {
        padding: 5px 10px 5px 10px;
    }

    #header-img {
        padding-top: 0;
        margin-bottom: 10px;
    }

    main {
        margin-top: 110px;
    }
}

My user agent:

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:
Build a Product Landing Page

2
  • You have lots of blank spaces before the closing right angle >
  • The frameborder attribute on the iframe element is obsolete. Use CSS instead.

Anyway, the code has passed the test on my side.

Try the following:
“Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.”

3

You have lots of blank spaces before the closing right angle >``
The formatter in VSCode caused this

5

I have disabled ad-blockers and dark mode extensions but it didn’t work

6

Bruh! I found the problem in the HTML code, it’s in these .nav-link in the footer:

<footer id="footer">
        <div class="flex-container flex-column">
            <nav>
                <ul class="flex-container">
                    <li><a href="#" class="nav-link">Privacy</a></li>
                    <li><a href="#" class="nav-link">Terms</a></li>
                    <li><a href="#" class="nav-link">Contact</a></li>
                </ul>
            </nav>
            <p class="copyright">Copyright 2016, Original Tromboness</p>
        </div>
    </footer>

Just change href="#" to the value of any other element’s id, like:

<footer id="footer">
        <div class="flex-container flex-column">
            <nav>
                <ul class="flex-container">
                    <li><a href="#hero" class="nav-link">Privacy</a></li>
                    <li><a href="#hero" class="nav-link">Terms</a></li>
                    <li><a href="#hero" class="nav-link">Contact</a></li>
                </ul>
            </nav>
            <p class="copyright">Copyright 2016, Original Tromboness</p>
        </div>
    </footer>

Thanks for you support btw!

7

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