Modello HTML/CS per il modulo di accesso e registrazione

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

28 May 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);}
}

Modello HTML/CS per il modulo di accesso e registrazione

Consigliato

Un codice di Metehan

Fumetto HTML con design SVG

Un codice di ashimadison8

HTML

CSS

JS

Consigliato

Un codice di Metehan

Fumetto HTML con design SVG

Un codice di ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS