Tell us what’s happening:
Describe your issue in detail here.
It keeps saying that everything I put for the input email is wrong. But I have googled and looked at other people’s and don’t see a difference. This is the only thing keeping me from finishing this project.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en" dir="ltr" data-cast-api-enable="true">
<head>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header id="header">
<div class="logo">
<img id="header-img" src="https://olddesignshop.com/wp-content/uploads/2015/06/OldDesignShop_LeatherHorseSaddle.jpg" alt="AF Custom Saddlery logo"/>
<a class="company-name"> AF Custom Saddlery</a>
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#How_to_Order">How to Order</a></li>
<li> <a class="nav-link" href="#Watch_the_Process">What the Process</a></li>
<li> <a class="nav-link" href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="email">
<h2>Handcrafted with Luxary Leather</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" placeholder="Enter your email address" type="email" name="email" required>
<br><input id="submit" type="submit" value="Submit" class="button"/></br>
</form>
</section>
<div class="main">
<section id="How_to_Order">
<p class="order">Are you ready to order your custom saddle? If so here is how to order:
</p>
<p class="order">1) Submit your email in the box above
</p>
<p class="order">2) You will get an email with a form that shows your options for each part of the saddle. Please fill out that form and email it back.
</p>
<p class="order">3) Once the from has been recieved we will do a drawing design of your saddle with everything you want. We will email it back to you with a quote price for approval. Once approved we will get started right away!
</p>
</section>
<section id="Watch_the_Process">
<iframe id="video" height="315" src="https://www.youtube.com/watch?v=jUyiaCpxjOA&t=42s&pp=ygUhbWFraW5nIGEgY3VzdG9tIHNhZGRsZSB0aW1lbGFwc2Ug" frameborder="0" allowfullscreen></iframe>
</section>
<section id="Pricing">
<h3>Pricing</h3>
<p class="price">Becuase every saddle is different, there is no way to have a definate price. To recieve pricing please enter your email above and follow the how to order to get a price. Thank You!</p>
</section>
</div>
</body>
</html>
/* file: styles.css */
img{
width: 50px;
height: 55px;
}
.company-name{
font-family: Arial;
font-size: 20px;
display: flex;
margin-right: 1000px;
}
body{
background-color: beige;
font-family: Arial;
}
#header{
display:flex;
flex-direction: row;
justify-content: space-around;
}
#nav-bar{
font-weight: 400;
width: 40vw;
position: fixed;
}
ul{
display: flex;
flex-direction: row;
justify-content: space-around;
}
li{
list-style: none;
}
input{
text-align: center;
}
#email{
width: 40vw;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge: