How To Create A Login Form Using HTML And CSS
Learn how to make a Login Form Using HTML And CSS. Easy way to build Login Form using HTML And CSS For Beginners. Easy way to learn HTML and CSS For beginners. You will easily create this Login Form For Your Upcoming projects by following the video tutorial or steps, which I have given below.
How To Make A Login Form Using HTML And CSS
- 0.0 - 1.00 min : Intro
- 1.00 - 16.0 min: Building A Login Form Using HTML And CSS
In this tutorial, You will learn how to make a login form just using HTML And CSS. This Login Form is pure HTML and CSS. It is easy to create. You will easily Make this Login Form by following my Video Tutorial or by following the steps which I have given below. If you have any questions about these tutorials or need any help, contact me. I will reply to you as soon as possible. I hope you like this tutorial.
1) Open any code editor like Notepad++.
2) Create HTML and CSS files and put in your project folder which you create. I recommended you to create separate folder for CSS File.
3) Link the CSS File With HTML File.
4) Copy the HTML code, which I gave below, and paste in the HTML which you create.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>Log in</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <!--using FontAwesome--> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <form> <!--heading--> <div class="heading"> <p>USER <font color="">LOGIN</font></p> <p>Welcome to the website</p> </div> <!--inputs-container--> <div class="input-container"> <!--icon--> <div class="p-icon"> <img src="images/personal.png"> </div> <!--inputs--> <div class="user-inputs"> <input type="email" placeholder=" Example@gmail.com"> <input type="password" placeholder=" Password "> </div> </div> <!--check box--> <div class="check-box"> <input type="checkbox" /> <p>Trems & Conditions</p> </div> <!--button--> <button class="login">LOGIN</button> <!--forget password--> <a href="#" class="forget">Forget passwords?</a> <!--social--> <ul class="social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-instagram"></i></a></li> <li><a href="#"><i class="fab fa-youtube"></i></a></li> </ul> </form> </body> </html>
5) Copy the CSS code, which I gave below, and paste in the CSS which you create.
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding: 0px;
background-color: #2e343c;
box-shadow:inset 2px 2px 100px rgba(0,0,0,0.2);
height: 100vh;
}
ul{
list-style: none;
}
a{
text-decoration:none;
}
*{
box-sizing: border-box;
}
form{
display: flex;
flex-direction: column;
align-items: center;
justify-content:;
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
width:310px;
height: 520px;
background-position:center;
background-size:cover;
background-repeat: no-repeat;
border-radius: 10px;
box-shadow: 1px 1px 12px rgba(0,0,0,0.2),inset 1px 1px 60px rgba(0,0,0,0.2);
box-sizing: border-box;
}
.heading{
text-align: center;
font-family: myriad pro;
letter-spacing: 1px;
width:100%;
height: 200px;
background-color: #cc1f46;
display: flex;
border-radius: 5px 5px 0px 0px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow:inset 2px 2px 100px rgba(0,0,0,0.2);
}
.heading p:nth-child(1){
font-weight: bold;
color: #ffffff;
font-size: 26px;
}
.heading p:nth-child(2){
font-size:12px;
color: #E9E9E9;
font-family: calibri;
}
.heading p{
line-height:10px;
margin: 10px;
}
.input-container{
display: flex;
height: 100px;
width: 350px;
justify-content:space-around;
align-items: center;
background-color:#e0244e;
border-radius:50px;
box-shadow: 1px 2px 12px rgba(0,0,0,0.2);
box-sizing: border-box;
margin-top: -15%;
}
.p-icon{
width:70px;
height: 70px;
border-radius: 50%;
background-color:#373e46;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.p-icon img{
height: 30px;
}
.user-inputs{
display: flex;
flex-direction: column;
}
.user-inputs input{
width:140px;
height: 25px;
font-family: calibri;
border: none;
outline: none;
margin: 3px;
background-color: #cb1e46;
color: #FFFFFF;
padding:5px;
animation: animation-1 ease 7s;
}
.user-inputs input::placeholder{
color: #ffffff;
}
.check-box {
display: flex;
justify-content:center;
align-items: center;
font-family: myriad pro;
font-size: 12px;
}
.check-box p{
color: #e0e0e0;
}
.login{
width:140px;
height: 40px;
border:none;
outline: none;
background-color: #e0244e;
color: #ffffff;
font-family: myriad pro;
font-weight: bold;
font-size: 16px;
box-shadow: 1px 1px 12px rgba(0,0,0,0.2);
border-radius:20px;
}
.forget{
font-family: myriad pro;
font-size: 12px;
color:#9e9fa0;
}
.social {
display: flex;
justify-content: center;
padding: 0px;
}
.social li a{
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
box-shadow: 1px 2px 12px rgba(0,0,0,0.2);
border-radius:5px;
}
.social li a i{
color:#FFFFFF;
font-size: 14px;
}
.social li a:hover{
background-color: #cc1f46;
transition:linear 0.5s;
}
button:active{
transform: scale(1.1);
}
.input-container input:focus{
background-color: transparent;
border-bottom: 1px solid #A7092D;
transition: all ease 0.5s;
}
.check-box,.login,.forget{
margin: 10px ;
}
6) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
Bro Mediafire is Blocked Showing so how we Download images.
ReplyDeleteI This you should use google drive.
this is awesome
ReplyDelete