Today In this article, we’ll show you how to create Responsive Registration Form In HTML & CSS. This type of Registration Form is used on websites For account create. This kind of Registration Form looks attractive on website.
You easily create these Responsive Registration Form Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML & CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Registration Form
In this design [Registration Form], on the webpage, there is a Registration Form with three input fields – Email and Password, Confirm Password, terms and conditions Radio, a button, Social by register account, and a login link. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.
Watch the video tutorial to create Registration Form
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Responsive Registration Form step by step completely beautifully. So you can learn how to make these Signup Form. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Responsive Registration Form Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- How To Make Dropdown Menu Using HTML and CSS
- Neumorphism Calculator Using HTML, CSS & JS
- How To Create A Website Using HTML & CSS
Responsive Registration Form | Source Codes
To create this program (Registration Form). First, you need to create two Files one HTML & CSS File. After creating these files just paste the following codes in your file.
After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!-- Created By Codecary -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animated Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="create">
<div class="overlay"></div>
<div class="account">
<h2>Create an account</h2>
<form>
<div class="group">
<label>Your email</label>
<i class="fas fa-envelope"></i><input type="email"
placeholder="[email protected]">
</div>
<div class="group">
<label>Password</label>
<i class="fas fa-unlock-alt"></i><input type="password"
placeholder="Password">
</div>
<div class="group">
<label>Confirm Password</label>
<i class="fas fa-unlock-alt"></i><input type="password" placeholder="Confirm
Password">
</div>
<div class="radio">
<input type="radio"> <label>I agree to the terms and conditions</label>
</div>
<input type="button" value="Sign in">
<span class="or">or</span>
<div class="icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-github"></i>
</div>
<p>Already have an account? <span>Login here</span></p>
</form>
</div>
</div>
</body>
</html>After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial;
}
.create {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: URL('https://i.postimg.cc/wv5J6vb2/mario-gogh-VBLHICVh-lI-unsplash.jpg');
background-size: cover;
position: relative;
}
.create .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(14, 27, 97, .25);
z-index: 1;
}
.account {
background-color: #FFF;
width: 450px;
padding: 45px;
border-radius: 5px;
z-index: 2;
}
.account h2 {
color: #1C2540;
text-align: center;
margin-bottom: 28px;
font-weight: normal;
}
form .group {
position: relative;
}
form label {
display: block;
color: #424767;
font-size: 12px;
margin-bottom: 8px;
}
.account form .group i {
position: absolute;
top: 22px;
width: 37px;
height: 37px;
line-height: 37px;
color: #4E5079;
font-size: 15px;
text-align: center;
border-right: 1px solid #e2e2e2;
}
form input:not([type="radio"]) {
color: #424767;
width: 100%;
margin-bottom: 28px;
padding: 10px 10px 10px 45px;
border: 1px solid #e2e2e2;
border-radius: 5px;
outline: none;
}
form input::placeholder {
color: #424767;
opacity: .7;
}
form .radio input[type="radio"] {
top: 2px;
position: relative;
cursor: pointer;
}
form .radio label {
display: inline;
}
form input[type="button"] {
margin-top: 20px;
margin-bottom: 20px;
padding-left: 0;
font-size: 15px;
color: #FFF;
background-color: #242E4c;
border: 1px solid #242E4c;
transition: .5s;
outline: 0;
cursor: pointer;
}
form input[type="button"]:hover {
background-color: #0E121d;
}
form .or {
display: block;
text-align: center;
color: #4c4c4c;
font-size: 13px;
}
form .icons {
text-align: center;
margin-top: 20px;
margin-bottom: 20px;
}
form .icons i {
width: 38px;
height: 38px;
line-height: 38px;
border: 1px solid #e2e2e2;
border-radius: 50%;
cursor: pointer;
transition: .5s;
}
form .icons i:first-of-type {
color: #3b5998;
}
form .icons i:nth-of-type(2) {
margin-left: 5px;
margin-right: 5px;
color: #1DA1F2;
}
form .icons i:last-of-type {
color: #6E5494;
}
form .icons i:hover {
background-color: #242E4c;
color: #FFF;
}
form p {
text-align: center;
color: #424767;
font-size: 14px;
}
form p span {
font-weight: bold;
cursor: pointer;
}now you’ve successfully created these Responsive Registration Form. If your code does not work or facing any error/problem to comment down or contact us through the contact page.
