Login Form using only HTML & CSS with Code Example

A login form is an essential component of many websites and applications that require users to authenticate before accessing certain contents.

Source Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome Cdn Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
</head>

<body>
    <div class="wrapper">
        <h1>Hello World!</h1>
        <p>Welcome to the Website</p>
        <form>
            <input type="text" placeholder="Enter username">
            <input type="password" placeholder="Password">
            <p class="recover">
                <a href="#">Recover Password</a>
            </p>
            <closeform></closeform>
        </form>
        <button>Sign in</button>
        <p class="or">
            ----- or continue with -----
        </p>
        <div class="icons">
            <i class="fab fa-google"></i>
            <i class="fab fa-github"></i>
            <i class="fab fa-facebook"></i>
        </div>
        <div class="not-member">
            Not a member? <a href="#">Register Now</a>
        </div>
    </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  background: #dfe9f5;
}
.wrapper{
  width: 330px;
  padding: 2rem 0 1rem 0;
  margin: 50px auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
h1{
  font-size: 2rem;
  color: #07001f;
}
p{
  margin-bottom: 1.7rem;
}
form input{
  width: 85%;
  outline: none;
  border: none;
  background: #dfe9f5;
  padding: 12px 14px;
  margin-bottom: 10px;
  border-radius: 10px;
}
.recover{
  text-align: right;
  font-size: 0.8rem;
  margin: 0.2rem 1.7rem 0 0;
}
.recover a{
  text-decoration: none;
  color: #07001f;
}
button{
  font-size: 1.1rem;
  margin-top: 1rem;
  padding: 8px 0;
  border-radius: 5px;
  outline: none;
  border: none;
  width: 85%;
  background: rgb(71, 105, 255);
  color: #fff;
  cursor: pointer;
}
button:hover{
  background: rgba(122, 30, 30, 0.767);
}
.or{
  font-size: 0.8rem;
  margin-top: 1.5rem;
}
.icons i{
  color: #07001f;
  padding: 00.8rem 1.5rem;
  border-radius: 10px;
  margin-left: .9rem;
  font-size: 1.5rem;
  cursor: pointer;
  border: 2px solid #dfe9f5;
}
.icons i:hover{
  color: #fff !important;
  background: #07001f;
  transition: 1s;
}
.icons i:first-child{
  color: green;
}
.icons i:last-child{
  color: blue;
}
.not-member{
  font-size: 0.8rem;
  margin-top: 1.4rem;
}
.not-member a{
  color: tomato;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}

JavaScript

// Try edit me
const message = 'Hello Morioh!' 

// Update text
document.querySelector('#root').innerHTML = message

// Log to console
console.log(message)

Step By Step Explanation of above JS code snippet:

•const message = 'Hello Morioh!':

This line creates a constant variable named message and assigns it the value of the string "Hello Morioh!".

•document.querySelector('#root').innerHTML = message:

This line finds the HTML element with the ID of "root" using the querySelector method and sets its innerHTML property to the value of the message variable. This means that the text "Hello Morioh!" will be displayed on the webpage where the element with ID "root" is located.

•console.log(message):

This line logs the value of the message variable to the browser console, which is a useful tool for debugging and troubleshooting code.