Web Leb : solutions numériques, conception Web et technologie

Ouvrir dans l'éditeur Publiez votre code

Recommandé

17 July 2024

Modèle de site Web de portfolio HTML 2024

12 June 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Leb - Yenilikçi Dijital Çözümler</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --bg-beige: #F5F1E8;
            --orange-accent: #E67E50;
            --orange-light: rgba(230, 126, 80, 0.1);
            --orange-soft: rgba(230, 126, 80, 0.3);
            --text-dark: #2C2C2C;
            --text-gray: #666;
            --white: #ffffff;
            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

body {
            font-family: 'Montserrat', sans-serif;
            background-color: var(--bg-beige);
            color: var(--text-dark);
            line-height: 1.6;
            overflow-x: hidden;
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(245, 241, 232, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1000;
            padding: 1rem 0;
            transition: all 0.3s ease;
        }

.nav-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--orange-accent);
            text-decoration: none;
        }

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

.nav-links a {
            text-decoration: none;
            color: var(--text-dark);
            font-weight: 500;
            position: relative;
            transition: color 0.3s ease;
            padding: 0.5rem 0;
        }

.nav-links a:hover {
            color: var(--orange-accent);
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--orange-accent);
            transition: all 0.3s ease;
            transform: translateX(-50%);
        }

.nav-links a:hover::after {
            width: 100%;
        }
        
        .hamburger-menu {
            display: none;
            cursor: pointer;
            z-index: 1001;
        }

.hamburger-menu div {
            width: 25px;
            height: 3px;
            background-color: var(--text-dark);
            margin: 5px 0;
            transition: all 0.4s ease;
        }

/* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 2rem 4rem;
            position: relative;
            overflow: hidden;
        }

.hero-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

.hero-content h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            color: var(--text-dark);
        }

.hero-content .highlight {
            color: var(--orange-accent);
        }

.hero-content p {
            font-size: 1.2rem;
            color: var(--text-gray);
            margin-bottom: 2rem;
            font-weight: 300;
            max-width: 500px;
        }

.cta-button {
            display: inline-block;
            background: var(--orange-accent);
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-soft);
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-hover);
            background: #d66840;
        }

.hero-image {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .profile-container {
            position: relative;
            z-index: 10;
        }

.profile-photo {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: var(--shadow-soft);
            border: 4px solid var(--white);
        }

.bg-shape {
            position: absolute;
            border-radius: 50%;
            z-index: 1;
            animation: float 8s ease-in-out infinite;
        }

.shape-1 { width: 200px; height: 200px; background: var(--orange-soft); top: -20px; right: -30px; animation-duration: 6s; }
        .shape-2 { width: 150px; height: 150px; background: var(--orange-light); bottom: -40px; left: -40px; animation-duration: 8s; animation-direction: reverse; }
        .shape-3 { width: 100px; height: 100px; background: rgba(230, 126, 80, 0.2); top: 50px; left: -50px; animation-duration: 10s; }
        
        .social-links { display: flex; gap: 1rem; margin-top: 2rem; }
        .social-links a {
            width: 50px; height: 50px; background: var(--white); border-radius: 50%; display: flex;
            align-items: center; justify-content: center; text-decoration: none;
            color: var(--orange-accent); box-shadow: var(--shadow-soft); transition: all 0.3s ease;
        }
        .social-links a:hover {
            transform: translateY(-3px); box-shadow: var(--shadow-hover);
            background: var(--orange-accent); color: var(--white);
        }
        .social-links svg { width: 24px; height: 24px; }

/* Sections General */
        .section { padding: 5rem 2rem; }
        .section-container { max-width: 1200px; margin: 0 auto; }
        .section-title {
            font-family: 'Playfair Display', serif; font-size: 2.5rem; text-align: center;
            margin-bottom: 3rem; color: var(--text-dark);
        }

/* Blog Section */
        #blog { background: var(--white); }
        .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .blog-card {
            background: var(--white); border-radius: 20px; overflow: hidden;
            box-shadow: var(--shadow-soft); transition: all 0.3s ease; cursor: pointer;
        }
        .blog-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: var(--shadow-hover); }
        .blog-image {
            width: 100%; height: 200px; background: linear-gradient(135deg, var(--orange-light), var(--orange-soft));
            display: flex; align-items: center; justify-content: center; font-size: 3rem;
            color: var(--orange-accent);
        }
        .blog-image svg { width: 60px; height: 60px; opacity: 0.8; }
        .blog-content { padding: 1.5rem; }
        .blog-date { color: var(--text-gray); font-size: 0.9rem; margin-bottom: 0.5rem; }
        .blog-title { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-dark); }
        .blog-excerpt { color: var(--text-gray); font-size: 0.95rem; line-height: 1.6; }

/* Podcast Section */
        #podcast { background: var(--bg-beige); }
        .podcast-container {
            background: var(--white); border-radius: 30px; padding: 3rem;
            box-shadow: var(--shadow-soft); text-align: center;
        }
        .audio-player {
            background: var(--bg-beige); border-radius: 20px; padding: 2rem;
            margin: 2rem auto; display: flex; align-items: center; gap: 1.5rem;
            justify-content: center; max-width: 500px;
        }
        .play-button {
            width: 60px; height: 60px; background: var(--orange-accent);
            border: none; border-radius: 50%; color: var(--white);
            font-size: 1.5rem; cursor: pointer; transition: all 0.3s ease;
            display: flex; align-items: center; justify-content: center;
        }
        .play-button:hover { transform: scale(1.1); background: #d66840; }
        .play-button svg { width: 24px; height: 24px; margin-left: 2px; }
        .play-button .pause-icon { display: none; }
        .track-info { flex: 1; text-align: left; }
        .track-title { font-weight: 600; margin-bottom: 0.5rem; }
        .track-duration { color: var(--text-gray); font-size: 0.9rem; }
        
        /* Newsletter Section */
        #contact { background: var(--white); }
        .newsletter-container {
            background: linear-gradient(135deg, var(--orange-accent), #d66840);
            border-radius: 30px; padding: 4rem 3rem; text-align: center; color: var(--white);
        }
        .newsletter-form { display: flex; max-width: 450px; margin: 2rem auto 0; gap: 1rem; }
        .email-input {
            flex: 1; padding: 1rem; border: none; border-radius: 25px;
            font-size: 1rem; outline: none; background: rgba(255, 255, 255, 0.9);
        }
        .subscribe-btn {
            background: var(--white); color: var(--orange-accent); border: none;
            padding: 1rem 2rem; border-radius: 25px; font-weight: 600;
            cursor: pointer; transition: all 0.3s ease;
        }
        .subscribe-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0, 0.2); }

/* Footer */
        .footer {
            background: var(--text-dark); color: var(--white);
            padding: 4rem 2rem 2rem; text-align: center;
        }
        .footer-social { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }
        .footer-social a {
            width: 50px; height: 50px; background: rgba(255, 255, 255, 0.1);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            text-decoration: none; color: var(--white); transition: all 0.3s ease;
        }
        .footer-social a:hover { background: var(--orange-accent); transform: translateY(-3px); }
        .footer-social svg { width: 24px; height: 24px; }

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

/* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                position: fixed; top: 0; right: -100%;
                width: 100%; height: 100vh;
                background: rgba(245, 241, 232, 0.98);
                backdrop-filter: blur(5px);
                flex-direction: column;
                justify-content: center;
                gap: 3rem;
                transition: right 0.5s ease-in-out;
            }
            .nav-links.active { right: 0; }
            .nav-links a { font-size: 1.5rem; }
            .hamburger-menu { display: block; }
            .hamburger-menu.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
            .hamburger-menu.toggle .line2 { opacity: 0; }
            .hamburger-menu.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }
            
            .hero-container { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
            .hero-content h1 { font-size: 2.8rem; }
            .hero-content p { margin: 0 auto 2rem; }
            .social-links { justify-content: center; }
            .profile-photo { width: 250px; height: 250px; }
            
            .blog-grid { grid-template-columns: 1fr; }
            .newsletter-form { flex-direction: column; }
            .section-title { font-size: 2rem; }
            .audio-player { flex-direction: column; text-align: center; gap: 1rem; }
            .track-info { text-align: center; }
        }

@media (max-width: 480px) {
            .nav-container { padding: 0 1.5rem; }
            .hero { padding: 7rem 1.5rem 3rem; }
            .hero-content h1 { font-size: 2.2rem; }
            .hero-content p { font-size: 1rem; }
            .profile-photo { width: 200px; height: 200px; }
            .podcast-container, .newsletter-container { padding: 2.5rem 1.5rem; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="nav-container">
            <a href="#home" class="logo">Web Leb</a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">Ana Sayfa</a></li>
                    <li><a href="#blog">Blog</a></li>
                    <li><a href="#podcast">Podcast</a></li>
                    <li><a href="#about">Hakkımızda</a></li>
                    <li><a href="#contact">İletişim</a></li>
                </ul>
            </nav>
            <div class="hamburger-menu">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="hero-container">
            <div class="hero-content">
                <h1>Yenilikçi <span class="highlight">Dijital</span> Çözümler ve Web Teknolojileri</h1>
                <p>Fikirlerinizi, kullanıcı dostu ve ilham veren dijital deneyimlere dönüştürüyoruz. Web Leb, tasarım ve teknolojinin buluştuğu yerdir.</p>
                <a href="#blog" class="cta-button">Projelerimizi Keşfedin</a>
                <div class="social-links">
                    <a href="#" aria-label="GitHub">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2A10,10,0,0,0,2,12c0,4.42,2.87,8.17,6.84,9.5.5.09.68-.22.68-.48s0-.85,0-1.66c-2.78.6-3.37-1.34-3.37-1.34A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.12,2.12,0,0,1,1.54,1,2.15,2.15,0,0,0,2.92.83,2.13,2.13,0,0,1,.63-1.34c-2.22-.25-4.55-1.11-4.55-4.94,0-1.1.39-2,1-2.69a2,2,0,0,1,.1-2.64s.84-.27,2.75,1a9.64,9.64,0,0,1,5,0c1.91-1.27,2.75-1,2.75-1a2,2,0,0,1,.1,2.64,2.81,2.81,0,0,1,1,2.69c0,3.84-2.34,4.68-4.57,4.93a2.26,2.26,0,0,1,.69,1.75c0,1.27,0,2.29,0,2.6s.18.58.69.48A10,10,0,0,0,22,12,10,10,0,0,0,12,2Z"/></svg>
                    </a>
                    <a href="#" aria-label="LinkedIn">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19,3a2,2,0,0,1,2,2V19a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V5A2,2,0,0,1,5,3H19M18.5,18.5V13.2A3.26,3.26,0,0,0,15.24,9.94c-1.5,0-2.44,1.29-2.44,1.29V18.5H9.5V8.5h3.29v1.57h.04c.48-1,1.69-1.7,3-1.7,3.2,0,3.67,2.1,3.67,4.83V18.5Z M6.88,8.5h3.29V18.5H6.88V8.5ZM5.23,6.82a1.62,1.62,0,1,1,1.62-1.62A1.62,1.62,0,0,1,5.23,6.82Z"/></svg>
                    </a>
                    <a href="#" aria-label="Instagram">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.8,2H16.2C19.4,2,22,4.6,22,7.8V16.2A5.2,5.2,0,0,1,16.2,22H7.8C4.6,22,2,19.4,2,16.2V7.8A5.2,5.2,0,0,1,7.8,2M7.6,4A3.6,3.6,0,0,0,4,7.6V16.4A3.6,3.6,0,0,0,7.6,20H16.4A3.6,3.6,0,0,0,20,16.4V7.6A3.6,3.6,0,0,0,16.4,4H7.6M17.25,5.5A1.25,1.25,0,1,1,16,6.75,1.25,1.25,0,0,1,17.25,5.5M12,7a5,5,0,1,1-5,5,5,5,0,0,1,5-5m0,2a3,3,0,1,0,3,3,3,3,0,0,0-3-3Z"/></svg>
                    </a>
                </div>
            </div>
            <div class="hero-image">
                <div class="profile-container">
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23E67E50;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23d66840;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='150' fill='url(%23grad)' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='100' font-family='Playfair Display, serif' font-weight='600'%3EWL%3C/text%3E%3C/svg%3E" alt="Web Leb Logo" class="profile-photo">
                </div>
                <div class="bg-shape shape-1"></div>
                <div class="bg-shape shape-2"></div>
                <div class="bg-shape shape-3"></div>
            </div>
        </div>
    </section>

<section class="section" id="blog">
        <div class="section-container">
            <h2 class="section-title">Son Yazılarımız</h2>
            <div class="blog-grid">
                <article class="blog-card">
                    <div class="blog-image">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20,18H4V6H20M20,4H4A2,2,0,0,0,2,6V18a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V6A2,2,0,0,0,20,4M6,10h4v2H6m0,4h8v2H6m10-8h2v2H16Z"/></svg>
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">Haziran 20, 2025</div>
                        <h3 class="blog-title">Modern Web Teknolojileri</h3>
                        <p class="blog-excerpt">React, Vue ve Svelte gibi modern frontend framework'lerinin artılarını ve eksilerini inceliyoruz.</p>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2.5C7.2,2.5,2.7,6.1,2.5,11.5H21.5C21.3,6.1,16.8,2.5,12,2.5M4.5,13.5v2H6.5v-2M17.5,15.5H19.5v-2H17.5m-13,5H2v-2H4.5M22,18.5H19.5v2H22M12,21.5c4.8,0,9.3-3.6,9.5-9H2.5c.2,5.4,4.7,9,9.5,9Z"/></svg>
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">Haziran 15, 2025</div>
                        <h3 class="blog-title">UI/UX'in Altın Kuralları</h3>
                        <p class="blog-excerpt">Kullanıcı deneyimini en üst seviyeye taşıyacak, zamansız tasarım prensipleri ve yaklaşımları.</p>
                    </div>
                </article>
                <article class="blog-card">
                    <div class="blog-image">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M15,2H9A2,2,0,0,0,7,4V20a2,2,0,0,0,2,2H15a2,2,0,0,0,2-2V4A2,2,0,0,0,15,2M12,20a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,20M15.5,16h-7V6h7Z"/></svg>
                    </div>
                    <div class="blog-content">
                        <div class="blog-date">Haziran 10, 2025</div>
                        <h3 class="blog-title">Mobil Öncelikli Tasarım</h3>
                        <p class="blog-excerpt">Neden tüm web projelerine mobil cihazları düşünerek başlamalıyız? Stratejiler ve ipuçları.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section class="section" id="podcast">
        <div class="section-container">
            <div class="podcast-container">
                <h2 class="section-title">Teknoloji Sohbetleri</h2>
                <p>Yaratıcılık, dijital trendler ve başarılı projelerin ardındaki hikayeler üzerine haftalık sohbetler.</p>
                <audio id="podcast-audio" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"></audio>
                <div class="audio-player">
                    <button class="play-button" aria-label="Oynat/Durdur">
                         <svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M8,5.14V19.14L19,12.14L8,5.14Z"/></svg>
                         <svg class="pause-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M14,19H18V5H14M6,19H10V5H6V19Z"/></svg>
                    </button>
                    <div class="track-info">
                        <div class="track-title">Bölüm 15: Geleceğin Web Arayüzleri</div>
                        <div class="track-duration">Örnek Ses: 01:34</div>
                    </div>
                </div>
                <a href="#" class="cta-button">Tüm Bölümler</a>
            </div>
        </div>
    </section>

<section class="section" id="contact">
        <div class="section-container">
            <div class="newsletter-container">
                <h2 class="section-title" style="color: white; margin-bottom: 1rem;">İlham Alın</h2>
                <p>Haftalık teknoloji analizleri, yaratıcı ipuçları ve özel içerikler e-posta kutunuza gelsin.</p>
                <form class="newsletter-form">
                    <input type="email" class="email-input" placeholder="E-posta adresiniz" required>
                    <button type="submit" class="subscribe-btn">Abone Ol</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="section-container">
            <div class="footer-social">
                <a href="#" aria-label="GitHub">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12,2A10,10,0,0,0,2,12c0,4.42,2.87,8.17,6.84,9.5.5.09.68-.22.68-.48s0-.85,0-1.66c-2.78.6-3.37-1.34-3.37-1.34A2.69,2.69,0,0,0,5,16.5c-.91-.62.07-.6.07-.6a2.12,2.12,0,0,1,1.54,1,2.15,2.15,0,0,0,2.92.83,2.13,2.13,0,0,1,.63-1.34c-2.22-.25-4.55-1.11-4.55-4.94,0-1.1.39-2,1-2.69a2,2,0,0,1,.1-2.64s.84-.27,2.75,1a9.64,9.64,0,0,1,5,0c1.91-1.27,2.75-1,2.75-1a2,2,0,0,1,.1,2.64,2.81,2.81,0,0,1,1,2.69c0,3.84-2.34,4.68-4.57,4.93a2.26,2.26,0,0,1,.69,1.75c0,1.27,0,2.29,0,2.6s.18.58.69.48A10,10,0,0,0,22,12,10,10,0,0,0,12,2Z"/></svg>
                </a>
                <a href="#" aria-label="LinkedIn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19,3a2,2,0,0,1,2,2V19a2,2,0,0,1-2,2H5a2,2,0,0,1-2-2V5A2,2,0,0,1,5,3H19M18.5,18.5V13.2A3.26,3.26,0,0,0,15.24,9.94c-1.5,0-2.44,1.29-2.44,1.29V18.5H9.5V8.5h3.29v1.57h.04c.48-1,1.69-1.7,3-1.7,3.2,0,3.67,2.1,3.67,4.83V18.5Z M6.88,8.5h3.29V18.5H6.88V8.5ZM5.23,6.82a1.62,1.62,0,1,1,1.62-1.62A1.62,1.62,0,0,1,5.23,6.82Z"/></svg>
                </a>
                <a href="#" aria-label="Twitter">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M22.46,6c-.77.35-1.6.58-2.46.67.88-.53,1.56-1.37,1.88-2.38-.83.5-1.75.85-2.72,1.05C18.37,4.5,17.26,4,16,4c-2.35,0-4.27,1.92-4.27,4.29,0,.34.04.67.11,1-3.55-.18-6.7-1.89-8.81-4.47-.37.63-.58,1.37-.58,2.15,0,1.49.76,2.8,1.91,3.56-.71,0-1.37-.22-1.95-.5v.03c0,2.08,1.48,3.82,3.44,4.21-.36.1-.74.15-1.14.15-.28,0-.55-.03-.81-.08.55,1.7,2.14,2.94,4.03,2.97-1.47,1.15-3.33,1.83-5.35,1.83-.35,0-.69,0-1.03-.06,1.9,1.22,4.16,1.92,6.58,1.92,7.89,0,12.21-6.54,12.21-12.21,0-.19,0-.37-.01-.56.84-.6,1.56-1.36,2.14-2.22Z"/></svg>
                </a>
            </div>
            <p>© 2025 Web Leb. Tüm hakları saklıdır. Tutku ve teknoloji ile geliştirildi.</p>
        </div>
    </footer>

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

// Mobil menüdeki bir linke tıklayınca menüyü kapat
            links.forEach(link => {
                link.addEventListener('click', () => {
                    if (navLinks.classList.contains('active')) {
                        navLinks.classList.remove('active');
                        hamburger.classList.remove('toggle');
                    }
                });
            });
            
            // Pürüzsüz kaydırma
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            });

// Header'a scroll efekti
            const header = document.querySelector('.header');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.style.background = 'rgba(245, 241, 232, 0.95)';
                    header.style.boxShadow = '0 4px 20px rgba(0,0,0,0.05)';
                } else {
                    header.style.background = 'rgba(245, 241, 232, 0.9)';
                    header.style.boxShadow = 'none';
                }
            });

// Podcast Oynatıcı
            const playButton = document.querySelector('.play-button');
            const audio = document.getElementById('podcast-audio');
            const playIcon = playButton.querySelector('.play-icon');
            const pauseIcon = playButton.querySelector('.pause-icon');

playButton.addEventListener('click', () => {
                if (audio.paused) {
                    audio.play();
                    playIcon.style.display = 'none';
                    pauseIcon.style.display = 'block';
                } else {
                    audio.pause();
                    playIcon.style.display = 'block';
                    pauseIcon.style.display = 'none';
                }
            });
            
            audio.addEventListener('ended', () => {
                playIcon.style.display = 'block';
                pauseIcon.style.display = 'none';
            });

// Bülten abonelik formu (simülasyon)
            // Gerçek bir proje için burada bir API'ye istek göndermeniz gerekir.
            const newsletterForm = document.querySelector('.newsletter-form');
            newsletterForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const emailInput = newsletterForm.querySelector('.email-input');
                const submitBtn = newsletterForm.querySelector('.subscribe-btn');
                
                if (emailInput.value) {
                    submitBtn.textContent = 'Teşekkürler!';
                    submitBtn.style.background = '#4CAF50';
                    submitBtn.style.color = 'white';
                    
                    setTimeout(() => {
                        submitBtn.textContent = 'Abone Ol';
                        submitBtn.style.background = '';
                        submitBtn.style.color = '';
                        newsletterForm.reset();
                    }, 2500);
                }
            });

// Scroll ile animasyonları tetikleme
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

document.querySelectorAll('.blog-card, .podcast-container, .newsletter-container').forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(40px)';
                el.style.transition = 'opacity 0.6s ease-out, transform 0.6s ease-out';
                observer.observe(el);
            });
        });
    </script>
</body>
</html>

Web Leb : solutions numériques, conception Web et technologie

Recommandé

Modèle de site Web de portfolio HTML 2024

Un code de Mete

Code HTML du chronomètre

HTML

CSS

JS

Recommandé

Modèle de site Web de portfolio HTML 2024

Un code de Mete

Code HTML du chronomètre

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS