Tell us what’s happening:
Product Landing Page - Stitched Sections and Submit Button issues
I’m working on the Product Landing Page project and I’m having some trouble passing two specific User Stories.
The issues I’m facing:
The test for the submit button keeps failing: You should have an input element with an `id = "submit." ` (Even though I have an element with that ID).
My layout is nesting sections incorrectly and the navigation links to #features are not working properly.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<img
id="header-img"
src="https://developer.mozilla.org/static/ssr/mdn_contributor.9e2a105f50828d5a.png"
alt="Logo del prodotto"
>
<nav id="nav-bar">
<a class="nav-link" href="#features">Caratteristiche</a>
<a class="nav-link" href="#video-section">Demo</a>
<a class="nav-link" href="#pricing">Prezzi</a>
</nav>
</header>
<main>
<section id="submit">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" id="email" placeholder="Inserisci la tua email" required>
<input type="submit" id="submit" value="Inizia">
</form>
</section>
<section id="video-section"><iframe src="https://www.youtube.com/embed/esempio" width="560" height="315" id="video"></iframe>
</section>
<section id="features">
</section>
<section id="pricing">
</section>
</section>
</main>
</body>
</html>
/* file: styles.css */
body{
margin:0;
background-color:#f4f4f4;
font-family: sans-serif;
color: #333;
}
#header {
width: 100%;
top:0;
position: fixed;
left:0;
display: flex;
justify-content: space-between;
padding: -20px 10px;
box-sizing: border-box;
}
#header-img {
max-height: 50px;
width: auto;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0
Challenge Information:
Build a Product Landing Page - Build a Product Landing Page