लॉगिन और साइनअप फॉर्म का HTML/CSS संस्करण

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

2 February 2024

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dark Login | Sign Up</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="form-box" id="login">
      <h2>Connexion</h2>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 
          1.103.897 2 2 2h16c1.103 0 2-.897 
          2-2V6c0-1.103-.897-2-2-2zm0 
          2v.511l-8 5.333-8-5.333V6h16zM4 
          18V8.489l8 5.333 8-5.333V18H4z"/>
        </svg>
        <input type="email" placeholder="Email">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M17 8h-1V6a4 4 0 00-8 
          0v2H7c-1.103 0-2 .897-2 
          2v10c0 1.103.897 2 2 
          2h10c1.103 0 2-.897 
          2-2V10c0-1.103-.897-2-2-2zM9 
          6a2 2 0 014 0v2H9V6zm8 
          14H7V10h10v10z"/>
        </svg>
        <input type="password" placeholder="Mot de passe">
      </div>
      <button class="btn">Se connecter</button>
      <p class="switch">
        Pas de compte ? 
        <button class="link-btn" onclick="toggleForm()">Inscription</button>
      </p>
    </div>

<div class="form-box" id="signup">
      <h2>Inscription</h2>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M12 12c2.7 0 5-2.3 5-5s-2.3-5-5-5-5 
          2.3-5 5 2.3 5 5 5zm0 
          2c-3.3 0-10 1.7-10 5v3h20v-3c0-3.3-6.7-5-10-5z"/>
        </svg>
        <input type="text" placeholder="Nom d’utilisateur">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M20 4H4C2.897 4 2 4.897 2 6v12c0 
          1.103.897 2 2 2h16c1.103 0 2-.897 
          2-2V6c0-1.103-.897-2-2-2zm0 
          2v.511l-8 5.333-8-5.333V6h16zM4 
          18V8.489l8 5.333 8-5.333V18H4z"/>
        </svg>
        <input type="email" placeholder="Email">
      </div>
      <div class="input-box">
        
        <svg viewBox="0 0 24 24">
          <path d="M17 8h-1V6a4 4 0 00-8 
          0v2H7c-1.103 0-2 .897-2 
          2v10c0 1.103.897 2 2 
          2h10c1.103 0 2-.897 
          2-2V10c0-1.103-.897-2-2-2zM9 
          6a2 2 0 014 0v2H9V6zm8 
          14H7V10h10v10z"/>
        </svg>
        <input type="password" placeholder="Mot de passe">
      </div>
      <button class="btn">Créer un compte</button>
      <p class="switch">
        Déjà inscrit ? 
        <button class="link-btn" onclick="toggleForm()">Connexion</button>
      </p>
    </div>

</div>

<script>
    const container = document.getElementById('container');
    function toggleForm() {
      container.classList.toggle('active');
    }
  </script>

</body>
</html>

CSS

/* ---- RESET ---- */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
  font-family: 'Segoe UI', sans-serif; 
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle at top, #0e0e0e, #050505);
  color: #fff;
  overflow: hidden;
}

/* ---- CONTAINER ---- */
.container {
  position: relative;
  width: 380px;
  height: 520px;
  background: rgba(20,20,20,0.95);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 255, 200, 0.35);
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* ---- FORM ---- */
.form-box {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 40px;
  transition: 0.6s ease-in-out;
  opacity: 0;
  transform: translateX(100%);
}

.form-box h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 2rem;
  letter-spacing: 1.5px;
  color: #00ffc6;
  text-shadow: 0 0 12px rgba(0, 255, 200, 0.7);
}

/* ---- INPUTS ---- */
.input-box {
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.input-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: #00ffc6;
  opacity: 0.8;
  pointer-events: none;
}

.input-box input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border: none;
  border-radius: 10px;
  outline: none;
  font-size: 1rem;
  background: #111;
  color: #fff;
  transition: 0.3s;
  box-shadow: inset 0 0 5px rgba(0, 255, 200, 0.3);
}

.input-box input:focus {
  background: #0b0b0b;
  box-shadow: 0 0 15px #00ffc6;
  border: 1px solid #00ffc6;
}

/* ---- PASSWORD ANIMATION ---- */
.input-box input[type="password"]:focus {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from { box-shadow: 0 0 10px #00ffc6; }
  to { box-shadow: 0 0 20px #00ffc6; }
}

/* ---- BUTTON ---- */
.btn {
  width: 100%;
  padding: 14px;
  margin-top: 25px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: bold;
  color: #000;
  background: linear-gradient(135deg, #00ffc6, #00e6ac);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 15px rgba(0, 255, 200, 0.5);
}

.btn:hover {
  transform: scale(1.03);
  background: linear-gradient(135deg, #00e6ac, #00ffc6);
  box-shadow: 0 0 25px rgba(0, 255, 200, 0.8);
}

/* ---- SWITCH ---- */
.switch {
  margin-top: 25px;
  text-align: center;
  font-size: 0.9rem;
  color: #ccc;
}

/* ---- LINK BUTTON ---- */
.link-btn {
  background: none;
  border: none;
  color: #00ffc6;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  transition: 0.2s;
}

.link-btn:hover {
  color: #00e6ac;
  text-decoration: underline;
}

/* ---- FORM POSITIONS ---- */
#login {
  left: 0;
  transform: translateX(0);
  opacity: 1;
  transition: all 0.6s ease-in-out;
}

#signup {
  left: 0; /* même position que login */
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.6s ease-in-out;
}

.container.active #login {
  transform: translateX(-100%);
  opacity: 0;
}

.container.active #signup {
  transform: translateX(0);
  opacity: 1;
}

लॉगिन और साइनअप फॉर्म का HTML/CSS संस्करण

अनुशंसित

सीएसएस सोशल्स कार्ड

सोडा पीने का हॉवर प्रभाव

मातृ दिवस की शुभकामना

HTML

CSS

JS

अनुशंसित

सीएसएस सोशल्स कार्ड

सोडा पीने का हॉवर प्रभाव

मातृ दिवस की शुभकामना

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS