लॉगिन और पंजीकरण फ़ॉर्म HTML (तुर्की)

अनुशंसित

6 May 2024

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

5 October 2024

<!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.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container" id="container">
    <div class="form-container sign-up">
        <form id="msform">
            <ul id="progressbar">
                <li class="active">Hesap</li>
                <li>Detaylar</li>
                <li>Profil</li>
            </ul>
            <fieldset>
                <h1>Hesap Oluştur</h1>
                <div class="social-icons">
                    <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                    <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
                </div>
                <span>veya kayıt için e-postanızı kullanın</span>
                <input type="email" name="email" placeholder="Email">
                <input type="password" name="pass" placeholder="Şifre">
                <input type="password" name="cpass" placeholder="Şifre Tekrar">
                <input type="button" name="next" class="next action-button" value="İleri">
            </fieldset>
            <fieldset>
                <h1>Kişisel Detaylar</h1>
                <input type="text" name="fname" placeholder="Adınız">
                <input type="text" name="lname" placeholder="Soyadınız">
                <input type="text" name="phone" placeholder="Telefon">
                <input type="button" name="previous" class="previous action-button" value="Geri">
                <input type="button" name="next" class="next action-button" value="İleri">
            </fieldset>
            <fieldset>
                <h1>Sosyal Profiller</h1>
                <input type="text" name="twitter" placeholder="Twitter">
                <input type="text" name="github" placeholder="Github">
                <input type="text" name="instagram" placeholder="Instagram">
                <input type="button" name="previous" class="previous action-button" value="Geri">
                <input type="submit" name="submit" class="action-button" value="Gönder">
            </fieldset>
        </form>
    </div>

<div class="form-container sign-in">
        <form>
            <h1>Giriş Yap</h1>
            <div class="social-icons">
                <a href="#" class="icon"><i class="fa-brands fa-google-plus-g"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-facebook-f"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-github"></i></a>
                <a href="#" class="icon"><i class="fa-brands fa-linkedin-in"></i></a>
            </div>
            <span>veya e-postanız ile giriş yapın</span>
            <input type="email" placeholder="Email">
            <input type="password" placeholder="Şifre">
            <a href="#">Şifreni mi unuttun?</a>
            <button>Giriş Yap</button>
        </form>
    </div>

<div class="toggle-container">
        <div class="toggle">
            <div class="toggle-panel toggle-left">
                <h1>Tekrar Hoş Geldin!</h1>
                <p>Giriş yapmak ve yolculuğuna devam etmek için kişisel bilgilerini gir</p>
                <button class="hidden" id="login">Giriş Yap</button>
            </div>
            <div class="toggle-panel toggle-right">
                <h1>Merhaba, Dostum!</h1>
                <p>Yolculuğa bizimle başlamak için kişisel bilgilerini girerek kayıt ol</p>
                <button class="hidden" id="register">Kayıt Ol</button>
            </div>
        </div>
    </div>
</div>

CSS

css 2 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

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

body{
    background-color: #c9d6ff;
    background: linear-gradient(to right, #e2e2e2, #c9d6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100vh;
}

.container{
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
    width: 768px;
    max-width: 100%;
    min-height: 480px;
}

.container p{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin: 20px 0;
}

.container span{
    font-size: 12px;
}

.container a{
    color: #333;
    font-size: 13px;
    text-decoration: none;
    margin: 15px 0 10px;
}

.container button, .action-button {
    background: #ff4b2b;
    color: #fff;
    font-size: 12px;
    padding: 10px 45px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 10px;
    cursor: pointer;
    box-shadow: 0 0 20px #ff4b2b; /* Neon Efekti */
}

.container button.hidden{
    background-color: transparent;
    border-color: #fff;
    box-shadow: none;
}

.container form{
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    height: 100%;
}

.container input{
    background-color: #eee;
    border: none;
    margin: 8px 0;
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 8px;
    width: 100%;
    outline: none;
}

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

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

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

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

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

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

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

.social-icons a{
    border: 1px solid #ccc;
    border-radius: 20%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 3px;
    width: 40px;
    height: 40px;
}

.toggle-container{
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
    border-radius: 150px 0 0 100px;
    z-index: 1000;
}

.container.active .toggle-container{
    transform: translateX(-100%);
    border-radius: 0 150px 100px 0;
}

.toggle{
    background-color: #ff4b2b;
    height: 100%;
    background: linear-gradient(to right, #ff416c, #ff4b2b);
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateX(0);
    transition: all 0.6s ease-in-out;
}

.container.active .toggle{
    transform: translateX(50%);
}

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

.toggle-left{
    transform: translateX(-200%);
}

.container.active .toggle-left{
    transform: translateX(0);
}

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

.container.active .toggle-right{
    transform: translateX(200%);
}

/* Çok Adımlı Form Stilleri */
#msform {
    width: 100%;
    text-align: center;
    position: relative;
}
#msform fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
}

#msform fieldset:not(:first-of-type) {
    display: none;
}

.action-button {
    width: 100px;
    margin: 10px 5px;
}

/* İlerleme Çubuğu */
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    counter-reset: step;
    display: flex;
    justify-content: center;
}
#progressbar li {
    list-style-type: none;
    color: #666;
    text-transform: uppercase;
    font-size: 9px;
    width: 33.33%;
    position: relative;
    text-align: center;
}
#progressbar li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #333;
    background: #ddd;
    border-radius: 50%;
    margin: 0 auto 5px auto;
}
#progressbar li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #ddd;
    position: absolute;
    left: -50%;
    top: 9px;
    z-index: -1;
}
#progressbar li:first-child:after {
    content: none;
}
#progressbar li.active:before, #progressbar li.active:after {
    background: #ffc107; /* Sarı Neon */
    color: white;
    box-shadow: 0 0 15px #ffc107; /* Neon Efekti */
}

JS

javascript 3 // Giriş ve Kayıt Formu Geçişi
const container = document.getElementById('container');
const registerBtn = document.getElementById('register');
const loginBtn = document.getElementById('login');

registerBtn.addEventListener('click', () => {
    container.classList.add("active");
});

loginBtn.addEventListener('click', () => {
    container.classList.remove("active");
});

// Çok Adımlı Kayıt Formu Mantığı
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;

$(".next").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    next_fs = $(this).parent().next();
    
    // İlerleme çubuğunu aktifleştir
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
    
    // Sonraki adımı göster
    next_fs.show(); 
    
    // Mevcut adımı animasyonla gizle
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 1 - (1 - now) * 0.2;
            left = (now * 50)+"%";
            opacity = 1 - now;
            current_fs.css({
                'transform': 'scale('+scale+')',
                'position': 'absolute',
                'top': 0, // Düzgün animasyon için
                'width': '100%' // Düzgün animasyon için
            });
            next_fs.css({'left': left, 'opacity': opacity, 'position': 'relative'});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;
    
    current_fs = $(this).parent();
    previous_fs = $(this).parent().prev();
    
    // İlerleme çubuğundaki aktif durumu kaldır
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
    
    // Önceki adımı göster
    previous_fs.show(); 
    
    // Mevcut adımı animasyonla gizle
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            scale = 0.8 + (1 - now) * 0.2;
            left = ((1-now) * 50)+"%";
            opacity = 1 - now;
            current_fs.css({'left': left, 'position': 'absolute', 'top': 0, 'width': '100%'});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity, 'position': 'relative'});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        easing: 'easeInOutBack'
    });
});

// Formu gönderme
$(".submit").click(function(){
    return false;
})

लॉगिन और पंजीकरण फ़ॉर्म HTML (तुर्की)

अनुशंसित

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

एनिमेटेड HTML इनपुट

HTML डेवलपर पोर्टफोलियो V2

HTML

CSS

JS

अनुशंसित

कॉमिक स्टाइल लॉगिन और पंजीकरण फॉर्म

एनिमेटेड HTML इनपुट

HTML डेवलपर पोर्टफोलियो V2

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS