<div class="form">
<h1>welcome</h1>
<form class='user-form' return false>
<input type="text" placeholder=' name'>
<input type="text" placeholder='email'>
<input type="text" placeholder='username'>
<button>submit</button>
</form>
</div>
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: url("https://images.unsplash.com/photo-1498252207774-50583342eb33?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fbb3eaf679cff8fcdeb91c2e20b5d5a5&auto=format&fit=crop&w=2250&q=80");
background-size: cover;
background-repeat: no-repeat;
font-family: "Quicksand", sans-serif;
}
.form {
background: #ffffffa3;
height: 400px;
width: 400px;
border-radius: 5px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.user-form {
width: 300px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.user-form input,
.user-form button {
height: 50px;
margin: 10px 0;
background: #ffffffa3;
border: none;
font-size: 23px;
text-align: center;
font-family: "Quicksand", sans-serif;
transition: all .7s;
}
.user-form input {
border-bottom: 2px solid #000;
}
.user-form button:focus {
background: #fff;
}
.user-form input:focus {
background: #fff;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.