In this article, I have shown how to make a simple and full screen Login screen. I have used HTML, CSS and some bootstrap classes. You can eliminate bootstrap and do it yourself. I have used it because it is just a prototype design.

The Dark Design

dark design

This is the login page design with black background. The original design is with darker grey color.

Basic HTML Template

In src/main.js

<!DOCTYPE html>
<html lang="">
  <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" />

<!--   Bootstrap CDN -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css"
      integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <title>Login Page Auto Repair</title>
  </head>
  <body>
  </body>
</html>

Here, this is a simple HTML template with Bootstrap CDN added with a link tag.

Create an external stylesheet and add it, or embed internally like me.

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Complete CSS

<style>
.whiteColor {
  color: white !important;
}
.link {
  color: #f1471d;
}
.link:hover {
  color: #f46c4a;
  font-weight: bolder;
  font-style: italic;
  transition: 300ms color;
}
.buttonColor {
  color: ghostwhite;
  background-color: #bb3615;
}
.form-body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  height:100vh;
  width:100vw;
  background-color: #1a1a1a;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input[type="text"] {
  margin-bottom: 10px;
  border-radius: 7px;
  background-color: #345;
  outline: none;
  border: none;
  color: #d3d3d3;
}

.form-signin input[type="email"] {
  margin-bottom: 10px;
  border-radius: 7px;
  background-color: #345;
  outline: none;
  border: none;
  color: #d3d3d3;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-radius: 7px;
  background-color: #345;
  outline: none;
  border: none;
  color: #d3d3d3;
}

.form-signin input[type="checkbox"] {
  color: red;
}

.acc {
  font-size: 16px;
  color: #f1471d;
  float: right;
  padding-top: 3px;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #a9a9a9;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #a9a9a9;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #a9a9a9;
}
</style>

HTML

<div class="text-center form-body">
    <form class="form-signin">
      <img class="mb-2" src="https://github.com/sahilpatel09/Auto-Repair-Appointment-Dashboard/blob/main/docs/images/autologo.png?raw=true" alt="" height="170" />
      <label for="inputEmail" class="sr-only">Email address</label>
      <input
        type="email"
        id="inputEmail"
        class="form-control"
        placeholder="Email address"
        required
        autofocus
      />
      <label for="inputPassword" class="sr-only">Password</label>
      <input
        type="password"
        id="inputPassword"
        class="form-control"
        placeholder="Password"
        required
      />
      <div class="checkbox mb-3">
        <label class="whiteColor">
          <input type="checkbox" value="remember-me" class="text-white" />
          Remember me
        </label>
      </div>
      <button class="btn btn-lg buttonColor btn-block" type="submit">
        Sign in
      </button>
      <div class="checkbox mb-3">
        <label class="acc">
          <span class="text-white">Don't have an account.</span>
          <a href="/signup" class="link text-decoration-none">Sign Up.</a>
        </label>
      </div>
      <p class="mt-5 mb-3 text-muted">
        &copy; California Muscle Car Repair <br /> All Rights Reserved.
      </p>
    </form>
  </div>

That's it. This is all the HTML & CSS needed for the simple Login screen. Do not forget to add the Bootstrap CDN.

If you want to take a look at a live code, here is the working codepen demo. Full-screen Login Page Demo on Codepen

See the Pen Login Page Design for Auto Website Appointments by Sahil Patel (@sahilpatel09) on CodePen.

Simple & Unique Login Page Design for Auto Repair Dashboard Website

Sahil Patel

Sahil Patel

Recent Posts

9 days in Appwrite Hackathon - My Progress

Deploy Appwrite using docker on Gitpod & Azure

Dynamic Gradient Generator Built using React.js

The Dark Design

Basic HTML Template

Complete CSS

HTML