Modern Login Form Using HTML & CSS | Responsive Login Page Design
Modern Login Form Using HTML & CSS | Responsive Login Page Design
Almost every website requires a modern login page that allows users to securely access their accounts while providing a clean and engaging user experience. A well-designed login form not only improves the overall appearance of a website however, it also makes user authentication simple, and professional. In this project, we create a Modern Login Form using HTML and CSS with a responsive layout, elegant styling, and interactive hover effects that give the interface a polished and contemporary look.
This project is developed using HTML to build the structure of the login form and CSS to create a beautiful user interface and user experience with modern design elements, responsive layouts, and smooth visual effects. The lightweight code makes the project easy to understand for beginners who want to improve their front-end development skills, while developers and freelancers can easily customize and integrate this login form into business websites, portfolios, landing pages, dashboards, or other web applications.
Modern Login Form:
A Modern Login Form is a stylish authentication interface that combines simplicity, usability, and responsive design to provide users with a seamless login experience. Unlike traditional login pages, modern login forms focus on clean layouts, balanced spacing, attractive typography, and visually appealing input fields that enhance both functionality and aesthetics. HTML is used to create semantic elements such as <form>, <input>, <label>, <button>, and <div>, while CSS transforms the basic structure into a professional user interface with custom colors, shadows, border radius, transitions, and hover effects.
The responsive design ensures that the login form automatically adapts to different screen sizes, providing a consistent experience on desktops, laptops, tablets, and smartphones. Smooth hover effects on buttons and input fields improve user interaction by giving instant visual feedback, making the interface feel more modern and interactive. Since the project is built using only HTML and CSS, it remains lightweight, fast-loading, and easy to modify according to different website themes and branding requirements.
This project is an excellent choice for beginners who want to practice HTML forms and advanced CSS styling techniques while creating a real-world project. It is also suitable for web designers, freelancers, and professional developers looking for a clean, reusable, and responsive login template that can be integrated into personal projects or client websites with minimal customization.
Steps to Create a Modern Login Form
Follow these simple steps to build a responsive and modern login form using HTML and CSS:
- Create a project folder and name it modern-login-form.
- Inside the project folder, create two files named index.html and style.css.
- Design the login form structure using semantic HTML elements such as
<form>,<input>,<label>,<button>, and<div>.
<!DOCTYPE html>
TheProviders ----------------- youtube.com/@TheProvidersOfficial
<html>
<head>
<style></style>
<title>Animated Login Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="container">
<div class="logo">
<img src="Main Logo.png" width="250px" alt="">
</div>
<form action="">
<div class="user-box">
<input type="text" name="username" required>
<label>Username</label>
</div>
<div class="user-box">
<input type="Password" name="Password" required>
<label>Password</label>
</div>
<span>
<input type="checkbox" id="chk">
<label for="chk">Login</label>
<div class="welcome">
<img src="Logo.png" alt="">
<h2>Wellcome to <br> The Providers Solutions</h2>
<a href="login page.html"> <i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i></a>
</div>
</span>
<a href="#">Forget password?</a>
</form>
<div class="social">
<div class="heading">
<hr><h5>Or Signin</h5><hr>
</div>
<div class="icons">
<div class="fa-brands fa-facebook"></div>
<div class="fa-brands fa-youtube"></div>
<div class="fa-brands fa-whatsapp"></div>
<div class="fa-brands fa-instagram"></div>
</div>
</div>
</div>
</body>
</html>
Apply custom CSS styling to create a clean, modern, and visually attractive user interface.Add responsive spacing, typography, colors, borders, and hover effects to improve the overall appearance.Implement CSS transitions and animations to create smooth interactions for buttons and form elements.Test the login form on desktop, tablet, and mobile devices to ensure a fully responsive and consistent user experience.
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'poppins', sans-serif;
background: radial-gradient(circle, #832de2, #4a00e0);
}
.container{
width: 300px;
height: 500px;
padding: 20px;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
form .user-box{
position: relative;
margin-top: 10px;
}
form .user-box input{
width: 100%;
padding: 10px 0;
color: #555;
background: transparent;
font-size: 16px;
margin-bottom: 30px;
border: none;
outline: none;
border-bottom: 2px solid #ccc;
}
form .user-box input:focus{
border-bottom: 2px solid indigo;
}
form .user-box label{
position: absolute;
top: 10px;
left: 0;
font-size: 16px;
color: #555;
pointer-events: none;
transition: all .5s ease;
}
form .user-box input:focus ~ label,
form .user-box input:valid ~ label{
top: -15px;
left: 0;
color: indigo;
font-size: 14px;
font-weight: bold;
}
form a{
font-size: 12px;
float: right;
margin-top: 20px;
}
span{
display: flex;
justify-content: center;
align-items: center;
}
span label{
padding: 5px 50px;
font-size: 18px;
background-color: indigo;
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
}
span label:hover{
opacity: .9;
}
.social{
margin-top: 60px;
cursor: pointer;
}
.heading{
width: 100%;
color: indigo;
display: inline-flex;
align-items: center;
justify-content: space-around;
}
hr{
height: 3px;
background: indigo;
width: 30%;
}
.icons{
font-size: 26px;
justify-content: space-around;
align-items: center;
display: flex;
margin-top: 20px;
color: indigo;
}
.welcome{
position: absolute;
top: 100px;
width: 300px;
height: 500px;
padding: 10px;
display: none;
background-color: #fff;
border-radius: 15px;
overflow: hidden;
}
#chk{
display: none;
}
#chk:checked ~ .welcome{
display: block;
}
.welcome img{
width: 100px;
margin-left: calc(100%/3);
transform: translateY(70px);
}
.welcome h2{
color: indigo;
text-align: center;
margin-top: 80px;
}
.welcome a{
position: absolute;
top: 0px;
left: 20px;
color: indigo;
padding: 10px;
}
</style>
