Web Design, Software e Soluzioni Digitali | Power Nova

697 Metehan

Apri nell'Editor Pubblica il Tuo Codice

Web Design, Software e Soluzioni Digitali | Power Nova

Consigliato

23 January 2025

Livelli di animazione CSS Sfondo città

25 April 2025

Un codice di Metehan

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>

Web Design, Software e Soluzioni Digitali | Power Nova

Consigliato

Un codice di creativearray554

Livelli di animazione CSS Sfondo città

Un codice di Metehan

HTML

CSS

JS

Consigliato

Un codice di creativearray554

Livelli di animazione CSS Sfondo città

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS