Un code par page de destination

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

5 April 2025

Page de destination du magasin d'informatique

13 June 2025

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

Un code par page de destination

Recommandé

un site Web de plateforme

Page de destination du magasin d'informatique

Un code par ashimadison8

HTML

CSS

JS

Recommandé

un site Web de plateforme

Page de destination du magasin d'informatique

Un code par ashimadison8

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS