Web Leb: Dijital Çözümler, Web Teknolojileri

Open In Editor Publish Your Code

<!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>

<!DOCTYPE html>
<html>
<head>
    <title>HTML Editor</title>
    <style>
        /* Basic styling for a two-panel layout */
        body {
            margin: 0;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden; /* Prevent body scroll if content overflows */
        }
        .editor-container {
            display: flex;
            flex: 1; /* Take remaining vertical space */
            overflow: hidden; /* Hide scrollbars if children overflow */
        }
        textarea, iframe {
            flex: 1; /* Each takes half the width */
            border: 1px solid #ddd;
            padding: 10px;
            box-sizing: border-box; /* Include padding/border in element's total width/height */
            resize: none; /* Prevent manual resizing */
            font-size: 16px;
        }
        textarea {
            background-color: #f8f8f8;
            border-right: none;
            font-family: monospace;
            white-space: pre; /* Preserve whitespace and line breaks */
            overflow: auto; /* Add scrollbars if content overflows */
        }
        iframe {
            background-color: #fff;
            border-left: none;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            align-self: flex-start; /* Align button to the start of the flex container */
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <button onclick="updatePreview()">Run Code</button>

frameDoc.open();
            frameDoc.write(htmlCode);
            frameDoc.close();
        }

// Set initial HTML code and update preview on page load
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('htmlCode').value = `<!DOCTYPE html>
<html>
<head>
    <title>Live Preview</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; background-color: #e6f7ff; }
        h1 { color: #333; }
        p { color: #555; }
        .highlight { color: #007bff; font-weight: bold; }
    </style>
</head>
<body>
    <h1>Welcome to the Editor!</h1>
    <p>Type your <span class="highlight">HTML</span> code on the left and see the live preview here.</p>
    <button onclick="alert('Hello from your HTML!')">Click Me</button>
</body>
</html>`;
            updatePreview(); // Initial update
        });
    </script>
</body>
</html>

Web Leb: Dijital Çözümler, Web Teknolojileri

Recommended

web sitesi

modern web sit

WEB SİT FROM APPLE

HTML

CSS

JS

Recommended

web sitesi

modern web sit

WEB SİT FROM APPLE

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS