In the realm of web design, creating an eye-catching and imaginative login form can set your website or application apart from the rest. This tutorial is your gateway to building a distinctive and creative login form using just HTML and CSS.
We’ll guide you step by step through the process of designing a form that not only serves its functional purpose but also adds an artistic touch to your user interface. By the end of this tutorial, you’ll have the skills to create a login form that stands out and leaves a memorable impression on your users.
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.
Features of this Tutorial:
- Project Setup:
- Learn how to set up the project and create the initial HTML file for your creative login form.
- Designing the HTML Structure:
- Create the HTML structure that forms the foundation of your imaginative login form.
- Styling with CSS:
- Dive into the world of CSS to add creative flair to your form, focusing on aesthetics, layout, and responsiveness.
- Unique Form Elements:
- Explore imaginative form elements and unconventional design approaches to make your login form truly stand out.
- Color Schemes and Typography:
- Discuss the importance of color schemes and typography in enhancing the visual appeal of your form.
- Creating an Artistic Background:
- Learn how to use CSS to add an artistic background to your login form, elevating its overall design.
- Animating Your Form:
- Add subtle animations and transitions to your form to make it more engaging and visually appealing.
- Responsive Design:
- Ensure that your creative login form looks and functions well on various screen sizes, making it user-friendly.
So, login form should be well organised designed. 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">
<title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<header>Login</header>
</div>
<div class="input-container">
<div class="input-field">
<label for="user">Username</label>
<input type="text" name="username" id="user" required>
</div>
<div class="input-field">
<label for="pass">Password</label>
<input type="password" name="password" id="pass" required>
</div>
<div class="input-field">
<input type="submit" class="submit" name="submit" value="Login">
</div>
<span><a href="#">Forgot password?</a></span>
</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-color: rgb(230,234,234);
display: flex;
justify-content: center;
align-items: center;
min-height: 95vh;
}
.container{
background: url("images/1.png");
background-repeat: no-repeat;
background-size: cover;
border-radius: 10px;
min-height: 400px;
min-width: 370px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),
0 2px 20px 0 rgba(0,0,0,0.2);
}
.header{
display: flex;
justify-content: center;
margin: 20px 0 0 0;
font-size: 30px;
color: #fff;
}
.input-container{
margin: 30px 30px 10px 30px;
}
label{
color: #fff;
margin: 0 0 5px 15px;
}
.input-field{
display: flex;
flex-direction: column;
margin: 15px 0 15px 0;
}
input{
outline: none;
padding: 0 20px 0 20px;
border: 2px solid rgba(255,255,255, 0.015);
background: rgba(255,255,255,0.35);
height: 38px;
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.085),
0 2px 30px 0 rgba(0,0,0,0.2);
border-radius: 50px;
font-size: 16px;
color: #fff;
}
input:focus,input:valid{
border: 2px solid rgba(255,255,255,0.65);
background: transparent;
box-shadow: none;
border-radius: 30px;
}
.submit{
background: transparent;
height: 40px;
border: 2px solid rgba(255,255,255,0.65);
box-shadow: none;
transition: .3s ease-in-out;
margin-top: 10px;
}
.submit:hover{
color: rgb(106,87,168);
cursor: pointer;
border: 2px solid rgba(255,255,255,0.016);
background: rgba(255,255,255,0.35);
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.085),
0 2px 30px 0 rgba(0,0,0,0.2);
}
span{
display: flex;
justify-content: right;
}
span a{
color: #fff;
font-size: 12px;
text-decoration: none;
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
