Hey there, Registration Form is a good feature of a website, Also you can say it Sign up form. In this blog, we’ll learn How To Make Animated Registration Form Using HTML And CSS Step By Step.
Registration Form allows users or visitors to your site make their own profile, which gives them access to additional features such as the ability to submit blogs, download files, and participate in other activities, depending on the goals of the website.
The registration/signup form displays different input fields where the visitor needs to fill in his/her details to submit for a particular web page.
By the end of this tutorial, you will be able to understand and create your own beautiful registration form! Let’s get started!
Video Tutorial of How To Make Animated Registration Form Using HTML And CSS Step By Step
Source Codes
First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with a .html extension.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<title>Register Form</title>
</head>
<body>
<div class="container">
<form action="#" class="form">
<div class="form__text">Register</div>
<div class="form__group">
<input
type="text"
class="form__input"
placeholder="First Name"
id="firstname"
required
/>
<label for="firstname" class="form__label">
First Name
</label>
</div>
<div class="form__group">
<input
type="text"
class="form__input"
placeholder="Last Name"
id="lastname"
required
/>
<label for="lastname" class="form__label">
Last Name
</label>
</div>
<div class="form__group">
<input
type="email"
class="form__input"
placeholder="Email"
id="email"
required
/>
<label for="email" class="form__label">
Email
</label>
</div>
<div class="form__group">
<input
type="password"
class="form__input"
placeholder="Password"
id="password"
required
/>
<label for="password" class="form__label">
Password
</label>
</div>
<div class="form__button">
<a href="#" class="btn">Submit</a>
</div>
<div class="form__social">
<div class="sign">Or Sign up using</div>
<div class="social__icon">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google"></i>
</div>
</div>
</form>
</div>
</body>
</html>Second, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with a .css extension.
:root {
/* --color-primary: #DB9093; */
--color-primary: #813b8d;
--color-primary-dark: #681519;
--color-secondary: #738aa0;
--color-secondary-dark: #5643fa;
--color-white: rgba(255, 255, 255, 0.8);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* 1st step */
.card {
height: 500px;
width: 300px;
perspective: 900px;
position: relative;
}
.card > * {
backface-visibility: hidden;
border-radius: 5px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
overflow: hidden;
transition: all 0.8s ease;
}
.card__front {
height: 100%;
background: #fff;
}
.card__back {
height: 100%;
width: 100%;
background-image: linear-gradient(to right bottom,
var(--color-primary), var(--color-primary-dark));
transform: rotateY(180deg);
position: absolute;
top: 0;
left: 0;
}
.card:hover .card__front {
transform: rotateY(-180deg);
}
.card:hover .card__back {
transform: rotateY(0);
}
/* 2nd step */
.card__photo {
height: 100%;
background-image: linear-gradient(
to right bottom,
rgba(0, 0, 0, 0.65),
rgba(0, 0, 0, 0.65)),
url(./img/photo-1.jpg);
background-size: cover;
background-position: center;
/* background-blend-mode: screen; */
}
.nav {
height: 40px;
/* background-color: var(--color-primary-dark); */
background-color: rgba(0, 0, 0, 0.9);
padding: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav .icon {
color: var(--color-white);
font-size: 15px;
margin-left: 10px;
z-index: 100;
}
.nav .icon span {
margin-left: 5px;
font-size: 12px;
}
.card__bottom {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.card__bottom .icon {
font-size: 25px;
color: var(--color-white);
}
/* .card__bottom .icon.fa-camera { color: rgba(255, 255, 255, 0.801);}
.card__bottom .icon.fa-youtube { color: #c00;}
.card__bottom .icon.fa-user-circle { color: #4899c8;}
.card__bottom .icon.fa-facebook-messenger { color: #b049ca;}
.card__bottom .icon.fa-phone-square-alt { color: #91e968;} */
/* back part style */
.card__back-contant {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
width: 90%;
}
.card__text {
font-size: 20px;
color: var(--color-white);
text-transform: uppercase;
margin-bottom: 20px;
}
.card__social {
display: flex;
justify-content: center;
align-items: center;
}
.card__social .fab {
margin-right: 10px;
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
transition: all .2s ease;
}
.card__social .fab:hover {
color: var(--color-primary);
transform: translateY(-2px);
}
