Plantilla HTML CSS para formulario de inicio de sesión y registro

55 Metehan

Abrir en el editor Publica tu código

Plantilla HTML CSS para formulario de inicio de sesión y registro

Recomendado

10 August 2024

Campo de entrada simple

30 November 2024

Sitio web de viajes con radio de borde invertido

28 June 2025

Plantilla de panel de administración HTML con barra lateral

HTML

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=

Recomendado

Campo de entrada simple

Sitio web de viajes con radio de borde invertido

Plantilla de panel de administración HTML con barra lateral

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS