Producción de acero, industria metalúrgica | Hierro y acero Inc.

1063 Metehan

Abrir en el editor Video Publica tu código

Producción de acero, industria metalúrgica | Hierro y acero Inc.

Recomendado

11 September 2025

Juego de disparos HTML5 Canvas con tabla de clasificación

16 December 2024

Un código de Valcor27

12 December 2025

Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable

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>

Recomendado

Juego de disparos HTML5 Canvas con tabla de clasificación

Un código de Valcor27

Ejemplo de barra de navegación HTML CSS: Menú horizontal adaptable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS