Página de login

Abrir no Editor Publique Seu Código

Recomendado

4 June 2025

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Connexion Ultime</title>
</head>
<body>
  <div class="background-stars">
    <script>
      for (let i = 0; i < 150; i++) {
        const star = document.createElement('div');
        star.classList.add('star');
        star.style.top = Math.random() * 100 + '%';
        star.style.left = Math.random() * 100 + '%';
        star.style.animationDuration = (Math.random() * 5 + 2) + 's';
        document.body.querySelector('.background-stars').appendChild(star);
      }
    </script>
  </div>

<div class="background-shapes">
    <div id="shapes-container"></div>
    <script>
      const shapes = [
        { type: 'circle', color: 'rgba(255, 0, 150, 0.8)' },
        { type: 'square', color: 'rgba(0, 200, 255, 0.8)' },
        { type: 'triangle', color: 'rgba(0, 255, 150, 0.8)' }
      ];

const shapeElements = [];

for (let i = 0; i < 9; i++) {
        const type = shapes[i % 3].type;
        const el = document.createElement('div');
        el.classList.add('shape', type);
        el.style.top = Math.random() * 100 + 'vh';
        el.style.left = Math.random() * 100 + 'vw';
        document.getElementById('shapes-container').appendChild(el);

shapeElements.push({
          el,
          dx: Math.random() * 2 + 0.5,
          dy: Math.random() * 2 + 0.5
        });
      }

function animateShapes() {
        shapeElements.forEach(shape => {
          let rect = shape.el.getBoundingClientRect();
          let x = rect.left;
          let y = rect.top;

let newX = x + shape.dx;
          let newY = y + shape.dy;

if (newX <= 0 || newX + rect.width >= window.innerWidth) shape.dx *= -1;
          if (newY <= 0 || newY + rect.height >= window.innerHeight) shape.dy *= -1;

shape.el.style.left = (shape.el.offsetLeft + shape.dx) + 'px';
          shape.el.style.top = (shape.el.offsetTop + shape.dy) + 'px';
        });

requestAnimationFrame(animateShapes);
      }

animateShapes();
    </script>
  </div>

<div class="login-container">
    <h2>Bienvenue</h2>
    <form>
      <div class="form-group">
        <label for="username">Nom d'utilisateur</label>
        <input type="text" id="username" name="username" placeholder="Votre nom d'utilisateur" required />
      </div>
      <div class="form-group">
        <label for="password">Mot de passe</label>
        <input type="password" id="password" name="password" placeholder="Votre mot de passe" required />
      </div>
      <button type="submit">Se connecter</button>
    </form>
    <div class="footer">© 2025 Connexion Futuriste</div>
  </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

body {
      margin: 0;
      font-family: 'Orbitron', sans-serif;
      background: radial-gradient(#0a0a23, #000);
      height: 100vh;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
    }

.background-stars {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -3;
    }

.background-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -2;
      pointer-events: none;
    }

.star {
      position: absolute;
      width: 2px;
      height: 2px;
      background: white;
      border-radius: 50%;
      animation: twinkle 4s infinite ease-in-out;
    }

@keyframes twinkle {
      0%, 100% { opacity: 0.2; }
      50% { opacity: 1; }
    }

.shape {
      position: absolute;
      opacity: 0.7;
    }

.circle {
      width: 40px;
      height: 40px;
      background: rgba(255, 0, 150, 0.8);
      border-radius: 50%;
    }

.square {
      width: 40px;
      height: 40px;
      background: rgba(0, 200, 255, 0.8);
    }

.triangle {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 40px solid rgba(0, 255, 150, 0.8);
    }

.login-container {
      background: rgba(15, 15, 30, 0.95);
      padding: 3rem;
      border-radius: 20px;
      box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset;
      width: 100%;
      max-width: 420px;
      animation: pulse 5s infinite;
      z-index: 1;
    }

@keyframes pulse {
      0%, 100% { box-shadow: 0 0 40px #ff00ff, 0 0 80px #00ffe1 inset; }
      50% { box-shadow: 0 0 60px #ff66ff, 0 0 100px #00ffe1 inset; }
    }

.login-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      font-size: 2rem;
      color: #ff66ff;
      text-shadow: 0 0 15px #ff66ff, 0 0 25px #00ffe1;
    }

.form-group {
      margin-bottom: 1.5rem;
    }

.form-group label {
      display: block;
      margin-bottom: 0.5rem;
      color: #00ffe1;
      text-shadow: 0 0 10px #00ffe1;
    }

.form-group input {
      width: 100%;
      padding: 0.75rem;
      border: none;
      border-radius: 12px;
      background-color: #111;
      color: #fff;
      box-shadow: 0 0 15px #ff00ff inset;
      font-size: 1rem;
    }

.form-group input:focus {
      outline: none;
      box-shadow: 0 0 20px #ff00ff inset, 0 0 10px #00ffe1;
    }

button {
      width: 100%;
      padding: 1rem;
      background: linear-gradient(135deg, #ff00ff, #00ffe1);
      color: #000;
      border: none;
      border-radius: 12px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 0 25px #ff00ff;
      transition: all 0.4s ease;
    }

button:hover {
      transform: scale(1.05);
      box-shadow: 0 0 35px #ff00ff, 0 0 50px #00ffe1;
    }

.footer {
      margin-top: 2rem;
      text-align: center;
      font-size: 0.9rem;
      color: #ccc;
      text-shadow: 0 0 5px #00ffe1;
    }

Página de login

Recomendado

Jogo de apanhador de torradas

Um código de Mete

gerador de citações

HTML

CSS

JS

Recomendado

Jogo de apanhador de torradas

Um código de Mete

gerador de citações

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS