Formulário de login e registro HTML CSS Template

Abrir no Editor Publique Seu Código

Recomendado

8 May 2025

Modelo de painel de administração HTML com barra lateral

19 May 2025

i<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dijital Platform - Giriş & Kayıt</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* Genel Stil Ayarları */
        :root {
            --primary-color: #6c63ff; /* Mor-mavi ana renk */
            --secondary-color: #4d44db; /* Koyu mor-mavi ikincil renk */
            --dark-bg: #1a1a2e; /* Koyu lacivert arka plan */
            --light-text: #f5f5f7; /* Açık gri yazı rengi */
            --accent-color: #ff6b6b; /* Kırmızımsı vurgu rengi */
            --card-bg: rgba(255, 255, 255, 0.05); /* Şeffaf kart arka planı */
            --border-color: rgba(255, 255, 255, 0.1); /* Hafif beyaz çerçeve */
            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Yumuşak geçiş efekti */
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark-bg);
            color: var(--light-text);
            overflow-x: hidden;
            line-height: 1.6;
            scroll-behavior: smooth;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        /* Particle.js arka planı */
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: -1;
            top: 0;
            left: 0;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 5%; /* Yan boşluklar */
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif; /* Başlıklar için farklı font */
            color: var(--light-text);
            margin-bottom: 0.5em;
            line-height: 1.2;
        }
        a {
            text-decoration: none;
            color: var(--primary-color);
            transition: var(--transition);
        }
        a:hover {
            color: var(--secondary-color);
        }
        /* Header / Navigation */
        .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 1.5rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: var(--transition);
        }
        .main-header.scrolled {
            background-color: rgba(26, 26, 46, 0.9);
            backdrop-filter: blur(10px);
            padding: 1rem 5%;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }
        .logo {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.8rem;
            color: var(--light-text);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        .logo span {
            color: var(--primary-color);
        }
        .logo i {
            font-size: 1.5rem;
            margin-right: 8px;
            color: var(--primary-color);
        }
        .nav-links {
            display: flex;
            list-style: none;
        }
        .nav-links li {
            margin-left: 2.5rem;
        }
        .nav-link {
            color: var(--light-text);
            text-decoration: none;
            font-weight: 500;
            font-size: 1.1rem;
            position: relative;
            transition: var(--transition);
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: var(--transition);
        }
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
        .nav-link:hover {
            color: var(--primary-color);
        }
        .hamburger-menu {
            display: none;
            cursor: pointer;
            z-index: 1001;
            flex-direction: column;
            justify-content: space-between;
            width: 28px;
            height: 22px;
        }
        .hamburger-menu .line {
            display: block;
            width: 100%;
            height: 2.5px;
            background-color: var(--light-text);
            margin: 4px 0;
            transition: var(--transition);
            border-radius: 2px;
        }
        .hamburger-menu.active .line:nth-child(1) {
            transform: translateY(9.5px) rotate(45deg);
        }
        .hamburger-menu.active .line:nth-child(2) {
            opacity: 0;
        }
        .hamburger-menu.active .line:nth-child(3) {
            transform: translateY(-9.5px) rotate(-45deg);
        }
        .mobile-nav {
            position: fixed;
            top: 0;
            right: -100%;
            width: 70%;
            height: 100vh;
            background-color: var(--dark-bg);
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            z-index: 999;
            display: flex; /* Varsayılan olarak flex, active class'ı ile sağdan görünür hale gelir */
        }
        .mobile-nav.active {
            right: 0;
        }
        .mobile-nav ul {
            list-style: none;
            text-align: center;
        }
        .mobile-nav li {
            margin: 1.5rem 0;
        }
        .mobile-nav .nav-link {
            font-size: 1.2rem;
            color: var(--light-text);
        }
        /* Auth Section */
        .auth-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-grow: 1;
            padding: 2rem;
            margin-top: 80px;
        }
        .auth-container {
            display: flex;
            width: 100%;
            max-width: 1000px;
            background-color: var(--card-bg);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
        }
        .auth-intro {
            flex: 1;
            padding: 3rem;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white;
        }
        .auth-intro h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        .auth-intro ul {
            margin: 2rem 0;
            padding-left: 1.5rem;
        }
        .auth-intro li {
            margin-bottom: 1rem;
            font-size: 1.1rem;
            position: relative;
        }
        .auth-intro li:before {
            content: '✓';
            position: absolute;
            left: -1.5rem;
            color: white;
            font-weight: bold;
        }
        .auth-intro-img {
            width: 100%;
            height: 200px;
            border-radius: 10px;
            overflow: hidden;
            margin-top: 2rem;
        }
        .auth-intro-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .auth-forms {
            flex: 1;
            padding: 3rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .form-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .form-header h2 {
            font-size: 2rem;
            color: var(--light-text);
        }
        .form-header p {
            color: rgba(255, 255, 255, 0.7);
            margin-top: 0.5rem;
        }
        .form-toggle {
            display: flex;
            background-color: rgba(255, 255, 255, 0.05);
            border-radius: 50px;
            padding: 5px;
            margin-bottom: 2rem;
        }
        .toggle-btn {
            flex: 1;
            padding: 0.8rem;
            text-align: center;
            border-radius: 50px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 600;
        }
        .toggle-btn.active {
            background-color: var(--primary-color);
            color: white;
        }
        .auth-form {
            display: none;
        }
        .auth-form.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        .form-group {
            margin-bottom: 1.5rem;
        }
        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            color: var(--light-text);
            font-weight: 500;
        }
        .form-control {
            width: 100%;
            padding: 0.9rem 1.2rem;
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            color: var(--light-text);
            font-family: 'Poppins', sans-serif;
            transition: var(--transition);
        }
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            background-color: rgba(108, 99, 255, 0.1);
            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
        }
        .password-container {
            position: relative;
        }
        .toggle-password {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: rgba(255, 255, 255, 0.5);
        }
        .remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
        }
        .remember-me {
            display: flex;
            align-items: center;
        }
        .remember-me input {
            margin-right: 8px;
        }
        .forgot-password {
            color: var(--primary-color);
            transition: var(--transition);
        }
        .forgot-password:hover {
            text-decoration: underline;
        }
        .submit-btn {
            width: 100%;
            padding: 1rem;
            background-color: var(--primary-color);
            color: var(--light-text);
            border: none;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }
        .submit-btn:hover {
            background-color: var(--secondary-color);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(108, 99, 255, 0.3);
        }
        .divider {
            display: flex;
            align-items: center;
            margin: 1.5rem 0;
        }
        .divider::before,
        .divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background-color: var(--border-color);
        }
        .divider span {
            padding: 0 1rem;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        .social-login {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .social-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.8rem;
            border-radius: 10px;
            font-weight: 600;
            transition: var(--transition);
            background-color: rgba(255, 255, 255, 0.05);
            border: 1px solid var(--border-color);
            color: var(--light-text);
        }
        .social-btn i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        .social-btn.google {
            color: #fff;
        }
        .social-btn.facebook {
            color: #fff;
        }
        .social-btn.google:hover {
            background-color: #4285F4;
            border-color: #4285F4;
            transform: translateY(-3px);
        }
        .social-btn.facebook:hover {
            background-color: #3b5998;
            border-color: #3b5998;
            transform: translateY(-3px);
        }
        .form-footer {
            text-align: center;
            margin-top: 1.5rem;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.7);
        }
        .form-footer a {
            color: var(--primary-color);
            font-weight: 600;
            transition: var(--transition);
        }
        .form-footer a:hover {
            text-decoration: underline;
        }
        /* Footer */
        footer {
            background-color: rgba(0, 0, 0, 0.2); /* Hafif şeffaf koyu renk */
            padding: 2rem 5%;
            text-align: center;
            margin-top: auto;
        }
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        .footer-logo {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 1.5rem;
            color: var(--light-text);
            margin-bottom: 1.5rem;
            display: inline-block;
        }
        .footer-logo span {
            color: var(--primary-color);
        }
        .footer-links {
            display: flex;
            justify-content: center;
            list-style: none;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1.5rem;
        }
        .footer-links a {
            color: var(--light-text);
            text-decoration: none;
            transition: var(--transition);
        }
        .footer-links a:hover {
            color: var(--primary-color);
        }
        .footer-social {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .footer-social a {
            color: var(--light-text);
            font-size: 1.5rem;
            transition: var(--transition);
        }
        .footer-social a:hover {
            color: var(--primary-color);
            transform: translateY(-5px);
        }
        .copyright {
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }
        /* Animasyonlar */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* Responsive Tasarım */
        @media (max-width: 992px) {
            .auth-container {
                flex-direction: column;
                max-width: 600px;
            }
            .auth-intro {
                padding: 2rem;
            }
            .auth-forms {
                padding: 2rem;
            }
        }
        @media (max-width: 768px) {
            .main-header {
                padding: 1rem 5%;
            }
            .nav-links {
                display: none;
            }
            .hamburger-menu {
                display: flex;
            }
            .auth-section {
                padding: 1rem;
                margin-top: 70px;
            }
        }
        @media (max-width: 576px) {
            .auth-intro h2 {
                font-size: 2rem;
            }
            .form-header h2 {
                font-size: 1.8rem;
            }
            .auth-intro ul {
                font-size: 0.9rem;
            }
        }
    </style>
</head>
<body>
    
    <div id="particles-js"></div>
    
    
    <header class="main-header" id="header">
        <a href="#anasayfa" class="logo">Dijital<span>Platform</span> <i class="fas fa-rocket"></i></a>
        
        <nav>
            <ul class="nav-links" id="nav-links">
                <li><a href="#anasayfa" class="nav-link">Anasayfa</a></li>
                <li><a href="#hakkimda" class="nav-link">Hakkımızda</a></li>
                <li><a href="#hizmetler" class="nav-link">Hizmetler</a></li>
                <li><a href="#iletisim" class="nav-link">İletişim</a></li>
                <li><a href="#" class="nav-link active">Giriş Yap</a></li>
            </ul>
            
            <button class="hamburger-menu" id="hamburger-menu">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
            </button>
        </nav>
        <div class="mobile-nav" id="mobile-nav">
            <ul>
                <li><a href="#anasayfa" class="nav-link">Anasayfa</a></li>
                <li><a href="#hakkimda" class="nav-link">Hakkımızda</a></li>
                <li><a href="#hizmetler" class="nav-link">Hizmetler</a></li>
                <li><a href="#iletisim" class="nav-link">İletişim</a></li>
                <li><a href="#" class="nav-link active">Giriş Yap</a></li>
            </ul>
        </div>
    </header>
    
    
    <section class="auth-section">
        <div class="auth-container">
            <div class="auth-intro">
                <h2>Dijital Dünyaya Hoş Geldiniz</h2>
                <p>Tek bir hesap ile tüm hizmetlerimize erişin ve dijital deneyiminizi kişiselleştirin.</p>
                
                <ul>
                    <li>Kişiselleştirilmiş içerik ve öneriler</li>
                    <li>Favori ayarlarınızı cihazlarınız arasında senkronize edin</li>
                    <li>Özel indirimler ve avantajlardan yararlanın</li>
                    <li>Topluluğumuza katılın ve etkileşimde bulunun</li>
                    <li>Gelişmiş güvenlik ve gizlilik ayarları</li>
                </ul>
                
                <div class="auth-intro-img">
                    <img src="https://images.unsplash.com/photo-1553877522-43269d4ea984?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.0.3&q=80&w=1470" alt="Dijital Platform">
                </div>
            </div>
            
            <div class="auth-forms">
                <div class="form-header">
                    <h2 id="form-title">Hesabınıza Giriş Yapın</h2>
                    <p id="form-subtitle">Dijital yolculuğunuza devam edin</p>
                </div>
                
                <div class="form-toggle">
                    <div class="toggle-btn active" id="login-toggle">Giriş Yap</div>
                    <div class="toggle-btn" id="signup-toggle">Kayıt Ol</div>
                </div>
                
                
                <form class="auth-form active" id="login-form">
                    <div class="form-group">
                        <label for="login-email">E-posta Adresi</label>
                        <input type="email" id="login-email" class="form-control" placeholder="ornek@mail.com" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="login-password">Şifre</label>
                        <div class="password-container">
                            <input type="password" id="login-password" class="form-control" placeholder="Şifrenizi girin" required>
                            <span class=

Formulário de login e registro HTML CSS Template

Recomendado

envelope aberto

Modelo de painel de administração HTML com barra lateral

caminhão basculante

HTML

CSS

JS

Recomendado

envelope aberto

Modelo de painel de administração HTML com barra lateral

caminhão basculante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS