The test “21. Your #form should have an action attribute of https://www.freecodecamp.com/email-submit.” won’t pass. My form definitely has an action attribute.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
<header id="header">
<img id="header-img" src="https://tse2.mm.bing.net/th/id/OIP.EDsVhcKEUsuZuUQY37pT4gHaHa?rs=1&pid=ImgDetMain" alt="Drone logo">
<nav id="nav-bar">
<a class="nav-link" href="#description">Description</a>
<a class="nav-link" href="#video">Video</a>
<a class="nav-link" href="#form">Contact</a>
</nav>
</header>
<main>
<h1>Our Product</h1>
<div class="grid">
<div>
<img src="https://blogs.icrc.org/app/uploads/sites/102/2022/03/Drone-image-1096x620.jpg" alt="drone">
</div>
<div>
<p class="price">$27359</p>
<div class="stock">
<div class="circle"></div>
<p>In stock</p>
</div>
<input type="button" class="button-white" value="Add to cart">
<input type="button" class="button-red" value="Buy Now!">
<p>Shipping is guarranteed. Returns within 30 days free</p>
</div>
</div>
<h2 id="description">Description</h2>
<p class="desc-p">Take your flight experience to the next level with our high-performance FPV drone, engineered for speed, precision, and total immersion. Whether you're a seasoned pilot or just starting out, this drone delivers an unparalleled first-person view with ultra-low-latency HD video transmission, keeping you in complete control as you race through the skies.</p>
<p class="desc-p">Equipped with a powerful brushless motor system, aerodynamic frame, and responsive flight controls, it offers lightning-fast acceleration, razor-sharp turns, and smooth, stabilized footage. Whether you're carving through tight spaces in high-speed drone racing or capturing stunning cinematic aerial shots, this FPV drone ensures top-tier performance.</p>
<p class="desc-p">Designed with both durability and customization in mind, it features a rugged yet lightweight frame that can handle high-impact maneuvers, along with modular components that allow easy upgrades and repairs. Intelligent safety features, including failsafe return-to-home and low-battery alerts, give you the confidence to push your limits without worry.</p>
<p class="desc-p">Get ready to experience the freedom of flight like never before—dive, roll, and soar through the air with unmatched agility. Whether for racing, freestyle flying, or professional cinematography, this FPV drone is your gateway to an exhilarating new world.</p>
<h2>Video</h2>
<div class="video-wrapper">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/dwde9xLyB_s?si=zFLkqeADzd0go-gM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<h2>Contact us for more information</h2>
<form id="form" action="https://www.freecodecamp.org/email-submit">
<input type="email" id="email" class="form-field" name="email" placeholder="joe@example.com" required>
<input type="submit" class="button-red" id="submit" value="Submit">
</form>
</main>
</body>
</html>
CSS:
* {
box-sizing: border-box;
--navbar-height: 70px;
margin: 0;
font-family: Roboto;
}
/* Header */
#header {
background-color: red;
height: var(--navbar-height);
overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
}
#header-img {
height: 100%;
padding: 3px;
}
nav {
height: var(--navbar-height);
}
.nav-link {
height: var(--navbar-height);
line-height: var(--navbar-height);
color: white;
text-decoration: none;
padding: 0 20px;
display: inline-block;
}
.nav-link:hover {
background-color: grey;
border-bottom: 5px solid #444;
}
/* Main */
main {
padding: 50px 20px;
max-width: 1278px;
margin: auto;
}
.video-wrapper {
overflow: hidden;
}
h1 {
text-align: center;
margin: 30px 0;
}
h2 {
margin: 40px 0 20px 0;
}
.desc-p {
line-height: 1.4;
margin: 10px 0;
font-size: 18px;
}
/* Form */
form * {
display: block;
margin: 15px 0;
width: 100%;
max-width: 500px;
height: 40px;
}
.form-field {
padding: 10px;
border: 2px solid #ccc;
border-radius: 5px;
font-size: 15px;
}
.form-field:hover {
border: 2px solid grey;
}
/* Buttons */
.grid input {
width: 100%;
height: 50px;
font-size: 20px;
}
.button-white {
border: 2px solid red;
background-color: white;
color: red;
border-radius: 5px;
}
.button-red {
border: none;
background-color: red;
color: white;
border-radius: 5px;
font-size: 18px;
}
.button-red:hover {
background-color: grey;
cursor: pointer;
}
.button-red:active {
background-color: #666;
}
.button-white:hover {
border: 2px solid grey;
color: grey;
cursor: pointer;
}
.button-white:active {
border: 3px solid grey;
color: #555;
}
/* Grid styling */
.grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3vw;
}
img {
max-width: 100%;
}
.circle {
background-color: limegreen;
height: 10px;
width: 10px;
border-radius: 50%;
}
.stock * {
display: inline-block;
}
.stock {
margin: 3px 0 30px 0;
}
.grid input {
margin: 3px 0;
}
.grid input:last-of-type {
margin-bottom: 10px;
}
.price {
font-size: 20px;
}
/* media queries */
@media (max-width: 750px) {
.grid {
grid-template-columns: 1fr;
}
.stock {
margin: 3px 0 15px 0;
}
}
Thanks for the help 
By the way, any other tips or feedback to improve my code?