Login page in HTML with CSS code with background Color

-

- Advertisement -
- Advertisement -
- Advertisement -
- Advertisement -

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

Login page in HTML with CSS code with Background Color

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!

- Advertisement -
admin
adminhttps://ztome.com
Hello! I am Sonia, I am a professional blogger. I have 10 years of experience in creating engrossing content. I have worked in different domains like E-commerce, IT, Medical, Fashion, Ayurvedic... I would appreciate if you help me grow with this blogging website.

Latest news

Apple Watch Data: Average Person Takes 334 Days to Marathon

Explore marathon training insights, activity trends, and completion time estimation from Apple Watch data in the Apple Heart & Movement Study.

12 Foods that Boost Stamina Naturally: Energize Your Day

Ready to take your stamina to the next level? Jump into this ultimate guide showcasing 12 Foods that Boost Stamina Naturally and keep you powering through your day like a champ!

Fallout 4 next-generation update launches new content on April 25.

Much awaited: Fallout 4 next-generation update: The Fallout TV adaptation is on AmazonRelated Posts: Much awaited: Fallout 4 next-generation update:...

Best Wi-Fi CCTV Camera: How to Opt for the Best?

Looking for tips on how to select the best Wi-Fi CCTV camera for a safe home? Discover expert advice, FAQs, and essential information to help you make the right choice for your home security needs.

Healthy Habits to Reduce Belly Fat: 13 Amazing Ways

Struggling with belly fat? Learn Healthy Habits to Reduce Belly Fat now!

Must read

Apple Watch Data: Average Person Takes 334 Days to Marathon

Explore marathon training insights, activity trends, and completion time estimation from Apple Watch data in the Apple Heart & Movement Study.

12 Foods that Boost Stamina Naturally: Energize Your Day

Ready to take your stamina to the next level? Jump into this ultimate guide showcasing 12 Foods that Boost Stamina Naturally and keep you powering through your day like a champ!

You might also likeRELATED
Recommended to you