Welcome to my blog, where I showcase my latest project - a login form coded entirely with Pure HTML and CSS!
In this blog, I will walk you through the step-by-step process of creating this sleek and professional-looking login form, which not only functions seamlessly but also adds a touch of elegance to any website.
Whether you are a beginner or an experienced coder, you will find this tutorial both engaging and informative. I will also be providing the source code for this project, making it easy for you to implement it on your own website.
So, join me on this exciting journey of creating a login form that is not only visually stunning but also highly functional. Let's dive in!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<form action="#">
<div class="header">Log in</div>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" minlength="8" required>
<input type="submit" value="Log in">
<div class="bottom">
<a href="#">Register</a>
</div>
</form>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding:0;
}
.container{
background-color:#e8e8e8;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container form{
height:450px;
width:350px;
background-color:#240046;
border-radius:12px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding:3%;
box-sizing: border-box;
position: relative;
overflow: hidden;
padding-bottom:5%;
box-shadow:0px 0px 5px 0.5px rgb(0,0,0,0.2);
}
.container form .header{
font-family:poppins;
font-weight:bolder;
font-size:2rem;
color:white;
margin-bottom:5%;
}
.container form input{
height:45px;
width:100%;
margin-bottom:5%;
padding-left:5%;
box-sizing: border-box;
font-family:poppins;
border-radius:5px;
border:none;
}
.container form input[type="submit"]{
padding-left:0%;
font-weight:bolder;
margin-top:5%;
background-color:#57368a;
width:80%;
color:white;
border:none;
cursor: pointer;
}
.container form input[type="submit"]:hover{
background-color:#6d44b8;
transition-duration:0.3s;
}
.container form .bottom{
position:absolute;
background-color:white;
width:100%;
bottom:0%;
height:80px;
border-top-left-radius:50%;
border-top-right-radius:50%;
display: flex;
align-items: center;
font-family:poppins;
justify-content:center;
font-size:1.5rem;
padding:1%;
}
.container form .bottom a{
text-decoration:none;
color:#57368a;
font-weight:bolder;
}