Atelier technologique : IA, cybersécurité, blog Web3

1,319 Metehan

Ouvrir dans l'éditeur Publiez votre code

Atelier technologique : IA, cybersécurité, blog Web3

Recommandé

22 June 2025

Modèle de blog Tailwind CSS : mode sombre, réactif

26 June 2025

Blog technologique : technologie, produits et idées créatives

28 October 2025

Exemple de curseur de blog Swiper

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Teknoloji Atölyesi | İnsan ve Doğadan İlhamla</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=Inter:wght@400;500;700&family=Merriweather:wght@400;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

/* 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.8;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

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

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

h1, h2, h3 {
            font-family: var(--font-headings);
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.3;
        }

h2.section-title {
            font-size: 2.8rem;
            text-align: center;
            margin-bottom: 1rem;
            position: relative;
        }

h2.section-title::after {
            content: '';
            display: block;
            width: 70px;
            height: 3px;
            background: var(--accent-color);
            border-radius: 2px;
            margin: 1.5rem auto;
        }

p {
            margin-bottom: 1rem;
            color: var(--text-secondary-color);
        }

/* 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: 40px;
            height: 40px;
            border: 4px 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: 25px 0;
            transition: all 0.4s ease;
        }

.header.scrolled {
            background-color: rgba(248, 247, 242, 0.85);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

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

.logo {
            font-size: 1.5rem;
            font-weight: 700;
            font-family: var(--font-primary);
            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: 500;
            transition: color 0.3s;
            position: relative;
            padding-bottom: 5px;
        }

.nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            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: 30%;
        }

.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: 4rem;
        }

.hero-text {
            flex: 1.2;
        }

.hero-text h1 {
            font-size: 3.8rem;
            margin-bottom: 1.5rem;
        }
        .hero-text h1 .highlight {
            color: var(--accent-color);
            font-style: italic;
        }

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

.btn {
            display: inline-block;
            padding: 14px 35px;
            background-color: var(--accent-color);
            color: #fff;
            text-decoration: none;
            font-weight: 700;
            border-radius: 50px;
            transition: all 0.3s;
            border: 2px solid var(--accent-color);
            box-shadow: 0 4px 10px rgba(129, 178, 154, 0.3);
        }

.btn:hover {
            background-color: var(--accent-hover-color);
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(129, 178, 154, 0.4);
        }

.hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-image img {
            max-width: 450px;
            width: 100%;
            border-radius: 12px;
        }

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

.card:hover {
            transform: translateY(-8px);
            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: 2.5rem;
            color: var(--accent-color);
            margin-bottom: 1.5rem;
            background-color: #eaf3ef;
            width: 70px;
            height: 70px;
            line-height: 70px;
            border-radius: 50%;
            display: inline-block;
        }
        .service-card h3 {
            font-size: 1.4rem;
            margin-bottom: 0.5rem;
        }

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

.card-image {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }
        
        .card-content {
            padding: 1.5rem;
        }
        .card-content .category {
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--accent-color);
            margin-bottom: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .card-content h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-color);
        }
        .card-content .read-more {
            color: var(--text-secondary-color);
            text-decoration: none;
            font-weight: 700;
            font-size: 0.9rem;
        }
        .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: 3.5rem;
            color: rgba(255, 255, 255, 0.9);
            background-color: rgba(0,0,0,0.2);
            border-radius: 50%;
            width: 70px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: transform 0.3s, background-color 0.3s;
        }
        .video-card:hover .play-icon {
            transform: translate(-50%, -50%) scale(1.1);
            background-color: rgba(129, 178, 154, 0.8);
        }

/* 9. Footer */
        .footer {
            background-color: var(--secondary-bg-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.2rem;
            margin: 0 15px;
            transition: color 0.3s, transform 0.3s;
            display: inline-block;
        }
        .social-links a:hover {
            color: var(--accent-color);
            transform: translateY(-3px);
        }
        .copyright {
            color: var(--text-secondary-color);
            font-size: 0.9rem;
        }

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

.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-reverse;
                text-align: center;
            }
            .hero-image {
                margin-bottom: 3rem;
            }
            .hero-text h1 {
                font-size: 3rem;
            }
        }

@media (max-width: 768px) {
            h2.section-title { font-size: 2.2rem; }
            .menu-toggle {
                display: block;
                z-index: 1001;
            }
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 100%;
                height: 100vh;
                background-color: var(--bg-color);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s cubic-bezier(0.77, 0, 0.175, 1);
            }
            .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;
            }
        }
    </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-leaf"></i> Teknoloji Atölyesi</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">Alanlar</a></li>
                    <li class="nav-item"><a href="#blog" class="nav-link">Yazılar</a></li>
                    <li class="nav-item"><a href="#gallery" class="nav-link">Videolar</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>Doğadan İlham Alan <span class="highlight">Teknoloji</span></h1>
                    <p class="subtitle">Yazılım, mühendislik ve tasarım üzerine samimi ve derinlikli bir bakış açısı...</p>
                    <p>Yapay zeka, bulut bilişim ve siber güvenlik gibi karmaşık konuları, anlaşılır bir dille ve gerçek hayattan örneklerle keşfedin. Bilginin en saf haliyle geleceği birlikte şekillendirelim.</p>
                    <a href="#blog" class="btn" style="margin-top: 2rem;">Okumaya Başla</a>
                </div>
                <div class="hero-image reveal">
                    <img src="https://images.pexels.com/photos/3184339/pexels-photo-3184339.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Birlikte çalışan bir ekip">
                </div>
            </div>
        </section>

<section id="about" class="container reveal">
            <h2 class="section-title">Biz Kimiz?</h2>
            <p style="text-align:center; max-width: 800px; margin: 2rem auto;">
                Teknoloji Atölyesi, teknolojiye tutkuyla bağlı bir grup mühendis ve tasarımcı 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(--secondary-bg-color);">
            <div class="container reveal">
                <h2 class="section-title">Odak Alanlarımız</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://images.pexels.com/photos/546819/pexels-photo-546819.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Kodlama" 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://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Planlama" 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://images.pexels.com/photos/3861964/pexels-photo-3861964.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Araştırma" 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(--secondary-bg-color);">
            <div class="container reveal">
                <h2 class="section-title">Video Atölyesi</h2>
                <div class="grid grid-cols-3" style="margin-top: 4rem;">
                    <a href="#" class="video-card">
                        <div class="card-image-wrapper">
                            <img src="https://images.pexels.com/photos/1181244/pexels-photo-1181244.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Sistem Tasarımı Videosu" class="card-image">
                            <i class="fas fa-play 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://images.pexels.com/photos/1181263/pexels-photo-1181263.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Rust Programlama Dili Videosu" class="card-image">
                            <i class="fas fa-play 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://images.pexels.com/photos/577585/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Mikroservisler Videosu" class="card-image">
                            <i class="fas fa-play 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 Teknoloji Atölyesi. Tüm Hakları Saklıdır. Geleceği birlikte inşa ediyoruz.</p>
        </div>
    </footer>

// 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');
                    }
                });
            }, {
                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');
                        const activeLink = document.querySelector('.nav-link.active');
                        if (activeLink) {
                            activeLink.classList.remove('active');
                        }
                        const newActiveLink = document.querySelector(`.nav-link[href="#${id}"]`);
                        if(newActiveLink) {
                            newActiveLink.classList.add('active');
                        }
                    }
                });
            }, {
                rootMargin: '-50% 0px -50% 0px'
            });

sections.forEach(section => {
                navHighlighter.observe(section);
            });
        });
        // JavaScript Kodları Bitişi
    </script>

</body>
</html>

CSS