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