Login page design using HTML 5 and Css3 Just 10 minutes spend your time. Discover a free HTML source code for a sleek login page design, ready for immediate download. Enhance your project with this modern, user-friendly template that’s simple to customize.
Elevate your website’s aesthetic and enjoy smooth user experiences with our well-crafted login page design. Grab the code, get started, and make your website stand out!
In this tutorial, you get a video tutorial with source code. Login page in HTML with CSS code with a background image.
Registration Page Design using HTML and CSS.
Login Page Design
Login Page Design | Free Source code Download
Login page design source code:
Here is your login page background image you can use this image in your project just download it.
HTML Design
<!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">
<title>Login Page</title>
</head>
<body>
<section class="login">
<div class="container">
<h1>Login Form</h1>
<div class="lgn">
<a href="#" id="login" class="hover_btn">Login</a>
<a href="#" id="signup">SignUp</a>
</div>
<input type="text" id="email" placeholder="Email Adress">
<input type="email" id="pass" placeholder="Pasword">
<div class="forget">
<a href="#" id="fgpass">Forgot Password</a>
</div>
<a href="#" id="loginBtn" class="hover_btn">Login</a>
<div class="sgnUp">
<p id="member">Not A Member?</p>
<a href="#" id="sgn_now">SignUp Now</a>
</div>
</div>
</section>
</body>
</html>CSS Design
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.login{
height: 100vh;
background: url(img/background.jpg);
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.container{
border-radius: 8px;
background-color: white;
display: flex;
flex-direction: column;
width: 330px;
height: 400px;
justify-content: center;
align-items: center;
}
input{
padding: 10px 36px;
margin: 5px;
width: 210px;
}
.lgn{
margin-top: 30px;
margin-bottom: 30px;
}
#login{
padding: 12px 46px;
text-decoration: none;
background: linear-gradient(to right,blueviolet, rgb(184, 2, 169));
color: white;
}
#pass{
margin-bottom: 10px;
}
#signup{
padding: 10px 46px;
text-decoration: none;
color: black;
border: 2px solid silver;
}
#fgpass{
text-decoration: none;
color: purple;
}
#loginBtn{
padding: 10px 120px;
text-decoration: none;
background: linear-gradient(to right,blueviolet, rgb(184, 2, 169));
color: white;
border-radius: 8px;
margin-top: 15px;
margin-bottom: 15px;
}
.sgnUp{
display: flex;
}
#member{
margin-right: 5px;
}
#sgn_now{
text-decoration: none;
color: purple;
}
- Boost WooCommerce Security: Set Up OTP Login in WordPressPasswords, while essential for security, can be vulnerable to hacking and breaches. To add an extra layer of protection for your WooCommerce store, consider implementing …
- How to Create Woocommerce Flutter App for WordPress freeAbsolutely! Let’s break down how to create a WooCommerce Flutter app for your WordPress store. Here’s a comprehensive outline of the process and essential considerations: …
- How to Add a Link to Your Facebook Story in 2024Facebook Stories have become an integral part of our social media experience, allowing us to share moments and updates with our friends and followers. But …
- Troubleshooting “Failed to download Laravel from dist” ErrorIf you encounter the “Failed to download Laravel from dist” error while working with Laravel 10, it is likely due to the absence of the …
- Solutions for “The file is too large for the destination file system” Error on PendriveIf you have ever encountered the frustrating error message “The file is too large for the destination file system” when trying to transfer files to …
Related Content: Build Your Own Snake Game Using HTML.
Conclusion
In conclusion, our free HTML source code download for login page design offers a unique combination of aesthetics and security features that will elevate your project to new heights. With user-friendly interface elements and adaptable code, you can customize the design to fit your needs while ensuring a smooth and secure authentication process. Download our source code today and experience the impact of a well-crafted login page on user engagement and satisfaction.