मेटेहन द्वारा एक कोड

अनुशंसित

10 February 2025

कुशल फ़ंक्शन 480 द्वारा एक कोड

26 December 2024

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

मेटेहन द्वारा एक कोड

अनुशंसित

bachir123 द्वारा एक कोड

कुशल फ़ंक्शन 480 द्वारा एक कोड

logicalarray833 द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

bachir123 द्वारा एक कोड

कुशल फ़ंक्शन 480 द्वारा एक कोड

logicalarray833 द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS