Modulo di accesso e registrazione HTML/CSS

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

18 November 2025

Esempio di codice HTML del gioco Snake

17 July 2025

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

Modulo di accesso e registrazione HTML/CSS

Consigliato

Metehan

Esempio di codice HTML del gioco Snake

Sinfonia dello stato di Hover

HTML

CSS

JS

Consigliato

Metehan

Esempio di codice HTML del gioco Snake

Sinfonia dello stato di Hover

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS