Solutions de réseaux informatiques | Cybersécurité - NetMasters

43 Metehan

Ouvrir dans l'éditeur Publiez votre code

Solutions de réseaux informatiques | Cybersécurité - NetMasters

Recommandé

17 August 2024

Modèle de barre de navigation Bootstrap

11 March 2024

Modèle de site Web de portfolio HTML CSS

22 August 2025

Conception de sites Web, marketing numérique et services vidéo

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NetMasters | IT Sistem ve Network Çözümleri</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">
    
    
    <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: var(--accent-color);
            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-color);
            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, 14, 23, 0.95);
            backdrop-filter: blur(10px);
            padding: 15px 0;
            box-shadow: 0 2px 10px rgba(0, 100, 255, 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-color);
            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-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;
        }

/* Hero Section */
        #home {
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            background: linear-gradient(rgba(10, 14, 23, 0.9), rgba(10, 14, 23, 0.9)), url('https://images.unsplash.com/photo-1563207153-f403bf289096?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80') no-repeat center center/cover;
        }

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

.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-color: var(--accent-color);
            color: white;
            text-decoration: none;
            font-weight: 600;
            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: 100%;
            border-radius: 12px;
            border: 3px solid var(--border-color);
            box-shadow: var(--card-shadow);
        }

/* 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-color);
        }

/* Featured Posts */
        .featured-posts {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 3rem;
        }

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

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

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

.post-content {
            padding: 1.5rem;
        }

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

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

/* Blog Grid Section */
        .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: 8px;
            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-color);
            margin-bottom: 0.5rem;
        }

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

.blog-meta {
            display: flex;
            align-items: center;
            margin-top: 1rem;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }

.blog-meta i {
            margin-right: 0.5rem;
            color: var(--accent-color);
        }

/* Newsletter Section */
        .newsletter {
            background-color: var(--primary-color);
            padding: 80px 0;
            text-align: center;
        }

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

.newsletter-input {
            flex: 1;
            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);
        }

/* 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-color);
        }

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

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

.form-input, .form-textarea {
            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, .form-textarea:focus {
            outline: none;
            border-color: var(--accent-color);
        }

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

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

.footer-content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 2rem;
        }

.footer-column h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
            color: var(--accent-color);
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 0.8rem;
        }

.footer-links a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s;
        }

.footer-links a:hover {
            color: var(--accent-color);
        }

.social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1.5rem;
        }

.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-color: var(--accent-color);
            color: white;
            transform: translateY(-3px);
        }

.copyright {
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 3rem;
            padding-top: 2rem;
            border-top: 1px solid var(--border-color);
        }

/* 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) {
            .featured-posts,
            .blog-grid,
            .footer-content {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .hero-content {
                flex-direction: column;
                text-align: center;
            }
            
            .about-content {
                grid-template-columns: 1fr;
            }
            
            .contact-container {
                grid-template-columns: 1fr;
            }
        }

@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;
            }
            
            .featured-posts,
            .blog-grid,
            .footer-content {
                grid-template-columns: 1fr;
            }
            
            .hero-text h1 {
                font-size: 2.5rem;
            }
            
            .section-title {
                font-size: 2rem;
            }

.newsletter-form {
                flex-direction: column;
            }
        }
    </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-network-wired"></i>NetMasters</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ımızda</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="#resources" class="nav-link">Kaynaklar</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>IT Sistem ve <span class="highlight">Network</span> Çözümleri</h1>
                    <p class="subtitle">// Güvenlik • Performans • İnovasyon</p>
                    <p>Network altyapınızı güçlendirin, siber güvenliğinizi sağlamlaştırın ve iş sürekliliğinizi garanti altına alın. Uzman ekibimizle size özel çözümler sunuyoruz.</p>
                    <div style="margin-top: 2rem;">
                        <a href="#blog" class="btn">Blog Yazılarımız</a>
                        <a href="#contact" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color);">İletişime Geç</a>
                    </div>
                </div>
                <div class="hero-image reveal">
                    <img src="https://images.unsplash.com/photo-1563207153-f403bf289096?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Network Altyapısı">
                </div>
            </div>
        </section>

<section id="about">
            <div class="container">
                <h2 class="section-title">NetMasters Hakkında</h2>
                <div class="about-content">
                    <div class="about-img reveal">
                        <img src="https://images.unsplash.com/photo-1533750349088-cd871a92f312?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Network Mühendisliği">
                    </div>
                    <div class="about-text reveal">
                        <h3>Teknolojiyi şekillendiren çözümler</h3>
                        <p>NetMasters olarak, 10 yılı aşkın süredir kurumsal ağ altyapıları, siber güvenlik ve bulut çözümleri alanlarında uzmanlaşmış bir ekibiz. Amacımız, işletmelere güvenilir, ölçeklenebilir ve yenilikçi teknoloji çözümleri sunmaktır.</p>
                        <p style="margin-top: 1rem;">Sektördeki gelişmeleri yakından takip ediyor, müşterilerimize en güncel ve etkili çözümleri sunmak için sürekli olarak kendimizi geliştiriyoruz. Network altyapınızı bize emanet edin, işinize odaklanın.</p>
                        <div style="margin-top: 2rem;">
                            <a href="#services" class="btn">Hizmetlerimiz</a>
                            <a href="#contact" class="btn" style="margin-left: 1rem; background: transparent; color: var(--accent-color);">Ekibimizle Tanışın</a>
                        </div>
                    </div>
                </div>

<div class="featured-posts">
                    <div class="post-card reveal">
                        <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Siber Güvenlik" class="post-img">
                        <div class="post-content">
                            <p class="category">Siber Güvenlik</p>
                            <h3>2023'te Karşılaşılan Siber Tehditler ve Korunma Yöntemleri</h3>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </div>
                    <div class="post-card reveal">
                        <img src="https://images.unsplash.com/photo-1544197150-b99a580bb7a8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Bulut Bilişim" class="post-img">
                        <div class="post-content">
                            <p class="category">Bulut Bilişim</p>
                            <h3>Bulut Migrasyon: Şirketinizi Buluta Taşıma Rehberi</h3>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </div>
                    <div class="post-card reveal">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Network Altyapısı" class="post-img">
                        <div class="post-content">
                            <p class="category">Network Altyapısı</p>
                            <h3>Yüksek Performanslı Ağ Altyapısı İçin 10 İpucu</h3>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

<section id="services" style="background-color: var(--primary-color);">
            <div class="container">
                <h2 class="section-title">Hizmetlerimiz</h2>
                <div class="blog-grid">
                    <div class="blog-card reveal">
                        <div class="blog-content">
                            <div class="service-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h3>Siber Güvenlik Çözümleri</h3>
                            <p>Kurumsal ağınızı siber tehditlere karşı koruyacak kapsamlı güvenlik çözümleri sunuyoruz.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Detaylı Bilgi →</a>
                        </div>
                    </div>
                    <div class="blog-card reveal">
                        <div class="blog-content">
                            <div class="service-icon">
                                <i class="fas fa-server"></i>
                            </div>
                            <h3>Ağ Altyapısı ve Yönetimi</h3>
                            <p>Ölçeklenebilir, yüksek performanslı ağ altyapıları tasarlıyor ve yönetiyoruz.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Detaylı Bilgi →</a>
                        </div>
                    </div>
                    <div class="blog-card reveal">
                        <div class="blog-content">
                            <div class="service-icon">
                                <i class="fas fa-cloud"></i>
                            </div>
                            <h3>Bulut Bilişim Hizmetleri</h3>
                            <p>İşletmenizi buluta taşıyarak esneklik, ölçeklenebilirlik ve maliyet avantajı sağlıyoruz.</p>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Detaylı Bilgi →</a>
                        </div>
                    </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-1563013544-824ae1b704d3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Siber Güvenlik" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Siber Güvenlik</p>
                            <h3>Kurumsal Ağlarda Zero Trust Güvenlik Modeli</h3>
                            <p>Zero Trust mimarisi ile şirket ağınızı iç ve dış tehditlere karşı nasıl koruyabileceğinizi öğrenin.</p>
                            <div class="blog-meta">
                                <i class="far fa-calendar"></i> 15 Kasım 2023
                                <i class="far fa-clock" style="margin-left: 1rem;"></i> 5 dk okuma
                            </div>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1544197150-b99a580bb7a8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Bulut Bilişim" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Bulut Bilişim</p>
                            <h3>Multi-Cloud Stratejileri: Avantajlar ve Zorluklar</h3>
                            <p>Çoklu bulut kullanımının işletmenize sağlayacağı avantajları ve dikkat etmeniz gereken noktaları keşfedin.</p>
                            <div class="blog-meta">
                                <i class="far fa-calendar"></i> 8 Kasım 2023
                                <i class="far fa-clock" style="margin-left: 1rem;"></i> 7 dk okuma
                            </div>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                    <article class="blog-card reveal">
                        <img src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Network Altyapısı" class="blog-img">
                        <div class="blog-content">
                            <p class="category">Network Altyapısı</p>
                            <h3>SD-WAN Teknolojisi ve İş Avantajları</h3>
                            <p>Yazılım tanımlı WAN çözümlerinin işletmenize sağlayacağı esneklik ve maliyet avantajlarını inceleyin.</p>
                            <div class="blog-meta">
                                <i class="far fa-calendar"></i> 1 Kasım 2023
                                <i class="far fa-clock" style="margin-left: 1rem;"></i> 6 dk okuma
                            </div>
                            <a href="#" class="read-more" style="color: var(--accent-color); display: block; margin-top: 1rem;">Devamını Oku →</a>
                        </div>
                    </article>
                </div>
                <div style="text-align: center; margin-top: 3rem;">
                    <a href="#" class="btn">Tüm Yazıları Görüntüle</a>
                </div>
            </div>
        </section>

<section class="newsletter">
            <div class="container">
                <h2 class="section-title">Teknoloji Bültenimize Abone Olun</h2>
                <p class="reveal" style="max-width: 600px; margin: 0 auto 2rem;">IT sistemleri, network ve siber güvenlik alanındaki en güncel gelişmeleri takip etmek için bültenimize abone olun.</p>
                <form class="newsletter-form reveal">
                    <input type="email" class="newsletter-input" placeholder="E-posta adresiniz" required>
                    <button type="submit" class="btn">Abone Ol</button>
                </form>
            </div>
        </section>

<section id="contact">
            <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;">Bize Ulaşın</h3>
                        <div class="contact-item">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div>
                                <h4>Konum</h4>
                                <p>Maslak, İ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@netmasters.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 212 345 67 89</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" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" id="email" class="form-input" placeholder="Email adresiniz" required>
                        </div>
                        <div class="form-group">
                            <label for="subject">Konu</label>
                            <input type="text" id="subject" class="form-input" placeholder="Konu" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Mesaj</label>
                            <input id="message" class="form-textarea" placeholder="Mesajınız..." required/>
                        </div>
                        <button type="submit" class="btn">Gönder</button>
                    </form>
                </div>
            </div>
        </section>
    </main>

<footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h3>NetMasters</h3>
                    <p>IT sistem ve network çözümlerinde lider firma. Güvenlik, performans ve inovasyonu bir araya getiriyoruz.</p>
                    <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="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>
                </div>
                <div class="footer-column">
                    <h3>Hizmetlerimiz</h3>
                    <ul class="footer-links">
                        <li><a href="#">Siber Güvenlik Çözümleri</a></li>
                        <li><a href="#">Ağ Altyapısı ve Yönetimi</a></li>
                        <li><a href="#">Bulut Bilişim Hizmetleri</a></li>
                        <li><a href="#">Veri Merkezi Çözümleri</a></li>
                        <li><a href="#">IT Danışmanlık</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Blog Kategorileri</h3>
                    <ul class="footer-links">
                        <li><a href="#">Siber Güvenlik</a></li>
                        <li><a href="#">Network Altyapısı</a></li>
                        <li><a href="#">Bulut Bilişim</a></li>
                        <li><a href="#">Veri Yönetimi</a></li>
                        <li><a href="#">Endüstri Haberleri</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h3>Hızlı Erişim</h3>
                    <ul class="footer-links">
                        <li><a href="#home">Ana Sayfa</a></li>
                        <li><a href="#about">Hakkımızda</a></li>
                        <li><a href="#services">Hizmetler</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">İletişim</a></li>
                    </ul>
                </div>
            </div>
            <div class="copyright">
                <p>© 2023 NetMasters. Tüm Hakları Saklıdır.</p>
            </div>
        </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);
            });

});
    </script>

</body>
</html>

Recommandé

Modèle de barre de navigation Bootstrap

Modèle de site Web de portfolio HTML CSS

Conception de sites Web, marketing numérique et services vidéo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS