Product Landing Page - Build a Product Landing Page

Tell us what’s happening:

Hi I’m stuck on the 3 last step of the project i try everything but it’s seems not to work maybe I’m wrong somewhere i will appreciate to received help

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">
    <title>Basketball Training Program</title>
</head>
<body>
  <header id="header">
      <h1>Basketball Mastery Program</h1>
       <img id="header-img" src="https://www.canva.com/design/DAGMbuhLMFs/i-vf4aVgubJUB76sPXhslA/view?utm_content=DAGMbuhLMFs&utm_campaign=designshare&utm_medium=link&utm_source=editor" alt="Basketball Program Logo">
  <nav id="nav-bar">
    <ul>
        <li><a class="nav-link" id="home" href="#home">Home</a></li>
        <li><a class="nav-link" id="about" href="#about">About</a></li>
        <li><a class="nav-link" id="program" href="#program">Program</a></li>
        <li><a class="nav-link" id="signup" href="#signup">Sign Up</a></li>
    </ul>
  </nav> 
    <div id="home" class="hero">
        <h1>Elevate Your Game</h1>
    </div>
    <div id="about" class="container">
        <div class="content">
            <div class="text">
                <h2>About the Program</h2>
                <p>Our basketball training program is designed for players of all levels who want to improve their skills and take their game to the next level. Whether you're a beginner or an advanced player, our program offers personalized training that focuses on all aspects of the game.</p>
                <h2>What You'll Learn</h2>
                <ul>
                    <li>Dribbling techniques</li>
                    <li>Shooting drills</li>
                    <li>Defensive strategies</li>
                    <li>Physical conditioning</li>
                    <li>Mental toughness</li>
                </ul>
            </div>
            <img src="https://example.com/path-to-your-basketball-training.jpg" alt="Basketball Training">
        </div>
    </div>
    <div id="program" class="container">
        <div class="content">
            <div class="text">
                <h2>Program Highlights</h2>
                <p>Join our comprehensive basketball training program to transform your skills and become a better player.</p>
            </div>
   </div>
            <iframe id="video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
    </div>
     <div id="signup" class="cta">
        <h2>Join Now and Transform Your Skills</h2>
        <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input type="text" name="name" placeholder="Your Name" required>
            <input type="email" name="email" placeholder="Your Email" id="email" required>
            <textarea name="message" placeholder="Your Message" required></textarea>
            <input type="submit" id="submit">Submit</input>
        </form>
    </div>
  </header>
</body>    -->

/* body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 1em 0;
            text-align: center;
            position: relative;
        }
        #header-img {
            max-width: 100px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        #nav-bar {
            background-color: #333;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            padding: 10px 0;
        }
        #nav-bar ul {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: center;
            margin: 0;
        }
        #nav-bar ul li {
            margin: 0 1em;
        }
        #nav-bar ul li a {
            text-decoration: none;
            color: #fff;
            font-weight: bold;
        }
        .nav-link {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            padding: 20px;
            padding-top: 70px; /* Add padding to avoid content being hidden under fixed navbar */
        }
        .hero {
            background: url('https://example.com/path-to-your-basketball-hero.jpg') no-repeat center center/cover;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
        }
        .hero h1 {
            font-size: 3em;
            margin: 0;
        }
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .content .text {
            flex: 1;
            margin: 20px;
        }
        .content img {
            flex: 1;
            max-width: 100%;
            height: auto;
            margin: 20px;
        }
        #video {
            width: 100%;
            height: 400px;
            margin: 40px 0;
            display: block;
        }
        .cta {
            text-align: center;
            margin: 40px 0;
        }
        .cta button {
            padding: 10px 20px;
            font-size: 1.2em;
            color: white;
            background-color: #e63946;
            border: none;
            cursor: pointer;
        }
        form {
            max-width: 600px;
            margin: auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        form input, form textarea, form button {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
        }
        form button {
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 1em 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
        @media (max-width: 768px) {
            .content {
                flex-direction: column;
                align-items: center;
            }
            #nav-bar ul {
                flex-direction: column;
            }
            #nav-bar ul li {
                margin: 0.5em 0;
            }
            .hero h1 {
                font-size: 2em;
            }
            #video {
                height: 250px;
            }
        } */

Your browser information:

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

Challenge Information:

Product Landing Page - Build a Product Landing Page

hi there!
first you need to link your html to the ccs file. you have missing the link element within the head.

second , you have all of your html content within the header element. header should be contain only h1 img and navbar.

third, you should not have the same id attribute value for any other element.

for you it is better to remove the id attribute and its value from the anchor tags.

Thank you for the advise i even don’t know how i missed that

1 Like