Encuentra pareja y sitio web de citas

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

24 March 2025

Plantilla de cuadro de chat HTML

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AşkBul | Modern Dating Platformu</title>
    <style>
        :root {
            --primary-color: #ff4b6e;
            --secondary-color: #8a2be2;
            --dark-color: #333;
            --light-color: #f4f4f4;
            --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            line-height: 1.6;
            color: var(--dark-color);
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
            color: var(--dark-color);
            transition: 0.3s ease;
        }
        
        a:hover {
            color: var(--primary-color);
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* Header */
        header {
            padding: 20px 0;
            box-shadow: var(--box-shadow);
            background-color: white;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .logo span {
            color: var(--secondary-color);
        }
        
        nav ul {
            display: flex;
            align-items: center;
        }
        
        nav ul li {
            margin-left: 20px;
        }
        
        .btn {
            display: inline-block;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            font-weight: 600;
            box-shadow: var(--box-shadow);
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            color: white;
        }
        
        /* Hero Section */
        .hero {
            height: 80vh;
            background: url('https://source.unsplash.com/random/1920x1080/?couple') no-repeat center center/cover;
            position: relative;
            color: white;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .hero-content {
            position: relative;
            z-index: 10;
            max-width: 800px;
            padding: 20px;
        }
        
        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 20px;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }
        
        .hero p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }
        
        /* Features Section */
        .features {
            padding: 80px 0;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 50px;
            color: var(--primary-color);
            font-size: 2.5rem;
        }
        
        .features-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-box {
            text-align: center;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
            transition: transform 0.3s ease;
        }
        
        .feature-box:hover {
            transform: translateY(-10px);
        }
        
        .feature-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: var(--primary-color);
        }
        
        .feature-title {
            margin-bottom: 15px;
            font-size: 1.5rem;
        }
        
        /* Stats Section */
        .stats {
            padding: 60px 0;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            text-align: center;
        }
        
        .stats-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        
        .stat-item {
            padding: 20px;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        /* Signup Section */
        .signup {
            padding: 80px 0;
            background-color: white;
            text-align: center;
        }
        
        .signup-form {
            max-width: 500px;
            margin: 0 auto;
            background-color: var(--light-color);
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
        }
        
        .signup-form input, .signup-form select {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
        }
        
        .gender-select {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .gender-option {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .gender-option:hover, .gender-option.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }
        
        .gender-option:first-child {
            margin-right: 10px;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 80px 0;
            background-color: var(--light-color);
        }
        
        .testimonials-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .testimonial {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
            position: relative;
        }
        
        .testimonial-text {
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }
        
        .author-info h4 {
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: var(--primary-color);
        }
        
        /* Chat Bot */
        .chat-bot {
            position: fixed;
            bottom: 30px;
            right: 30px;
            z-index: 1000;
        }
        
        .chat-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: var(--box-shadow);
        }
        
        .chat-icon i {
            color: white;
            font-size: 24px;
        }
        
        .chat-window {
            position: absolute;
            bottom: 80px;
            right: 0;
            width: 350px;
            height: 450px;
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
            overflow: hidden;
            display: none;
        }
        
        .chat-window.active {
            display: block;
        }
        
        .chat-header {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .close-chat {
            cursor: pointer;
            font-size: 20px;
        }
        
        .chat-body {
            height: 330px;
            padding: 15px;
            overflow-y: auto;
        }
        
        .message {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 10px;
            max-width: 80%;
        }
        
        .bot-message {
            background-color: var(--light-color);
            margin-right: auto;
        }
        
        .user-message {
            background-color: var(--primary-color);
            color: white;
            margin-left: auto;
        }
        
        .chat-input {
            padding: 10px;
            border-top: 1px solid #ddd;
            display: flex;
        }
        
        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 30px;
            margin-right: 10px;
        }
        
        .send-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark-color);
            color: white;
            padding: 40px 0;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }
        
        .footer-col h3 {
            font-size: 1.3rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-col h3::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 2px;
            background-color: var(--primary-color);
        }
        
        .footer-col ul li {
            margin-bottom: 10px;
        }
        
        .footer-col ul li a {
            color: #ddd;
        }
        
        .footer-col ul li a:hover {
            color: var(--primary-color);
            padding-left: 5px;
        }
        
        .social-links {
            display: flex;
            margin-top: 15px;
        }
        
        .social-links a {
            display: inline-flex;
            width: 35px;
            height: 35px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            margin-right: 10px;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background-color: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .copyright {
            text-align: center;
            padding-top: 30px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        /* Media Queries */
        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
            }
            
            nav ul {
                margin-top: 20px;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            nav ul li {
                margin: 5px 10px;
            }
            
            .hero h1 {
                font-size: 2.5rem;
            }
            
            .chat-window {
                width: 300px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <header>
        <div class="container header-container">
            <div class="logo">Aşk<span>Bul</span></div>
            <nav>
                <ul>
                    <li><a href="#"><i class="fas fa-home"></i> Ana Sayfa</a></li>
                    <li><a href="#"><i class="fas fa-info-circle"></i> Hakkımızda</a></li>
                    <li><a href="#"><i class="fas fa-star"></i> Özellikler</a></li>
                    <li><a href="#"><i class="fas fa-users"></i> Üyeler</a></li>
                    <li><a href="#"><i class="fas fa-envelope"></i> İletişim</a></li>
                    <li><a href="#" class="btn"><i class="fas fa-user-plus"></i> Üye Ol</a></li>
                    <li><a href="#" class="btn" style="background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color);"><i class="fas fa-sign-in-alt"></i> Giriş Yap</a></li>
                </ul>
            </nav>
        </div>
    </header>

<section class="hero">
        <div class="hero-content container">
            <h1>Aşkı Keşfetmenin Yeni Yolu</h1>
            <p>Türkiye'nin en büyük dating platformuna katılın ve sizi anlayan, değerlerinizi paylaşan özel birini bulun. Her gün binlerce yeni üye katılıyor!</p>
            <a href="#signup" class="btn"><i class="fas fa-heart"></i> Hemen Başla</a>
        </div>
    </section>

<section class="features">
        <div class="container">
            <h2 class="section-title">Neden AşkBul?</h2>
            <div class="features-container">
                <div class="feature-box">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="feature-title">Güvenli Eşleşme</h3>
                    <p>Profillerimiz gerçek kişiler tarafından doğrulanır. Verileriniz %100 güvende, rahatlıkla kendinizi ifade edebilirsiniz.</p>
                </div>
                <div class="feature-box">
                    <div class="feature-icon">
                        <i class="fas fa-brain"></i>
                    </div>
                    <h3 class="feature-title">Akıllı Algoritma</h3>
                    <p>İleri yapay zeka algoritmamız kişiliğinize ve tercihlerinize uygun eşleşmeler sunar. Sizin için en doğru adayları buluruz.</p>
                </div>
                <div class="feature-box">
                    <div class="feature-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h3 class="feature-title">Premium İletişim</h3>
                    <p>Sesli ve görüntülü sohbet, sesli mesajlar, fotoğraf paylaşımı ve çok daha fazlası ile tanışma süreciniz keyifli geçsin.</p>
                </div>
            </div>
        </div>
    </section>

<section class="stats">
        <div class="container">
            <div class="stats-container">
                <div class="stat-item">
                    <div class="stat-number">5M+</div>
                    <p>Aktif Üye</p>
                </div>
                <div class="stat-item">
                    <div class="stat-number">250K+</div>
                    <p>Başarılı Eşleşme</p>
                </div>
                <div class="stat-item">
                    <div class="stat-number">10K+</div>
                    <p>Günlük Yeni Üye</p>
                </div>
                <div class="stat-item">
                    <div class="stat-number">95%</div>
                    <p>Memnuniyet Oranı</p>
                </div>
            </div>
        </div>
    </section>

<section id="signup" class="signup">
        <div class="container">
            <h2 class="section-title">Ücretsiz Üye Ol</h2>
            <div class="signup-form">
                <input type="text" placeholder="Adınız Soyadınız" required>
                <input type="email" placeholder="E-posta Adresiniz" required>
                <input type="password" placeholder="Şifreniz (en az 8 karakter)" required>
                <input type="date" placeholder="Doğum Tarihiniz" required>
                
                <div class="gender-select">
                    <div class="gender-option" id="male">
                        <i class="fas fa-mars"></i> Erkek
                    </div>
                    <div class="gender-option" id="female">
                        <i class="fas fa-venus"></i> Kadın
                    </div>
                </div>
                
                <select required>
                    <option value="" disabled selected>İlgilendiğiniz Cinsiyet</option>
                    <option value="male">Erkek</option>
                    <option value="female">Kadın</option>
                    <option value="both">Her İkisi</option>
                </select>
                
                <input type="text" placeholder="Yaşadığınız Şehir" required>
                <button type="submit" class="btn">Üye Ol ve Keşfet <i class="fas fa-arrow-right"></i></button>
                <p style="margin-top: 15px; font-size: 14px;">Üye olarak <a href="#">Kullanım Şartları</a> ve <a href="#">Gizlilik Politikası</a>'nı kabul etmiş olursunuz.</p>
            </div>
        </div>
    </section>

<section class="testimonials">
        <div class="container">
            <h2 class="section-title">Başarı Hikayeleri</h2>
            <div class="testimonials-container">
                <div class="testimonial">
                    <div class="testimonial-text">
                        "Hiç ummadığım bir anda AşkBul'da tanıştık. İlk mesajından itibaren aramızda büyük bir uyum olduğunu hissettim. 6 ay sonra nişanlandık ve şimdi evliyiz!"
                    </div>
                    <div class="testimonial-author">
                        <img src="/api/placeholder/60/60" alt="Ayşe & Mehmet" class="author-img">
                        <div class="author-info">
                            <h4>Ayşe & Mehmet</h4>
                            <p>İstanbul</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-text">
                        "Her yerde aramıştım onu. Yurt dışında yaşarken bile Türk kültürüne sahip biriyle tanışmak istiyordum. AşkBul sayesinde 8000 km ötedeki soulmate'imi buldum."
                    </div>
                    <div class="testimonial-author">
                        <img src="/api/placeholder/60/60" alt="Emre & Ceren" class="author-img">
                        <div class="author-info">
                            <h4>Emre & Ceren</h4>
                            <p>Berlin</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial">
                    <div class="testimonial-text">
                        "40 yaşımdan sonra gerçek aşkı bulabileceğimi hiç düşünmemiştim. AşkBul'un algoritması beni hayatımın aşkıyla tanıştırdı. Şimdi 3 yıldır birlikteyiz!"
                    </div>
                    <div class="testimonial-author">
                        <img src="/api/placeholder/60/60" alt="Deniz & Ali" class="author-img">
                        <div class="author-info">
                            <h4>Deniz & Ali</h4>
                            <p>İzmir</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="chat-bot">
        <div class="chat-icon" id="chat-icon">
            <i class="fas fa-comments"></i>
        </div>
        <div class="chat-window" id="chat-window">
            <div class="chat-header">
                <div>
                    <h3>AşkBot'a Sor</h3>
                    <small>Size nasıl yardımcı olabiliriz?</small>
                </div>
                <span class="close-chat" id="close-chat">×</span>
            </div>
            <div class="chat-body" id="chat-body">
                <div class="message bot-message">
                    Merhaba! Ben AşkBot. AşkBul hakkında sorularınızı yanıtlamak için buradayım. Size nasıl yardımcı olabilirim?
                </div>
            </div>
            <div class="chat-input">
                <input type="text" id="user-message" placeholder="Mesajınızı yazın...">
                <button class="send-btn" id="send-message">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

<footer>
        <div class="container footer-container">
            <div class="footer-col">
                <h3>AşkBul</h3>
                <p>Türkiye'nin en büyük ve en güvenilir dating platformu. Gerçek aşkı bulmak için hemen üye olun.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="footer-col">
                <h3>Hızlı Linkler</h3>
                <ul>
                    <li><a href="#">Ana Sayfa</a></li>
                    <li><a href="#">Hakkımızda</a></li>
                    <li><a href="#">Başarı Hikayeleri</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">SSS</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>Destek</h3>
                <ul>
                    <li><a href="#">Yardım Merkezi</a></li>
                    <li><a href="#">Güvenlik İpuçları</a></li>
                    <li><a href="#">İletişim</a></li>
                    <li><a href="#">Gizlilik Politikası</a></li>
                    <li><a href="#">Kullanım Şartları</a></li>
                </ul>
            </div>
            <div class="footer-col">
                <h3>İletişim</h3>
                <ul>
                    <li><i class="fas fa-map-marker-alt"></i> Levent, İstanbul</li>
                    <li><i class="fas fa-phone"></i> +90 212 XXX XX XX</li>
                    <li><i class="fas fa-envelope"></i> info@askbul.com</li>
                </ul>
            </div>
        </div>
        <div class="copyright container">
            <p>© 2025 AşkBul. Tüm hakları saklıdır.</p>
        </div>
    </footer>

CSS

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    background-color: #ff4d6d;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li {
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.btn {
    background-color: white;
    color: #ff4d6d;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.btn:hover {
    background-color: #ffd1dc;
}

/* Hero Section */
.hero {
    height: 80vh;
    background: url('https://source.unsplash.com/1600x900/?couple,love') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-content {
    background: rgba(0, 0, 0, 0.6);
    padding: 40px;
    border-radius: 10px;
}

.hero h1 {
    font-size: 3rem;
}

.hero p {
    font-size: 1.2rem;
    margin: 20px 0;
}

/* Signup Section */
.signup {
    text-align: center;
    padding: 50px;
}

.signup h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.signup form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.signup input {
    width: 80%;
    max-width: 400px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.signup button {
    width: 80%;
    max-width: 400px;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #ff4d6d;
    color: white;
}

Encuentra pareja y sitio web de citas

Recomendado

Un código de ribeirosarah905

Un código de securecode635

Plantilla de cuadro de chat HTML

HTML

CSS

JS

Recomendado

Un código de ribeirosarah905

Un código de securecode635

Plantilla de cuadro de chat HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS