Tech-Blog: Technologie, Produkte und kreative Ideen

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

14 March 2025

Preisinteraktion (HTML, CSS und JS)

3 March 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechCreative | Teknoloji & Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

body {
            font-family: 'Montserrat', sans-serif;
            background-color: #F5F1E8;
            color: #2C2C2C;
        }

.hero-title {
            font-family: 'Playfair Display', serif;
        }

.nav-link {
            position: relative;
            transition: color 0.3s ease;
        }

.nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -4px;
            left: 0;
            background-color: #E67E50;
            transition: width 0.3s ease;
        }

.nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

.nav-link:hover {
            color: #E67E50;
        }

.product-card, .blog-card {
            transition: all 0.3s ease;
        }

.product-card:hover, .blog-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

.hero-section {
            background: linear-gradient(135deg, #F5F1E8 0%, #E8E0D6 100%);
        }

.tech-section {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }

.profile-img {
            transition: transform 0.3s ease;
        }

.profile-img:hover {
            transform: scale(1.05);
        }

.social-icon {
            transition: all 0.3s ease;
        }

.social-icon:hover {
            transform: translateY(-3px);
            color: #E67E50;
        }

.hamburger {
            transition: all 0.3s ease;
        }

.hamburger.active .line:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }

.hamburger.active .line:nth-child(2) {
            opacity: 0;
        }

.hamburger.active .line:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }

.gradient-text {
            background: linear-gradient(45deg, #E67E50, #FF8A65);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

.tech-card {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

.section {
            min-height: 100vh;
            scroll-margin-top: 80px;
        }

.floating-nav {
            position: fixed;
            right: 30px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 40;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

.floating-nav button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid #E67E50;
            background: transparent;
            transition: all 0.3s ease;
        }

.floating-nav button.active,
        .floating-nav button:hover {
            background: #E67E50;
            transform: scale(1.2);
        }

@media (max-width: 768px) {
            .floating-nav {
                display: none;
            }
        }
    </style>
</head>
<body class="min-h-screen">
    
    <div class="floating-nav">
        <button onclick="scrollToSection('hero')" id="nav-hero" class="active" title="Ana Sayfa"></button>
        <button onclick="scrollToSection('products')" id="nav-products" title="Ürünler"></button>
        <button onclick="scrollToSection('blog')" id="nav-blog" title="Blog"></button>
        <button onclick="scrollToSection('about')" id="nav-about" title="Hakkında"></button>
        <button onclick="scrollToSection('contact')" id="nav-contact" title="İletişim"></button>
    </div>

<header class="fixed w-full bg-white bg-opacity-95 backdrop-blur-md shadow-sm z-50">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold gradient-text">TechCreative</a>

<nav class="hidden md:flex space-x-8">
                <a href="#hero" class="nav-link active uppercase text-sm font-medium tracking-wider" onclick="setActiveNav(this)">Ana Sayfa</a>
                <a href="#products" class="nav-link uppercase text-sm font-medium tracking-wider" onclick="setActiveNav(this)">Ürünler</a>
                <a href="#blog" class="nav-link uppercase text-sm font-medium tracking-wider" onclick="setActiveNav(this)">Blog</a>
                <a href="#about" class="nav-link uppercase text-sm font-medium tracking-wider" onclick="setActiveNav(this)">Hakkında</a>
                <a href="#contact" class="nav-link uppercase text-sm font-medium tracking-wider" onclick="setActiveNav(this)">İletişim</a>
            </nav>

<div class="hidden md:flex items-center space-x-4">
                <button class="p-2 hover:bg-gray-100 rounded-full transition">
                    <i class="fas fa-search text-gray-700"></i>
                </button>
                <button class="p-2 hover:bg-gray-100 rounded-full transition">
                    <i class="fas fa-shopping-cart text-gray-700"></i>
                </button>
                <button class="p-2 hover:bg-gray-100 rounded-full transition">
                    <i class="fas fa-user text-gray-700"></i>
                </button>
            </div>

<button id="menu-toggle" class="md:hidden focus:outline-none">
                <div class="hamburger">
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] mb-1.5 transition-all"></div>
                    <div class="line w-6 h-0.5 bg-[#2C2C2C] transition-all"></div>
                </div>
            </button>
        </div>

<div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg">
            <div class="flex flex-col space-y-4">
                <a href="#hero" class="nav-link active uppercase text-sm font-medium tracking-wider py-2" onclick="setActiveNav(this)">Ana Sayfa</a>
                <a href="#products" class="nav-link uppercase text-sm font-medium tracking-wider py-2" onclick="setActiveNav(this)">Ürünler</a>
                <a href="#blog" class="nav-link uppercase text-sm font-medium tracking-wider py-2" onclick="setActiveNav(this)">Blog</a>
                <a href="#about" class="nav-link uppercase text-sm font-medium tracking-wider py-2" onclick="setActiveNav(this)">Hakkında</a>
                <a href="#contact" class="nav-link uppercase text-sm font-medium tracking-wider py-2" onclick="setActiveNav(this)">İletişim</a>
            </div>
        </div>
    </header>

<section id="hero" class="section hero-section pt-32 pb-20 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                
                <div class="md:w-1/2 mb-12 md:mb-0 md:pr-8">
                    <h1 class="hero-title text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                        Teknoloji ile <span class="gradient-text">Yaratıcılık</span> <br>Buluşuyor
                    </h1>
                    <p class="text-lg text-gray-600 mb-8">
                        En yeni teknoloji ürünlerini keşfedin, yaratıcı projelerimizi inceleyin ve
                        teknoloji dünyasındaki son gelişmeleri takip edin.
                    </p>

<div class="flex flex-col sm:flex-row gap-4 mb-8">
                        <button onclick="scrollToSection('products')" class="bg-[#E67E50] hover:bg-[#d46b3d] text-white px-6 py-3 rounded-full font-medium transition-all transform hover:-translate-y-1 shadow-md">
                            Ürünleri Keşfet
                        </button>
                        <button onclick="scrollToSection('blog')" class="border border-[#E67E50] text-[#E67E50] hover:bg-[#E67E50] hover:text-white px-6 py-3 rounded-full font-medium transition-all">
                            Blog Yazıları
                        </button>
                    </div>

<div class="md:w-1/2 flex justify-center">
                    <div class="relative w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
                        <div class="absolute inset-0 bg-[#E67E50] bg-opacity-20 rounded-full transform rotate-6"></div>
                        <div class="absolute inset-0 bg-[#E67E50] bg-opacity-10 rounded-full transform -rotate-6"></div>
                        <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Tech Setup"
                             class="profile-img relative w-full h-full object-cover rounded-full border-4 border-white shadow-xl">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="products" class="section tech-section py-20 px-4">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">En Yeni Teknoloji Ürünleri</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    Akıllı telefonlar, saatler, tabletler ve daha fazlası.
                    En son teknoloji ürünlerini keşfedin.
                </p>
            </div>

<div class="flex flex-wrap justify-center gap-4 mb-12">
                <button onclick="filterProducts('all')" class="product-filter active bg-[#E67E50] text-white px-6 py-2 rounded-full font-medium transition-all">
                    Tümü
                </button>
                <button onclick="filterProducts('phone')" class="product-filter bg-white text-gray-700 hover:bg-[#E67E50] hover:text-white px-6 py-2 rounded-full font-medium transition-all">
                    Telefonlar
                </button>
                <button onclick="filterProducts('watch')" class="product-filter bg-white text-gray-700 hover:bg-[#E67E50] hover:text-white px-6 py-2 rounded-full font-medium transition-all">
                    Akıllı Saatler
                </button>
                <button onclick="filterProducts('tablet')" class="product-filter bg-white text-gray-700 hover:bg-[#E67E50] hover:text-white px-6 py-2 rounded-full font-medium transition-all">
                    Tabletler
                </button>
                <button onclick="filterProducts('audio')" class="product-filter bg-white text-gray-700 hover:bg-[#E67E50] hover:text-white px-6 py-2 rounded-full font-medium transition-all">
                    Ses Cihazları
                </button>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="products-grid">
                
                <div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="phone">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Akıllı Telefon"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">TechPhone Pro Max</h3>
                    <p class="text-gray-600 text-sm mb-3">Gelişmiş AI kamera sistemi ve uzun pil ömrü</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺25.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="watch">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Akıllı Saat"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">SmartWatch Series 8</h3>
                    <p class="text-gray-600 text-sm mb-3">Sağlık monitörü ve 7 gün pil ömrü</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺4.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="tablet">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1544244015-0df4b3ffc6b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Tablet"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">TechPad Pro 12.9"</h3>
                    <p class="text-gray-600 text-sm mb-3">Profesyonel tasarım ve yüksek performans</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺15.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="audio">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Kulaklık"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">AudioMax Pro</h3>
                    <p class="text-gray-600 text-sm mb-3">Aktif gürültü engelleme ve Hi-Fi ses</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺2.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="phone">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1592899677977-9c10ca588bbd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Akıllı Telefon"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">TechPhone Lite</h3>
                    <p class="text-gray-600 text-sm mb-3">Uygun fiyatlı premium deneyim</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺12.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="watch">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1579586337278-3f436f25d4d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Akıllı Saat"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">FitWatch Active</h3>
                    <p class="text-gray-600 text-sm mb-3">Spor odaklı akıllı saat</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺2.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="audio">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Hoparlör"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">SoundBox Wireless</h3>
                    <p class="text-gray-600 text-sm mb-3">Taşınabilir Bluetooth hoparlör</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺899</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>

<div class="product-card tech-card rounded-xl p-6 shadow-lg" data-category="tablet">
                    <div class="h-48 mb-4 overflow-hidden rounded-lg">
                        <img src="https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Tablet"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <h3 class="text-xl font-bold mb-2">TechPad Mini</h3>
                    <p class="text-gray-600 text-sm mb-3">Kompakt ve güçlü tablet</p>
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-2xl font-bold text-[#E67E50]">₺7.999</span>
                        <div class="flex text-yellow-400">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="far fa-star"></i>
                        </div>
                    </div>
                    <button class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-2 rounded-lg font-medium transition-all">
                        Satın Al
                    </button>
                </div>
            </div>
        </div>
    </section>

<section id="blog" class="section py-20 px-4 bg-white">
        <div class="container mx-auto">
            <div class="text-center mb-16">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Teknoloji Blog</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    Teknoloji dünyasındaki son gelişmeler, incelemeler ve ipuçları.
                    En güncel blog yazılarımızı keşfedin.
                </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>15 Aralık 2024</span>
                            <span class="mx-2">•</span>
                            <span>5 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">2025'te Akıllı Telefonların Geleceği</h3>
                        <p class="text-gray-600 mb-4">
                            Yapay zeka, katlanabilir ekranlar ve 5G teknolojisinin akıllı telefonları nasıl değiştireceği.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>10 Aralık 2024</span>
                            <span class="mx-2">•</span>
                            <span>8 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Sürdürülebilir Teknoloji Trendleri</h3>
                        <p class="text-gray-600 mb-4">
                            Çevre dostu teknoloji ürünleri ve sürdürülebilir inovasyon örnekleri.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1535303311164-664fc9ec6532?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>5 Aralık 2024</span>
                            <span class="mx-2">•</span>
                            <span>6 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Yapay Zeka ve Günlük Hayat</h3>
                        <p class="text-gray-600 mb-4">
                            AI teknolojisinin ev, iş ve sosyal yaşamımızı nasıl dönüştürdüğü.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>1 Aralık 2024</span>
                            <span class="mx-2">•</span>
                            <span>7 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Siber Güvenlik Temelleri</h3>
                        <p class="text-gray-600 mb-4">
                            Dijital hayatınızı korumak için bilmeniz gereken temel güvenlik ipuçları.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>28 Kasım 2024</span>
                            <span class="mx-2">•</span>
                            <span>4 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Nesnelerin İnterneti (IoT) Nedir?</h3>
                        <p class="text-gray-600 mb-4">
                            Akıllı ev teknolojileri ve IoT cihazlarının avantajları ve dezavantajları.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>

<article class="blog-card bg-[#F5F1E8] rounded-lg overflow-hidden shadow-md">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                             alt="Blog Post Image"
                             class="w-full h-full object-cover transition-transform duration-500 hover:scale-110">
                    </div>
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <span>25 Kasım 2024</span>
                            <span class="mx-2">•</span>
                            <span>9 dk okuma</span>
                        </div>
                        <h3 class="text-xl font-bold mb-3">Cloud Computing'in Geleceği</h3>
                        <p class="text-gray-600 mb-4">
                            Bulut teknolojileri ve işletmeler için dijital dönüşüm stratejileri.
                        </p>
                        <a href="#" class="text-[#E67E50] font-medium inline-flex items-center">
                            Devamını Oku
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                            </svg>
                        </a>
                    </div>
                </article>
            </div>

<div class="text-center mt-12">
                <a href="#" class="inline-block border border-[#E67E50] text-[#E67E50] hover:bg-[#E67E50] hover:text-white px-6 py-3 rounded-full font-medium transition-all">
                    Tüm Yazıları Görüntüle
                </a>
            </div>
        </div>
    </section>

<section id="about" class="section py-20 px-4 bg-[#F5F1E8]">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
                    <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
                         alt="About Us"
                         class="w-full rounded-lg shadow-xl">
                </div>
                <div class="md:w-1/2">
                    <h2 class="hero-title text-3xl md:text-4xl font-bold mb-6">Hakkımızda</h2>
                    <p class="text-lg text-gray-600 mb-6">
                        TechCreative olarak, teknoloji dünyasındaki en son gelişmeleri takip ediyor,
                        en iyi ürünleri sizlerle buluşturuyor ve teknoloji ile yaratıcılığı bir araya getiriyoruz.
                    </p>
                    <p class="text-lg text-gray-600 mb-8">
                        Misyonumuz, teknoloji tutkunlarına kaliteli içerik ve güvenilir ürünler sunarak
                        dijital yaşamlarını daha da zenginleştirmektir.
                    </p>

<div class="grid grid-cols-2 gap-6 mb-8">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-[#E67E50] mb-2">1000+</div>
                            <div class="text-gray-600">Mutlu Müşteri</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-[#E67E50] mb-2">50+</div>
                            <div class="text-gray-600">Blog Yazısı</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-[#E67E50] mb-2">100+</div>
                            <div class="text-gray-600">Ürün İncelemesi</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-[#E67E50] mb-2">5</div>
                            <div class="text-gray-600">Yıllık Deneyim</div>
                        </div>
                    </div>

<button onclick="scrollToSection('contact')" class="bg-[#E67E50] hover:bg-[#d46b3d] text-white px-6 py-3 rounded-full font-medium transition-all transform hover:-translate-y-1 shadow-md">
                        İletişime Geç
                    </button>
                </div>
            </div>
        </div>
    </section>

<section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">Güncel Kalın</h2>
            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">
                Teknoloji dünyasındaki son gelişmeler, yeni ürün duyuruları ve özel fırsatlar için
                e-bültenimize abone olun.
            </p>

<form class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
                <input type="email" placeholder="E-posta adresiniz"
                       class="flex-grow px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent">
                <button type="submit"
                        class="bg-[#E67E50] hover:bg-[#d46b3d] text-white px-6 py-3 rounded-full font-medium transition-all">
                    Abone Ol
                </button>
            </form>

<p class="text-xs text-gray-500 mt-4">
                Gizliliğinize saygı duyuyoruz. İstediğiniz zaman abonelikten çıkabilirsiniz.
            </p>
        </div>
    </section>

<section id="contact" class="section py-20 px-4 bg-[#F5F1E8]">
        <div class="container mx-auto max-w-4xl">
            <div class="text-center mb-16">
                <h2 class="hero-title text-3xl md:text-4xl font-bold mb-4">İletişim</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">
                    Sorularınız, önerileriniz veya işbirliği teklifleriniz için bizimle iletişime geçin.
                </p>
            </div>

<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
                <div class="text-center">
                    <div class="bg-[#E67E50] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-envelope text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">E-posta</h3>
                    <p class="text-gray-600">info@techcreative.com</p>
                </div>

<div class="text-center">
                    <div class="bg-[#E67E50] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-phone text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Telefon</h3>
                    <p class="text-gray-600">+90 212 555 0123</p>
                </div>

<div class="text-center">
                    <div class="bg-[#E67E50] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i class="fas fa-map-marker-alt text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Adres</h3>
                    <p class="text-gray-600">İstanbul, Türkiye</p>
                </div>
            </div>

<form class="bg-white rounded-lg shadow-lg p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Ad Soyad</label>
                        <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">E-posta</label>
                        <input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent">
                    </div>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Konu</label>
                    <input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Mesaj</label>
                    <input rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E67E50] focus:border-transparent"/>
                </div>
                <button type="submit" class="w-full bg-[#E67E50] hover:bg-[#d46b3d] text-white py-3 rounded-lg font-medium transition-all">
                    Mesaj Gönder
                </button>
            </form>
        </div>
    </section>

<footer class="bg-[#2C2C2C] text-white py-12 px-4">
        <div class="container mx-auto">
            <div class="flex flex-col md:flex-row justify-between mb-8">
                <div class="mb-8 md:mb-0">
                    <a href="#" class="text-2xl font-bold gradient-text mb-4 inline-block">TechCreative</a>
                    <p class="text-gray-400 max-w-xs">
                        Teknoloji ve yaratıcılığın buluştuğu nokta.
                        En yeni teknoloji ürünleri ve bilgilendirici içerikler.
                    </p>
                </div>

<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div>
                        <h3 class="text-lg font-bold mb-4">Ürünler</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Telefonlar</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Akıllı Saatler</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Tabletler</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Ses Cihazları</a></li>
                        </ul>
                    </div>

<div>
                        <h3 class="text-lg font-bold mb-4">Blog</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Teknoloji</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">İncelemeler</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">İpuçları</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Trendler</a></li>
                        </ul>
                    </div>

<div>
                        <h3 class="text-lg font-bold mb-4">Şirket</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Hakkımızda</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">İletişim</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Kariyer</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Basın</a></li>
                        </ul>
                    </div>

<div>
                        <h3 class="text-lg font-bold mb-4">Destek</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Yardım Merkezi</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">İade & Değişim</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Kargo Takibi</a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition">Canlı Destek</a></li>
                        </ul>
                    </div>
                </div>
            </div>

<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-500 text-sm mb-4 md:mb-0">
                    © 2024 TechCreative. Tüm hakları saklıdır.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-instagram"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-linkedin-in"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-youtube"></i>
                    </a>
                    <a href="#" class="text-gray-500 hover:text-white transition">
                        <i class="fab fa-facebook"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

menuToggle.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
            hamburger.classList.toggle('active');
        });

// Close mobile menu when clicking on a link
        const navLinks = document.querySelectorAll('#mobile-menu a');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.add('hidden');
                hamburger.classList.remove('active');
            });
        });

// Set active navigation
        function setActiveNav(element) {
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
            });
            element.classList.add('active');
        }

// Smooth scroll to section
        function scrollToSection(sectionId) {
            const section = document.getElementById(sectionId);
            if (section) {
                section.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });

// Update floating nav
                document.querySelectorAll('.floating-nav button').forEach(btn => {
                    btn.classList.remove('active');
                });
                document.getElementById(`nav-${sectionId}`).classList.add('active');
            }
        }

// Product filtering
        function filterProducts(category) {
            const products = document.querySelectorAll('.product-card');
            const filters = document.querySelectorAll('.product-filter');

// Update filter buttons
            filters.forEach(filter => {
                filter.classList.remove('active', 'bg-[#E67E50]', 'text-white');
                filter.classList.add('bg-white', 'text-gray-700');
            });

event.target.classList.remove('bg-white', 'text-gray-700');
            event.target.classList.add('active', 'bg-[#E67E50]', 'text-white');

// Filter products
            products.forEach(product => {
                if (category === 'all' || product.dataset.category === category) {
                    product.style.display = 'block';
                    setTimeout(() => {
                        product.style.opacity = '1';
                        product.style.transform = 'scale(1)';
                    }, 100);
                } else {
                    product.style.opacity = '0';
                    product.style.transform = 'scale(0.8)';
                    setTimeout(() => {
                        product.style.display = 'none';
                    }, 300);
                }
            });
        }

// Scroll spy for floating navigation
        window.addEventListener('scroll', () => {
            const sections = ['hero', 'products', 'blog', 'about', 'contact'];
            const scrollPos = window.scrollY + 100;

sections.forEach(sectionId => {
                const section = document.getElementById(sectionId);
                if (section && scrollPos >= section.offsetTop && scrollPos < section.offsetTop + section.offsetHeight) {
                    document.querySelectorAll('.floating-nav button').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    document.getElementById(`nav-${sectionId}`).classList.add('active');
                }
            });
        });

// Newsletter form submission
        document.querySelector('form').addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Abone oldunuz! Teşekkür ederiz.');
        });

// Contact form submission
        document.querySelector('#contact form').addEventListener('submit', (e) => {
            e.preventDefault();
            alert('Mesajınız gönderildi! En kısa sürede size dönüş yapacağız.');
        });

// Initialize
        document.addEventListener('DOMContentLoaded', () => {
            // Animate elements on scroll
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            });

document.querySelectorAll('.product-card, .blog-card').forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(30px)';
                card.style.transition = 'all 0.6s ease';
                observer.observe(card);
            });
        });
    </script>
</body>
</html>

Tech-Blog: Technologie, Produkte und kreative Ideen

Empfohlen

Preisinteraktion (HTML, CSS und JS)

Dunkle und helle Schaltfläche

Ein Code von alejandrokundrah

HTML

CSS

JS

Empfohlen

Preisinteraktion (HTML, CSS und JS)

Dunkle und helle Schaltfläche

Ein Code von alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS