How To Create a Login Form Using HTML And CSS
Learn How To Build Login Form In HTML And CSS. I will Create Login Page In This Tutorial Easy Way To Learn HTML For Beginners.
In This Tutorial, I will create this simple and easy login page Using HTML And CSS. This is a Very Easy To Create Login Form. You Create This Login Page By Following These Steps Which I Given Below.
How To Build Login Form In HTML And CSS.
- 0.0 - 1.0 min : Intro
- 1.0 - 8.5 min: How To Create Login Form HTML
In This Tutorial, I Will Teach You How To Create a Login Page Only Using HTML And CSS. In This Video First 40s, I Will Show You What I will Create In This Tutorial, Than I Have Open The Text Editor Dreamviwer Than First I Create HTML Files like Index.html and Second CSS File (Style.css). After Creating This Files, I Will Link The CSS File With HTML Using Link Tag. After Linking I will Create a Login Page Structure Using HTML File Because HTML File Use To Create Structure Of The Website Than I Will Design This Page Structure Using Cascading Style Sheets (CSS). After Designing Your Page Is Ready For Backend Programing. If You Have Confusion Please Check My Youtube Tutorial Which I Given Above Of this Paragraph. Hope You Like This Tutorial.
1) First You Create A Website Folder, Where You Put The Website Files.
2) Create HTML, CSS File, And Put This File In The Website Folder.
3) Link CSS File With HTML Using "Link" Tag.
4) Copy HTML Code Which I Given Below And Past In Your HTML File.
<html> <head> <meta charset="utf-8"/> <title>Login Page</title> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <section class="login-container"> <div class="login-inputs"> <h1>Login</h1> <form> <input placeholder="Example@gmail.com" type="email" /> <input placeholder="Password" type="password" /> <button>Log in</button> </form> <a class="forget" href="#">Forget Your Password</a> </div> </section> </body> </html>
5) Copy Login Form CSS Code And Past In Your CSS File.
CSS
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family: calibri;
}
a{
text-decoration: none;
}
.login-container{
background-image: url("../img/bg.png");
background-size:cover;
background-repeat: no-repeat;
width:100%;
height: 100vh;
position: relative;
}
.login-inputs{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.login-inputs h1{
color: #fff;
font-size: 3rem;
letter-spacing: 3px;
margin:10px;
text-transform: uppercase;
text-shadow: 2px 2px 30px rgba(0,0,0,0.2);
font-family: Magmawave Caps;
}
.login-inputs form{
background-color: #23243c;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
border-radius: 10px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.login-inputs form input{
margin:10px;
width:250px;
height: 30px;
background-color: #434459;
border-radius: 10px;
border: none;
outline: none;
color:#fff;
padding:5px 10px;
}
.login-inputs form input::placeholder{
color:#727383;
}
.login-inputs form button{
text-transform: uppercase;
width:110px;
height: 35px;
border-radius: 20px;
border: none;
outline: none;
margin:5px;
font-weight:600;
background-color:#3b70e0;
color:#fff;
font-size:12px;
font-family: poppins;
letter-spacing: 1px;
}
.login-inputs form button:hover{
background-color:rgb(125, 49, 247);
transition: all ease 0.3s;
}
.forget{
color:#62627d;
margin:20px;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.9rem;
border-bottom: 1px solid #62627d;
}
6) Download Background Image, Link of the Background image is given below.
7) After Doing All These Steps Just Open HTML And Enjoy This Login Page.
The Download Links Will Be Shown in 30 Seconds
mahamad
ReplyDeletecool! Did you can make a funcional login page??
ReplyDelete