Blog d'ingénierie : IA, cloud, cybersécurité et plus encore

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

5 September 2025

Conteneur d'animation d'objet d'image HTML

30 August 2024

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kod Vizyonu | İleri Seviye Mühendislik 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;600;700&family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

/* 1. Genel Ayarlar ve Değişkenler */
        :root {
            --bg-color: #0d1117;
            --primary-color: #161b22;
            --secondary-color: #010409;
            --border-color: #30363d;
            --text-color: #c9d1d9;
            --text-secondary-color: #8b949e;
            --accent-color: #58a6ff;
            --accent-hover-color: #79c0ff;
            --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            --font-primary: 'Poppins', sans-serif;
            --font-code: 'Source Code Pro', monospace;
        }

/* 2. Sıfırlama ve 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.7;
            overflow-x: hidden;
        }

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

section {
            padding: 100px 0;
            overflow: hidden;
        }

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

h2.section-title {
            font-size: 2.5rem;
            text-align: center;
            margin-bottom: 1rem;
            position: relative;
        }
        
        h2.section-title::after {
            content: '';
            display: block;
            width: 80px;
            height: 4px;
            background: var(--accent-color);
            border-radius: 2px;
            margin: 1rem auto;
        }

/* 3. 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-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

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

/* 4. Header ve Navigasyon */
        .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(13, 17, 23, 0.85);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }

.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;
        }
        .logo i { color: var(--accent-color); }

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

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

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent-color);
            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;
        }

/* 5. Ana Sayfa (Hero) Bölümü */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
        }

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

.hero-text {
            flex: 1;
        }

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

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

.btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: var(--accent-color);
            color: var(--bg-color);
            text-decoration: none;
            font-weight: 700;
            border-radius: 5px;
            transition: all 0.3s;
            border: 2px solid var(--accent-color);
        }

.btn:hover {
            background-color: transparent;
            color: var(--accent-color);
            transform: translateY(-3px);
        }

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

/* 6. Kart ve Grid Stilleri */
        .card {
            background-color: var(--primary-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 2rem;
            transition: transform 0.3s, box-shadow 0.3s;
            overflow: hidden;
        }

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

.grid {
            display: grid;
            gap: 2rem;
        }

.grid-cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

/* 7. Hizmetler Bölümü */
        .service-card {
            text-align: center;
        }
        .service-card .icon {
            font-size: 3rem;
            color: var(--accent-color);
            margin-bottom: 1.5rem;
        }
        .service-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

/* 8. Blog ve Galeri Bölümü */
        .post-card, .video-card {
            background-color: var(--primary-color);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            overflow: hidden;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .post-card:hover, .video-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--card-shadow);
        }

.card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.4s;
        }
        .post-card:hover .card-image, .video-card:hover .card-image {
            transform: scale(1.05);
        }
        
        .card-content {
            padding: 1.5rem;
        }
        .card-content .category {
            font-family: var(--font-code);
            font-size: 0.8rem;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
        }
        .card-content h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
        }
        .card-content .read-more {
            color: var(--text-secondary-color);
            text-decoration: none;
            font-weight: 600;
        }
        .card-content .read-more:hover {
            color: var(--accent-color);
        }

.video-card .card-image-wrapper {
            position: relative;
        }
        .video-card .play-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4rem;
            color: rgba(255, 255, 255, 0.8);
            transition: transform 0.3s, color 0.3s;
        }
        .video-card:hover .play-icon {
            transform: translate(-50%, -50%) scale(1.2);
            color: #fff;
        }

/* 9. Footer */
        .footer {
            background-color: var(--primary-color);
            border-top: 1px solid var(--border-color);
            padding: 50px 0;
            text-align: center;
        }
        .social-links {
            margin-bottom: 1.5rem;
        }
        .social-links a {
            color: var(--text-secondary-color);
            font-size: 1.5rem;
            margin: 0 15px;
            transition: color 0.3s;
        }
        .social-links a:hover {
            color: var(--accent-color);
        }
        .copyright {
            color: var(--text-secondary-color);
            font-size: 0.9rem;
        }

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

.reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 11. Responsive Tasarım */
        @media (max-width: 992px) {
            .grid-cols-3 {
                grid-template-columns: repeat(2, 1fr);
            }
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            .hero-image {
                margin-top: 3rem;
            }
            .hero-text h1 {
                font-size: 2.8rem;
            }
        }

@media (max-width: 768px) {
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100vh;
                background-color: var(--primary-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s ease-in-out;
            }
            .nav-menu.active {
                right: 0;
            }
            .nav-item {
                margin: 1.5rem 0;
            }
            .nav-link {
                font-size: 1.5rem;
            }
            .grid-cols-3, .grid-cols-2 {
                grid-template-columns: 1fr;
            }
            .hero-text h1 {
                font-size: 2.5rem;
            }
        }

/* CSS Kodları Bitişi */
    </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-code"></i> KodVizyonu</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="#about" class="nav-link">Hakkında</a></li>
                    <li class="nav-item"><a href="#services" class="nav-link">Hizmetler</a></li>
                    <li class="nav-item"><a href="#blog" class="nav-link">Blog</a></li>
                    <li class="nav-item"><a href="#gallery" class="nav-link">Video Galeri</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>Geleceğin <span class="highlight">Mimarları</span> İçin</h1>
                    <p class="subtitle">// Bilgisayar mühendisliğinin sınırlarını zorlayan içerikler...</p>
                    <p>Yapay zeka, bulut bilişim, siber güvenlik ve ötesindeki en son gelişmeleri, derinlemesine analizler ve uzman görüşleriyle keşfedin. Bilginin gücüyle geleceği şekillendirin.</p>
                    <a href="#blog" class="btn" style="margin-top: 2rem;">Keşfe Başla</a>
                </div>
                <div class="hero-image reveal">
                    <img src="pexels-thisisengineering-3861958.jpg" alt="Kod yazan bir mühendis">
                </div>
            </div>
        </section>

<section id="about" class="container reveal">
            <h2 class="section-title">Hakkımızda</h2>
            <p style="text-align:center; max-width: 800px; margin: 2rem auto; color: var(--text-secondary-color);">
                KodVizyonu, teknolojiye tutkuyla bağlı bir grup mühendis tarafından, karmaşık konuları anlaşılır ve ilham verici bir dille sunmak amacıyla kurulmuş bir platformdur. Amacımız, teorik bilgiyi pratik uygulamalarla birleştirerek, her seviyeden teknoloji meraklısına yol göstermek ve kariyerlerinde bir sonraki adımı atmalarına yardımcı olmaktır.
            </p>
        </section>

<section id="services" style="background-color: var(--primary-color);">
            <div class="container reveal">
                <h2 class="section-title">Platform & Hizmetler</h2>
                <div class="grid grid-cols-3" style="margin-top: 4rem;">
                    <div class="service-card">
                        <div class="icon"><i class="fas fa-brain"></i></div>
                        <h3>Yapay Zeka Araştırmaları</h3>
                        <p>Makine öğrenmesi ve derin öğrenme alanındaki en son akademik çalışmaları ve endüstriyel uygulamaları inceliyoruz.</p>
                    </div>
                    <div class="service-card">
                        <div class="icon"><i class="fas fa-shield-alt"></i></div>
                        <h3>Siber Güvenlik Stratejileri</h3>
                        <p>Modern tehditlere karşı proaktif savunma mekanizmaları ve en iyi güvenlik uygulamaları üzerine rehberler sunuyoruz.</p>
                    </div>
                    <div class="service-card">
                        <div class="icon"><i class="fas fa-cubes"></i></div>
                        <h3>Merkeziyetsiz Sistemler</h3>
                        <p>Blockchain, Web3 ve dağıtık sistemlerin geleceğini, potansiyellerini ve teknik altyapılarını ele alıyoruz.</p>
                    </div>
                </div>
            </div>
        </section>

<section id="blog">
            <div class="container reveal">
                <h2 class="section-title">Son Yazılar</h2>
                <div class="grid grid-cols-3" style="margin-top: 4rem;">
                    <article class="post-card">
                        <img src="https://placehold.co/600x400/161b22/79c0ff?text=Quantum" alt="Kuantum Bilgisayar" class="card-image">
                        <div class="card-content">
                            <p class="category">Kuantum Bilişim</p>
                            <h3>Kuantum Üstünlüğü: Bir Sonraki Teknoloji Devrimi</h3>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://placehold.co/600x400/161b22/79c0ff?text=DevOps" alt="DevOps Döngüsü" class="card-image">
                        <div class="card-content">
                            <p class="category">DevOps & Otomasyon</p>
                            <h3>GitOps: Altyapı Yönetiminde Yeni Bir Paradigma</h3>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="post-card">
                        <img src="https://placehold.co/600x400/161b22/79c0ff?text=AI+Ethics" alt="Yapay Zeka Etiği" class="card-image">
                        <div class="card-content">
                            <p class="category">Yapay Zeka Etiği</p>
                            <h3>Açıklanabilir YZ (XAI): Kara Kutuyu Anlamak</h3>
                            <a href="#" class="read-more">Devamını Oku →</a>
                        </div>
                    </article>
                </div>
            </div>
        </section>

<section id="gallery" style="background-color: var(--primary-color);">
            <div class="container reveal">
                <h2 class="section-title">Video Galeri</h2>
                <div class="grid grid-cols-3" style="margin-top: 4rem;">
                    <a href="#" class="video-card">
                        <div class="card-image-wrapper">
                            <img src="https://placehold.co/600x400/0d1117/ffffff?text=System+Design" alt="Sistem Tasarımı Videosu" class="card-image">
                            <i class="fas fa-play-circle play-icon"></i>
                        </div>
                        <div class="card-content">
                            <h3>Sistem Tasarımı Mülakatlarına Hazırlık</h3>
                        </div>
                    </a>
                    <a href="#" class="video-card">
                        <div class="card-image-wrapper">
                            <img src="https://placehold.co/600x400/0d1117/ffffff?text=Rust+Lang" alt="Rust Programlama Dili Videosu" class="card-image">
                            <i class="fas fa-play-circle play-icon"></i>
                        </div>
                        <div class="card-content">
                            <h3>Neden Rust Öğrenmelisiniz?</h3>
                        </div>
                    </a>
                    <a href="#" class="video-card">
                        <div class="card-image-wrapper">
                            <img src="https://placehold.co/600x400/0d1117/ffffff?text=Microservices" alt="Mikroservisler Videosu" class="card-image">
                            <i class="fas fa-play-circle play-icon"></i>
                        </div>
                        <div class="card-content">
                            <h3>Mikroservis Mimarisi: Artıları ve Eksileri</h3>
                        </div>
                    </a>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="social-links">
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
                <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
                <a href="#" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
            </div>
            <p class="copyright">© 2025 KodVizyonu. Tüm Hakları Saklıdır. Geleceği birlikte inşa ediyoruz.</p>
        </div>
    </footer>

document.addEventListener('DOMContentLoaded', () => {

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

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

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

// 4. Scroll Animasyonları
            const revealElements = document.querySelectorAll('.reveal');
            const revealObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');
                        // Animasyon bir kere tetiklendikten sonra observer'ı kaldırabiliriz
                        // revealObserver.unobserve(entry.target);
                    }
                });
            }, {
                threshold: 0.1
            });

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

// 5. 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);
            });

});

// JavaScript Kodları Bitişi
    </script>

</body>
</html>

Blog d'ingénierie : IA, cloud, cybersécurité et plus encore

Recommandé

Conteneur d'animation d'objet d'image HTML

Effet de parallaxe du curseur

fleur violette

HTML

CSS

JS

Recommandé

Conteneur d'animation d'objet d'image HTML

Effet de parallaxe du curseur

fleur violette

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS