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

754 Metehan

Abrir en el editor Publica tu código

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

Recomendado

26 March 2025

Página de destino para un negocio de bicicletas

26 August 2024

Botón Únete hoy

22 August 2025

Servicios de Diseño Web, Marketing Digital y Vídeo

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>

Recomendado

Página de destino para un negocio de bicicletas

Botón Únete hoy

Servicios de Diseño Web, Marketing Digital y Vídeo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS