Modèle HTML CSS de formulaire de connexion et d'inscription

1038 Metehan

Ouvrir dans l'éditeur Video Publiez votre code

Modèle HTML CSS de formulaire de connexion et d'inscription

Recommandé

28 May 2025

Formulaire de connexion futuriste

12 December 2025

Modèle HTML de site web de portfolio holographique

28 August 2025

Installation de panneaux solaires | Services et tarifs

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=

Recommandé

Formulaire de connexion futuriste

Modèle HTML de site web de portfolio holographique

Installation de panneaux solaires | Services et tarifs

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS