Une page de connexion simple

2,125 cleanfunction828

Ouvrir dans l'éditeur Publiez votre code

Recommandé

29 May 2025

anecdotes (modèle)

25 April 2025

Un code de Metehan

11 May 2026

Chargeur de jeux HTML : Plein écran, Mise en cache, Débloqué

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="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;
}