Learn how to make a login form using HTML & CSS
 |
| final result |
hello, everyone and welcome to a new tutorial. in this tutorial, I will show you how to make this login form using HTML5 & CSS3
First, we will need to set up our folder, we will create our main folder and we will create our index.html file and style folder that contains the main.css file and the image folder that contain our image.
- login
- index.html
- style
- main.css
- img
- bg.png
Now that our folder is ready, let's start coding, for this tutorial i will just post my source code and explain some tips and trick. if you want to see the full concept you can visit my youtube channel where i show the code processing step by step.
HTML CODE :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="filter">
</div>
<div class="login">
<h1>Log in</h1>
<form>
<input class="input" type="text" placeholder="username"><br>
<input class="input" type="password" placeholder="Password"><br>
<input type="checkbox"><labes>remember me</labes><br>
<button>Log in</button><br>
<a href="#">forget my password</a>
</form>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
<div class="filter">
</div>
<div class="login">
<h1>Log in</h1>
<form>
<input class="input" type="text" placeholder="username"><br>
<input class="input" type="password" placeholder="Password"><br>
<input type="checkbox"><labes>remember me</labes><br>
<button>Log in</button><br>
<a href="#">forget my password</a>
</form>
</div>
</body>
</html>
and now let's start with CSS part :
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*{
margin: 0;
outline: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
width: 100vw;
position: relative;
background-image: url(../img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.filter {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(233,76,161);
background: -moz-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
background: linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e94ca1",endColorstr="#4acde9",GradientType=1);
opacity: .6;
z-index: 2;
}
.login{
position: absolute;
z-index: 3;
background-color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 350px;
border-bottom: 4px solid rgb(233,76,161);
padding: 30px;
font-family: 'Open Sans', sans-serif;
}
.login h1{
text-align: center;
text-transform: uppercase;
color:#212121;
}
.login .input{
padding: 6px 10px;
width: calc(100% - 20px);
margin: 12px 0;
border: none;
border-bottom: 1px solid rgb(233,76,161);
font-size: 1.2rem;
}
.login .input::placeholder{
font-size: .8rem;
text-transform: uppercase;
}
.login input[type="checkbox"]{
margin-right: 5px;
}
.login button{
color: #000;
text-transform: uppercase;
margin: 12px 0;
padding: 8px 0;
width: 100%;
border:none;
background: rgba(233,76,161,1);
color: #fff;
transition: all .4s;
border-radius: 50px;
}
.login button:hover{
background-color: rgba(233,76,161,.5);
color: #fff;
}
.login a{
text-decoration: none;
color: rgb(233,76,161);
transition: all .4s;
}
.login a:hover{
color: #4acde9;
}
I will explain some tips, as you can see I made an empty div with filter class to make the gradient effect i spook about the gradient tool on my previous article you can visit to see many tools and use them: 5 tools for css*{
margin: 0;
outline: 0;
padding: 0;
}
body{
position: relative;
height: 100vh;
width: 100vw;
position: relative;
background-image: url(../img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.filter {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(233,76,161);
background: -moz-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
background: linear-gradient(90deg, rgba(233,76,161,1) 0%, rgba(74,205,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e94ca1",endColorstr="#4acde9",GradientType=1);
opacity: .6;
z-index: 2;
}
.login{
position: absolute;
z-index: 3;
background-color: #fff;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 350px;
border-bottom: 4px solid rgb(233,76,161);
padding: 30px;
font-family: 'Open Sans', sans-serif;
}
.login h1{
text-align: center;
text-transform: uppercase;
color:#212121;
}
.login .input{
padding: 6px 10px;
width: calc(100% - 20px);
margin: 12px 0;
border: none;
border-bottom: 1px solid rgb(233,76,161);
font-size: 1.2rem;
}
.login .input::placeholder{
font-size: .8rem;
text-transform: uppercase;
}
.login input[type="checkbox"]{
margin-right: 5px;
}
.login button{
color: #000;
text-transform: uppercase;
margin: 12px 0;
padding: 8px 0;
width: 100%;
border:none;
background: rgba(233,76,161,1);
color: #fff;
transition: all .4s;
border-radius: 50px;
}
.login button:hover{
background-color: rgba(233,76,161,.5);
color: #fff;
}
.login a{
text-decoration: none;
color: rgb(233,76,161);
transition: all .4s;
}
.login a:hover{
color: #4acde9;
}
also i used unsplash for the background image.
i hope you liked this small tutorial don't forget to visit our facebook group to see all of our work.
Facebook group : Doctor Code tutorial
and please like our facebook page : DoctorCode
Learn how to make a login form using HTML5 & CSS3
Reviewed by Medics
on
March 03, 2019
Rating:
Reviewed by Medics
on
March 03, 2019
Rating:
I love this blog ... Thanks for sharing this wonderful information...Don't forget to check this Animated Glowing Inputs Login Form in HTML & CSS
ReplyDelete