Web Design, Experiência Digital e Modelo HTML para Podcast

Abrir no Editor Publique Seu Código

Recomendado

8 July 2025

Estrutura de escada HTML com classes CSS

27 May 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 | Elegance - Dijital ve Konforlu Deneyimler</title>
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Montserrat:wght@300;400;500;600&family=Crimson+Text:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* Global CSS ve Değişkenler */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

:root {
            --primary-dark: #1a1a2e; /* Hotel Elegance ana koyu */
            --secondary-dark: #16213e; /* Hotel Elegance ikincil koyu */
            --orange-accent: #E67E50; /* Web Leb ana vurgu */
            --orange-light: rgba(230, 126, 80, 0.1);
            --gold-color: #ffd700; /* Hotel Elegance altın */
            --text-dark: #2C2C2C; /* Web Leb metin koyu */
            --text-gray: #666; /* Web Leb metin gri */
            --bg-beige: #F5F1E8; /* Web Leb arka plan bej */
            --white: #ffffff;
            --gradient-elegant: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Hotel Elegance gradyan */
            --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
            --shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.12);
            --transition-main: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            --border-radius-lg: 30px;
            --border-radius-md: 20px;
            --border-radius-sm: 15px;
        }

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

h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif; /* Ortak başlık fontu */
            font-weight: 700;
        }

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

/* 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: var(--transition-main);
            box-shadow: none; /* Başlangıçta gölge yok */
        }

.header.scrolled {
            background-color: rgba(255, 255, 255, 0.98);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
            padding: 0.8rem 0;
        }

.nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.logo {
            font-family: 'Crimson Text', serif; /* Hotel Elegance logo fontu */
            font-size: 2rem;
            font-weight: 600;
            background: var(--gradient-elegant); /* Hotel Elegance logosu gradyanı */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-decoration: none;
            transition: var(--transition-main);
        }

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

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

.nav-links a:hover {
            color: var(--orange-accent); /* Web Leb vurgu rengi */
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--orange-accent); /* Web Leb vurgu rengi */
            transition: var(--transition-main);
            transform: translateX(-50%);
            border-radius: 2px;
        }

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

.hamburger-menu div {
            width: 28px;
            height: 3px;
            background-color: var(--text-dark);
            margin: 6px 0;
            transition: var(--transition-main);
            border-radius: 2px;
        }

/* Hero Section */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 8rem 2rem 4rem;
            position: relative;
            overflow: hidden;
            background-image: linear-gradient(rgba(26, 26, 46, 0.7), rgba(15, 52, 96, 0.7)), url('https://images.pexels.com/photos/1036857/pexels-photo-1036857.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); /* Yeni hero görseli */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            color: var(--white);
            text-align: center;
        }

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-elegant);
            opacity: 0.3;
            z-index: 1;
        }

.hero-container {
            max-width: 1000px; /* Ortalanmış genişlik */
            margin: 0 auto;
            position: relative;
            z-index: 2;
            opacity: 0;
            transform: translateY(50px);
            animation: heroAnimation 1.5s ease 0.5s forwards;
        }

.hero-content h1 {
            font-family: 'Crimson Text', serif; /* Hotel Elegance başlık fontu */
            font-size: 4.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.4);
            background: linear-gradient(45deg, #fff, var(--gold-color)); /* Altın renk vurgusu */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

.hero-content .highlight {
            color: var(--gold-color); /* Metin içinde altın vurgu */
        }

.hero-content p {
            font-size: 1.35rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2.5rem;
            font-weight: 300;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

.cta-button {
            display: inline-block;
            background: var(--orange-accent); /* Web Leb CTA rengi */
            color: var(--white);
            padding: 1.1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.05rem;
            transition: var(--transition-main);
            box-shadow: var(--shadow-soft);
            text-transform: uppercase;
            letter-spacing: 1px;
            border: none;
            cursor: pointer;
        }

.cta-button:hover {
            transform: translateY(-5px) scale(1.03);
            box-shadow: var(--shadow-hover);
            background: #d66840; /* Hafif koyu portakal */
        }

.social-links {
            display: flex;
            justify-content: center; /* Ortala */
            gap: 1.5rem;
            margin-top: 3rem;
        }
        .social-links a {
            width: 55px; height: 55px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex;
            align-items: center; justify-content: center; text-decoration: none;
            color: var(--white); box-shadow: var(--shadow-soft); transition: var(--transition-main);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }
        .social-links a:hover {
            transform: translateY(-5px) scale(1.05); box-shadow: var(--shadow-hover);
            background: var(--gold-color); /* Altın rengi hover */
            color: var(--primary-dark);
            border-color: var(--gold-color);
        }
        .social-links svg { width: 26px; height: 26px; }

/* Sections General */
        .section {
            padding: 8rem 0; /* Artırılmış padding */
        }
        .section-title {
            font-family: 'Crimson Text', serif; /* Hotel Elegance başlık fontu */
            font-size: 3.2rem;
            text-align: center;
            margin-bottom: 2rem;
            background: var(--gradient-elegant); /* Hotel Elegance gradyanı */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }
        .section-title::after {
            content: '';
            display: block;
            width: 120px;
            height: 3px;
            background: var(--orange-accent); /* Web Leb vurgu rengi */
            margin: 1.5rem auto 0;
            border-radius: 2px;
        }
        .section-subtitle {
            text-align: center;
            font-size: 1.2rem;
            color: var(--text-gray);
            margin-bottom: 5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.7;
        }

/* Blog Section (Web Leb style) */
        #blog {
            background: var(--white);
        }
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 3rem;
        }
        .blog-card {
            background: var(--white);
            border-radius: var(--border-radius-md);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
            transition: var(--transition-main);
            cursor: pointer;
            opacity: 0;
            transform: translateY(40px);
        }
        .blog-card:hover {
            transform: translateY(-12px) scale(1.01);
            box-shadow: var(--shadow-hover);
        }
        .blog-image {
            width: 100%;
            height: 220px;
            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);
            transition: var(--transition-main);
        }
        .blog-card:hover .blog-image {
            background: linear-gradient(135deg, var(--orange-accent), #d66840);
            color: var(--white);
        }
        .blog-image svg { width: 65px; height: 65px; opacity: 0.8; }
        .blog-content { padding: 2rem; }
        .blog-date { color: var(--text-gray); font-size: 0.95rem; margin-bottom: 0.8rem; font-weight: 500;}
        .blog-title {
            font-family: 'Playfair Display', serif;
            font-size: 1.6rem;
            margin-bottom: 1.2rem;
            color: var(--primary-dark); /* Hotel Elegance koyu rengi */
        }
        .blog-excerpt { color: var(--text-gray); font-size: 1rem; line-height: 1.7; }

/* Podcast Section (Web Leb style) */
        #podcast {
            background: var(--bg-beige);
        }
        .podcast-container {
            background: var(--white);
            border-radius: var(--border-radius-lg);
            padding: 4rem;
            box-shadow: var(--shadow-soft);
            text-align: center;
            opacity: 0;
            transform: translateY(40px);
            border: 1px solid rgba(0,0,0,0.05);
        }
        .podcast-container .section-title {
            background: var(--gradient-elegant); /* Hotel Elegance gradyanı */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 2.8rem; /* Daha küçük başlık */
        }
        .podcast-container .section-title::after { display: none; } /* Alt çizgi yok */
        .podcast-container p {
            font-size: 1.15rem;
            color: var(--text-gray);
            margin-bottom: 2.5rem;
            max-width: 600px;
            margin: 0 auto 2.5rem;
            line-height: 1.7;
        }

.audio-player {
            background: var(--bg-beige);
            border-radius: var(--border-radius-md);
            padding: 1.8rem 2.5rem;
            margin: 2.5rem auto;
            display: flex;
            align-items: center;
            gap: 1.8rem;
            justify-content: center;
            max-width: 550px;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.03);
        }
        .play-button {
            width: 65px; height: 65px; background: var(--orange-accent);
            border: none; border-radius: 50%; color: var(--white);
            font-size: 1.6rem; cursor: pointer; transition: var(--transition-main);
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--shadow-soft);
        }
        .play-button:hover { transform: scale(1.1); background: #d66840; box-shadow: var(--shadow-hover); }
        .play-button svg { width: 28px; height: 28px; margin-left: 2px; }
        .play-button .pause-icon { display: none; }
        .track-info { flex: 1; text-align: left; }
        .track-title { font-weight: 600; margin-bottom: 0.6rem; font-size: 1.2rem; color: var(--primary-dark); }
        .track-duration { color: var(--text-gray); font-size: 1rem; }
        
        .podcast-cta {
            display: inline-block;
            background: var(--gradient-elegant); /* Hotel Elegance gradyanı */
            color: var(--white);
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: var(--transition-main);
            box-shadow: var(--shadow-soft);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 1.5rem;
            border: none;
        }
        .podcast-cta:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

/* Booking / Contact Section (Birleşim) */
        #contact {
            background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark)); /* Hotel Elegance arka planı */
            color: var(--white);
        }
        .contact-container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.08); /* Hafif şeffaf beyaz */
            padding: 4rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-hover); /* Daha belirgin gölge */
            text-align: center;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            opacity: 0;
            transform: translateY(40px);
        }
        .contact-container .section-title {
            color: var(--white);
            background: linear-gradient(45deg, #fff, var(--gold-color)); /* Altın renkli başlık */
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 1.5rem;
        }
        .contact-container .section-title::after {
            background: var(--gold-color); /* Altın renkli alt çizgi */
        }
        .contact-container p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 3rem;
            line-height: 1.7;
        }

.contact-form {
            display: grid; /* Grid düzeni */
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem 2rem;
            max-width: 700px;
            margin: 0 auto;
        }
        .form-group {
            position: relative;
        }
        .form-group.full-width {
            grid-column: 1 / -1; /* Tam genişlik kapla */
        }
        .form-group label {
            display: block;
            margin-bottom: 0.6rem;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
            font-size: 0.95rem;
            text-align: left;
        }

.form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 1.2rem 1.5rem;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: var(--border-radius-sm);
            font-size: 1rem;
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            outline: none;
            transition: var(--transition-main);
            backdrop-filter: blur(5px);
        }
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: rgba(255, 255, 255, 0.7);
        }
        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            border-color: var(--gold-color);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
            background: rgba(255, 255, 255, 0.15);
        }
        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

.submit-btn {
            grid-column: 1 / -1; /* Tam genişlik */
            display: inline-block;
            background: var(--gold-color); /* Altın renkli buton */
            color: var(--primary-dark); /* Koyu metin */
            padding: 1.2rem 3rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.15rem;
            transition: var(--transition-main);
            box-shadow: var(--shadow-soft);
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            border: none;
            margin-top: 1.5rem;
        }
        .submit-btn:hover {
            transform: translateY(-5px) scale(1.02);
            box-shadow: var(--shadow-hover);
            background: #e6c200; /* Biraz daha koyu altın */
        }
        .error-message {
            color: #ffcccc; /* Açık kırmızı */
            font-size: 0.9rem;
            margin-top: 0.5rem;
            text-align: left;
            font-weight: 500;
        }

/* Footer */
        .footer {
            background: var(--primary-dark); /* Hotel Elegance koyu arka plan */
            color: var(--white);
            padding: 5rem 2rem 2.5rem;
            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.15);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            text-decoration: none; color: var(--white); transition: var(--transition-main);
        }
        .footer-social a:hover {
            background: var(--orange-accent); /* Web Leb vurgusu */
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 5px 15px rgba(230, 126, 80, 0.3);
        }
        .footer-social svg { width: 24px; height: 24px; }
        .footer p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-top: 1.5rem;
        }

/* Animations */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        @keyframes heroAnimation {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

/* Responsive Design */
        @media (max-width: 968px) {
            .nav-links {
                position: fixed; top: 0; right: -100%;
                width: 70%; height: 100vh;
                background: rgba(245, 241, 232, 0.98);
                backdrop-filter: blur(8px);
                flex-direction: column;
                justify-content: center;
                gap: 3.5rem;
                transition: right 0.5s ease-in-out;
                box-shadow: -10px 0 30px rgba(0,0,0,0.1);
            }
            .nav-links.active { right: 0; }
            .nav-links a { font-size: 1.6rem; color: var(--primary-dark); }
            .nav-links a:hover { color: var(--orange-accent); }
            .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-content h1 { font-size: 3.5rem; }
            .hero-content p { font-size: 1.2rem; }
            .section-title { font-size: 2.8rem; }
            .section-subtitle { margin-bottom: 3rem; }

.blog-grid { grid-template-columns: 1fr; }
            .podcast-container { padding: 3rem 2rem; }
            .audio-player { flex-direction: column; text-align: center; gap: 1.2rem; padding: 1.5rem; }
            .track-info { text-align: center; }

.contact-form { grid-template-columns: 1fr; }
            .contact-container { padding: 3rem 2rem; }
        }

@media (max-width: 480px) {
            .container { padding: 0 1.2rem; }
            .hero { padding: 7rem 1.2rem 3rem; }
            .hero-content h1 { font-size: 2.8rem; }
            .hero-content p { font-size: 1.05rem; }
            .cta-button { padding: 1rem 2rem; font-size: 0.95rem; }
            .social-links a { width: 45px; height: 45px; }

.section { padding: 6rem 0; }
            .section-title { font-size: 2.2rem; }
            .section-subtitle { font-size: 1.05rem; margin-bottom: 2rem; }

.blog-content { padding: 1.5rem; }
            .blog-title { font-size: 1.4rem; }
            .blog-excerpt { font-size: 0.9rem; }
            
            .podcast-container .section-title { font-size: 2.2rem; }
            .podcast-container p { font-size: 1rem; margin-bottom: 2rem; }
            .play-button { width: 55px; height: 55px; font-size: 1.4rem; }
            .track-title { font-size: 1.1rem; }
            .track-duration { font-size: 0.9rem; }
            .podcast-cta { padding: 0.9rem 2rem; font-size: 0.9rem; }

.contact-container { padding: 2.5rem 1.5rem; }
            .contact-container .section-title { font-size: 2.2rem; }
            .contact-container p { font-size: 1.05rem; margin-bottom: 2rem; }
            .form-group input, .form-group textarea, .form-group select { padding: 1rem 1.2rem; font-size: 0.95rem; }
            .submit-btn { padding: 1rem 2.5rem; font-size: 1rem; }
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="nav-container container">
            <a href="#home" class="logo">Web Leb <span style="color: var(--orange-accent); font-family: 'Montserrat', sans-serif; font-size: 1.2rem;">& Elegance</span></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="#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>Web Leb <span class="highlight">& Elegance</span>: Dijital Çözümler ve Konforlu Deneyimler</h1>
                <p>İlham veren dijital projelerle lüksün ve estetiğin buluştuğu noktadayız. Hayalinizdeki her şeye değer katıyoruz.</p>
                <a href="#contact" class="cta-button">Bizimle İletişime Geçin</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>
    </section>

<section class="section" id="blog">
        <div class="container">
            <h2 class="section-title">En Son Dijital İpuçları ve Projeler</h2>
            <p class="section-subtitle">Web dünyasındaki gelişmeleri yakından takip edin, ilham verici projelerimizi keşfedin.</p>
            <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">Geleceğin Web Arayüzleri</h3>
                        <p class="blog-excerpt">Yapay zeka entegrasyonundan kişiselleştirilmiş deneyimlere: Web siteleri nasıl evriliyor?</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">Sürdürülebilir Dijital Çözümler</h3>
                        <p class="blog-excerpt">Çevre dostu web siteleri ve uygulamalar geliştirmenin önemi ve yöntemleri.</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 Uygulama Trendleri 2025</h3>
                        <p class="blog-excerpt">Yapay zeka destekli asistanlar ve artırılmış gerçeklik ile mobil uygulamaların geleceği.</p>
                    </div>
                </article>
            </div>
        </div>
    </section>

<section class="section" id="podcast">
        <div class="container">
            <div class="podcast-container">
                <h2 class="section-title">Teknoloji Sohbetleri & Dijital Lüks</h2>
                <p>Yaratıcılık, dijital trendler ve başarılı projelerin ardındaki hikayeler üzerine haftalık ilham verici sohbetler. Konfor alanınızdan bizi dinleyin.</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="podcast-cta">Tüm Bölümler</a>
            </div>
        </div>
    </section>

<section class="section" id="contact">
        <div class="container">
            <div class="contact-container">
                <h2 class="section-title">Fikirlerinizi Paylaşın</h2>
                <p>Dijital projeleriniz, işbirliği teklifleriniz veya aklınızdaki her şey için bize ulaşın. Sizinle tanışmak için sabırsızlanıyoruz.</p>
                <form class="contact-form" id="contact-form">
                    <div class="form-group">
                        <label for="name">Adınız Soyadınız</label>
                        <input type="text" id="name" name="name" placeholder="Adınız Soyadınız" required>
                        <div class="error-message" id="name-error"></div>
                    </div>
                    <div class="form-group">
                        <label for="email">E-posta Adresiniz</label>
                        <input type="email" id="email" name="email" placeholder="E-posta adresiniz" required>
                        <div class="error-message" id="email-error"></div>
                    </div>
                    <div class="form-group">
                        <label for="phone">Telefon Numaranız (Opsiyonel)</label>
                        <input type="tel" id="phone" name="phone" placeholder="Telefon Numaranız">
                    </div>
                    <div class="form-group">
                        <label for="subject">Konu</label>
                        <input type="text" id="subject" name="subject" placeholder="Konu" required>
                        <div class="error-message" id="subject-error"></div>
                    </div>
                    <div class="form-group full-width">
                        <label for="message">Mesajınız</label>
                        <input id="message" name="message" placeholder="Mesajınızı buraya yazın..." required/>
                        <div class="error-message" id="message-error"></div>
                    </div>
                    <button type="submit" class="submit-btn">Mesaj Gönder</button>
                </form>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="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 & Elegance. Tüm hakları saklıdır. Tutku, teknoloji ve konfor ile geliştirildi.</p>
        </div>
    </footer>

// Hamburger menü toggle
            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
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });

// 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');

if (playButton && audio) { // Elementlerin varlığını kontrol et
                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';
                });
            }

// İletişim Formu Validasyonu (Basit Örnek)
            const contactForm = document.getElementById('contact-form');
            if (contactForm) {
                contactForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    let isValid = true;

const nameInput = document.getElementById('name');
                    const emailInput = document.getElementById('email');
                    const subjectInput = document.getElementById('subject');
                    const messageInput = document.getElementById('message');

const nameError = document.getElementById('name-error');
                    const emailError = document.getElementById('email-error');
                    const subjectError = document.getElementById('subject-error');
                    const messageError = document.getElementById('message-error');

// Hata mesajlarını temizle
                    nameError.textContent = '';
                    emailError.textContent = '';
                    subjectError.textContent = '';
                    messageError.textContent = '';

// İsim kontrolü
                    if (nameInput.value.trim() === '') {
                        nameError.textContent = 'Adınız ve soyadınız gerekli.';
                        isValid = false;
                    }

// E-posta kontrolü
                    if (emailInput.value.trim() === '' || !emailInput.value.includes('@') || !emailInput.value.includes('.')) {
                        emailError.textContent = 'Geçerli bir e-posta adresi giriniz.';
                        isValid = false;
                    }

// Konu kontrolü
                    if (subjectInput.value.trim() === '') {
                        subjectError.textContent = 'Konu alanı boş bırakılamaz.';
                        isValid = false;
                    }

// Mesaj kontrolü
                    if (messageInput.value.trim() === '') {
                        messageError.textContent = 'Mesaj alanı boş bırakılamaz.';
                        isValid = false;
                    }

if (isValid) {
                        const submitBtn = contactForm.querySelector('.submit-btn');
                        submitBtn.textContent = 'Gönderiliyor...';
                        submitBtn.disabled = true;

// Gerçek bir senaryoda burada bir sunucuya veya API'ye veri göndermelisiniz.
                        // Örnek olarak 2 saniyelik bir gecikme ile başarılı mesajı gösteriliyor.
                        setTimeout(() => {
                            submitBtn.textContent = 'Mesajınız Gönderildi!';
                            submitBtn.style.background = '#4CAF50';
                            submitBtn.style.color = 'white';
                            contactForm.reset();
                            setTimeout(() => {
                                submitBtn.textContent = 'Mesaj Gönder';
                                submitBtn.style.background = '';
                                submitBtn.style.color = '';
                                submitBtn.disabled = false;
                            }, 3000);
                        }, 2000);
                    }
                });
            }

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

document.querySelectorAll('.blog-card, .podcast-container, .contact-container').forEach(el => {
                el.style.opacity = '0';
                el.style.transform = 'translateY(40px)';
                el.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';
                observer.observe(el);
            });

// Hero içeriği animasyonu
            const heroContent = document.querySelector('.hero-content');
            if (heroContent) {
                heroContent.style.opacity = '0';
                heroContent.style.transform = 'translateY(50px)';
                heroContent.style.animation = 'heroAnimation 1.5s ease 0.5s forwards';
            }
        });
    </script>
</body>
</html>

Web Design, Experiência Digital e Modelo HTML para Podcast

Recomendado

Estrutura de escada HTML com classes CSS

Chave

Um código por Redllowge

HTML

CSS

JS

Recomendado

Estrutura de escada HTML com classes CSS

Chave

Um código por Redllowge

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS