Metenin bir kodu – Version 4

18 Metehan

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic 3D Rotation Login / Signup</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/material-icons@1.13.12/iconfont/material-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        cyber: {
                            DEFAULT: '#10b981',
                            dark: '#064e3b',
                            light: '#34d399',
                            accent: '#059669',
                            bg: '#090d0b',
                            card: '#111816',
                            border: '#1f2923'
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        display: ['Space Grotesk', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #090d0b;
            color: #f3f4f6;
            overflow-x: hidden;
        }

h1, h2, h3, h4, .font-display {
            font-family: 'Space Grotesk', sans-serif;
        }

.card-3d-wrap {
            position: relative;
            width: 420px;
            max-width: 100%;
            height: 480px;
            transform-style: preserve-3d;
            perspective: 1000px;
        }

.card-3d-wrapper {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {
            transform: rotateY(180deg);
        }

.card-front, .card-back {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(17, 24, 22, 0.95), rgba(9, 13, 11, 0.98));
            backdrop-filter: blur(20px);
            position: absolute;
            border-radius: 1.5rem;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            backface-visibility: hidden;
            border: 1px solid rgba(16, 185, 129, 0.2);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 30px rgba(16, 185, 129, 0.1);
        }

.card-back {
            transform: rotateY(180deg);
        }

.center-wrap {
            position: absolute;
            width: 100%;
            padding: 0 40px;
            top: 50%;
            left: 0;
            transform: translate3d(0, -50%, 50px) perspective(100px);
            z-index: 20;
        }

.form-style {
            background-color: rgba(25, 35, 31, 0.8);
            border: 1px solid rgba(16, 185, 129, 0.2);
            transition: all 0.3s ease;
        }

.form-style:focus {
            border-color: #10b981;
            box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
            background-color: rgba(20, 30, 26, 0.95);
        }

.glow-orb {
            position: absolute;
            width: 350px;
            height: 350px;
            background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.05) 50%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
    </style>
</head>
<body class="bg-[#090d0b] text-gray-100 min-h-screen relative selection:bg-emerald-500 selection:text-white">

<nav class="fixed top-0 left-0 w-full z-50 bg-[#090d0b]/80 backdrop-blur-xl border-b border-emerald-500/10 px-6 py-4">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-tr from-emerald-600 to-teal-400 flex items-center justify-center shadow-lg shadow-emerald-500/20">
                    <i class="material-icons text-white text-xl">hexagon</i>
                </div>
                <span class="font-display text-2xl font-bold tracking-wider text-white">FREE<span class="text-emerald-400">LANCER</span></span>
            </div>

<ul class="hidden lg:flex items-center space-x-8 peer-checked:flex peer-checked:flex-col peer-checked:absolute peer-checked:top-20 peer-checked:left-0 peer-checked:w-full peer-checked:bg-[#090d0b]/95 peer-checked:p-8 peer-checked:border-b peer-checked:border-emerald-500/20 transition-all">
                <li><a href="#" class="text-emerald-400 font-medium px-4 py-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20 block">Home</a></li>
                <li><a href="#" class="text-gray-300 hover:text-emerald-400 font-medium transition-colors block py-2">About</a></li>
                <li><a href="#" class="text-gray-300 hover:text-emerald-400 font-medium transition-colors block py-2">Services</a></li>
                <li><a href="#" class="text-gray-300 hover:text-emerald-400 font-medium transition-colors block py-2">Gallery</a></li>
                <li><a href="#" class="text-gray-300 hover:text-emerald-400 font-medium transition-colors block py-2">Feedback</a></li>
            </ul>
        </div>
    </nav>

<section class="min-h-screen pt-32 pb-20 flex items-center relative z-10">
        <div class="max-w-7xl mx-auto px-6 w-full">
            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
                
                <div class="lg:col-span-6 space-y-6">
                    <div class="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium">
                        <span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
                        <span>Digital Ecosystem 2.0</span>
                    </div>

<h1 class="font-display text-4xl sm:text-6xl font-bold leading-tight tracking-tight text-white">
                        Hello, I'm <span class="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-teal-200">KEVAKIBHACK</span>, <br>
                        a <span class="text-emerald-400 underline decoration-emerald-500/30 underline-offset-8">digital designer</span>
                    </h1>

<p class="text-gray-400 text-lg leading-relaxed max-w-xl">
                        Merging immersive AR aesthetics with high-performance web architecture. Explore next-gen interfaces designed for creators and visionaries.
                    </p>

<div class="pt-4 flex items-center space-x-6">
                        <a href="#" class="px-8 py-4 bg-gradient-to-r from-emerald-600 to-emerald-500 hover:from-emerald-500 hover:to-emerald-400 text-white font-semibold rounded-xl shadow-lg shadow-emerald-600/30 transition-all transform hover:-translate-y-0.5 flex items-center space-x-2">
                            <span>Get in Touch</span>
                            <i class="material-icons text-sm">arrow_forward</i>
                        </a>
                        <div class="flex items-center space-x-4">
                            <a href="#" class="w-11 h-11 rounded-xl bg-[#111816] border border-emerald-500/20 flex items-center justify-center text-gray-300 hover:text-emerald-400 hover:border-emerald-500 transition-all"><i class="fa-brands fa-facebook-f"></i></a>
                            <a href="#" class="w-11 h-11 rounded-xl bg-[#111816] border border-emerald-500/20 flex items-center justify-center text-gray-300 hover:text-emerald-400 hover:border-emerald-500 transition-all"><i class="fa-brands fa-x-twitter"></i></a>
                            <a href="#" class="w-11 h-11 rounded-xl bg-[#111816] border border-emerald-500/20 flex items-center justify-center text-gray-300 hover:text-emerald-400 hover:border-emerald-500 transition-all"><i class="fa-brands fa-instagram"></i></a>
                            <a href="#" class="w-11 h-11 rounded-xl bg-[#111816] border border-emerald-500/20 flex items-center justify-center text-gray-300 hover:text-emerald-400 hover:border-emerald-500 transition-all"><i class="fa-brands fa-linkedin-in"></i></a>
                        </div>
                    </div>
                </div>

<div class="card-3d-wrap mx-auto">
                            <div class="card-3d-wrapper">
                                
                                <div class="card-front p-8 flex flex-col justify-center">
                                    <div class="center-wrap">
                                        <h3 class="font-display text-2xl font-bold text-white mb-6 tracking-wide">Welcome Back</h3>
                                        
                                        <form onsubmit="event.preventDefault(); showMessage('Login successful!');" class="space-y-4">
                                            <div class="relative">
                                                <input type="email" required class="form-style w-full px-4 py-3.5 pl-12 rounded-xl text-sm text-gray-200 outline-none placeholder-gray-500" placeholder="Your Email">
                                                <i class="input-icon material-icons absolute left-4 top-3.5 text-emerald-400">alternate_email</i>
                                            </div>

<button type="submit" class="w-full py-4 bg-emerald-500 hover:bg-emerald-400 text-gray-950 font-bold rounded-xl shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-wider text-sm mt-2">
                                                Access Portal
                                            </button>
                                        </form>

<div class="text-center mt-4">
                                            <a href="#" onclick="showMessage('Password reset instructions sent to your email.');" class="text-xs text-gray-400 hover:text-emerald-400 transition-colors">Forgot your password?</a>
                                        </div>
                                    </div>
                                </div>

<div class="card-back p-8 flex flex-col justify-center">
                                    <div class="center-wrap">
                                        <h3 class="font-display text-2xl font-bold text-white mb-6 tracking-wide">Create Account</h3>
                                        
                                        <form onsubmit="event.preventDefault(); showMessage('Account created successfully!');" class="space-y-4">
                                            <div class="relative">
                                                <input type="text" required class="form-style w-full px-4 py-3 pl-12 rounded-xl text-sm text-gray-200 outline-none placeholder-gray-500" placeholder="Your Name">
                                                <i class="input-icon material-icons absolute left-4 top-3 text-emerald-400">perm_identity</i>
                                            </div>

<div class="relative">
                                                <input type="email" required class="form-style w-full px-4 py-3 pl-12 rounded-xl text-sm text-gray-200 outline-none placeholder-gray-500" placeholder="Your Email">
                                                <i class="input-icon material-icons absolute left-4 top-3 text-emerald-400">alternate_email</i>
                                            </div>

<button type="submit" class="w-full py-3.5 bg-emerald-500 hover:bg-emerald-400 text-gray-950 font-bold rounded-xl shadow-lg shadow-emerald-500/20 transition-all uppercase tracking-wider text-sm mt-2">
                                                Initialize Access
                                            </button>
                                        </form>
                                    </div>
                                </div>

</div>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>

<div id="toast" class="fixed bottom-6 right-6 transform translate-y-24 opacity-0 transition-all duration-300 z-50 bg-[#111816] border border-emerald-500/30 text-white px-6 py-4 rounded-xl shadow-2xl flex items-center space-x-3">
        <i class="material-icons text-emerald-400">check_circle</i>
        <span id="toast-msg" class="text-sm font-medium">Notification message</span>
    </div>

// Custom checkbox flip toggle adjustment for custom toggle UI
        const checkbox = document.getElementById('reg-log');
        const label = document.querySelector('label[for="reg-log"] span');
        checkbox.addEventListener('change', function() {
            if(this.checked) {
                label.style.transform = 'translateX(32px) rotate(180deg)';
            } else {
                label.style.transform = 'translateX(0px) rotate(0deg)';
            }
        });
    </script>
</body>
</html>
```

CSS

Metenin bir kodu – Version 4

Recommended