<section>
<h2 id="newsletter-heading">Inscrivez-vous à notre newsletter</h2>
<div class="form-container">
<div class="email-container">
<label for="abo-newsletterSubscriber" class="sr-only">Votre adresse email (exemple : prenom.nom@mail.fr)</label>
<input id="abo-newsletterSubscriber" type="email" name="email" autocomplete="email">
</div>
<button type="button">Je m'inscris</button
</div>
</section>
section {
width: 30rem;
height: auto;
padding: 1.5%;
box-sizing: border-box;
}
h2 {
margin: 0;
}
.form-container {
display:flex;
}
.email-container {
position: relative;
margin-right: 2%;
}
label,
input {
display: block;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
white-space: nowrap;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.