Stahlproduktion, Metallindustrie | Iron and Steel Inc.

1061 Metehan

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

Stahlproduktion, Metallindustrie | Iron and Steel Inc.

Empfohlen

16 October 2025

CSS-Code-Animation: Sand, Fehler und Entwicklung

28 November 2024

Landing Page – Logitech

22 November 2024

Landing Page – HUAWEI MateBook X Pro

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demir Çelik Endüstrisi | Çelik Üretim ve Metal Sanayi</title>
    <meta name="description" content="Türkiye'nin önde gelen çelik üretim şirketi. Yüksek kaliteli çelik profiller, inşaat demiri, boru ve sac ürünleri ile geleceği şekillendiriyoruz.">
    <meta name="keywords" content="çelik üretimi, metal endüstrisi, inşaat demiri, çelik boru, sac levha, çelik profil">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
        
        body {
            font-family: 'Roboto', sans-serif;
            background-color: #1a1a1a;
            color: #e0e0e0;
            scroll-behavior: smooth;
        }
        
        .hero-section {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1581092921461-39b2f2a8b162?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
            background-size: cover;
            background-position: center;
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        }
        
        .loading-animation {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: #3b82f6;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .fade-in {
            animation: fadeIn 1.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .slide-in {
            animation: slideIn 1s ease-out;
        }
        
        @keyframes slideIn {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .metallic-bg {
            background: linear-gradient(145deg, #2d3748, #1a202c);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .navbar {
            transition: all 0.3s ease;
        }
        
        .navbar.scrolled {
            background-color: rgba(26, 32, 44, 0.95);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    
    <div id="loading" class="fixed inset-0 bg-gray-900 flex items-center justify-center z-50">
        <div class="loading-animation"></div>
    </div>

<nav id="navbar" class="navbar fixed w-full z-40 bg-gray-900/80 backdrop-blur-md">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-white font-bold text-xl flex items-center">
                            <i class="fas fa-industry mr-2 text-blue-500"></i> DEMİR ÇELİK A.Ş.
                        </span>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#home" class="text-white hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Ana Sayfa</a>
                        <a href="#about" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Hakkımızda</a>
                        <a href="#products" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Ürünler</a>
                        <a href="#projects" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Referanslar</a>
                        <a href="#contact" class="text-gray-300 hover:text-blue-400 px-3 py-2 rounded-md text-sm font-medium transition duration-300">İletişim</a>
                    </div>
                </div>
                <div class="md:hidden">
                    <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        
        
        <div id="mobile-menu" class="hidden md:hidden bg-gray-800">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="text-white block px-3 py-2 rounded-md text-base font-medium">Ana Sayfa</a>
                <a href="#about" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Hakkımızda</a>
                <a href="#products" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Ürünler</a>
                <a href="#projects" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Referanslar</a>
                <a href="#contact" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">İletişim</a>
            </div>
        </div>
    </nav>

<section id="home" class="hero-section fade-in">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-4xl md:text-6xl font-extrabold text-white mb-6 slide-in">
                Çeliğin Gücü ile <span class="text-blue-400">Geleceği Şekillendiriyoruz</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto slide-in">
                50 yılı aşkın tecrübemizle Türkiye'nin önde gelen çelik üretim şirketiyiz. Kaliteli ürünlerimiz ve uzman ekibimizle sektörde fark yaratıyoruz.
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-4 slide-in">
                <a href="#products" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105">
                    Ürünlerimizi Keşfedin
                </a>
                <a href="#contact" class="bg-transparent hover:bg-gray-800 text-white font-bold py-3 px-6 border border-white rounded-lg transition duration-300 transform hover:scale-105">
                    İletişime Geçin
                </a>
            </div>
        </div>
    </section>

<section id="about" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                    <span class="border-b-4 border-blue-500 pb-2">Hakkımızda</span>
                </h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    Kalite, güven ve sürdürülebilirlik ilkeleriyle 1970'ten beri çelik sektöründe faaliyet gösteriyoruz.
                </p>
            </div>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="metallic-bg rounded-xl p-8 text-center hover:shadow-xl transition duration-500">
                    <div class="flex justify-center mb-6">
                        <div class="bg-blue-500/20 p-4 rounded-full">
                            <i class="fas fa-factory text-blue-500 text-3xl"></i>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Fabrika Kapasitemiz</h3>
                    <p class="text-gray-300">
                        Yıllık 1.2 milyon ton üretim kapasitesi ile Türkiye'nin en büyük çelik tesislerinden biriyiz.
                    </p>
                </div>
                
                <div class="metallic-bg rounded-xl p-8 text-center hover:shadow-xl transition duration-500">
                    <div class="flex justify-center mb-6">
                        <div class="bg-blue-500/20 p-4 rounded-full">
                            <i class="fas fa-chart-line text-blue-500 text-3xl"></i>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Üretim Miktarları</h3>
                    <p class="text-gray-300">
                        Son 5 yılda %35 büyüme ile sektörün öncü firmaları arasında yer almaktayız.
                    </p>
                </div>
                
                <div class="metallic-bg rounded-xl p-8 text-center hover:shadow-xl transition duration-500">
                    <div class="flex justify-center mb-6">
                        <div class="bg-blue-500/20 p-4 rounded-full">
                            <i class="fas fa-award text-blue-500 text-3xl"></i>
                        </div>
                    </div>
                    <h3 class="text-xl font-bold text-white mb-3">Kalite Sertifikaları</h3>
                    <p class="text-gray-300">
                        ISO 9001, ISO 14001, CE, TSE ve uluslararası birçok kalite belgesine sahibiz.
                    </p>
                </div>
            </div>
            
            <div class="mt-16 metallic-bg rounded-xl p-8">
                <div class="grid md:grid-cols-2 gap-8 items-center">
                    <div>
                        <h3 class="text-2xl font-bold text-white mb-4">Teknolojik Üretim</h3>
                        <p class="text-gray-300 mb-6">
                            Son teknoloji üretim hatlarımız ve uzman mühendis kadromuzla en kaliteli çelik ürünlerini üretiyoruz. 
                            AR-GE çalışmalarımızla sürekli olarak ürün kalitemizi ve verimliliğimizi artırıyoruz.
                        </p>
                        <ul class="space-y-3 text-gray-300">
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>Tam otomatik üretim hatları</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>7/24 kalite kontrol sistemi</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
                                <span>Çevre dostu üretim süreçleri</span>
                            </li>
                        </ul>
                    </div>
                    <div class="rounded-xl overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="Çelik Üretim Tesisi" class="w-full h-auto rounded-lg shadow-lg">
                    </div>
                </div>
            </div>
        </div>
    </section>

<section id="products" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                    <span class="border-b-4 border-blue-500 pb-2">Ürünlerimiz</span>
                </h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    Geniş ürün yelpazemizle inşaat, otomotiv, beyaz eşya ve birçok sektöre hizmet veriyoruz.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
                
                <div class="product-card metallic-bg rounded-xl overflow-hidden transition duration-500">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="Çelik Profiller" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">Çelik Profiller</h3>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">I Profil</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">H Profil</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">U Profil</span>
                        </div>
                        <ul class="text-gray-300 text-sm space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-ruler-combined text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>5mm - 300mm arası çeşitler</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-weight-hanging text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>6m - 12m standart boylar</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-fire text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>S235JR, S355JR kaliteler</span>
                            </li>
                        </ul>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300">
                            Detaylı Bilgi
                        </button>
                    </div>
                </div>
                
                
                <div class="product-card metallic-bg rounded-xl overflow-hidden transition duration-500">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="İnşaat Demiri" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">İnşaat Demiri</h3>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Sıcak Hadde</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Soğuk Çekme</span>
                        </div>
                        <ul class="text-gray-300 text-sm space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-ruler-combined text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>Ø8mm - Ø40mm çaplar</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-weight-hanging text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>12m standart boy</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-fire text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>B420C, B500B kaliteler</span>
                            </li>
                        </ul>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300">
                            Detaylı Bilgi
                        </button>
                    </div>
                </div>
                
                
                <div class="product-card metallic-bg rounded-xl overflow-hidden transition duration-500">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1631725993080-8a1d0a5a1e0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="Çelik Boru" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">Çelik Boru</h3>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Dikişli</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Dikişsiz</span>
                        </div>
                        <ul class="text-gray-300 text-sm space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-ruler-combined text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>Ø21.3mm - Ø508mm çaplar</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-weight-hanging text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>6m - 12m standart boylar</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-fire text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>API 5L, ST37, ST52 kaliteler</span>
                            </li>
                        </ul>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300">
                            Detaylı Bilgi
                        </button>
                    </div>
                </div>
                
                
                <div class="product-card metallic-bg rounded-xl overflow-hidden transition duration-500">
                    <div class="h-48 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="Sac Levha" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">Sac Levha</h3>
                        <div class="flex flex-wrap gap-2 mb-4">
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Sıcak Hadde</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-2 py-1 rounded">Soğuk Hadde</span>
                        </div>
                        <ul class="text-gray-300 text-sm space-y-2">
                            <li class="flex items-start">
                                <i class="fas fa-ruler-combined text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>0.5mm - 50mm kalınlık</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-weight-hanging text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>1000x2000mm - 1500x6000mm</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-fire text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>DC01, DX51D, S355MC kaliteler</span>
                            </li>
                        </ul>
                        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition duration-300">
                            Detaylı Bilgi
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-center">
                <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-medium">
                    Tüm Ürün Kataloğunu Görüntüle
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="projects" class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                    <span class="border-b-4 border-blue-500 pb-2">Referans Projelerimiz</span>
                </h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    Türkiye'nin önemli projelerinde güvenilir tedarikçi olarak yer aldık.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                
                <div class="metallic-bg rounded-xl overflow-hidden transition duration-500 hover:shadow-xl">
                    <div class="h-56 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1499793983690-29afad0280fd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="İstanbul Havalimanı" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">İstanbul Havalimanı</h3>
                        <p class="text-gray-300 text-sm mb-4">
                            Dünyanın en büyük havalimanı projelerinden birinde 25.000 ton çelik profil tedarik ettik.
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-400 text-sm font-medium">2018 - 2020</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-3 py-1 rounded-full">Tamamlandı</span>
                        </div>
                    </div>
                </div>
                
                
                <div class="metallic-bg rounded-xl overflow-hidden transition duration-500 hover:shadow-xl">
                    <div class="h-56 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1194&q=80" 
                             alt="Çanakkale Köprüsü" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">1915 Çanakkale Köprüsü</h3>
                        <p class="text-gray-300 text-sm mb-4">
                            Dünyanın en uzun orta açıklıklı asma köprüsü için 18.000 ton yüksek dayanımlı çelik sağladık.
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-400 text-sm font-medium">2019 - 2022</span>
                            <span class="bg-blue-500/20 text-blue-400 text-xs px-3 py-1 rounded-full">Tamamlandı</span>
                        </div>
                    </div>
                </div>
                
                
                <div class="metallic-bg rounded-xl overflow-hidden transition duration-500 hover:shadow-xl">
                    <div class="h-56 overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
                             alt="Karma Proje" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">İstanbul Finans Merkezi</h3>
                        <p class="text-gray-300 text-sm mb-4">
                            Türkiye'nin en büyük finans merkezi projesine 30.000 ton çelik konstrüksiyon malzemesi tedarik ettik.
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-400 text-sm font-medium">2021 - Devam</span>
                            <span class="bg-yellow-500/20 text-yellow-400 text-xs px-3 py-1 rounded-full">Devam Ediyor</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12 text-center">
                <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-medium">
                    Tüm Referanslarımızı Görüntüle
                    <i class="fas fa-arrow-right ml-2"></i>
                </a>
            </div>
        </div>
    </section>

<section id="contact" class="py-20 bg-gray-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
                    <span class="border-b-4 border-blue-500 pb-2">İletişim</span>
                </h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    Ürünlerimiz hakkında bilgi almak veya teklif istemek için bizimle iletişime geçin.
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12">
                <div class="metallic-bg rounded-xl p-8">
                    <h3 class="text-2xl font-bold text-white mb-6">Bize Ulaşın</h3>
                    
                    <form id="contactForm" class="space-y-6">
                        <div>
                            <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Adınız Soyadınız</label>
                            <input type="text" id="name" name="name" required 
                                   class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label for="email" class="block text-sm font-medium text-gray-300 mb-1">E-posta Adresiniz</label>
                            <input type="email" id="email" name="email" required 
                                   class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Telefon Numaranız</label>
                            <input type="tel" id="phone" name="phone" 
                                   class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        
                        <div>
                            <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">Konu</label>
                            <select id="subject" name="subject" 
                                    class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">Konu Seçiniz</option>
                                <option value="teklif">Teklif İstiyorum</option>
                                <option value="bilgi">Ürün Bilgisi</option>
                                <option value="sertifika">Kalite Sertifikaları</option>
                                <option value="diger">Diğer</option>
                            </select>
                        </div>
                        
                        <div>
                            <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Mesajınız</label>
                            <input id="message" name="message" rows="4" 
                                      class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"/>
                        </div>
                        
                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
                            Mesajı Gönder
                        </button>
                    </form>
                </div>
                
                <div>
                    <div class="metallic-bg rounded-xl p-8 mb-8">
                        <h3 class="text-2xl font-bold text-white mb-6">İletişim Bilgileri</h3>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-map-marker-alt text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white mb-1">Adres</h4>
                                    <p class="text-gray-300">
                                        Organize Sanayi Bölgesi, 3. Cadde No:45<br>
                                        Dilovası, Kocaeli, Türkiye
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-phone-alt text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white mb-1">Telefon</h4>
                                    <p class="text-gray-300">
                                        <a href="tel:+902623555555" class="hover:text-blue-400">+90 (262) 355 55 55</a><br>
                                        <a href="tel:+905555555555" class="hover:text-blue-400">+90 (555) 555 55 55</a>
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-envelope text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white mb-1">E-posta</h4>
                                    <p class="text-gray-300">
                                        <a href="mailto:info@demircelik.com" class="hover:text-blue-400">info@demircelik.com</a><br>
                                        <a href="mailto:satis@demircelik.com" class="hover:text-blue-400">satis@demircelik.com</a>
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-clock text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white mb-1">Çalışma Saatleri</h4>
                                    <p class="text-gray-300">
                                        Pazartesi - Cuma: 08:30 - 18:00<br>
                                        Cumartesi: 09:00 - 14:00<br>
                                        Pazar: Kapalı
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="metallic-bg rounded-xl p-8">
                        <h3 class="text-2xl font-bold text-white mb-6">Satış Temsilcilerimiz</h3>
                        
                        <div class="grid sm:grid-cols-2 gap-6">
                            <div class="flex items-center">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-user-tie text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white">Ahmet Yılmaz</h4>
                                    <p class="text-gray-300 text-sm">İç Anadolu Bölge Müdürü</p>
                                    <a href="tel:+905555555556" class="text-blue-400 hover:text-blue-300 text-sm">+90 555 555 55 56</a>
                                </div>
                            </div>
                            
                            <div class="flex items-center">
                                <div class="bg-blue-500/20 p-3 rounded-full mr-4">
                                    <i class="fas fa-user-tie text-blue-500"></i>
                                </div>
                                <div>
                                    <h4 class="text-lg font-semibold text-white">Mehmet Kaya</h4>
                                    <p class="text-gray-300 text-sm">Marmara Bölge Müdürü</p>
                                    <a href="tel:+905555555557" class="text-blue-400 hover:text-blue-300 text-sm">+90 555 555 55 57</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="h-96 w-full">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3019.2153277647!2d29.53612331541185!3d40.8459669793199!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14cb46d5f0d5b5a9%3A0x5a8b5a5a5a5a5a5a!2sKocaeli%20Organize%20Sanayi%20B%C3%B6lgesi!5e0!3m2!1str!2str!4v1620000000000!5m2!1str!2str" 
                width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
    </div>

<footer class="bg-gray-900 text-gray-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">
                        <i class="fas fa-industry mr-2 text-blue-500"></i> DEMİR ÇELİK A.Ş.
                    </h3>
                    <p class="mb-4">
                        50 yılı aşkın tecrübemizle Türkiye'nin önde gelen çelik üretim şirketiyiz.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-blue-400">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-400">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-400">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-400">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-400">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Hızlı Linkler</h3>
                    <ul class="space-y-2">
                        <li><a href="#home" class="hover:text-blue-400 transition duration-300">Ana Sayfa</a></li>
                        <li><a href="#about" class="hover:text-blue-400 transition duration-300">Hakkımızda</a></li>
                        <li><a href="#products" class="hover:text-blue-400 transition duration-300">Ürünler</a></li>
                        <li><a href="#projects" class="hover:text-blue-400 transition duration-300">Referanslar</a></li>
                        <li><a href="#contact" class="hover:text-blue-400 transition duration-300">İletişim</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Ürünler</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-blue-400 transition duration-300">Çelik Profiller</a></li>
                        <li><a href="#" class="hover:text-blue-400 transition duration-300">İnşaat Demiri</a></li>
                        <li><a href="#" class="hover:text-blue-400 transition duration-300">Çelik Boru</a></li>
                        <li><a href="#" class="hover:text-blue-400 transition duration-300">Sac Levha</a></li>
                        <li><a href="#" class="hover:text-blue-400 transition duration-300">Özel Üretimler</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-white text-lg font-bold mb-4">Bülten</h3>
                    <p class="mb-4">
                        Yeniliklerimiz ve kampanyalarımızdan haberdar olmak için e-posta listemize kaydolun.
                    </p>
                    <form class="flex">
                        <input type="email" placeholder="E-posta adresiniz" 
                               class="bg-gray-700 text-white px-4 py-2 rounded-l-lg focus:outline-none w-full">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-sm mb-4 md:mb-0">
                    © 2023 Demir Çelik A.Ş. Tüm hakları saklıdır.
                </p>
                <div class="flex space-x-6">
                    <a href="#" class="text-sm hover:text-blue-400">Gizlilik Politikası</a>
                    <a href="#" class="text-sm hover:text-blue-400">Çerez Politikası</a>
                    <a href="#" class="text-sm hover:text-blue-400">Kullanım Şartları</a>
                </div>
            </div>
        </div>
    </footer>

// Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

// Sticky navbar
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });

// Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });

// Form submission
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Here you would normally send the form data to a server
            alert('Mesajınız başarıyla gönderildi! En kısa sürede sizinle iletişime geçeceğiz.');
            this.reset();
        });

// Add animation classes when elements come into view
        const animateOnScroll = function() {
            const elements = document.querySelectorAll('.product-card, .metallic-bg');
            
            elements.forEach(element => {
                const elementPosition = element.getBoundingClientRect().top;
                const screenPosition = window.innerHeight / 1.3;
                
                if (elementPosition < screenPosition) {
                    element.classList.add('fade-in');
                }
            });
        };

window.addEventListener('scroll', animateOnScroll);
        window.addEventListener('load', animateOnScroll);
    </script>
</body>
</html>

Empfohlen

CSS-Code-Animation: Sand, Fehler und Entwicklung

Landing Page – Logitech

Landing Page – HUAWEI MateBook X Pro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS