Web Demo Viewer: Responsive Templates & Digital Design

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 | Elegance - Canlı Demolar & Dijital Deneyimler</title>
    <meta name="robots" content="noindex, nofollow" />
    <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 - Web Leb & Elegance'tan uyarlanmıştır */
        * {
            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;

/* Yeni eklenen veya güncellenen renkler/fontlar */
            --pink-base: #ffb6c1; /* Canlı demo normalize css'inden */
            --pink-light: #fff0f5; /* Canlı demo normalize css'inden */
            --pink-accent: #ff69b4; /* Canlı demo normalize css'inden */
            --pink-dark: #ff85c0; /* Canlı demo normalize css'inden */
            --font-source-sans: 'Source Sans Pro', sans-serif; /* Yeni font */
        }

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;
            font-weight: 700;
        }

a {
            background-color: transparent;
            outline: 0;
            text-decoration: none;
            cursor: pointer;
            -webkit-transition: all 0.3s ease;
            transition: all 0.3s ease;
            color: var(--orange-accent); /* Genel link rengi */
        }
        a:hover {
            color: var(--pink-accent); /* Yeni hover rengi */
            text-decoration: none;
        }

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

/* Header (Mevcut Web Leb & Elegance 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;
        }

.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;
            font-size: 2rem;
            font-weight: 600;
            background: var(--gradient-elegant);
            -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(--pink-accent); /* Yeni vurgu rengi */
        }

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            width: 0;
            height: 2px;
            background: var(--pink-accent); /* Yeni 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 (Mevcut Web Leb & Elegance Hero) */
        .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');
            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;
            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;
            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));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

.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);
            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: var(--pink-accent); /* Yeni hover rengi */
        }

.social-links {
            display: flex;
            justify-content: center;
            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(--pink-accent); /* Yeni hover rengi */
            color: var(--primary-dark);
            border-color: var(--pink-accent);
        }
        .social-links svg { width: 26px; height: 26px; }

/* Sections General */
        .section {
            padding: 8rem 0;
        }
        .section-title {
            font-family: 'Crimson Text', serif;
            font-size: 3.2rem;
            text-align: center;
            margin-bottom: 2rem;
            background: var(--gradient-elegant);
            -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(--pink-accent); /* Yeni 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;
        }

/* Demo Viewer Section - Yeni ve Birleşik Alan */
        #demo-viewer {
            background: var(--white);
            padding: 6rem 0;
        }

.demo-controls {
            background: var(--primary-dark); /* Koyu arka plan */
            border-radius: var(--border-radius-lg);
            padding: 2.5rem 3rem;
            margin-bottom: 3rem;
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem;
            justify-content: center;
            align-items: center;
            box-shadow: var(--shadow-soft);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 10; /* İframe'in üstünde olması için */
        }

.demo-controls label {
            color: var(--white);
            font-weight: 500;
            font-size: 1.1rem;
            margin-right: 0.5rem;
            white-space: nowrap;
        }

#template-selector {
            flex-grow: 1;
            padding: 0.8rem 1.2rem;
            border-radius: var(--border-radius-sm);
            border: 2px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.15);
            color: var(--white);
            font-size: 1rem;
            outline: none;
            appearance: none; /* Varsayılan select stilini kaldır */
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
            transition: var(--transition-main);
            max-width: 350px;
            min-width: 200px;
        }
        #template-selector:focus {
            border-color: var(--gold-color);
            box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.3);
            background: rgba(255, 255, 255, 0.25);
        }
        #template-selector option {
            background-color: var(--primary-dark); /* Açılır liste arka planı */
            color: var(--white);
        }

.device-selector {
            display: flex;
            gap: 0.8rem;
            flex-wrap: wrap;
            justify-content: center;
        }

.device-selector .btn-device {
            background: rgba(255, 255, 255, 0.1);
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.8rem 1.2rem;
            border-radius: var(--border-radius-sm);
            font-size: 0.9rem;
            font-weight: 500;
            text-transform: uppercase;
            transition: var(--transition-main);
            cursor: pointer;
            white-space: nowrap;
        }

.device-selector .btn-device:hover,
        .device-selector .btn-device.active {
            background: var(--orange-accent); /* Web Leb vurgu rengi */
            color: var(--white);
            border-color: var(--orange-accent);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(230, 126, 80, 0.3);
        }

#iframe-wrapper {
            background: var(--bg-beige);
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-hover);
            position: relative;
            height: 80vh; /* Sabit yükseklik, içerik kaydırılabilir */
            max-width: 100%;
            margin: 0 auto;
            transition: max-width 0.5s ease, height 0.5s ease;
            border: 1px solid rgba(0,0,0,0.05);
            display: flex; /* İçerik ortalamak için */
            justify-content: center; /* İçerik ortalamak için */
            align-items: center; /* İçerik ortalamak için */
        }
        #iframe-view {
            width: 100%;
            height: 100%;
            border: none;
            display: block; /* İframe'in alttaki boşluğunu kapatır */
            background: var(--white);
            transition: width 0.5s ease, height 0.5s ease;
        }

/* Diğer Bölümler (Blog, Podcast, İletişim) - Mevcut Web Leb & Elegance Bölümleri */
        #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-accent));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 3rem;
            color: var(--white);
            transition: var(--transition-main);
        }
        .blog-card:hover .blog-image {
            background: linear-gradient(135deg, var(--pink-accent), var(--pink-dark));
        }
        .blog-image svg { width: 65px; height: 65px; opacity: 0.9; }
        .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);
        }
        .blog-excerpt { color: var(--text-gray); font-size: 1rem; line-height: 1.7; }

#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);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-size: 2.8rem;
        }
        .podcast-container .section-title::after { display: none; }
        .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: var(--pink-accent); 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);
            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);
        }

#contact {
            background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark));
            color: var(--white);
        }
        .contact-container {
            max-width: 900px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.08);
            padding: 4rem;
            border-radius: var(--border-radius-lg);
            box-shadow: var(--shadow-hover);
            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));
            -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);
        }
        .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-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; }
        .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; display: inline-block; background: var(--gold-color);
            color: var(--primary-dark); 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; }
        .error-message { color: #ffcccc; font-size: 0.9rem; margin-top: 0.5rem; text-align: left; font-weight: 500; }

/* Footer (Mevcut Web Leb & Elegance Footer) */
        .footer {
            background: var(--primary-dark);
            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(--pink-accent); /* Yeni vurgu rengi */
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 5px 15px rgba(255, 105, 180, 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 heroAnimation {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

/* 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(--pink-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; }

.demo-controls { flex-direction: column; padding: 2rem 1.5rem; }
            .demo-controls label { margin-bottom: 0.5rem; }
            #template-selector { max-width: 100%; }
            .device-selector { margin-top: 1rem; }
            #iframe-wrapper { height: 70vh; }

.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; }

.demo-controls { padding: 1.5rem 1rem; }
            .device-selector .btn-device { padding: 0.6rem 1rem; font-size: 0.85rem; }
            #iframe-wrapper { height: 60vh; }

.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="#demo-viewer">Demolar</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="demo-viewer">
        <div class="container">
            <h2 class="section-title">Canlı Demolarımızı Keşfedin</h2>
            <p class="section-subtitle">En yeni web tasarımlarımızı ve dijital çözümlerimizi farklı cihazlarda test edin.</p>
            
            <div class="demo-controls">
                <label for="template-selector">Demo Seç:</label>
                <select id="template-selector">
                    <option value="https://demo.templatesjungle.com/fashionise/" data-product="fashionise">Fashionise - Moda Şablonu</option>
                    <option value="https://demo.templatesjungle.com/flexi/" data-product="flexi">Flexi - Çok Amaçlı Şablon</option>
                    <option value="https://demo.templatesjungle.com/luxify/" data-product="luxify">Luxify - Lüks Seyahat Şablonu</option>
                    <option value="https://demo.templatesjungle.com/zigma/" data-product="zigma">Zigma - SaaS ve Teknoloji</option>
                </select>

<div class="device-selector">
                    <button class="btn-device active" data-device="#desktop">Masaüstü</button>
                    <button class="btn-device" data-device="#laptop">Dizüstü</button>
                    <button class="btn-device" data-device="#tab">Tablet</button>
                    <button class="btn-device" data-device="#phone">Telefon</button>
                </div>
            </div>

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

nameError.textContent = '';
                    emailError.textContent = '';
                    subjectError.textContent = '';
                    messageError.textContent = '';

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

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

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

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;

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, #demo-viewer .section-subtitle, #demo-viewer .demo-controls, #iframe-wrapper').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';
            }

// Demo Viewer JavaScript entegrasyonu (jQuery ile gelen fonksiyonellik)
            // jQuery CDN'den yüklendiği için artık "$()" kullanabiliriz.
            $(document).ready(function(){
                var $iframeView = $("#iframe-view");
                var $iframeWrapper = $("#iframe-wrapper");
                var $deviceButtons = $(".btn-device");

// Şablon seçici değiştiğinde iframe'i güncelle
                $('#template-selector').on('change', function() {
                    var demo_url = this.value;
                    $iframeView.attr("src", demo_url);
                });

// Cihaz boyutlandırma butonları
                $deviceButtons.click(function(){
                    $deviceButtons.removeClass('active');
                    $(this).addClass('active');

var screen_size = $(this).data('device');
                    var wrapper_width = "100%";
                    var wrapper_height = "80vh"; // Ana wrapper'ın yüksekliği sabit kalsın

// Iframe boyutlarını doğrudan ayarla
                    var iframe_width = "100%";
                    var iframe_height = "100%";

switch(screen_size) {
                        case '#desktop':
                            iframe_width = "100%";
                            iframe_height = "100%";
                            $iframeWrapper.css({ 'max-width': '100%', 'height': '80vh' }); // Wrapper'ı da ayarla
                        break;
                        case '#laptop':
                            iframe_width = "1280px";
                            iframe_height = "800px"; // Laptop için daha uygun bir oran
                            $iframeWrapper.css({ 'max-width': '1280px', 'height': '80vh' });
                        break;
                        case '#tab':
                            iframe_width = "768px"; // Tablet için uygun genişlik
                            iframe_height = "1024px"; // Yükseklik biraz daha uzun
                            $iframeWrapper.css({ 'max-width': '800px', 'height': '80vh' });
                        break;
                        case '#phone':
                            iframe_width = "375px";
                            iframe_height = "667px"; // Telefon için daha uygun bir oran (iPhone X'e yakın)
                            $iframeWrapper.css({ 'max-width': '400px', 'height': '80vh' });
                        break;
                    }
                    
                    // Wrapper'ı ortalamak için margin auto kullanılıyor, ek JS'ye gerek yok.
                    // Iframe boyutlarını ayarlarken, iframe'in wrapper'dan taşmaması için max-width gibi değerler veriyoruz
                    // veya wrapper'ın overflow: hidden özelliğinden faydalanıyoruz.
                    $iframeView.css({
                        'width': iframe_width,
                        'height': iframe_height,
                        'margin': 'auto' // Iframe'i wrapper içinde ortala
                    });

// Eğer iframe boyutu wrapper'ın max-width'ini aşarsa scrollbar çıkacak.
                    // Veya daha kontrollü bir responsive davranış için, @media query'ler içinde
                    // wrapper'ın max-width'ini daha dinamik hale getirebiliriz.
                });

// Başlangıçta masaüstü boyutunu ayarla
                $deviceButtons.filter('[data-device="#desktop"]').click();
            });
        });
    </script>
</body>
</html>

Web Demo Viewer: Responsive Templates & Digital Design

Recommended

Fitness Gym Website HTML CSS Template

Responsive Card

Developer Website HTML CSS Template

HTML

CSS

JS

Recommended

Fitness Gym Website HTML CSS Template

Responsive Card

Developer Website HTML CSS Template

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS