Um Código de Metehan

Abrir no Editor Publique Seu Código

Recomendado

30 March 2025

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>3D Login & Register</title>
  <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet"/>
  <style>
    * {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: url('https://media.istockphoto.com/id/1201190921/tr/foto%C4%9Fraf/atmosferik-y%C4%B1ld%C4%B1zl%C4%B1-g%C3%B6ky%C3%BCz%C3%BCne-kar%C5%9F%C4%B1-f%C3%BCt%C3%BCristik-%C5%9Fehir.jpg?s=612x612&w=0&k=20&c=H71-oA-enKfclbY_5M77pmPRWjJ_a8vSJto1ZZ5HuwM=') no-repeat center center / cover;
      perspective: 1000px;
      overflow: hidden;
    }

body::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(2px);
      z-index: 0;
    }

#credits {
      position: fixed;
      bottom: 10px;
      right: 10px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 12px;
      z-index: 1000;
    }

.form-container {
      position: relative;
      width: 420px;
      height: 500px;
      transform-style: preserve-3d;
      transition: transform 0.8s ease;
      z-index: 10;
      animation: float 6s ease-in-out infinite;
    }

.form-container.flipped {
      transform: rotateY(180deg);
    }

.form-side {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 20px;
      padding: 40px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border: 2px solid rgba(255, 255, 255, 0.2);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
      color: #fff;
      transform: translateZ(50px);
    }

.register-side {
      transform: rotateY(180deg) translateZ(50px);
    }

.form-side h1 {
      font-size: 32px;
      text-align: center;
      margin-bottom: 30px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      background: linear-gradient(45deg, #fff, #e0e0e0);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.input-box {
      position: relative;
      width: 100%;
      height: 50px;
      margin: 25px 0;
    }

.input-box input {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      font-size: 16px;
      color: #fff;
      padding: 0 20px;
      outline: none;
      transition: 0.3s;
    }

.input-box input:focus {
      border-color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    }

.input-box input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }

.input-box i {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      color: rgba(255, 255, 255, 0.7);
    }

.remember-forgot {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin: 20px 0;
    }

.remember-forgot label {
      display: flex;
      align-items: center;
    }

.remember-forgot input[type="checkbox"] {
      margin-right: 8px;
      transform: scale(1.2);
    }

.remember-forgot a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
    }

.remember-forgot a:hover {
      color: #fff;
    }

.btn {
      width: 100%;
      height: 50px;
      background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
      border: none;
      border-radius: 10px;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      cursor: pointer;
      margin: 20px 0;
    }

.btn:hover {
      background: linear-gradient(45deg, #fff, rgba(255, 255, 255, 0.9));
    }

.switch-link {
      font-size: 14px;
      text-align: center;
      margin-top: 15px;
    }

.switch-link a {
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      cursor: pointer;
    }

@keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-10px); }
    }

@media (max-width: 480px) {
      .form-container {
        width: 90%;
        margin: 0 auto;
      }

.form-side {
        padding: 30px 25px;
      }
    }
  </style>
</head>
<body>
  <div id="credits">Made by pan4o</div>

<div class="form-container" id="formContainer">
    
    <div class="form-side login-side">
      <form>
        <h1>Giriş Yap</h1>
        <div class="input-box">
          <input type="text" placeholder="Kullanıcı Adı" required>
          <i class='bx bxs-user'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifre" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <div class="remember-forgot">
          <label><input type="checkbox"> Beni Hatırla</label>
          <a href="#">Şifremi unuttum</a>
        </div>
        <button type="submit" class="btn">Giriş Yap</button>
        <div class="switch-link">
          <p>Hesabınız yok mu? <a onclick="flipForm()">Kayıt Ol!</a></p>
        </div>
      </form>
    </div>

<div class="form-side register-side">
      <form>
        <h1>Kayıt Ol</h1>
        <div class="input-box">
          <input type="text" placeholder="Ad Soyad" required>
          <i class='bx bxs-user'></i>
        </div>
        <div class="input-box">
          <input type="email" placeholder="Email" required>
          <i class='bx bxs-envelope'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifre" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Şifreyi Onayla" required>
          <i class='bx bxs-lock-alt'></i>
        </div>
        <button type="submit" class="btn">Kayıt Ol</button>
        <div class="switch-link">
          <p>Zaten hesabınız var mı? <a onclick="flipForm()">Giriş Yap!</a></p>
        </div>
      </form>
    </div>
  </div>

document.addEventListener('mouseleave', function() {
      const container = document.getElementById('formContainer');
      container.style.transform = 'rotateY(0deg) rotateX(0deg)';
    });
  </script>
</body>
</html>

Um Código de Metehan

Recomendado

Um código por ytr3d3

carregamento de pulso

Um código por Landingpage1

HTML

CSS

JS

Recomendado

Um código por ytr3d3

carregamento de pulso

Um código por Landingpage1

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS