Registration Form Overview
What is in this form ?
1. Icon color change on focus the input field
2. Beautiful input field border animation came from the left on focus input field
3. Register button color change on hover.
Registration Form view
Registration Form view
Video for the Registration form or you can see full code below :
RegistrationForm.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
</head>
<body>
<div class="container">
<div class="image">
<img src="cat.jpg">
</div>
<form action="#" class="Register-box">
<div class="form-data">
<h2>Registeration Form</h2>
<div class="box">
<input type="text" required>
<label>Username</label>
<i class="fas fa-user"></i>
<span></span>
</div>
<div class="box">
<input type="text" required>
<label>Email</label>
<i class="fas fa-envelope"></i>
<span></span>
</div>
<div class="box">
<input type="text" required>
<label>Mobile Number</label>
<i class="fas fa-mobile-alt"></i>
<span></span>
</div>
<div class="box">
<input type="text" required>
<label>Password</label>
<i class="fas fa-lock"></i>
<span></span>
</div>
<div class="box">
<input type="text" required>
<label>Re-Enter Password</label>
<i class="fas fa-lock"></i>
<span></span>
</div>
<input type="submit" value="Register Now">
</div>
</form>
</div>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;
font-family: 'Inconsolata', monospace;
display: flex;
justify-content: center;
align-items: center;
background-color: #141313;
}
.form-data{
text-align: center;
}
.container{
display: flex;
width: 700px;
}
.image{
width:50%;
}
.image img{
width: 100%;
height: 100%;
}
.Register-box{
padding: 20px;
width: 50%;
display: flex;
background-color: #2e343c;
flex-direction: column;
justify-content: space-evenly;
}
h2{
text-align: center;
margin-bottom: 50px;
color: white;
font-weight: 800;
}
.box{
position: relative;
width: 100%;
margin-bottom: 40px;
overflow: hidden;
}
input[type="text"]{
width: 100%;
border: none;
background: none;
font-family: 'Inconsolata', monospace;
border-bottom: 1px solid white;
padding: 5px;
padding-left: 25px;
outline: none;
color: white;
font-weight: 800;
}
label{
position: absolute;
top: 0;
left: 0;
font-weight: 800;
padding-left: 25px;
pointer-events: none;
color: white;
}
span{
position: absolute;
width: 100%;
height: 100%;
left: -100%;
top: 0;
pointer-events: none;
border-bottom: 2px solid #3097EC;
}
input:focus ~ span,input:valid ~ span{
left: 0;
transition: 0.5s ease;
}
.fas{
position: absolute;
left: 0;
top: 0;
color: white;
}
input[type="text"]:focus~label,input[type="text"]:valid~label{
opacity: 0;
}
input:focus~ .fas{
color:#E5E753;
}
input[type="submit"]{
cursor: pointer;
padding: 10px 40px;
background: none;
border: none;
outline: none;
border-radius: 20px;
color: antiquewhite;
background-color: #19197A;
}
input[type="submit"]:hover{
background-color:#4747F5;
}
@media(max-width:670px){
.image{
display: none;
}
.container{
width: 400px;
}
.Register-box{
width: 100%;
}
}
@media(max-width:400px){
h2{
font-size: 18px;
}
.container{
width: 100vw;
padding: 20px;
}
.Register-box{
width: 100%;
}
}
Post a Comment