Tell us what’s happening: Each .nav-link element should have an href attribute which i did in my code but it’s still not passing me
### 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">
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
nav {
display: flex;
justify-content: center;
position: fixed;
top: 0;
width: 100%;
background-color: #333;
z-index: 1000;
}
.nav-link {
margin: 0 15px;
}
section {
padding: 40px;
margin-top: 60px;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
iframe,
video {
width: 100%;
height: 400px;
}
.price-option {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
button {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #555;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
/* Media Query for Responsive Design */
@media (max-width: 600px) {
header {
padding: 10px;
}
nav {
flex-direction: column;
}
.nav-link {
margin: 10px 0;
}
section {
padding: 20px;
margin-top: 30px;
}
iframe,
video {
height: 200px;
}
.price-option {
padding: 10px;
}
button {
padding: 5px;
}
}
</style>
<title>Your Product Landing Page</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Update your navigation links or menu items here -->
<ul>
<li class="nav-link"><a href="#features">Features</a></li>
<li class="nav-link"><a href="#video">Demo</a></li>
<li class="nav-link"><a href="#pricing">Pricing</a></li>
<!-- Add more .nav-link elements as needed -->
</ul>
</nav>
<img id="header-img" src="your-image-url.jpg" alt="Product Image">
<h1>Your Product Name</h1>
<p>A brief tagline or description of your product.</p>
</header>
<section id="features">
<h2>Key Features</h2>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<!-- Add more features as needed -->
</ul>
</section>
<section id="video">
<h2>Product Demo</h2>
<!-- Use either iframe or video element based on your content -->
<iframe id="video" src="https://www.youtube.com/embed/your-video-id" frameborder="0" allowfullscreen></iframe>
<!-- or -->
<!-- <video id="video" controls>
<source src="your-video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video> -->
</section>
<section id="pricing">
<h2>Pricing</h2>
<div class="price-option">
<h3>Basic Plan</h3>
<p>Get started with our basic plan. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="price">$19.99/month</p>
<button>Choose Plan</button>
</div>
<div class="price-option">
<h3>Pro Plan</h3>
<p>Unlock premium features with our pro plan. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="price">$39.99/month</p>
<button>Choose Plan</button>
</div>
</section>
<section id="form">
<h2>Contact Us</h2>
<form action="https://www.freecodecamp.com/email-submit" method="post" id="form">
<!-- Include your form fields here -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
<input type="submit" id="submit" value="Submit">
</form>
</section>
<footer>
<p>© 2023 Your Company Name. All rights reserved.</p>
</footer>
<script>
// Your existing JavaScript code here
</script>
</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/120.0.0.0 Safari/537.36
Challenge Information:
Product Landing Page - Build a Product Landing Page