<div class="demo">
<form class="form" action="submit">
<label for="name">Subscribe Today!</label>
<input class="form__inset" type="text" placeholder="Email" name="email">
</form>
</div>
// Variables
$color-background: hsl(224, 24%, 32%);
$color-inset: hsl(230, 22%, 27%);
$shadow-inset: inset 0 2px 2px hsla(0, 0%, 0%, .35), 0 2px 0 hsla(0, 0%, 100%, .15);
// Setup
html {
font-family: montserrat;
}
.demo {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: $color-background;
}
// Form Styling
::placeholder {
color: hsla(0, 0, 100%, .6);
}
.form {
display: flex;
flex-direction: column;
& label {
color: #fff;
letter-spacing: .15em;
margin-bottom: -.75rem;
font-weight: bold;
}
&__inset {
border: none;
background: $color-inset;
box-shadow: $shadow-inset;
width: 35rem;
margin: 2rem 0;
padding: 1rem .5rem;
color: #fff;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.