Table of Contents
Introduction:
Login page in HTML with CSS code with background Color: Hello!
Are you looking for a CSS code in HTML?
Well check out the code for the ” Login page in HTML with CSS code with background image”
There will be slight changes that you need to make in the code that will be given at the end.
Login page in HTML with CSS code with background Color: HTML and CSS Code
HTML code: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<form class="login-form">
<h1>Login</h1>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Log in</button>
</form>
</div>
</body>
</html>
CSS code( style.css):
We created the foundational website design in the previous phase. In this section, we’ll create the login form’s template.
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: url('your-background-image.jpg') no-repeat center center fixed;
background-size: cover;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.login-form h1 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
You need to change the background image ‘ your-background-image.jpg’ in the CSS code with the path of the image you want to select.
HTML: 10 Authentic Tips for Website Transformation
Login page in HTML with CSS code with background Color: Merging both HTML and CSS codes
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color:pink;
background-size: cover;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-form {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
width: 400px; /* Adjust the width to your desired size */
height: 300px; /* Adjust the height to your desired size */
}
.login-form h1
{
text-align: center;
margin-bottom: 20px;
}
.form-group
{
margin-bottom: 15px;
}
.form-group label
{
display: block;
font-weight: bold;
}
.form-group input
{
width: 90%; /* Adjust the width to your desired size */
height: 40px; /* Adjust the height to your desired size */
padding: 8px;
border: 1px solid #ccc;
border-radius: 3px;
}
button
{
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover
{
background-color: #45a049;
}
</style>
</head>
<body bgcolor='red'>
<div class="login-container">
<form class="login-form">
<h1>Login</h1>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Log in</button>
</form>
</div>
</body>
</html>Login page in HTML with CSS code with background Color: Output image
Once you have both the HTML code and the CSS code saved on the computer, you can run the HTML file created. As shown Pink color will be displayed in the background of the webpage.
You can change the color of the background as per your need.
Keep Coding!
