There is an <iframe> element with id and src attributes in my code, but the validator cannot find this element (points 11 and 12 of the test).
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Defines the document type and specifies the language of the document as English -->
<meta charset="UTF-8">
<!-- Sets the character encoding to UTF-8 for proper text rendering -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Ensures the page is responsive and scales properly on all devices -->
<link rel="stylesheet" href="styles.css">
<!-- Links an external stylesheet to style the page -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Links to Font Awesome for icons, providing a secure and anonymous link -->
<title>Product Landing Page</title>
<!-- Specifies the title of the webpage displayed in the browser tab -->
</head>
<body>
<header id="header">
<!-- Main header section of the page -->
<div id="title">
<!-- Container for the logo and title -->
<img src="lorem-ipsum-logo.png" alt="Logo" id="header-img">
<!-- Displays the company logo -->
<span>Lorem Ipsum</span>
<!-- Displays the site title -->
</div>
<nav id="nav-bar">
<!-- Navigation bar for page sections -->
<a href="#video" class="nav-link">Video</a>
<!-- Link to the video section -->
<a href="#features" class="nav-link">Features</a>
<!-- Link to the features section -->
<a href="#pricing" class="nav-link">Pricing</a>
<!-- Link to the pricing section -->
<a href="#newsletter" class="nav-link">Newsletter</a>
<!-- Link to the newsletter section -->
</nav>
</header>
<main>
<!-- Main content of the page -->
<section id="video">
<!-- Section for embedded video -->
<iframe id="video" width="866" height="487" src="https://www.youtube.com/embed/cC2CchIoP0Q?autoplay=1&mute=1" title="Lorem Ipsum (Product Landing Page)" allow="autoplay" referrerpolicy="strict-origin-when-cross-origin"></iframe>
<!-- YouTube video iframe with autoplay enabled -->
</section>
<section id="features">
<!-- Section showcasing product features -->
<h1>Features</h1>
<div class="cards">
<!-- Container for feature cards -->
<div class="card">
<!-- Individual feature card -->
<h2>Feature 1</h2>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi in posuere massa. Duis elit arcu.</p>
</div>
<div class="card">
<h2>Feature 2</h2>
<p>Quisque accumsan nunc et hendrerit feugiat. Vestibulum condimentum ante orci, eget fringilla turpis malesuada sit amet. Nulla ornare bibendum nunc.</p>
</div>
<div class="card">
<h2>Feature 3</h2>
<p>Quisque non risus nec velit cursus fringilla. Donec tellus purus, tincidunt quis ornare id, mattis quis neque. Mauris erat arcu.</p>
</div>
<div class="card">
<h2>Feature 4</h2>
<p>Nullam congue sapien in mollis tristique. Ut molestie massa quis ornare suscipit. Pellentesque habitant morbi tristique senectus et netus et.</p>
</div>
</div>
</section>
<section id="pricing">
<!-- Section detailing pricing options -->
<h1>Pricing</h1>
<div class="cards">
<!-- Container for pricing cards -->
<div class="card">
<!-- Individual pricing card -->
<h2>Option 1</h2>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi in posuere massa. Duis elit arcu.</p>
<button class="button">Buy</button>
<!-- Button for purchasing the first option -->
</div>
<div class="card">
<h2>Option 2</h2>
<p>Quisque accumsan nunc et hendrerit feugiat. Vestibulum condimentum ante orci, eget fringilla turpis malesuada sit amet. Nulla ornare bibendum nunc.</p>
<button class="button">Buy</button>
<!-- Button for purchasing the second option -->
</div>
<div class="card">
<h2>Option 3</h2>
<p>Quisque non risus nec velit cursus fringilla. Donec tellus purus, tincidunt quis ornare id, mattis quis neque. Mauris erat arcu.</p>
<button class="button">Buy</button>
<!-- Button for purchasing the third option -->
</div>
</div>
</section>
<section id="newsletter">
<!-- Section for subscribing to the newsletter -->
<h1>Newsletter</h1>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<!-- Form for email submission -->
<input type="email" id="email" name="email" placeholder="Enter your email"><br>
<!-- Email input field with placeholder text -->
<input type="submit" id="submit" class="button" value="Send"/>
<!-- Submit button to send the form -->
</form>
</section>
</main>
<!-- Footer section with a GitHub link -->
<footer>
<!-- Link to my repo -->
<a href="https://github.com/green-glitch/product-landing-page"><i class="fa-brands fa-github"></i></a>
</footer>
</body>
</html>
/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body{
font-family: sans-serif;
background-color: white;
}
header {
width: 100vw;
background-color: white;
position: fixed;
display: flex;
top: 0;
left: 0;
}
#header-img {
width: min(10vw, 100px);
}
header div#title {
display: flex;
align-items: center;
width: 70%;
}
header span {
font-size: 50px;
}
#nav-bar {
padding-right: 30px;
padding-bottom: 10px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
width: 30%;
gap: 30px;
}
#nav-bar a {
text-decoration: none;
color: black;
font-size: large;
}
#nav-bar a:hover{
color: #09f;
}
main {
margin: 0 auto;
width: 85%;
}
section {
padding: 0;
margin: 0;
padding-top: 100px;
text-align: center;
min-height: 400px;
}
p {
font-size: 20px;
}
section h1 {
font-size: 60px;
}
input {
font-size: large;
}
#email {
width: 250px;
margin-bottom: 10px;
}
.cards {
display: flex;
margin: 0 auto;
}
iframe {
width: 70%;
height: 500px;
}
.button {
background-color: white;
border: black 3px solid;
border-radius: 5px;
width: 100px;
font-weight: bold;
}
.button:hover {
background-color: #bbb;
}
footer {
width: 100vw;
height: 50px;
background-color: white;
position: fixed;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
}
footer a {
font-size: 40px;
text-decoration:none;
color: blue;
}
@media only screen and (max-width: 767px){
header {
display: block;
width: 100%;
}
header div#title {
width: 100%;
justify-content: center;
}
#header-img {
width: min(10vw, 100px);
}
header span {
font-size: 40px;
}
#nav-bar {
width: 100%;
padding-right: 0;
padding-bottom: 0;
display: block;
}
#nav-bar a {
display: block;
padding: 5px 0;
text-align: center;
}
section {
padding-top: 30vh;
}
section div h1 {
font-size: 8vh;
}
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0
Challenge Information:
Product Landing Page - Build a Product Landing Page
