Sure! Below is a simple login form created using HTML and CSS only. You can copy and paste this code into your HTML file.
We’ll use common HTML elements such as <form>, <div>, <a>, <label>, <button>, and simple CSS properties for styling this form. This project is straightforward, making it easy to follow and understand. Let’s get started!
Looking to hire the best website development company in Delhi?
Piyush608 Delhi is a leading website designing company in Delhi, trusted for delivering visually appealing, easy‑to‑use, and performance‑focused websites. We help modern businesses establish a strong digital presence that enhances credibility, attracts quality traffic, and accelerates growth. Whether you are a startup or an established brand, Piyush608 offers custom website design solutions that are mobile‑responsive, SEO‑optimized, and aligned with your business goals. If you’re planning to take your business online or upgrade your existing website, connect with Piyush608 – Delhi’s reliable website designing company – and get a powerful website that truly represents your brand.
HTML (index.html)
<!DOCTYPE html>
<!-- Source Codes By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Form in HTML and CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login_form">
<!-- Login form container -->
<form action="#">
<center><a href=""><img src="logos/logo.png" class="c-logo"></a></center><bR>
<!-- Email input box -->
<div class="input_box">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter email address" required />
</div>
<!-- Paswwrod input box -->
<div class="input_box">
<div class="password_title">
<label for="password">Password</label>
<a href="#">Forgot Password?</a>
</div>
<input type="password" id="password" placeholder="Enter your password" required />
</div>
<!-- Login button -->
<button type="submit">Log In</button>
<!-- Login option separator -->
<p class="separator">
<span>or</span>
</p>
<div class="login_option">
<!-- Google button -->
<div class="option">
<a href="#">
<img src="logos/google.png" alt="Google" />
<span>Google</span>
</a>
</div>
<!-- Apple button -->
<div class="option">
<a href="#">
<img src="logos/apple.png" alt="Apple" />
<span>Apple</span>
</a>
</div>
</div>
<p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>
</form>
</div>
</body>
</html>
CSS (styles.css)
/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* Resetting default styling and setting font-family */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Montserrat", sans-serif;
}
body {
width: 100%;
min-height: 100vh;
padding: 0 10px;
display: flex;
background: #62a5d6;
justify-content: center;
align-items: center;
}
/* Login form styling */
.login_form {
width: 100%;
max-width: 435px;
background: #fff;
border-radius: 6px;
padding: 41px 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}
.login_form h3 {
font-size: 20px;
text-align: center;
}
/* Google & Apple button styling */
.login_form .login_option {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.login_form .login_option .option {
width: calc(100% / 2 - 12px);
}
.login_form .login_option .option a {
height: 56px;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
background: #F8F8FB;
border: 1px solid #DADAF2;
border-radius: 5px;
margin: 10px 0 24px 0;
text-decoration: none;
color: #171645;
font-weight: 500;
transition: 0.2s ease;
}
.login_form .login_option .option a:hover {
background: #ededf5;
border-color: #626cd6;
}
.login_form .login_option .option a img {
max-width: 25px;
}
.login_form p {
text-align: center;
font-weight: 500;
}
.login_form .separator {
position: relative;
margin-bottom: 24px;
}
/* Login option separator styling */
.login_form .separator span {
background: #fff;
z-index: 1;
padding: 0 10px;
position: relative;
}
.login_form .separator::after {
content: '';
position: absolute;
width: 100%;
top: 50%;
left: 0;
height: 1px;
background: #C2C2C2;
display: block;
}
form .input_box label {
display: block;
font-weight: 500;
margin-bottom: 8px;
}
/* Input field styling */
form .input_box input {
width: 100%;
height: 57px;
border: 1px solid #DADAF2;
border-radius: 5px;
outline: none;
background: #F8F8FB;
font-size: 17px;
padding: 0px 20px;
margin-bottom: 25px;
transition: 0.2s ease;
}
form .input_box input:focus {
border-color: #626cd6;
}
form .input_box .password_title {
display: flex;
justify-content: space-between;
text-align: center;
}
form .input_box {
position: relative;
}
a {
text-decoration: none;
color: #3376a6;
font-weight: 500;
}
a:hover {
text-decoration: underline;
}
/* Login button styling */
form button {
width: 100%;
height: 56px;
border-radius: 5px;
border: none;
outline: none;
background: #3376a6;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
margin-bottom: 28px;
transition: 0.3s ease;
}
form button:hover {
background: #000000;
}
.c-logo{
width:160px;
}
Save the HTML code in a file named index.html and the CSS code in a file named styles.css. Ensure both files are in the same directory. Open index.html in your web browser to see the simple login form.
+91 7905834592
Enquiry Now
piyushmnm@gmail.com
piyush.gupta384
Reviews
There are no reviews yet. Be the first one to write one.