Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Home Decor</title>
</head>
<body>
    <header id="header">
        <img id="header-img" src="https://i.pinimg.com/140x140_RS/9a/4d/92/9a4d92e9ded571ccd872f550da0b0982.jpg" alt="Logo">
        <nav id="nav-bar">
            <ul>
                <li><a class="nav-link" href="#materials">Features</a></li>
                <li><a class="nav-link" href="#price">Pricing</a></li>
                <li><a class="nav-link" href="#video">How it works</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="section1">
            <h2>Features</h2>
            <h3>Premium Mateials</h3>
            <p>Crafted from the finest materials, our sofas feature top-grain leathers, high-density foam, and sustainable wood frames.</p>
            <h3>Quality Assurance</h3>
            <p> We offer comprehensive warranties and exceptional customer service, ensuring your complete satisfaction and peace of mind.</p>
            <h3>Fast Shipping</h3>
            <p> Our streamlined process ensures prompt delivery, so you can start enjoying your new piece without delay.</p>
        </section>

          <section id="pricing">
            <h2>Pricing</h2>
            <table>
                <tr>
                    <th>Product</th>
                    <th>Image</th>
                    <th>Price</th>
                    <th>Select</th>
                </tr>
                <tr>
                    <td>Luxurious Velvet Chesterfield Settee Couch Set</td>
                    <td><img src="https://m.media-amazon.com/images/I/71j94jlVxKL._AC_CR0%2C0%2C0%2C0_SX615_SY462_.jpg" alt="Velvet Chesterfield Settee Couch Set"></td>
                    <td>$949.00

                    </td>
                        <td><button onclick="selectProduct('chesterfield')">Select</button></td>
                </tr>
                <tr>
                    <td>Power Reclining Sectional Sofa with Console</td>
                    <td><img src="https://m.media-amazon.com/images/I/717si0w6cML._AC_SL1500_.jpg" alt="Power Reclining Sectional Sofa with Console"></td>
                    <td>$1,699.00</td>
                        <td><button onclick="selectProduct('reclining-sectional')">Select</button></td>
                </tr>
                <tr>
                    <td>100" Microfiber L Shape Sleeper Sectional Sofa with Pullout Bed</td>
                    <td><img src="https://m.media-amazon.com/images/I/81zjEvyyoUL._AC_SX679_.jpg" alt="Microfiber L Shape Sleeper Sectional Sofa with Pullout Bed"></td>
                    <td>$1,499.00</td>
                        <td><button onclick="selectProduct('microfiber-sleeper')">Select</button></td>
                </tr>
            </table>
        </section>


        <section id="how_it_works">
            <h2>How it works</h2>
            <video id="video" controls>
                <source src="https://m.media-amazon.com/images/S/aplus-media/sc/d2572ee0-f6e7-42b6-9f1e-ff409266f26b.mp4" type="video/mp4">
            </video>
        </section>

        <section id="form-section">
            <h2>Subscribe</h2>
            <form id="form" action="https://www.freecodecamp.com/email-submit">
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
                <input type="submit" id="submit" value="Submit">
            </form>
        </section>
    </main>
</body>
</html>          

/* file: styles.css */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

can you point out where do you have elements that have ids that match these hrefs?

4

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.

this two parts of my code is not checking and i need help

5

i have done the necesssary corrections but i need help with this part “Your #nav-bar should always be at the top of the viewport.” for my code to check

6

hi there!
you need to add #nav-bar slector within the css file. add position property with the value absolute and top value 0 for to place your navbar on the top of the page .

7

thanks i have done that

1 Like
8

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