Hello folks, In this blog we are going to talk about simplicity and style. We will create an innovative login page which improve the user experience on your website. We will learn how to build a more modern login design using HTML and CSS only.
By the end of this tutorial, you’ll have the knowledge and skills to design an attractive and user-friendly login page that makes a lasting impression on your website or application users.
What is a Login Form?
Login forms are used in most of website and Application. The login form helps the user to get access to website or web application they are browsing. (To access their data). So a login form should be well designed.
Requirements:
- A computer
- A text editor (Example: VS Code, Sublime Text Editor…)
- Simple understanding about HTML & CSS.
HTML Codes
We will start by creating a new file to write HTML codes. You can name it index.html. This HTML code create this amazing login form. It includes a title for the webpage, a login container, two input fields, the submit button and at the bottom we have the two links. We will link the separate CSS file named “style.css” using the <link> tag, so that we can be able to design our login form. You have noticed that we have icon on the login form that’s why we used<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> in order to have them in our web page.
<!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">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>Login</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="header">
<header><img src="images/logo.png" alt=""></header>
<p>Log In to Ludiflex</p>
</div>
<div class="input-box">
<label for="email">E-Mail</label>
<input type="email" class="input-field" id="email" required>
<i class="bx bx-envelope"></i>
</div>
<div class="input-box">
<label for="pass">Password</label>
<input type="password" class="input-field" id="pass" required>
<i class="bx bx-lock"></i>
</div>
<div class="input-box">
<input type="submit" class="input-submit" value="SIGN IN">
</div>
<div class="bottom">
<span><a href="#">Sign Up</a></span>
<span><a href="#">Forgot Password?</a></span>
</div>
</div>
<div class="wrapper"></div>
</div>
</body>
</html>
CSS Codes
In our style.css file that’s where we will write CSS codes to design our login form. The provided CSS codes are used to style the login form by setting the font family to “Poppins”, sets a background image for the body, and applies styles to various elements such as the login box, input fields, labels, icons, and submit button. You can follow the video tutorial and see step by step how each CSS line changes the design of our login form.
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'nunito', sans-serif;
font-weight: 600;
}
body{
background: url(images/bg.png);
background-size: cover;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
position: relative;
}
.box{
width: 450px;
height: 500px;
background: #fff;
backdrop-filter: blur(20px);
border-radius: 30px;
padding: 40px;
box-shadow: 2px 2px 15px 2px rgba(0,0,0,0.1),
-2px -0px 15px 2px rgba(0,0,0,0.1);
z-index: 10;
}
.wrapper{
position: absolute;
width: 455px;
height: 500px;
border-radius: 30px;
background: rgba(255,255,255,0.53);
box-shadow: 2px 2px 15px 2px rgba(0,0,0,0.115),
-2px -0px 15px 2px rgba(0,0,0,0.054);
transform: rotate(5deg);
}
.header{
margin-bottom: 50px;
}
.header header{
display: flex;
justify-content: right;
}
header img{
width: 25px;
}
.header p{
font-size: 25px;
font-weight: 800;
margin-top: 10px;
}
.input-box{
display: flex;
flex-direction: column;
margin: 10px 0;
position: relative;
}
i{
font-size: 22px;
position: absolute;
top: 35px;
right: 12px;
color: #595b5e;
}
input{
height: 40px;
border: 2px solid rgb(153,157,158);
border-radius: 7px;
margin: 7px 0;
outline: none;
}
.input-field{
font-weight: 500;
padding: 0 10px;
font-size: 17px;
color: #333;
background: transparent;
transition: all .3s ease-in-out;
}
.input-field:focus{
border:2px solid rgb(89,53,180);
}
.input-field:focus ~ i{
color: rgb(89,53,180);
}
.input-submit{
margin-top: 20px;
background: #1e263a;
border: none;
color: #fff;
cursor: pointer;
transition: all .3s ease-in-out;
}
.input-submit:hover{
background: #122b71;
}
.bottom{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 25px;
}
.bottom span a{
color: #727374;
text-decoration: none;
}
.bottom span a:hover{
text-decoration: underline;
}
That was fun, right? In just a few steps, we built a modern login form using HTML and CSS. Whether you’re a coding master or a coding newbie, you can now add this stylish login form to your projects and impress everyone.
Keep exploring, keep creating, and keep building amazing things! If you have any problem, leave a comment. I will be happy to help.
