Responsive Login Form Design with HTML, CSS, and Flexbox
A login form is one of the most important elements of any website or web application. It allows users to securely access their accounts by entering their credentials such as a username or email address and password. A well-designed login form not only improves user experience but also gives a professional look to your website.
In this tutorial, we will learn how to create a modern and responsive login form using HTML and CSS. The design will include a clean layout, stylish input fields, icons, a login button, and a beautiful gradient background. We will also focus on creating a user-friendly interface that works smoothly across different devices including desktops, tablets, and mobile phones.
This guide is perfect for beginners and front-end developers who want to improve their UI design skills and understand how login forms are structured in real-world websites. You will learn how to align elements properly, style form inputs, and create an attractive design using modern CSS techniques.
By the end of this tutorial, you will have a fully functional and visually appealing login form that you can easily integrate into your projects such as websites, admin dashboards, SaaS applications, or portfolio projects.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<link rel="stylesheet" href="loginform.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
</style>
</head>
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<h5 class="logo">Company Name</h5>
<ul class="mb-0">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Support</a>
</li>
<li>
<a href="#">Pricing</a>
</li>
</ul>
</nav>
</header>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h1>Login form</h1>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12 col-lg-10">
<div class="form-container d-md-flex">
<div class="logintext-wrap p-4 p-lg-5 text-center d-flex align-items-center order-md-last">
<div class="text w-100">
<h1>Welcome to login</h1>
<p>Don't have an account?</p>
<a href="#" class="btn btn-white btn-outline-white">Sign up</a>
</div>
</div>
<div class="loginform p-4 p-lg-5">
<div class="d-flex">
<div class="w-100">
<h3 class="mb-4">Sign in</h3>
</div>
</div>
<div class="d-flex signin-form">
<form class="w-100">
<div class="mb-3">
<label for="username" class="form-label text-uppercase fw-medium">Username</label>
<input type="text" class="form-control userName" id="username"
placeholder="Username" required aria-describedby="username">
</div>
<div class="mb-3">
<label for="userpassword" class="form-label text-uppercase fw-medium">Password</label>
<input type="password" class="form-control userPassword" placeholder="Password"
required id="userpassword">
</div>
<button type="submit" class="btn btn-primary login-button mb-3 w-100">Login</button>
<div class="d-flex justify-content-between">
<div class="form-check ps-0">
<input type="checkbox" class="remember-me" id="remember-me">
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
<div class="forgot-password">
<a href="#">Forgot Password</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
</body>
</html>
CSS Syntax:
section {
padding: 2em 0;
}
.container {
max-width: 1140px;
}
h1 {
font-size: 2rem;
}
.logintext-wrap {
background: #596af7;
background: -moz-linear-gradient(135deg, 596af7 0%, #5560f3 100%);
background: -webkit-linear-gradient(45deg, #596af7 0%, #5560f3 100%);
background: -o-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
background: -ms-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
background: -webkit-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
background: -o-linear-gradient(135deg, #596af7 0%, #5560f3 100%);
background: linear-gradient(135deg, #596af7 0%, #5560f3 100%);
color: #fff;
width: 50%;
}
.logintext-wrap .text h2 {
font-weight: 900;
color: #fff;
}
.btn.btn-white.btn-outline-white {
border: 1px solid #fff;
background: transparent;
color: #fff;
}
.loginform {
width: 50%;
}
.form-container {
width: 100%;
border-radius: 5px;
-webkit-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
-moz-box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
box-shadow: 0px 10px 34px -15px rgba(0, 0, 0, 0.24);
}
.signin-form input {
border-radius: 50px;
background-color: #eeeeee;
}
.signin-form input:focus{
border: none;
border: 1px solid #eeeeee;
box-shadow: none;
}
.login-button {
background-color: #596af7;
border-radius: 50px;
outline: none;
border: none;
padding: 10px 0px;
}
.login-button:hover,
.login-button:active {
background-color: transparent !important;
color: #596af7 !important;
border: 1px solid #596af7 !important;
}
.forgot-password a {
text-decoration: none;
color: #989696;
}
input[type="checkbox"] {
accent-color: #596af7;
}
header {
background-color: #596af7;
}
header .logo {
color: #ffffff;
font-size: 24px;
}
header nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 40px;
}
header ul {
display: flex;
gap: 25px;
list-style: none;
}
header ul li a {
text-decoration: none;
color: #ffffff;
font-size: 16px;
}
.checkbtn {
font-size: 30px;
color: white;
cursor: pointer;
display: none;
}
#check {
display: none;
}
@media only screen and (max-width: 792px) {
.card-container .card {
width: 100%;
}
}
@media (max-width: 768px) {
.checkbtn {
display: block;
order: 1;
}
nav ul {
position: fixed;
top: 65px;
right: -100%;
background-color: #596af7;
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: all 0.3s;
z-index: 1001;
}
nav ul li {
margin: 20px 0;
}
nav ul li a {
font-size: 20px;
}
#check:checked ~ ul {
right: 0;
justify-content: flex-start;
}
.logintext-wrap,
.loginform {
width: 100%;
}
}
Output: Desktop mode
Output: Ipad mode
Output: Mobile mode
Creating a well-designed login form is an essential step in building modern and user-friendly websites. In this tutorial, we explored how to design a clean and responsive login form using HTML and CSS, along with a visually appealing gradient background and properly styled input fields. A simple and intuitive login interface helps improve the overall user experience and makes your website look more professional.
By applying the techniques discussed in this guide, you can easily customize the login form to match your website’s design and branding. You can also extend this project by adding features such as form validation, password visibility toggle, social login options, or backend authentication.
Building small UI components like login forms is a great way to improve your front-end development skills and create reusable elements for future projects. Keep experimenting with different layouts, colors, and styles to design even more attractive and functional login pages.
Github Link:
Balasenthil
/
UI-Development
A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.
UI-Development
A clean and responsive login form created using HTML and CSS, featuring a modern UI design, smooth layout, and mobile-friendly responsiveness.
Check out more web development articles by clicking the link below.
Dev with Bala
HTML5 and CSS3 basics for beginners tutorial with examples. Learn HTML5 structure, tags, attributes, forms, and lists with easy step-by-step explanations for web development beginners.
devwithbala.blogspot.com
Top comments (0)