Um código por Landing-page

Abrir no Editor Publique Seu Código

Recomendado

6 November 2024

Modelo de site de portfólio de desenvolvedor

7 December 2024

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

Um código por Landing-page

Recomendado

Modelo de site de portfólio de desenvolvedor

Um código por slowlogic9

Um Código de Yotva

HTML

CSS

JS

Recomendado

Modelo de site de portfólio de desenvolvedor

Um código por slowlogic9

Um Código de Yotva

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS