Product Landing Page - Build a Product Landing Page

HTML-CSS
1

Tell us what’s happening:I have passed every other requirements except this one

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 code so far

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JOSEPH Product Landing Page</title>
     <link rel="stylesheet" href="styles.css" />
     <link
    href="https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css"
    rel="stylesheet"
/>

    </head>
    <body>
    <header id="header">
    <nav id="nav-bar">
    <div class="logo-container">
    <img src="https://th.bing.com/th/id/OIP.ibTM--zhecDTBkx9abSXmAHaEK?rs=1&pid=ImgDetMain" alt="logo"  id="header-img"/>
    <span class="the-product">LOLA AUTOMOBILE</span>
    </div>
    <ul class="nav-links">
        <li><a href="#Home" class="nav-link">Home</a></li>
         <li><a href="#About" class="nav-link">About</a></li>
          <li><a href="#Services" class="nav-link">Services</a></li>
           <li><a href="#Cars" class="nav-link"> Cars</a></li>
            <li><a href="#Contacts" class="nav-link">Contacts</a></li>
    </ul>
    </nav>
    </header>
<section id="email-section">
    <h2>Rent your Dream Car</h2>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input id="email" type="email" required placeholder="Enter your email address" name="email"/>
    <input id="submit" type="submit" value="GET STARTED"/>
    </form>
</section>

<section id="features">
<div class="feature">
   <i class="ri-car-fill ri-4x icon"></i>
   <div>
       <h2>Drive the Difference </h2>
       <p>Unleash Style, Power, and Precision with Lola's automobile. Elevate Your Drive, Define Your Journey</p>
   </div>
</div>
<div class="feature">
    <i class="ri-bus-2-fill ri-4x icon"></i>
    <div>
       <h2>Select the best deal for that getaway</h2>
       <p>Where comfort meets efficiency, and every mile becomes a shared memory. All aboard for a ride that transcends transportation; it's a journey worth taking together!</p>
   </div>
</div>
<div class="feature">
     <i class="ri-truck-fill ri-4x icon"></i>
     <div>
       <h2>Elevate your drive, conquer the road </h2>
       <p>Our trucks are built to haul success! Power through possibilities, where strength meets reliability. Unleash the horsepower, embrace the journey!</p>
   </div>
</div>
<div class="feature">
    <i class="ri-charging-pile-2-fill ri-4x icon"></i>
    <div>
       <h2>Charge into the future with our electric cars</h2>
       <p>Driving innovation, powering sustainability. Unplug from the ordinary and cruise into a cleaner, brighter tomorrow!"</p>
   </div>
</div>
<div class="feature">
    <i class="ri-motorbike-fill ri-4x icon"></i>
    <div>
       <h2>Gear up for adventure with our bikes</h2>
       <p>Where every ride is a journey and every journey is an experience. Ride the extraordinary, choose the extraordinary!</p>
   </div>
</div>
</section>
<section id="audio">
<iframe 
id="video"
 
height="400" 
src="https://www.youtube.com/embed/nouE62nKphk?si=83fKSYZoo5UHi3-Y" 
title="YouTube video player"
frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</section>

<section id=" for_rent">
    <h2>For Rent</h2>
    <div class="product-cars">
        <div class="car">
            <div class="product-image product1"></div>
    <h3 class="header">Maserati 3500 GT</h3>
    <p class="content"></p>
    <div class="flex">
        <p class="main-price"> $60</p>
        <p class="old-price">$80</p>
    </div>
    <button class="pick">
       PICK
    </button>
        </div>
        <div class="car">
            <div class="product-image product2"></div>
    <h3 class="header">Maserati Folgore</h3>
    <p class="content"></p>
    <div class="flex">
        <p class="main-price">$70</p>
        <p class="old-price">$90</p>
    </div>
    <button class="pick">
       PICK
    </button>
        </div>
        <div class="car">
            <div class="product-image product3"></div>
    <h3 class="header">Maserati Ghibli</h3>
    <p class="content"></p>
    <div class="flex">
        <p class="main-price">$45</p>
        <p class="old-price">%60</p>
    </div>
    <button class="pick">
       PICK
    </button>
        </div>
        <div class="car">
            <div class="product-image product4"></div>
    <h3 class="header">Maserati Levante Truck</h3>
    <p class="content"></p>
    <div class="flex">
        <p class="main-price">$100</p>
        <p class="old-price">$135</p>
    </div>
    <button class="pick">
       PICK
    </button>
        </div>
        <div class="car">
            <div class="product-image product5"></div>
    <h3 class="header">Maserati Mistral 4000 Spider</h3>
    <p class="content"></p>
    <div class="flex">
        <p class="main-price">$95</p>
        <p class="old-price">$105</p>
    </div>
    <button class="pick">
       PICK
    </button>
        </div>
    </div>
</section>
    </body>
    </html>

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

2

Welcome to the forum @anisemuyiwa

You posted the code for the header element.

Use the following method to post the rest of the code so the forum can assist:

  1. On a separate line type three back ticks.
  2. On a separate line paste your code.
  3. On the last line type three back ticks. Here is a single back tick `

Happy coding.

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4

first, you can right click in the editor and choose format document for your html to be tidied up

I don’t see in your code the corresponding elements
Can you point them out for me please?

5

Hi @anisemuyiwa

At the moment, clicking on a link from the navbar does not take me to that part of the web page. Each section element needs to have an id attribute value that matches the href attribute value.

If you did the Technical Documentation Page project, you can look at that code to get an idea of what is required.

Happy coding

1 Like
6

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