In the ever-changing world of web design, creating a good-looking and easy-to-use login form is important for websites and apps. This tutorial will show you how to make a modern login form using only HTML and CSS. By the end of this tutorial, you’ll have the skills to design a login form that looks great and works well on your website or app.
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.
Steps:
- Setting Up the Project:
- Learn how to set up your project and create the first HTML file for your login form.
- Creating the HTML Structure:
- Build the basic HTML structure for the login form, including fields and buttons.
- Styling with CSS:
- Dive into using CSS to style your form, covering layout, fonts, colors, and design principles.
- Designing User-Friendly Elements:
- Explore making your form user-friendly with labels, placeholders, and validation.
- Responsive Design:
- Make sure your login form looks and works well on various screen sizes and devices.
To make this login form we are going to start by. Creating a HTML File and add the following codes.
HTML Codes
<!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 rel="stylesheet" href="style.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<title>Ludiflex | Login</title>
</head>
<body>
<div class="box">
<div class="container">
<div class="top-header">
<span>Have an account?</span>
<header>Login</header>
</div>
<div class="input-field">
<input type="text" class="input" placeholder="Username" required>
<i class="bx bx-user"></i>
</div>
<div class="input-field">
<input type="password" class="input" placeholder="Password" required>
<i class="bx bx-lock-alt"></i>
</div>
<div class="input-field">
<input type="submit" class="submit" value="Login">
</div>
<div class="bottom">
<div class="left">
<input type="checkbox" id="check">
<label for="check"> Remember Me</label>
</div>
<div class="right">
<label><a href="#">Forgot password?</a></label>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Codes
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
font-family: 'Poppins', sans serif;
}
body{
background-image: url("images/1.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
.box{
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
}
.container{
width: 350px;
display: flex;
flex-direction: column;
padding: 0 15px 0 15px;
}
span{
color: #fff;
font-size: small;
display: flex;
justify-content: center;
padding: 10px 0 10px 0;
}
header{
color: #fff;
font-size: 30px;
display: flex;
justify-content: center;
padding: 10px 0 10px 0;
}
.input-field{
display: flex;
flex-direction: column;
}
.input-field .input{
height: 45px;
width: 87%;
border: none;
outline: none;
border-radius: 30px;
color: #fff;
padding: 0 0 0 42px;
background: rgba(255,255,255,0.1);
}
i{
position: relative;
top: -31px;
left: 17px;
color: #fff;
}
::-webkit-input-placeholder{
color: #fff;
}
.submit{
border: none;
border-radius: 30px;
font-size: 15px;
height: 45px;
outline: none;
width: 100%;
background: rgba(255,255,255,0.7);
cursor: pointer;
transition: .3s;
}
.submit:hover{
box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.bottom{
display: flex;
flex-direction: row;
justify-content: space-between;
font-size: small;
color: #fff;
margin-top: 10px;
}
.left{
display: flex;
}
label a{
color: #fff;
text-decoration: none;
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
1 Comment
Muchas gracias por compartir