My code for the submit/subscribe button was going perfectly well, but then without me noticing, nothing I put in the CSS is working for the button. I don’t know if I missed a semi-colon or a bracket, or if I removed text on accident, but none of the CSS for the submit button’s going through. Did I do something?
<!-- file: index.html -->
<!DOCTYPE html>
<!-- A subscription service that sends you premium alcohol every month -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header id="header">
<div class="logo">
<img src="https://freesvg.org/img/WineGlass6V3.png" id="header-img" width="50px">
</div>
<h1>Esposito Vineyards</h1>
<nav id="nav-bar">
<ul>
<li><a href="#About" class="nav-link">About Us</a></li>
<li><a href="#Features" class="nav-link">Features</a></li>
<li><a href="#Pricing" class="nav-link">Pricing</a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Exquisite Wine Delivered Directly to Your Home</h2>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input type="email" name="email" id="email" placeholder="Enter your email address">
<input id="submit" type="submit" value="Subscribe">
</form>
</section>
<section id="About">
<h2>About Us</h2>
<p>We are an established wine company located in Northern Italy that has been run since 1876. We come from humble beginnings with our family being the only ones running the business to a full company being lent help of many other wine enthusiasts.</p>
<p>Although we can definitely go the easy route and just supply stores with our product (which we do!), we believe in a more down-to-earth method of sending our exclusive and delicious wine directly to you!</p>
<iframe id="video" src="https://www.youtube.com/watch?v=Sbii6Sdl_1k" height="315"></iframe>
</section>
<section id="Features">
<p>Each bottle has its own decor that stands out from our commercial products, giving it a unique and personal feel. It also has its own flavor that cannot be competed with the rest, that we usually only provide to our family and friends.</p>
</section>
<section id="Pricing">
<div class="Product" id="Basic">
<h4>Basic</h4>
<h3>$9.99 / month</h3>
<p>One bottle of wine per month.</p>
</div>
<div class="Product" id="Premium">
<h4>Premium</h4>
<h3>$14.99 / month</h3>
<p>Three bottles of different types of wine per month. Each bottle comes with its own explanation of how it was made along with the best foods to drink it with.</p>
</div>
</section>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
width: 100%;
height: 50px;
min-height: 75px;
background-color: #FCF5E5;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
#header-img {
width: 85%;
height: 85%;
padding: 0.04rem;
margin-left: 20px;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav ul {
height: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
a {
text-decoration: none;
color: #E0C060;
}
a:hover {
color: #FDDA0D;
}
header h1 {
color: #E09B00;
}
body {
padding-top: 80px;
background: #FAF9F6;
color: #28282B;
margin: 30px;
}
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100px;
margin: .5em;
gap: 10px;
width: 100%;
}
#hero input[type="email"] {
max-width: 275px;
width: 100%;
padding: 5px;
}
}
#submit {
text-transform: uppercase;
background-color: #FFD656;
font-weight: 900;
color: #28282B;
border: transparent;
padding: .3em;
border-radius: .3em;
display: block;
margin: 10 1.5rem;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 Safari/537.36
Challenge: Product Landing Page - Build a Product Landing Page
Link to the challenge:
