Ein Code per Landingpage

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

3 January 2025

Landingpage für ein Fahrradgeschäft

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>

Ein Code per Landingpage

Empfohlen

Ein Code von adonis1887

Ein Code von Mete

Landingpage für ein Fahrradgeschäft

HTML

CSS

JS

Empfohlen

Ein Code von adonis1887

Ein Code von Mete

Landingpage für ein Fahrradgeschäft

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS