We are creating a login page in Html, CSS, and JavaScript. Last time we created a Frequently asked questions template . But now let us see how to create a responsive login page in Html with source code.
What is meant by the login page?
It means that nowadays organizations are creating their websites. For that, they have to sell their products to people or services to people. Then they have to collect the information of their users or customers. People have to create an account at that website and for that, they have to go through a registration form.
The same procedure is followed in this login form. I hope you will like this UI and share it. It has a beautiful background At the top, it has the text “sign-in”.The first one is for username and the second one is for password.
On the other hand, it will not allow you to log in if any field is empty.
If you have forgotten your username and password then you can recover them by the below text.
Then it has a login button that is used for signing into an account after creating an account and filling the fields properly.
If you don’t have an account then you can create your account below the sign-up button. It will allow you to register to the website and create an account.
You might like it:
How to create a login page?
You can simply create it using any Html editor on your device (mobile or computer). First of all, you have to create three main files for creating it.
Source code of Html file:
Create a file in your editor. Html is a markup language and will help to write all the content in the form of the login page. Copy this Html code and paste it into your Html file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login Form | Fantacy Design</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form p-l-55 p-r-55 p-t-178">
<span class="login100-form-title">
Login Form
</span>
<div class="wrap-input100 validate-input m-b-16" data-validate="Please enter username">
<input class="input100" type="text" name="username" placeholder="Username">
<span class="focus-input100"></span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Please enter password">
<input class="input100" type="password" name="pass" placeholder="Password">
<span class="focus-input100"></span>
</div>
<div class="text-right p-t-13 p-b-23">
<span class="txt1">
Forgot
</span>
<a href="#" class="txt2">
Username / Password?
</a>
</div>
<div class="container-login100-form-btn">
<button class="login100-form-btn">
Login Now
</button>
</div>
<div class="flex-col-c p-t-170 p-b-40">
<span class="txt1 p-b-9">
Don’t have an account?
</span>
<a href="#" class="txt3">
Sign up now
</a>
</div>
</form>
</div>
</div>
</div>
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/animsition/js/animsition.min.js"></script>
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<script src="vendor/select2/select2.min.js"></script>
<script src="vendor/daterangepicker/moment.min.js"></script>
<script src="vendor/daterangepicker/daterangepicker.js"></script>
<script src="vendor/countdowntime/countdowntime.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Source code of CSS file:
Again create a file of CSS in your editor and name it login.css and save it in the same folder. CSS is used for placing the elements at the user’s desired place.
@font-face {
font-family: Ubuntu-Regular;
src: url('../fonts/ubuntu/Ubuntu-Regular.ttf');
}
@font-face {
font-family: Ubuntu-Bold;
src: url('../fonts/ubuntu/Ubuntu-Bold.ttf');
}
@font-face {
font-family: JosefinSans-Bold;
src: url('../fonts/JosefinSans/JosefinSans-Bold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
background-color:#fff;
}
body {
height: 100%;
font-family: Ubuntu-Regular, sans-serif;
background-color:#262626;
}
/*---------------------------------------------*/
a {
font-family: Ubuntu-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #1b3815;
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-family: Ubuntu-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
input[type="number"] {
-moz-appearance: textfield;
appearance: none;
-webkit-appearance: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
input::-webkit-input-placeholder { color: #1b3815;}
input:-moz-placeholder { color: #1b3815;}
input::-moz-placeholder { color: #1b3815;}
input:-ms-input-placeholder { color: #1b3815;}
textarea::-webkit-input-placeholder { color: #1b3815;}
textarea:-moz-placeholder { color: #1b3815;}
textarea::-moz-placeholder { color: #1b3815;}
textarea:-ms-input-placeholder { color: #1b3815;}
/*---------------------------------------------*/
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Ubuntu-Regular;
font-size: 15px;
color: #999999;
line-height: 1.4;
margin-top: -120px;
}
.txt2 {
font-family: Ubuntu-Regular;
font-size: 15px;
color: #3575D3 ;
line-height: 1.4;
}
.txt3 {
font-family: Ubuntu-Bold;
font-size: 15px;
color: #3575D3 ;
line-height: 1.4;
text-transform: uppercase;
}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
width: 100%;
margin: 0 auto;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
position: relative;
background-color: #e7eaee;
}
.wrap-login100 {
width: 450px;
background: #fff;
border-radius: 20px;
height: 550px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}
/*==================================================================
[ Form ]*/
.login100-form {
width: 100%;
position: relative;
}
.login100-form-title {
font-family: JosefinSans-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
display: block;
position: absolute;
width: 100%;
top: 0;
left: 0;
background-color: #3575D3 ;
padding-top: 50px;
padding-bottom: 39px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
background-color: #fff;
border-radius: 27px;
position: relative;
z-index: 1;
}
.input100 {
font-family: Ubuntu-Bold;
font-size: 15px;
color: #1b3815;
line-height: 1.2;
position: relative;
display: block;
width: 100%;
height: 55px;
background: #ebebeb;
border-radius: 27px;
padding: 0 35px 0 35px;
}
/*------------------------------------------------------------------
[ Focus Input ]*/
.focus-input100 {
display: block;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 31px;
background-color: #ebebeb;
pointer-events: none;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.input100:focus + .focus-input100 {
width: calc(100% + 20px);
}
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.login100-form-btn {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
width: 100%;
height: 50px;
background-color: #3575D3 ;
border-radius: 25px;
font-family: Ubuntu-Bold;
font-size: 15px;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
transition: all 0.4s;
}
.login100-form-btn:hover {
background-color: #1b3815;
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
z-index: 1000;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 14px;
padding: 4px 25px 4px 10px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 10px;
pointer-events: none;
font-family: Ubuntu-Bold;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
display: block;
position: absolute;
z-index: 1100;
color: #c80000;
font-size: 16px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 16px;
}
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
}
@media (max-width: 992px) {
.alert-validate::before {
visibility: visible;
opacity: 1;
}
}
[ Responsive ]*/
@media (max-width: 576px) {
.login100-form {
padding-left: 15px;
padding-right: 15px;
}
}
Source code of javascript:
It Copy javascript code and paste it into your file.
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
})(jQuery);Therefore by using these file codes you will be able to create a login page like this.
If you are still facing any errors in it then download the below file and run it. You will get the same result.
Don’t forget to subscribe to us
Thanks for reading this article.
