Visor de demostración web: Plantillas adaptables y diseño digital

876 Metehan

Abrir en el editor Video Publica tu código

Visor de demostración web: Plantillas adaptables y diseño digital

Recomendado

30 August 2024

Juego de la serpiente: renderizador CSS

15 September 2025

Ejemplo de animación de cuadrícula CSS

13 June 2025

Un código de Metehan

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

Recomendado

Juego de la serpiente: renderizador CSS

Ejemplo de animación de cuadrícula CSS

Un código de Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS