Web Leb : Solutions numériques, technologies Web

61 Metehan

Ouvrir dans l'éditeur Publiez votre code

Web Leb : Solutions numériques, technologies Web

Recommandé

24 June 2025

Elara Aydin : modèle HTML de blog personnel

25 November 2024

Site Web de données sur les étudiants réactif

23 August 2025

Page de connexion HTML : Thème Matrix avec authentification par empreinte digitale

HTML

<!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 : Solutions numériques, technologies Web

Recommandé

Elara Aydin : modèle HTML de blog personnel

Site Web de données sur les étudiants réactif

Page de connexion HTML : Thème Matrix avec authentification par empreinte digitale

HTML

CSS

JS

Recommandé

Elara Aydin : modèle HTML de blog personnel

Site Web de données sur les étudiants réactif

Page de connexion HTML : Thème Matrix avec authentification par empreinte digitale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS