Formulario de inicio de sesión y registro (HTML, CSS, JS)

1,556 Metehan

Abrir en el editor Publica tu código

Formulario de inicio de sesión y registro (HTML, CSS, JS)

Recomendado

29 July 2024

juego de serpiente

23 February 2026

Incrustar iframe de reproductor de audio

19 November 2025

Formulario de registro HTML animado con estilo CSS

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş & Kayıt Formu</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1c1c1c; /* Dark background for neon effect */
            overflow: hidden;
        }

/* Neon glow background effect */
        body::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: linear-gradient(45deg, #ff003c, #ffdd00);
            border-radius: 50%;
            filter: blur(150px);
            opacity: 0.5;
        }

.container {
            position: relative;
            background: rgba(255, 255, 255, 0.05); /* Glassmorphism effect */
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 700px;
            min-height: 450px;
            overflow: hidden; /* Hide overflowing toggle panel */
        }

.container p {
            color: #ccc;
            font-size: 14px;
            margin: 15px 0;
        }

.container a {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            margin: 15px 0;
            font-weight: 500;
        }

.container a:hover {
            text-decoration: underline;
        }

.container button {
            border-radius: 20px;
            border: 1px solid #ff003c;
            background-color: #ff003c;
            color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            padding: 12px 45px;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 80ms ease-in, background-color 0.3s ease, box-shadow 0.3s ease;
        }

.container button:active {
            transform: scale(0.95);
        }

.container button:focus {
            outline: none;
        }
        
        .container button:hover {
            background-color: #ffdd00;
            border-color: #ffdd00;
            color: #1c1c1c;
            box-shadow: 0 0 20px #ffdd00;
        }

.container button.ghost {
            background-color: transparent;
            border-color: #ffffff;
        }
        
        .container button.ghost:hover {
            background-color: #fff;
            color: #1c1c1c;
            box-shadow: 0 0 20px #fff;
        }

.container form {
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 50px;
            height: 100%;
            text-align: center;
        }

.container input {
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 10px;
            padding: 12px 15px;
            margin: 8px 0;
            width: 100%;
            color: #fff;
            outline: none;
            border: 1px solid transparent;
            transition: border-color 0.3s ease;
        }

.container input::placeholder {
            color: #ccc;
        }

.container input:focus {
            border-color: #ffdd00;
        }

h1 {
            font-weight: bold;
            margin: 0;
            color: #fff;
            text-shadow: 0 0 10px #ff003c;
        }

.form-container {
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.6s ease-in-out;
        }

.sign-in-container {
            left: 0;
            width: 50%;
            z-index: 2;
        }

.container.right-panel-active .sign-in-container {
            transform: translateX(100%);
            opacity: 0;
        }

.sign-up-container {
            left: 0;
            width: 50%;
            opacity: 0;
            z-index: 1;
        }

.container.right-panel-active .sign-up-container {
            transform: translateX(100%);
            opacity: 1;
            z-index: 5;
            animation: show 0.6s;
        }

@keyframes show {
            0%, 49.99% {
                opacity: 0;
                z-index: 1;
            }
            50%, 100% {
                opacity: 1;
                z-index: 5;
            }
        }

.overlay-container {
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            overflow: hidden;
            transition: transform 0.6s ease-in-out;
            z-index: 100;
        }

.container.right-panel-active .overlay-container {
            transform: translateX(-100%);
        }

.overlay {
            background: #ff003c;
            background: -webkit-linear-gradient(to right, #ffdd00, #ff003c);
            background: linear-gradient(to right, #ffdd00, #ff003c);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
            color: #ffffff;
            position: relative;
            left: -100%;
            height: 100%;
            width: 200%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }

.container.right-panel-active .overlay {
            transform: translateX(50%);
        }

.overlay-panel {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 40px;
            text-align: center;
            top: 0;
            height: 100%;
            width: 50%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }
        
        .overlay-panel h1 {
            text-shadow: none;
        }

.overlay-left {
            transform: translateX(-20%);
        }

.container.right-panel-active .overlay-left {
            transform: translateX(0);
        }

.overlay-right {
            right: 0;
            transform: translateX(0);
        }

.container.right-panel-active .overlay-right {
            transform: translateX(20%);
        }

.social-container {
            margin: 20px 0;
        }

.social-container a {
            border: 1px solid #dddddd;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            height: 40px;
            width: 40px;
            color: #fff;
            transition: all 0.3s ease;
        }

.social-container a:hover {
            color: #1c1c1c;
            background-color: #fff;
            border-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 15px #fff;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 450px;
            }
            .overlay-container {
                display: none;
            }
            .form-container {
                width: 100%;
            }
            .sign-in-container {
                opacity: 1;
                z-index: 2;
            }
            .sign-up-container {
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-in-container {
                transform: none;
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-up-container {
                transform: none;
                opacity: 1;
                z-index: 2;
            }
            
            /* We will use JS to toggle a class for mobile view */
            .mobile-toggle-panel {
                display: block;
                padding: 20px;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: rgba(0,0,0,0.3);
            }
        }
        
        @media (min-width: 769px) {
            .mobile-toggle-panel {
                display: none;
            }
        }

</style>
</head>
<body>

<div class="container" id="container">
        
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>Hesap Oluştur</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya kayıt için e-postanızı kullanın</p>
                <input type="text" placeholder="Adınız" />
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Kayıt Ol</button>
            </form>
        </div>
        
        
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>Giriş Yap</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya hesabınızı kullanın</p>
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Giriş Yap</button>
            </form>
        </div>
        
        
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Tekrar Hoşgeldin!</h1>
                    <p>Giriş yapmak ve bizimle bağlantıda kalmak için lütfen kişisel bilgilerinizi girin.</p>
                    <button class="ghost" id="signIn">Giriş Yap</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Merhaba!</h1>
                    <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın.</p>
                    <button class="ghost" id="signUp">Kayıt Ol</button>
                </div>
            </div>
        </div>
        
        
        <div class="mobile-toggle-panel">
             <p id="mobile-text">Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a></p>
        </div>
    </div>

// Desktop toggle
        signUpButton.addEventListener('click', () => {
            container.classList.add("right-panel-active");
        });

signInButton.addEventListener('click', () => {
            container.classList.remove("right-panel-active");
        });
        
        // Mobile toggle
        mobileToggleBtn.addEventListener('click', (e) => {
            e.preventDefault();
            container.classList.toggle("right-panel-active");
            
            if (container.classList.contains("right-panel-active")) {
                mobileText.innerHTML = 'Zaten hesabın var mı? <a href="#" id="mobile-toggle-btn">Giriş Yap</a>';
            } else {
                mobileText.innerHTML = 'Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a>';
            }
            
            // Re-assign the event listener to the new link
            document.getElementById('mobile-toggle-btn').addEventListener('click', arguments.callee);
        });

</script>

</body>
</html>

CSS