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;
}
- How to Conduct YouTube Keyword Research Easily?Introduction YouTube is the second largest search engine in the world, making it a valuable platform for content creators and businesses alike. To maximize your …
- How to upgrade the Dart SDK version in flutterIf you’re a Flutter developer, you know how important it is to stay up-to-date with the latest version of the Dart SDK. Upgrading the Dart …
- Why Do Advertisers Use Testimonials?In the ever-competitive business landscape, nurturing strong connections with your customers remains paramount for enhancing your credibility and positioning yourself as an industry authority. Establishing …
- How To Earn $5 Fast Method!Looking to boost your income by $25 in less than an hour? This isn’t the start of a clichéd sales pitch; it’s about discovering several …
- What Does BMF Mean On TikTok? Latest Social Media AcronymsIn the fast-paced world of social media, acronyms are the language of choice, enabling users to communicate swiftly without the need for lengthy phrases. While …
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.
