Um Código de Metehan

653 Metehan

Abrir no Editor Publique Seu Código

Recomendado

18 November 2024

Modelo de site de portfólio moderno

10 May 2025

Um código de Mete

HTML

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

Modelo de site de portfólio moderno

Um código de Mete

HTML

CSS

JS

Recomendado

Modelo de site de portfólio moderno

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS