Blog tecnico: modello HTML per tecnologia e software

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

8 February 2025

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechBlog | Teknoloji ve Yazılım Blogu</title>
    
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
    
    a
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

/* Temel stiller */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

html {
            scroll-behavior: smooth;
        }

body {
            font-family: var(--font-primary);
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

.container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

section {
            padding: 100px 0;
        }

h1, h2, h3, h4 {
            font-weight: 600;
            color: var(--text-color);
        }

.section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 3rem;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--accent-green), var(--accent-red));
            border-radius: 2px;
            margin: 1rem auto;
        }

/* Preloader */
        #preloader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s, visibility 0.5s;
        }
        
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid var(--border-color);
            border-top-color: var(--accent-green);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

@keyframes spin {
            to { transform: rotate(360deg); }
        }

/* Header */
        .header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            padding: 20px 0;
            transition: all 0.4s ease;
        }

.header.scrolled {
            background-color: rgba(10, 15, 10, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 20px rgba(76, 175, 80, 0.1);
        }

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

.logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--text-color);
            text-decoration: none;
            display: flex;
            align-items: center;
        }
        
        .logo i { 
            color: var(--accent-green);
            margin-right: 10px;
        }

.nav-menu {
            display: flex;
            list-style: none;
            gap: 40px;
        }

.nav-link {
            text-decoration: none;
            color: var(--text-secondary);
            font-weight: 500;
            transition: color 0.3s;
            position: relative;
            padding-bottom: 5px;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--accent-green), var(--accent-red));
            transition: width 0.3s;
        }

.nav-link:hover, .nav-link.active {
            color: var(--text-color);
        }
        
        .nav-link:hover::after, .nav-link.active::after {
            width: 100%;
        }

.menu-toggle {
            display: none;
            font-size: 1.5rem;
            background: none;
            border: none;
            color: var(--text-color);
            cursor: pointer;
        }

/* Hero Section */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
        }

.hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3rem;
        }

.hero-text {
            flex: 1;
        }

.hero-text h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }
        
        .hero-text h1 .highlight-green {
            color: var(--accent-green);
        }
        
        .hero-text h1 .highlight-red {
            color: var(--accent-red);
        }

.hero-text .subtitle {
            font-size: 1.25rem;
            font-family: var(--font-code);
            margin-bottom: 2rem;
            color: var(--text-secondary);
        }

.btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(45deg, var(--accent-green), var(--accent-red));
            color: white;
            text-decoration: none;
            font-weight: 600;
            border-radius: 5px;
            transition: all 0.3s;
            border: none;
        }

.btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--card-shadow);
        }

.hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .hero-image img {
            max-width: 100%;
            border-radius: 12px;
            border: 3px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }

/* Featured Posts */
        .featured-posts {
            background-color: var(--primary-color);
            padding: 80px 0;
        }

.featured-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 2rem;
        }

.main-post {
            background-color: var(--card-color);
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s;
        }

.main-post:hover {
            transform: translateY(-10px);
        }

.main-post img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }

.main-post-content {
            padding: 2rem;
        }

.post-category {
            display: inline-block;
            background: linear-gradient(45deg, var(--accent-green), var(--accent-red));
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 0.8rem;
            margin-bottom: 1rem;
        }

.main-post h3 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }

.post-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-bottom: 1rem;
        }

.sidebar-posts {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

.sidebar-post {
            background-color: var(--card-color);
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            transition: transform 0.3s;
        }

.sidebar-post:hover {
            transform: translateX(10px);
        }

.sidebar-post h4 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }

/* Blog Grid */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

.blog-card {
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }

.blog-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-shadow);
        }

.blog-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: transform 0.4s;
        }
        
        .blog-card:hover .blog-img {
            transform: scale(1.05);
        }

.blog-content {
            padding: 1.5rem;
        }

.blog-content .category {
            font-family: var(--font-code);
            font-size: 0.8rem;
            color: var(--accent-green);
            margin-bottom: 0.5rem;
        }

.blog-content h3 {
            font-size: 1.3rem;
            margin-bottom: 0.5rem;
        }

.blog-excerpt {
            color: var(--text-secondary);
            margin-bottom: 1rem;
            line-height: 1.6;
        }

.read-more {
            color: var(--accent-red);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

.read-more:hover {
            color: var(--accent-green);
        }

/* Newsletter */
        .newsletter {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            padding: 80px 0;
            text-align: center;
        }

.newsletter h2 {
            margin-bottom: 1rem;
        }

.newsletter p {
            color: var(--text-secondary);
            margin-bottom: 2rem;
            font-size: 1.1rem;
        }

.newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 0 auto;
            gap: 1rem;
        }

.newsletter-input {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 5px;
            background-color: var(--card-color);
            color: var(--text-color);
            font-family: var(--font-primary);
        }

.newsletter-input:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--accent-green);
        }

/* About Section */
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
            align-items: center;
        }

.about-img {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: var(--card-shadow);
        }
        
        .about-img img {
            width: 100%;
            height: auto;
            transition: transform 0.5s;
        }
        
        .about-img:hover img {
            transform: scale(1.05);
        }

.about-text h3 {
            font-size: 1.8rem;
            margin-bottom: 1.5rem;
            color: var(--accent-green);
        }

/* Contact Section */
        .contact-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3rem;
        }

.contact-info {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.contact-item {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

.contact-icon {
            font-size: 1.5rem;
            color: var(--accent-green);
        }

.contact-form {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

.form-input {
            padding: 12px 15px;
            background-color: var(--card-color);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            color: var(--text-color);
            font-family: var(--font-primary);
        }

.form-input:focus {
            outline: none;
            border-color: var(--accent-green);
        }

textarea.form-input {
            min-height: 150px;
            resize: vertical;
        }

/* Footer */
        .footer {
            background-color: var(--primary-color);
            border-top: 1px solid var(--border-color);
            padding: 50px 0 30px;
            text-align: center;
        }

.social-links {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

.social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--card-color);
            color: var(--text-color);
            border-radius: 50%;
            transition: all 0.3s;
        }

.social-link:hover {
            background: linear-gradient(45deg, var(--accent-green), var(--accent-red));
            color: white;
            transform: translateY(-3px);
        }

.copyright {
            color: var(--text-secondary);
            font-size: 0.9rem;
        }

/* Animasyonlar */
        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 0.8s, transform 0.8s;
        }

.reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

/* Responsive Tasarım */
        @media (max-width: 992px) {
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .featured-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: var(--primary-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s ease-in-out;
                gap: 2rem;
            }
            
            .nav-menu.active {
                right: 0;
            }
            
            .blog-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>

<div id="preloader">
        <div class="loader"></div>
    </div>

<header class="header" id="header">
        <div class="container navbar">
            <a href="#" class="logo"><i class="fas fa-blog"></i>TechBlog</a>
            <nav>
                <ul class="nav-menu" id="nav-menu">
                    <li class="nav-item"><a href="#home" class="nav-link active">Ana Sayfa</a></li>
                    <li class="nav-item"><a href="#featured" class="nav-link">Öne Çıkanlar</a></li>
                    <li class="nav-item"><a href="#blog" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a href="#about" class="nav-link">Hakkımızda</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">İletişim</a></li>
                </ul>
            </nav>
            <button class="menu-toggle" id="menu-toggle"><i class="fas fa-bars"></i></button>
        </div>
    </header>

<main>
        
        <section id="home">
            <div class="container hero-content">
                <div class="hero-text reveal">
                    <h1>Teknoloji ve <span class="highlight-green">Yazılım</span> Dünyasına <span class="highlight-red">Hoş Geldiniz</span></h1>
                    <p class="subtitle">// En güncel teknoloji haberleri ve yazılım ipuçları</p>
                    <p>Modern web teknolojileri, yapay zeka, mobil uygulama geliştirme ve daha fazlası hakkında kapsamlı içerikler sunuyoruz. Teknoloji tutkunları için hazırlanmış kaliteli blog yazıları.</p>
                    <div style="margin-top: 2rem;">
                        <a href="#blog" class="btn">Blog Yazılarını Oku</a>
                        <a href="#newsletter" class="btn" style="margin-left: 1rem; background: transparent; color: var(--text-color); border: 2px solid var(--accent-green);">Bültenimize Katıl</a>
                    </div>
                </div>
                <div class="hero-image reveal">
                    <img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Teknoloji Blog">
                </div>
            </div>
        </section>

<section id="featured" class="featured-posts">
            <div class="container">
                <h2 class="section-title">Öne Çıkan Yazılar</h2>
                <div class="featured-grid">
                    <article class="main-post reveal">
                        <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ana Yazı">
                        <div class="main-post-content">
                            <span class="post-category">Yapay Zeka</span>
                            <h3>2025'te Yapay Zeka Teknolojilerindeki Son Gelişmeler</h3>
                            <p>Yapay zeka alanındaki en son yenilikler, ChatGPT'nin yeni özellikleri ve gelecekte bizi bekleyen teknolojik dönüşümler hakkında detaylı bir analiz.</p>
                            <div class="post-meta">
                                <span><i class="fas fa-calendar"></i> 15 Mart 2025</span>
                                <span><i class="fas fa-user"></i> Ahmet Yılmaz</span>
                                <span><i class="fas fa-clock"></i> 8 dk okuma</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <div class="sidebar-posts">
                        <article class="sidebar-post reveal">
                            <h4>React 19'un Yeni Özellikleri</h4>
                            <p>React'in en son sürümünde gelen yenilikler ve performans iyileştirmeleri...</p>
                            <span style="color: var(--accent-green); font-size: 0.9rem;">Web Geliştirme</span>
                        </article>
                        <article class="sidebar-post reveal">
                            <h4>Mobil Uygulama Tasarım Trendleri</h4>
                            <p>2025'te öne çıkan mobil uygulama tasarım yaklaşımları...</p>
                            <span style="color: var(--accent-red); font-size: 0.9rem;">UI/UX Tasarım</span>
                        </article>
                        <article class="sidebar-post reveal">
                            <h4>Blockchain ve Kripto Para</h4>
                            <p>Blockchain teknolojisinin geleceği ve kripto para piyasalarındaki son gelişmeler...</p>
                            <span style="color: var(--accent-green); font-size: 0.9rem;">Blockchain</span>
                        </article>
                    </div>
                </div>
            </div>
        </section>

<section id="blog">
            <div class="container">
                <h2 class="section-title">Son Blog Yazıları</h2>
                <div class="blog-grid">
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 1" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Web Geliştirme</p>
                            <h3>Modern CSS Teknikleri ile Gelişmiş Animasyonlar</h3>
                            <p class="blog-excerpt">CSS Grid, Flexbox ve modern CSS özelliklerini kullanarak etkileyici web animasyonları nasıl oluşturulur?</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 14 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 6 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 2" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Yapay Zeka</p>
                            <h3>Machine Learning ile Veri Analizi</h3>
                            <p class="blog-excerpt">Python ve TensorFlow kullanarak büyük veri setlerini analiz etme ve anlamlı sonuçlar çıkarma yöntemleri.</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 13 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 10 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 3" class="blog-img">
                        <div class="blog-content">
                            <p class="category">DevOps</p>
                            <h3>Docker ve Kubernetes ile Mikroservis Mimarisi</h3>
                            <p class="blog-excerpt">Modern yazılım geliştirme süreçlerinde container teknolojilerinin rolü ve en iyi uygulamalar.</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 12 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 12 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1551650975-87deedd944c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 4" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Mobil Geliştirme</p>
                            <h3>Flutter ile Cross-Platform Uygulama Geliştirme</h3>
                            <p class="blog-excerpt">Flutter framework'ü kullanarak hem iOS hem de Android için tek kod tabanıyla uygulama geliştirme.</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 11 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 8 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 5" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Güvenlik</p>
                            <h3>Web Uygulamalarında Güvenlik En İyi Uygulamaları</h3>
                            <p class="blog-excerpt">Web uygulamalarınızı güvende tutmak için uygulamanız gereken güvenlik önlemleri ve test yöntemleri.</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 10 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 9 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Blog 6" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Veritabanı</p>
                            <h3>NoSQL Veritabanları: MongoDB vs Redis</h3>
                            <p class="blog-excerpt">Farklı NoSQL veritabanı türlerinin karşılaştırması ve hangi projelerde hangisinin kullanılması gerektiği.</p>
                            <div class="post-meta" style="margin-bottom: 1rem;">
                                <span><i class="fas fa-calendar"></i> 9 Mart 2025</span>
                                <span><i class="fas fa-clock"></i> 7 dk</span>
                            </div>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

<section id="newsletter" class="newsletter">
            <div class="container">
                <h2>Teknoloji Bültenimize Katılın</h2>
                <p>En güncel teknoloji haberleri ve blog yazılarımızdan haberdar olun</p>
                <form class="newsletter-form">
                    <input type="email" class="newsletter-input" placeholder="E-posta adresinizi girin">
                    <button type="submit" class="btn">Abone Ol</button>
                </form>
            </div>
        </section>

<section id="about">
            <div class="container">
                <h2 class="section-title">Hakkımızda</h2>
                <div class="about-content">
                    <div class="about-img reveal">
                        <img src="https://images.unsplash.com/photo-1557862921-37829c790f19?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hakkımızda">
                    </div>
                    <div class="about-text reveal">
                        <h3>Teknoloji ve Yazılım Dünyasının Öncü Blogu</h3>
                        <p>TechBlog olarak, teknoloji tutkunları ve yazılım geliştiriciler için kaliteli, güncel ve bilgilendirici içerikler üretiyoruz. Amacımız, karmaşık teknolojik konuları anlaşılır bir dille aktarmak ve okuyucularımızın teknoloji dünyasında güncel kalmasını sağlamak.</p>
                        <p style="margin-top: 1rem;">Deneyimli yazılım geliştiricileri, teknoloji uzmanları ve tasarımcılardan oluşan ekibimizle, web geliştirme, mobil uygulamalar, yapay zeka, blockchain ve daha birçok alanda kapsamlı içerikler sunuyoruz.</p>
                        <div style="margin-top: 2rem;">
                            <a href="#contact" class="btn">İletişime Geç</a>
                            <a href="#" class="btn" style="margin-left: 1rem; background: transparent; color: var(--text-color); border: 2px solid var(--accent-red);">Yazar Ol</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="contact" style="background-color: var(--primary-color);">
            <div class="container">
                <h2 class="section-title">İletişim</h2>
                <div class="contact-container">
                    <div class="contact-info reveal">
                        <h3 style="margin-bottom: 1.5rem;">Bizimle İletişime Geçin</h3>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Konum</h4>
                                <p>İstanbul, Türkiye</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div>
                                <h4>Email</h4>
                                <p>info@techblog.com</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-phone"></i>
                            </div>
                            <div>
                                <h4>Telefon</h4>
                                <p>+90 555 123 45 67</p>
                            </div>
                        </div>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div>
                                <h4>Çalışma Saatleri</h4>
                                <p>Pazartesi - Cuma: 09:00 - 18:00</p>
                            </div>
                        </div>
                    </div>
                    <form class="contact-form reveal">
                        <div class="form-group">
                            <label for="name">İsim</label>
                            <input type="text" id="name" class="form-input" placeholder="İsminiz">
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-input" placeholder="Email adresiniz">
                        </div>
                        <div class="form-group">
                            <label for="subject">Konu</label>
                            <input type="text" id="subject" class="form-input" placeholder="Konu">
                        </div>
                        <div class="form-group">
                            <label for="message">Mesaj</label>
                            <input id="message" class="form-input" placeholder="Mesajınız..."/>
                        </div>
                        <button type="submit" class="btn">Gönder</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="social-links">
                <a href="#" class="social-link" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" class="social-link" aria-label="GitHub"><i class="fab fa-github"></i></a>
                <a href="#" class="social-link" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" class="social-link" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                <a href="#" class="social-link" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
            </div>
            <p class="copyright">© 2025 TechBlog. Tüm Hakları Saklıdır. Teknoloji ve yazılım dünyasının güvenilir kaynağı.</p>
        </div>
    </footer>

// Preloader
            const preloader = document.getElementById('preloader');
            window.addEventListener('load', () => {
                preloader.style.opacity = '0';
                preloader.style.visibility = 'hidden';
            });

// Header Scroll Efekti
            const header = document.getElementById('header');
            window.addEventListener('scroll', () => {
                if (window.scrollY > 50) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });

// Mobil Menü
            const menuToggle = document.getElementById('menu-toggle');
            const navMenu = document.getElementById('nav-menu');
            const navLinks = document.querySelectorAll('.nav-link');

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

navLinks.forEach(link => {
                link.addEventListener('click', () => {
                    if (navMenu.classList.contains('active')) {
                        navMenu.classList.remove('active');
                    }
                });
            });

// Scroll Animasyonları
            const revealElements = document.querySelectorAll('.reveal');
            const revealObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                    }
                });
            }, {
                threshold: 0.1
            });

revealElements.forEach(el => {
                revealObserver.observe(el);
            });

// Aktif Navigasyon Linki Vurgulama
            const sections = document.querySelectorAll('section[id]');
            const navHighlighter = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const id = entry.target.getAttribute('id');
                        document.querySelector('.nav-link.active').classList.remove('active');
                        document.querySelector(`.nav-link[href="#${id}"]`).classList.add('active');
                    }
                });
            }, {
                rootMargin: '-50% 0px -50% 0px'
            });

sections.forEach(section => {
                navHighlighter.observe(section);
            });

// Newsletter Form Submit
            const newsletterForm = document.querySelector('.newsletter-form');
            newsletterForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const email = newsletterForm.querySelector('input[type="email"]').value;
                if (email) {
                    alert('Bültenimize başarıyla abone oldunuz!');
                    newsletterForm.reset();
                }
            });

// Contact Form Submit
            const contactForm = document.querySelector('.contact-form');
            contactForm.addEventListener('submit', (e) => {
                e.preventDefault();
                alert('Mesajınız başarıyla gönderildi! En kısa sürede size dönüş yapacağız.');
                contactForm.reset();
            });

});
    </script>

</body>
</html>

Blog tecnico: modello HTML per tecnologia e software

Consigliato

Gioco del serpente

Slider al Passaggio del Mouse

sito web moderno

HTML

CSS

JS

Consigliato

Gioco del serpente

Slider al Passaggio del Mouse

sito web moderno

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS