I'm facing an issue with the margin for <h3> tag in my HTML code. I want to create some space between the form and the h3 element.
Here is the CSS:
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
body{
background-image: linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.8)),url(/assets/1.png);
background-position: center;
background-size: cover;
}
.container{
width: 80%;
max-width: 700px;
min-height: 400px;
height: auto;
margin: 8% auto;
background: #f3f6f7;
border-radius: 15px;
position: relative;
padding-top: 60px;
}
h3{
text-align: center;
margin-bottom: 100px;
color: #333;
}
.container form{
width: 280px;
text-align: center;
margin: 0 auto;
}
form input{
width: 100%;
padding: 10px 5px;
margin: 5px 0;
border: 0;
border-bottom: 1px solid #999;
outline: none;
background: transparent;
}
This is the corresponding HTML:
<body>
<div class="container">
<form>
<h2>Let's Start Building!</h2>
<input type="text" placeholder="E-mail" required>
</form>
</div>