How to create a login page for my website
So beginners are always searching that How to create a login page for my website.Login Page is the common authentication part of any website.HTML is the base of websites,which is used for website design by structuring websites and web applications.How to create website for free,here you can learn HTML,CSS 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.
How to make own website | Responsive Login Page
Follow the steps to create a responsive Login Page using HTML,CSS.
Step 1 : Adding HTML Code
Add HTML Code consist of login form with input fields and submit button.
Step 2 : Adding CSS
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
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 .
How to create website for free | Template
 |
| How to create a login page for my website |
How to create a login page for my website | 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 -->
<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">
<!--Download fontawesome zip file, unzip on your system and linked this "fontawesome-free/css/all" -->
<link href="#fontawesome-free/css/all file location " rel="stylesheet">
</head>
<body>
<section id="login">
<div class="login-section wrapper">
<div class="container">
<div class="row">
<div class="loginformdiv col-lg-6 mx-auto">
<form class="loginform text-center" method="POST" action="#">
<h2>Login Form</h2>
<div class="row">
<div class="col-lg-12 mb-4 mt-5 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 text-start ">
<a class="forgotpass-link" href="#">Forgot Your Password?</a>
</div>
<div class="col-lg-12 mb-4 text-start">
<input class="form-check-input" type="checkbox" id="logincheckbox" name="logincheckbox" value="logincheckbox">
<label for="logincheckbox"> Remember me</label><br>
</div>
<div class="col-lg-12 mb-4 mx-auto">
<button class="login-btn" type="submit" name="login-submit">Login</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>
<div class="col-lg-12 mb-4 mx-auto d-flex">
<p>By continuing,you agree t FoodHub's <strong>Terms f Service,Privacy Policy</strong></p>
</div>
<hr>
<div class="col-lg-12 mb-4 mx-auto ">
<p><strong>Not on FoodHub yet?<a class="links" href="#">Sign up</a></strong></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
How to create a login page for my website | CSS
Paste the following CSS code between the <head> </head> tag.<!--own CSS -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');
*,
*:after,
*:before{
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
:active,
:hover,
:focus{
outline:0!important;
outline-offset:0;
}
:a,
:a:hover{
text-decoration:none;
}
:a:hover{
color:var(--primary-color);
}
:ul,
:ol{
margin:0;
padding:0;
}
/*--Variable Define--*/
:root{
--primary-color:#AB2C48;
--secondry-color:#43121d;
--third-color:#f98169;
--white-color:#fff;
--text-color:#555;
--text-grey:#999;
--black-color:#000;
--primary-font:'Roboto',sans-serif;
--secondry-font:'Quicksand',sans-serif;
}
html{
scroll-behavior:smooth;
}
body{
font-family:var(--primary-font);
font-size:100%;
font-weight:400;
}
/*--Custom Scrollbar--*/
::-webkit-scrollbar{
width:0.625rem;
}
::-webkit-scrollbar-track{
background:var(--white-color);
}
::-webkit-scrollbar-thumb{
background:var(--primary-color);
}
/*Custom CSS Design*/
.h1{
font-size:3rem;
font-weight:900;
margin-bottom:3rem;
color:var(--secondry-color);
}
.h2{
font-size:225rem;
font-weight:700;
font-family:var(--secondry-font);
color:var(--secondry-color);
line-height:3rem;
text-transform:capitalize;
}
.h4{
font-size:18px;
font-weight:800;
font-family:var(--secondry-font);
text-transform:capitalize;
margin-bottom:0.9rem;
color:var(--secondry-color);
}
.h5{
font-size:1rem;
font-weight:700;
font-family:var(--secondry-font);
margin-bottom:0.5rem;
color:var(--primary-color);
}
.p{
font-size:1rem;
font-weight:400;
letter-spacing:1.75rem;
color:var(--text-color);
}
.main-btn{
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;
}
.white-btn{
padding:0.625rem 1.875rem;
line-height:25px;
background-color:var(--white-color);
border:0.1875rem solid var(--white-color);
color:var(--text-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;
}
.main-btn:hover{
background-color:transparent;
color:var(--primary-color);
}
.white-btn:hover{
background-color:transparent;
color:var(--primary-color);
border-color:var(--primary-color);
}
.wrapper{
padding-top:8.25rem;
padding-bottom:8.25rem;
}
.text-content{
width:70%;
margin:auto;
}
.counter-section h2,
.testimonial-section h2,
.book-food-text h2{
color:var(--white-color);
}
.custome-img-size{
width:100%;
height:50vh;
}
.links{
color:var(--primary-color);
font-weight:700;
}
.login-error-section{
position: fixed;
z-index: 3000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
padding-top: 60px;
}
.loginerrordiv {
padding: 1.875rem;
background-color: white;
text-align: center;
transform: translate(50%, 50%);
}
/*LOGIN PAGE*/
.loginform{
width:80%;
margin: 0 auto;
}
.icon {
background: var(--primary-color);
color: var(--white-color);
}
.loginform .form-control{
height:3.225rem;
padding:0 1.25rem;
font-size:0.875rem;
font-weight:700;
width:100%;
border:none;
border-radius:0;
background:transparent;
border:0.1875rem solid var(--text-grey);
color:var(--black-color);
}
.loginform .form-control:hover,
.loginform .form-control:focus{
outline:none;
box-shadow:none;
border-color:var(--primary-color);
}
.forgotpass-link{
color:var(--text-grey);
}
.forgotpass-link:hover{
color:var(--primary-color);
}
.login-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;
}
.login-btn:hover{
color:var(--primary-color);
background-color:var(--white-color);
}
</style>
How to create a login page for my website | JavaScript
Paste the following JavaScript code after the </body> tag.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<!--own js -->
<script src="# own js"></script>
Summary
We have successfully created a Login page of a website. 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