Ein Code von fluxyftnpro

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

13 June 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>

Ein Code von fluxyftnpro

Empfohlen

Ein Code von Metehan

Ein Code von toolify001

Ein Code von adonis1887

HTML

CSS

JS

Empfohlen

Ein Code von Metehan

Ein Code von toolify001

Ein Code von adonis1887

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS