Best Registration form design in html and css with code
Best Registration form design in html and css with code download.Beginners are always searching that Best Registration form design in html and css with code.Registration Page is the common authentication part of any website.HTML is the base of websites,which is used for website design by structuring the website and web application.Here you can learn website design from the basic level to advanced level by following this HTML Tutorial and HTML Examples in The Code Blocks.
Code Blocks learner don’t stop learning now,keep patience.Take all the important HTML concepts with the Web Design for Beginners.HTML,CSS course.
Responsive registration form in html with css source code
Follow the steps to create a responsive Registration Page using HTML,CSS.
Step 1 : Adding HTML Code | Sign up page design in html
Add HTML Code consist of login form with input fields and submit button.
Step 2 : Adding CSS | Best sign up pages
Add the CSS for the respective HTML elements to design the login page and try it to be clean code.
Step 3 : Adding Font awesome and Bootstrap | Sign in page design
For the CSS Font awesome gives you icons and Bootstrap gives you responsive design.
Here is the link to download Font awesome-Download fontawesome zip file, unzip on your system and linked this "fontawesome-free/css/all"-Font awesome icons free download .
Student registration form in html with css source code
 |
| Best Registration form design in html and css with code |
HTML registration form code | HTML
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<meta name="Description" content="Enter Your Description">
<title>FoodHub</title>
<!--bootstrap CDN -->
<!-paste online bootstrap CDN link or add offline downloaded file path in that link-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<!--<link href="bootstrap-all/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-all/css/all.min.css" rel="stylesheet"> -->
<link href="fontawesome-free/css/all.css" rel="stylesheet">
<!--own CSS -->
<link href="style.css" rel="stylesheet">
<link href="responsive-style.css" rel="stylesheet">
</head>
<body>
<section id="registration">
<div class="registration-section wrapper">
<div class="container">
<div class="row">
<div class="col-lg-6 registration-fisrt-div">
<h2 class="mb-4">Find out some unknown facts</h2>
<p>
In just two days, the people of the country are getting ready to celebrate the 75th Independence Day and the most important milestone in the history of the country. Our land of India became independent on 15th August after being liberated from the British rule and on this day the countless sacrifices of our freedom fighters are also remembered.
</p>
<p>
year on 15th August it is celebrated with great pomp in
the country and on this occasion the Prime Minister of the country hoisted the tricolor or the national flag
of the country at the Red Fort.
</p>
<button class="main-btn mt-5 text-start" type="button">Have An Account</button>
</div>
<div class="registration-second-div col-lg-6 mx-auto">
<form class="registrationform text-center" method="POST" action="">
<h2>Registration Form</h2>
<div class="row mt-4">
<div class="col-lg-6 mb-4 d-flex">
<i class="fas fa-user-circle icon p-3"></i>
<input class="form-control" placeholder="First Name" name="firstname" type="text">
</div>
<div class="col-lg-6 mb-4 d-flex">
<i class="fas fa-user-circle icon p-3"></i>
<input class="form-control" placeholder="Last Name" name="lastname" type="text">
</div>
<div class="col-lg-12 mb-4 mx-auto d-flex">
<i class="fas fa-envelope-square icon p-3"></i>
<input class="form-control" placeholder="Email Address Here" name="email" type="email">
</div>
<div class="col-lg-12 mb-4 mx-auto d-flex">
<i class="fas fa-unlock-alt icon p-3"></i>
<input class="form-control" placeholder="Enter Password" name="password" type="password">
</div>
<div class="col-lg-12 mb-4 mx-auto d-flex">
<i class="fas fa-unlock-alt icon p-3"></i>
<input class="form-control" placeholder="Confirm Password" name="password" type="password">
</div>
<div class="col-lg-12 mb-4 text-start">
<input class="form-check-input" type="checkbox" id="registrationcheckbox" name="registrationcheckbox" value="registrationcheckbox">
<label for="logincheckbox"> I agree to the <a class="links" href="#">Terms and Conditions</a></label><br>
</div>
<div class="col-lg-12 mb-2 mx-auto">
<button class="registration-btn" type="submit">Register</button>
</div>
<hr>
<div class="col-lg-12 mb-4 d-flex">
<i class="fab fa-facebook-f icon p-3"></i>
<button class="login-btn" type="button">Continue with Facebook</button>
</div>
<div class="col-lg-12 mb-4 d-flex">
<i class="fab fa-google icon p-3"></i>
<button class="login-btn" type="button">Continue with Google</button>
</div>
<hr>
<div class="col-lg-12 mb-4 mx-auto ">
<p><strong>Already on FoodHub?<a class="links" href="#">Sign in</a></strong></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Student registration form in html with css code free download | CSS
/*Registration PAGE*/
.registration-fisrt-div{
padding: 2.157rem 2.25rem;
text-align: left;
}
.registration-second-div{
padding: 2.157rem 2.25rem;
}
.registration-btn{
width:100%;
display:inline-block;
padding:0.625rem 1.875rem;
line-height:1.5625rem;
background-color:var(--primary-color);
border:0.1875rem solid var(--primary-color);
color:var(--white-color);
font-size:0.9375rem;
font-weight:600;
text-transform:capitalize;
box-shadow:0px 2px 10px -1px rgb(0 0 0 / 19%);
-webkit-transform:all .4s ease-out 0s;
-o-transition:all .4s ease-out 0s;
-moz-transition:all .4s ease-out 0s;
transition:all .4s ease-out 0s;
}
Registration form design in html and css with code | Responsvie Design
@media(max-width:991px){
/*Registration PAGE*/
.registration-fisrt-div{
display:none;
}
}
@media(max-width:767px){
.registration-fisrt-div{
display:none;
}
}
@media(max-width:330px){
.registration-fisrt-div{
display:none;
}
}
Summary
We have successfully created Best Registration form design in html and css with code. I hope this article is useful to you for How to create a login page for my website. If you have any comments in this article, please ask in the comment section.
Comments
Post a Comment
please do not send any spam link in the comment box