Page de connexion

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

13 May 2025

Page de connexion Roblox HTML CSS

19 July 2023

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

Page de connexion

Recommandé

Page de connexion Roblox HTML CSS

Carrousel de cartes CSS

La peur de manquer

HTML

CSS

JS

Recommandé

Page de connexion Roblox HTML CSS

Carrousel de cartes CSS

La peur de manquer

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS