Un code par dynamicarray606

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 February 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
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <div id="credits">Made by pan4o</div>
  </head>
  <body>
    <div class="container">
      <form action="">
        <h1>Login</h1>

<div class="remember-forgot">
          <label><input type="checkbox" /> Remember me</label>
          <a href="#">Forgot password?</a>
        </div>

<button type="submit" class="btn">Login</button>

<div class="register-link">
          <p>Don't have an account? <a href="#">Register here!</a></p>
        </div>
      </form>
    </div>
  </body>
</html>

CSS

* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url(https://c.wallhere.com/photos/da/70/digital_art_landscape_illustration_skyline-2285476.jpg!d) no-repeat;
  background-size: cover;
  background-position: center;
  #credits {position: fixed; bottom: 10px; right: 10px; color: rgb(255, 255, 255); font-size: 12px; font-family: Arial, sans-serif;}
}

.container {
  width: 420px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 10px;
  padding: 30px 40px;
}

.container h1 {
  font-size: 36px;
  text-align: center;
}

.container .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 30px 0px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgb(255, 255, 255, 0.2);
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}

.input-box input::placeholder {
  color: #fff;
}

.input-box i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

.container .remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0px 15px;
}

.remember-forgot label input {
  color: #fff;
  margin-right: 3px;
}

.remember-forgot a {
  color: #fff;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

.container .btn {
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 5px;
  box-decoration-break: 0px 0px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.container .register-link {
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0px 15px;
}

.register-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.register-link p a:hover {
  text-decoration: underline;
}

Un code par dynamicarray606

Recommandé

Un code par iyedgoucha84

Un code par shasshan7236

Un code par mironovbogdan341

HTML

CSS

JS

Recommandé

Un code par iyedgoucha84

Un code par shasshan7236

Un code par mironovbogdan341

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS