Un code par page de destination

2,505 Landing-page

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 December 2025

Barre de navigation inférieure avec icônes et CSS Tailwind

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

22 September 2025

Jeu de cube 3D HTML avec statistiques et personnalisation

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Futuristic Login Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Orbitron', sans-serif;
    }

body {
      height: 100vh;
      background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      overflow: hidden;
    }

.container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 900px;
      max-width: 95vw;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      backdrop-filter: blur(12px);
      box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
      overflow: hidden;
    }

.login {
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
    }

.login::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(120deg, rgba(0, 255, 255, 0.3), rgba(255, 0, 255, 0.3));
      opacity: 0.1;
      z-index: 0;
    }

.login h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      z-index: 1;
      position: relative;
    }

.login input {
      margin-bottom: 15px;
      padding: 12px;
      border: none;
      border-radius: 10px;
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
      z-index: 1;
    }

.login input::placeholder {
      color: #ccc;
    }

.login button {
      padding: 12px;
      border: none;
      border-radius: 10px;
      background: linear-gradient(45deg, #00fff0, #ff00ff);
      color: #000;
      font-weight: bold;
      cursor: pointer;
      transition: background 0.3s;
      z-index: 1;
    }

.login button:hover {
      background: linear-gradient(45deg, #ff00ff, #00fff0);
    }

.selling {
      background: linear-gradient(to right, #1f1c2c, #928dab);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 40px;
      color: white;
    }

.selling h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
    }

.selling p {
      font-size: 1.1rem;
      margin-bottom: 30px;
    }

.selling a {
      color: #00ffff;
      text-decoration: none;
      font-weight: bold;
      border: 2px solid #00ffff;
      padding: 10px 20px;
      border-radius: 30px;
      transition: all 0.3s;
      text-align: center;
      width: fit-content;
    }

.selling a:hover {
      background: #00ffff;
      color: #000;
    }

@media (max-width: 768px) {
      .container {
        grid-template-columns: 1fr;
      }

.selling {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="login">
      <h2>Welcome Back</h2>
      <input type="email" placeholder="Email Address" />
      <input type="password" placeholder="Password" />
      <button>Login</button>
    </div>
    <div class="selling">
      <h1>Explore the Future</h1>
      <p>Join thousands of others using our next-gen platform to manage everything—faster, smarter, and more securely.</p>
      <a href="#">Learn More</a>
    </div>
  </div>
</body>
</html>

CSS