A Simple Login Page

Open In Editor Publish Your Code

<!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="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="form-container">
        <div class="header">
          <h1>Welcome back</h1>
          <p>Welcome back! Please enter your details</p>
        </div>

<form action="#">
          <div class="input">
            <label for="email">Email</label>
            <input type="email" required placeholder="Enter yor email " />
          </div>
          <div class="input">
            <label for="password">Password</label>
            <input type="password" required placeholder="*******" />
          </div>

<div class="remfog">
            <div class=""><input type="checkbox" /> Remember me</div>
            <p><a href="#">Forgot Passsword</a></p>
          </div>
          <div class="buttons">
            <button class="log_button">Sign in</button>
            <button class="google">
              
              <img src="/icon.png" alt="icon" />
              
              Sign in with Google
            </button>
          </div>
          <p class="signup">
            Don`t have an account ? <span>sign up for free!</span>
          </p>
        </form>
      </div>
      <div class="img">
        <img src="/img.png" alt="right side image" />
      </div>
    </div>
  </body>
</html>

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
@import url("https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #f8f8f8;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Poppins", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #181818;
  margin: 0;
}
a {
  text-decoration: none;
  color: inherit;
}

.container {
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 15vw;
  margin: 0;
}

.img {
  position: relative;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}
.img > img {
  width: 100%;
  height: 100%;
}

.form-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  width: 22vw;
  margin-left: auto;
  margin-right: 10vw;

height: 70vh;
  & > .header {
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    & > h1 {
      font-size: 3rem;
      font-weight: 400;
    }
  }
}

form {
  display: inherit;
  flex-direction: inherit;
  width: 100%;

& > .input {
    display: inherit;
    flex-direction: inherit;
    gap: 1;
    width: 100%;
    padding: 10px 0;
    & > label {
      padding-left: 10px;
    }
    & > input {
      height: 45px;
      width: 100%;
      outline: none;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 16px;
      padding: auto 8px;
      font-size: medium;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
    }
  }
}

.remfog {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 700;
  padding: 20px;
}

button {
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  border-radius: 12px;
  width: 100%;
  border: none;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.25);
  font-size: 16px;
  cursor: pointer;
  font-weight: 500;
}

.log_button {
  color: #f8f8f8;
  background: #ea454c;
  box-shadow: 1px 1px rgba(234, 69, 76, 0.25);
}
.signup {
  margin-top: 30px;
  text-align: center;
  & > span {
    color: #ea454c;
    cursor: pointer;
  }
}
.google {
  border: 1px solid rgba(0, 0, 0, 0.25);
  margin-top: 20px;
}

A Simple Login Page

Recommended

CSS Socials Card

Form with Video Background

Glass effect social media buttons with neon glow

HTML

CSS

JS

Recommended

CSS Socials Card

Form with Video Background

Glass effect social media buttons with neon glow

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS