Conception Web, Logiciels et Solutions Numériques | Power Nova

73 Metehan

Ouvrir dans l'éditeur Publiez votre code

Conception Web, Logiciels et Solutions Numériques | Power Nova

Recommandé

26 March 2025

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

15 October 2024

Bouton Mode sombre et Mode nuit

8 September 2024

Carte météo animée

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Power Nova - Profesyonel Web Çözümleri</title>

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

[data-theme="dark"] {
            --primary-color: #ecf0f1;
            --secondary-color: #5dade2;
            --text-color: #ecf0f1;
            --text-light: #bdc3c7;
            --bg-color: #1a1a1a;
            --bg-secondary: #2c2c2c;
            --border-color: #34495e;
            --shadow: 0 10px 30px rgba(0,0,0,0.3);
            --shadow-hover: 0 20px 50px rgba(0,0,0,0.4);
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            line-height: 1.6;
            color: var(--text-color);
            background-color: var(--bg-color);
            transition: all 0.3s ease;
            overflow-x: hidden;
        }

.container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header Styles */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border-color);
            z-index: 1000;
            transition: all 0.3s ease;
        }

[data-theme="dark"] .header {
            background: rgba(26, 26, 26, 0.95);
        }

.header.scrolled {
            box-shadow: var(--shadow);
        }

.nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.logo i {
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 2rem;
            align-items: center;
        }

.nav-link {
            color: var(--text-color);
            text-decoration: none;
            font-weight: 500;
            position: relative;
            transition: all 0.3s ease;
        }

.nav-link:hover {
            color: var(--secondary-color);
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient);
            transition: width 0.3s ease;
        }

.nav-link:hover::after {
            width: 100%;
        }

.nav-actions {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.search-btn, .theme-toggle {
            background: none;
            border: none;
            color: var(--text-color);
            font-size: 1.2rem;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 50%;
            transition: all 0.3s ease;
        }

.search-btn:hover, .theme-toggle:hover {
            background: var(--bg-secondary);
            color: var(--secondary-color);
        }

.cta-btn {
            background: var(--gradient);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

.cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

.hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 4px;
        }

.hamburger span {
            width: 25px;
            height: 3px;
            background: var(--text-color);
            transition: all 0.3s ease;
            border-radius: 2px;
        }

/* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            position: relative;
            overflow: hidden;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80') center/cover;
            opacity: 0.1;
            z-index: -1;
        }

.hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            animation: fadeInUp 1s ease;
        }

.hero-text h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1rem;
            background: var(--gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-text p {
            font-size: 1.2rem;
            color: var(--text-light);
            margin-bottom: 2rem;
            line-height: 1.8;
        }

.hero-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

.btn-primary {
            background: var(--gradient);
            color: white;
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
        }

.btn-secondary {
            background: transparent;
            color: var(--primary-color);
            padding: 1rem 2rem;
            border: 2px solid var(--primary-color);
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

.btn-secondary:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
        }

.hero-image {
            position: relative;
            animation: float 3s ease-in-out infinite;
        }

.hero-image img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: var(--shadow);
        }

/* Content Sections */
        .section {
            padding: 5rem 0;
            position: relative;
        }

.section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

.section-title h2 {
            font-family: 'Playfair Display', serif;
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--primary-color);
        }

.section-title p {
            font-size: 1.1rem;
            color: var(--text-light);
            max-width: 600px;
            margin: 0 auto;
        }

/* Card Grid */
        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

.card {
            background: var(--bg-color);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transition: all 0.3s ease;
            position: relative;
            border: 1px solid var(--border-color);
        }

.card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

.card-image {
            height: 200px;
            background: var(--gradient);
            position: relative;
            overflow: hidden;
        }

.card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

.card:hover .card-image img {
            transform: scale(1.1);
        }

.card-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--accent-color);
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

.card-content {
            padding: 1.5rem;
        }

.card-content h3 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--primary-color);
        }

.card-content p {
            color: var(--text-light);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

.card-link {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s ease;
        }

.card-link:hover {
            color: var(--accent-color);
        }

/* Gallery Section */
        .gallery {
            background: var(--bg-secondary);
        }

.gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 3rem;
        }

.gallery-item {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.gallery-item:hover {
            transform: scale(1.05);
        }

.gallery-item img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: all 0.3s ease;
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-overlay i {
            color: white;
            font-size: 2rem;
        }

/* Back to Top Button */
        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background: var(--gradient);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(100px);
            z-index: 1000;
        }

.back-to-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

.back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

/* Animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

@keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
        }

.reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.6s ease;
        }

.reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Design */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--bg-color);
                flex-direction: column;
                padding: 1rem;
                border-top: 1px solid var(--border-color);
                box-shadow: var(--shadow);
            }

.nav-menu.active {
                display: flex;
            }

.hamburger {
                display: flex;
            }

.hamburger.active span:nth-child(1) {
                transform: rotate(45deg) translate(5px, 5px);
            }

.hamburger.active span:nth-child(2) {
                opacity: 0;
            }

.hamburger.active span:nth-child(3) {
                transform: rotate(-45deg) translate(7px, -6px);
            }

.hero-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
            }

.hero-text h1 {
                font-size: 2.5rem;
            }

.card-grid {
                grid-template-columns: 1fr;
            }

.hero-buttons {
                justify-content: center;
            }
        }

@media (max-width: 480px) {
            .container {
                padding: 0 15px;
            }

.hero-text h1 {
                font-size: 2rem;
            }

.section-title h2 {
                font-size: 2rem;
            }

.hero-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    
    <header class="header" id="header">
        <nav class="nav container">
            <a href="#" class="logo">
                <i class="fas fa-bolt"></i>
                Power Nova
            </a>

<ul class="nav-menu" id="nav-menu">
                <li><a href="#home" class="nav-link">Ana Sayfa</a></li>
                <li><a href="#services" class="nav-link">Hizmetler</a></li>
                <li><a href="#about" class="nav-link">Hakkımızda</a></li>
                <li><a href="#gallery" class="nav-link">Galeri</a></li>
                <li><a href="#contact" class="nav-link">İletişim</a></li>
            </ul>

<div class="nav-actions">
                <button class="search-btn" aria-label="Arama">
                    <i class="fas fa-search"></i>
                </button>
                <button class="theme-toggle" id="theme-toggle" aria-label="Tema Değiştir">
                    <i class="fas fa-moon"></i>
                </button>
                <a href="#contact" class="cta-btn">İletişim</a>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <div class="hero-text">
                    <h1>Güçlü ve Modern <br>Web Çözümleri</h1>
                    <p>Professional web tasarımı ve geliştirme hizmetleriyle işletmenizi dijital dünyada öne çıkarın. Modern teknolojiler ve yaratıcı tasarımlarla hayalinizdeki web sitesini gerçekleştiriyoruz.</p>
                    <div class="hero-buttons">
                        <a href="#services" class="btn-primary">
                            <i class="fas fa-rocket"></i>
                            Projeni Başlat
                        </a>
                        <a href="#about" class="btn-secondary">
                            <i class="fas fa-play"></i>
                            Nasıl Çalışıyoruz
                        </a>
                    </div>
                </div>
                <div class="hero-image">
                    <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Web Tasarım" />
                </div>
            </div>
        </div>
    </section>

<section class="section" id="services">
        <div class="container">
            <div class="section-title reveal">
                <h2>Hizmetlerimiz</h2>
                <p>Modern web teknolojileri ve yaratıcı tasarım anlayışıyla işletmenizin dijital varlığını güçlendiriyoruz.</p>
            </div>

<div class="card-grid">
                <div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Web Tasarım" />
                        <div class="card-badge">Popüler</div>
                    </div>
                    <div class="card-content">
                        <h3>Web Tasarım</h3>
                        <p>Modern, responsive ve kullanıcı dostu web siteleri tasarlıyoruz. SEO uyumlu ve hızlı yüklenen sitelerle online varlığınızı güçlendirin.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

<div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="E-ticaret" />
                        <div class="card-badge">Yeni</div>
                    </div>
                    <div class="card-content">
                        <h3>E-ticaret Çözümleri</h3>
                        <p>Güvenli ödeme sistemleri ve kullanıcı dostu arayüzlerle e-ticaret sitenizi hayata geçirin. Satışlarınızı artıracak özel çözümler.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

<div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1432888622747-4eb9a8efeb07?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Mobil Uygulama" />
                    </div>
                    <div class="card-content">
                        <h3>Mobil Uygulamalar</h3>
                        <p>iOS ve Android platformlar için native ve hybrid mobil uygulamalar geliştiriyoruz. Kullanıcı deneyimini ön planda tutan çözümler.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

<div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Dijital Pazarlama" />
                    </div>
                    <div class="card-content">
                        <h3>Dijital Pazarlama</h3>
                        <p>SEO, SEM ve sosyal medya yönetimi ile dijital varlığınızı güçlendirin. Hedef kitlenize ulaşın ve markanızı büyütün.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

<div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Marka Kimliği" />
                    </div>
                    <div class="card-content">
                        <h3>Marka Kimliği</h3>
                        <p>Logo tasarımından kurumsal kimliğe kadar markanızın görsel dilini oluşturuyoruz. Unutulmaz ve etkili marka deneyimleri.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

<div class="card reveal">
                    <div class="card-image">
                        <img src="https://images.unsplash.com/photo-1559028006-448665bd7c7f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Bakım ve Destek" />
                    </div>
                    <div class="card-content">
                        <h3>Bakım ve Destek</h3>
                        <p>7/24 teknik destek ve düzenli bakım hizmetleriyle web sitenizin kesintisiz çalışmasını sağlıyoruz. Güvenlik ve performans odaklı.</p>
                        <a href="#" class="card-link">
                            Detayları Gör <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section" id="about" style="background: var(--bg-secondary);">
        <div class="container">
            <div class="section-title reveal">
                <h2>Hakkımızda</h2>
                <p>Yılların deneyimi ve modern teknolojilerle müşterilerimize en iyi hizmeti sunuyoruz.</p>
            </div>

<div class="hero-content">
                <div class="hero-image reveal">
                    <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Ekibimiz" />
                </div>
                <div class="hero-text reveal">
                    <h3 style="font-size: 2rem; margin-bottom: 1rem; color: var(--primary-color);">Uzman Ekibimiz</h3>
                    <p>2015'ten beri web tasarım ve yazılım geliştirme alanında faaliyet gösteren ekibimiz, 500'den fazla başarılı projeye imza atmıştır. Modern teknolojiler ve yaratıcı çözümlerle müşterilerimizin hedeflerine ulaşmalarını sağlıyoruz.</p>
                    <p>Kalite, güvenilirlik ve müşteri memnuniyeti önceliklerimizdir. Her projede en yeni teknolojileri kullanarak, kullanıcı deneyimini ön planda tutan çözümler geliştiriyoruz.</p>
                    <div class="hero-buttons">
                        <a href="#contact" class="btn-primary">
                            <i class="fas fa-handshake"></i>
                            Bizimle Çalışın
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="section gallery" id="gallery">
        <div class="container">
            <div class="section-title reveal">
                <h2>Projelerimiz</h2>
                <p>Hayata geçirdiğimiz başarılı projelerden örnekler.</p>
            </div>

<section class="section" id="contact">
        <div class="container">
            <div class="section-title reveal">
                <h2>İletişim</h2>
                <p>Projenizi görüşmek için bizimle iletişime geçin.</p>
            </div>

<div class="hero-content">
                <div class="hero-text reveal">
                    <h3 style="font-size: 2rem; margin-bottom: 1rem; color: var(--primary-color);">Projenizi Konuşalım</h3>
                    <p>Hayal ettiğiniz web sitesi için profesyonel bir ekiple çalışmaya hazır mısınız? Ücretsiz konsültasyon için bizimle iletişime geçin.</p>

<div style="margin: 2rem 0;">
                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                            <i class="fas fa-phone" style="color: var(--secondary-color); font-size: 1.2rem;"></i>
                            <span>+90 (555) 123 45 67</span>
                        </div>
                        <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem;">
                            <i class="fas fa-envelope" style="color: var(--secondary-color); font-size: 1.2rem;"></i>
                            <span>info@powernova.com</span>
                        </div>
                        <div style="display: flex; align-items: center; gap: 1rem;">
                            <i class="fas fa-map-marker-alt" style="color: var(--secondary-color); font-size: 1.2rem;"></i>
                            <span>İstanbul, Türkiye</span>
                        </div>
                    </div>

<div class="hero-buttons">
                        <a href="mailto:info@powernova.com" class="btn-primary">
                            <i class="fas fa-envelope"></i>
                            E-posta Gönder
                        </a>
                        <a href="tel:+905551234567" class="btn-secondary">
                            <i class="fas fa-phone"></i>
                            Hemen Ara
                        </a>
                    </div>
                </div>
                <div class="hero-image reveal">
                    <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="İletişim" />
                </div>
            </div>
        </div>
    </section>

<button class="back-to-top" id="back-to-top" aria-label="Yukarı Çık">
        <i class="fas fa-chevron-up"></i>
    </button>

// Mobile menu toggle
        const hamburger = document.getElementById('hamburger');
        const navMenu = document.getElementById('nav-menu');

hamburger.addEventListener('click', () => {
            hamburger.classList.toggle('active');
            navMenu.classList.toggle('active');
        });

// Close mobile menu when clicking on a link
        document.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navMenu.classList.remove('active');
            });
        });

// Theme toggle
        const themeToggle = document.getElementById('theme-toggle');
        const themeIcon = themeToggle.querySelector('i');

// Check for saved theme or default to light
        const currentTheme = localStorage.getItem('theme') || 'light';
        document.documentElement.setAttribute('data-theme', currentTheme);

if (currentTheme === 'dark') {
            themeIcon.classList.replace('fa-moon', 'fa-sun');
        }

themeToggle.addEventListener('click', () => {
            const currentTheme = document.documentElement.getAttribute('data-theme');
            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';

document.documentElement.setAttribute('data-theme', newTheme);
            localStorage.setItem('theme', newTheme);

if (newTheme === 'dark') {
                themeIcon.classList.replace('fa-moon', 'fa-sun');
            } else {
                themeIcon.classList.replace('fa-sun', 'fa-moon');
            }
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

// Reveal animation on scroll
        const revealElements = document.querySelectorAll('.reveal');

const revealOnScroll = () => {
            const windowHeight = window.innerHeight;
            const revealPoint = 150;

revealElements.forEach(element => {
                const elementTop = element.getBoundingClientRect().top;

if (elementTop < windowHeight - revealPoint) {
                    element.classList.add('active');
                }
            });
        };

window.addEventListener('scroll', revealOnScroll);
        revealOnScroll(); // Run on page load

// Back to top button
        const backToTopBtn = document.getElementById('back-to-top');

backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

// Gallery lightbox effect (simple implementation)
        const galleryItems = document.querySelectorAll('.gallery-item');

galleryItems.forEach(item => {
            item.addEventListener('click', () => {
                const img = item.querySelector('img');
                const lightbox = document.createElement('div');
                lightbox.className = 'lightbox';
                lightbox.style.cssText = `
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.9);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 10000;
                    cursor: pointer;
                `;

const lightboxImg = document.createElement('img');
                lightboxImg.src = img.src;
                lightboxImg.style.cssText = `
                    max-width: 90%;
                    max-height: 90%;
                    object-fit: contain;
                    border-radius: 10px;
                `;

lightbox.appendChild(lightboxImg);
                document.body.appendChild(lightbox);

lightbox.addEventListener('click', () => {
                    document.body.removeChild(lightbox);
                });
            });
        });

// Add loading animation to buttons
        document.querySelectorAll('.btn-primary, .btn-secondary, .cta-btn').forEach(btn => {
            btn.addEventListener('click', function(e) {
                if (this.href && this.href.startsWith('mailto:')) return;
                if (this.href && this.href.startsWith('tel:')) return;

const originalText = this.innerHTML;
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Yükleniyor...';
                this.style.pointerEvents = 'none';

setTimeout(() => {
                    this.innerHTML = originalText;
                    this.style.pointerEvents = 'auto';
                }, 1500);
            });
        });

// Parallax effect for hero section
        window.addEventListener('scroll', () => {
            const scrolled = window.pageYOffset;
            const heroImage = document.querySelector('.hero-image');
            if (heroImage) {
                heroImage.style.transform = `translateY(${scrolled * 0.1}px)`;
            }
        });

// Add entrance animations with stagger effect
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

document.querySelectorAll('.card').forEach(card => {
            observer.observe(card);
        });

// Add typewriter effect to hero title
        const heroTitle = document.querySelector('.hero-text h1');
        if (heroTitle) {
            const text = heroTitle.textContent;
            heroTitle.textContent = '';
            heroTitle.style.borderRight = '2px solid var(--secondary-color)';

setTimeout(typeWriter, 500);
        }
    </script>
</body>
</html>

Recommandé

Formulaire en plusieurs étapes avec barre de progression utilisant jQuery et CSS3

Bouton Mode sombre et Mode nuit

Carte météo animée

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS