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

Abrir en el editor Video Publica tu código

Recomendado

7 January 2024

Plantilla de portafolio HTML premium

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=

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

Recomendado

Cargador de Pulso en CSS

Un código de ytr3d3

Plantilla de portafolio HTML premium

HTML

CSS

JS

Recomendado

Cargador de Pulso en CSS

Un código de ytr3d3

Plantilla de portafolio HTML premium

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS