Modèle HTML/CSS de formulaire de connexion et d'inscription

Ouvrir dans l'éditeur Publiez votre code

Recommandé

3 May 2025

Page de destination de React Netflix

2 July 2025

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Login / Sign Up</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, sans-serif;
    }
    body {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e3c72, #2a5298);
    }

.container {
      width: 360px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 12px 25px rgba(0,0,0,0.25);
      overflow: hidden;
      animation: fadeIn 0.6s ease;
    }

.tabs {
      display: flex;
      cursor: pointer;
    }
    .tabs button {
      flex: 1;
      padding: 14px;
      border: none;
      background: #f0f0f0;
      font-size: 16px;
      font-weight: 600;
      transition: background 0.3s ease;
    }
    .tabs button.active {
      background: #2a5298;
      color: #fff;
    }

.form {
      padding: 24px;
      display: none;
      animation: slide 0.4s ease;
    }
    .form.active { display: block; }

.form h2 {
      margin-bottom: 18px;
      color: #2a5298;
      font-size: 22px;
      text-align: center;
    }

.input-group {
      margin-bottom: 16px;
    }
    .input-group label {
      font-size: 14px;
      color: #333;
      display: block;
      margin-bottom: 6px;
    }
    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #bbb;
      border-radius: 8px;
      font-size: 15px;
    }

.form button {
      width: 100%;
      padding: 12px;
      background: #2a5298;
      color: #fff;
      font-size: 16px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .form button:hover {
      background: #1e3c72;
    }

.extra {
      margin-top: 12px;
      text-align: center;
      font-size: 13px;
      color: #555;
    }
    .extra a {
      color: #2a5298;
      text-decoration: none;
      font-weight: 500;
    }

@keyframes fadeIn {
      from { opacity: 0; transform: scale(0.9);}
      to { opacity: 1; transform: scale(1);}
    }
    @keyframes slide {
      from { opacity: 0; transform: translateY(12px);}
      to { opacity: 1; transform: translateY(0);}
    }
  </style>
</head>
<body>

<div class="container">
    <div class="tabs">
      <button class="tab active" onclick="showForm('login')">Login</button>
      <button class="tab" onclick="showForm('signup')">Sign Up</button>
    </div>

<form class="form active" id="login">
      <h2>Welcome Back</h2>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Enter your password" required>
      </div>
      <button type="submit">Login</button>
      <div class="extra">
        <a href="#">Forgot Password?</a>
      </div>
    </form>

<form class="form" id="signup">
      <h2>Create Account</h2>
      <div class="input-group">
        <label>Username</label>
        <input type="text" placeholder="Choose a username" required>
      </div>
      <div class="input-group">
        <label>Email</label>
        <input type="email" placeholder="Enter your email" required>
      </div>
      <div class="input-group">
        <label>Password</label>
        <input type="password" placeholder="Create a password" required>
      </div>
      <button type="submit">Sign Up</button>
    </form>
  </div>

document.getElementById(formId).classList.add('active');
    event.target.classList.add('active');
  }
</script>

</body>
</html>

CSS

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", system-ui, sans-serif;
}

/* Background with gradient + glow */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  overflow: hidden;
}

/* Decorative glowing orbs */
body::before, body::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
}
body::before {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
  background: rgba(0, 212, 255, 0.6);
}
body::after {
  width: 400px;
  height: 400px;
  bottom: -120px;
  right: -100px;
  background: rgba(255, 0, 180, 0.5);
}

/* Container (glass effect) */
.container {
  width: 380px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
  overflow: hidden;
  animation: fadeIn 0.8s ease;
}

/* Tabs */
.tabs {
  display: flex;
}
.tabs button {
  flex: 1;
  padding: 14px;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition: all 0.3s ease;
  cursor: pointer;
}
.tabs button.active {
  color: #fff;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 17px;
}

/* Forms */
.form {
  padding: 24px;
  display: none;
  animation: slide 0.4s ease;
}
.form.active { display: block; }

.form h2 {
  margin-bottom: 18px;
  font-size: 24px;
  text-align: center;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Input groups */
.input-group {
  margin-bottom: 18px;
}
.input-group label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-bottom: 6px;
}
.input-group input {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  outline: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.input-group input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8);
}

/* Buttons */
.form button {
  width: 100%;
  padding: 12px;
  background: linear-gradient(90deg, #00d4ff, #ff00b4);
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.7),
              0 0 30px rgba(255, 0, 180, 0.6);
}

/* Extra links */
.extra {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.extra a {
  color: #00d4ff;
  text-decoration: none;
  font-weight: 500;
}
.extra a:hover {
  text-decoration: underline;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9);}
  to { opacity: 1; transform: scale(1);}
}
@keyframes slide {
  from { opacity: 0; transform: translateY(15px);}
  to { opacity: 1; transform: translateY(0);}
}

Modèle HTML/CSS de formulaire de connexion et d'inscription

Recommandé

Un code par nehapanchal8087

Page de destination de React Netflix

Connexion depuis TheDOC

HTML

CSS

JS

Recommandé

Un code par nehapanchal8087

Page de destination de React Netflix

Connexion depuis TheDOC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS