Une page de connexion simple

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

29 July 2025

Liste des cartes d'entreprise avec image de marque et marketing

13 June 2025

<!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;
}

Une page de connexion simple

Recommandé

Liste des cartes d'entreprise avec image de marque et marketing

Un code par ashimadison8

Filtre de galerie

HTML

CSS

JS

Recommandé

Liste des cartes d'entreprise avec image de marque et marketing

Un code par ashimadison8

Filtre de galerie

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS