WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
मेटेहन द्वारा एक कोड
318
Metehan
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
16 April 2025
anhtuanle2004yst द्वारा एक कोड
1 September 2024
एक्सिज़
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BETA Mühendislik | Güneş Enerji Sistemleri</title> <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> .dropdown:hover .dropdown-menu { display: block; } .hero-section { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80'); background-size: cover; background-position: center; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } .scroll-down { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } </style> </head> <body class="font-sans"> <!-- Language Selector --> <div class="bg-gray-100 py-2 px-4 text-right"> <div class="inline-block relative group"> <button class="flex items-center text-gray-700 hover:text-blue-600"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/tr.svg" class="w-5 h-5 mr-2"> <span>Turkish</span> <i class="fas fa-chevron-down ml-1 text-xs"></i> </button> <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-50 hidden group-hover:block"> <div class="py-1"> <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/ar.svg" class="w-5 h-5 mr-2"> <span>Arabic</span> </a> <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/cn.svg" class="w-5 h-5 mr-2"> <span>Chinese</span> </a> <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/nl.svg" class="w-5 h-5 mr-2"> <span>Dutch</span> </a> <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/gb.svg" class="w-5 h-5 mr-2"> <span>English</span> </a> <a href="#" class="flex items-center px-4 py-2 text-gray-700 hover:bg-gray-100"> <img src="https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/fr.svg" class="w-5 h-5 mr-2"> <span>French</span> </a> </div> </div> </div> </div> <!-- Navigation --> <nav class="bg-white shadow-lg sticky top-0 z-40"> <div class="max-w-7xl mx-auto px-4"> <div class="flex justify-between items-center h-16"> <!-- Logo --> <div class="flex-shrink-0"> <a href="#" class="flex items-center"> <img src="logo.png" alt="BETA Güneş Enerji Sistemleri Logosu" class="logo"> </a> </div> <!-- Mobile menu button --> <div class="md:hidden"> <button id="mobile-menu-button" class="text-gray-700 hover:text-blue-600 focus:outline-none"> <i class="fas fa-bars text-xl"></i> </button> </div> <!-- Desktop Menu --> <div class="hidden md:flex space-x-8"> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Ana Sayfa</a> <div class="relative dropdown"> <button class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium flex items-center"> Hizmetler <i class="fas fa-chevron-down ml-1 text-xs"></i> </button> <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg dropdown-menu hidden"> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Solar Tracker Sistemi</a> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Saha GES</a> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Cephe GES</a> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Çatı GES</a> </div> </div> <div class="relative dropdown"> <button class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium flex items-center"> Referanslar <i class="fas fa-chevron-down ml-1 text-xs"></i> </button> <div class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg dropdown-menu hidden"> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Referanslarımız</a> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Video Galeri</a> <a href="#" class="block px-4 py-2 text-gray-700 hover:bg-gray-100">Foto Galeri</a> </div> </div> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">Hakkımızda</a> <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium">İletişim</a> </div> <!-- Social Icons --> <div class="hidden md:flex items-center space-x-4"> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-youtube text-xl"></i> </a> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-instagram text-xl"></i> </a> </div> </div> </div> <!-- Mobile Menu --> <div id="mobile-menu" class="md:hidden hidden bg-white"> <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Ana Sayfa</a> <div class="px-3 py-2"> <button class="flex items-center justify-between w-full text-gray-700"> <span>Hizmetler</span> <i class="fas fa-chevron-down text-xs"></i> </button> <div class="mt-2 pl-4 hidden"> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Solar Tracker Sistemi</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Saha GES</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Cephe GES</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Çatı GES</a> </div> </div> <div class="px-3 py-2"> <button class="flex items-center justify-between w-full text-gray-700"> <span>Referanslar</span> <i class="fas fa-chevron-down text-xs"></i> </button> <div class="mt-2 pl-4 hidden"> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Referanslarımız</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Video Galeri</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Foto Galeri</a> </div> </div> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">Hakkımızda</a> <a href="#" class="block px-3 py-2 text-gray-700 hover:bg-gray-100">İletişim</a> <div class="flex space-x-4 px-3 py-2"> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-youtube text-xl"></i> </a> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="text-gray-500 hover:text-blue-600"> <i class="fab fa-instagram text-xl"></i> </a> </div> </div> </div> </nav> <!-- Hero Section --> <section class="hero-section text-white py-32 px-4"> <div class="max-w-4xl mx-auto text-center"> <h1 class="text-4xl md:text-5xl font-bold mb-6">Güneş Enerji Sistemlerinde Uzman Çözümler</h1> <p class="text-xl mb-8">Yenilenebilir enerji alanında mühendislik çözümleri ve danışmanlık hizmetleri sunuyoruz.</p> <div class="flex flex-col sm:flex-row justify-center gap-4"> <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Hizmetlerimiz</a> <a href="#" class="bg-transparent hover:bg-white hover:text-gray-900 border-2 border-white text-white px-6 py-3 rounded-lg font-medium transition duration-300">İletişim</a> </div> </div> <div class="text-center mt-16 scroll-down"> <a href="#services" class="text-white"> <i class="fas fa-chevron-down text-2xl"></i> <p class="mt-2">Keşfet</p> </a> </div> </section> <!-- Services Section --> <section id="services" class="py-16 px-4 bg-gray-50"> <div class="max-w-7xl mx-auto"> <h2 class="text-3xl font-bold text-center mb-12">Hizmetlerimiz</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Service 1 --> <div class="bg-white rounded-lg overflow-hidden shadow-md service-card transition duration-300"> <img src="https://images.unsplash.com/photo-1508514177221-188e1eaf2d1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Solar Tracker" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Solar Tracker Sistemi</h3> <p class="text-gray-600 mb-4">Güneşin hareketini takip ederek enerji verimliliğini maksimuma çıkaran sistemler.</p> <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Detaylar <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> <!-- Service 2 --> <div class="bg-white rounded-lg overflow-hidden shadow-md service-card transition duration-300"> <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Saha GES" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Saha GES</h3> <p class="text-gray-600 mb-4">Geniş arazilerde kurulum için optimize edilmiş güneş enerji santralleri.</p> <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Detaylar <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> <!-- Service 3 --> <div class="bg-white rounded-lg overflow-hidden shadow-md service-card transition duration-300"> <img src="https://images.unsplash.com/photo-1487621167305-5d248087c724?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Cephe GES" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Cephe GES</h3> <p class="text-gray-600 mb-4">Bina cephelerine entegre edilebilen estetik ve verimli güneş enerji sistemleri.</p> <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Detaylar <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> <!-- Service 4 --> <div class="bg-white rounded-lg overflow-hidden shadow-md service-card transition duration-300"> <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="Çatı GES" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold mb-2">Çatı GES</h3> <p class="text-gray-600 mb-4">Çatı alanlarını değerlendirmek için tasarlanmış güneş enerji sistemleri.</p> <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Detaylar <i class="fas fa-arrow-right ml-1"></i></a> </div> </div> </div> </div> </section> <!-- Video Section --> <section class="py-16 px-4 bg-white"> <div class="max-w-7xl mx-auto"> <h2 class="text-3xl font-bold text-center mb-12">Tanıtım Filmleri</h2> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center"> <div class="relative" style="padding-bottom: 56.25%"> <iframe class="absolute top-0 left-0 w-full h-full rounded-lg shadow-lg" src=https://youtu.be/L3wKzyIN1yk?si=cB0WtbDM60zRyWHv frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> <div> <h3 class="text-2xl font-semibold mb-4">BETA Mühendislik Çözümleri</h3> <p class="text-gray-600 mb-6">Diğer tanıtım videoları ve proje videolarını izlemek için, youtube kanalımıza gidebilir veya video galeri sayfamızı ziyaret edebilirsiniz.</p> <div class="flex flex-wrap gap-4"> <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition duration-300">Video Galeri</a> <a href="#" class="bg-gray-100 hover:bg-gray-200 text-gray-800 px-6 py-3 rounded-lg font-medium transition duration-300 flex items-center"> <i class="fab fa-youtube mr-2"></i> YouTube Kanalı </a> </div> </div> </div> </div> </section> <!-- Features Section --> <section class="py-16 px-4 bg-gray-50"> <div class="max-w-7xl mx-auto"> <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> <!-- Feature 1 --> <div class="bg-white p-8 rounded-lg shadow-md flex flex-col md:flex-row items-start"> <div class="bg-blue-100 p-4 rounded-full mb-4 md:mb-0 md:mr-6"> <i class="fas fa-project-diagram text-blue-600 text-3xl"></i> </div> <div> <h3 class="text-xl font-semibold mb-3">Proje & Mühendislik</h3> <p class="text-gray-600">GES (Güneş Enerji Santrali) proje ve mühendislik çözümleri sunuyoruz. Genel yerleşim planı, kablolama planı vb. tüm konularda yanınızdayız.</p> </div> </div> <!-- Feature 2 --> <div class="bg-white p-8 rounded-lg shadow-md flex flex-col md:flex-row items-start"> <div class="bg-green-100 p-4 rounded-full mb-4 md:mb-0 md:mr-6"> <i class="fas fa-lightbulb text-green-600 text-3xl"></i> </div> <div> <h3 class="text-xl font-semibold mb-3">Danışmanlık & Arge</h3> <p class="text-gray-600">Projenizin başlangıcından sonuna kadar her türlü konuda bizlere sorularınızı yöneltebilir, alanında uzman ekibimiz tarafından danışmanlık alabilirsiniz.</p> </div> </div> </div> </div> </section> <!-- Contact Section --> <section class="py-16 px-4 bg-blue-600 text-white"> <div class="max-w-7xl mx-auto"> <h2 class="text-3xl font-bold text-center mb-12">İletişim</h2> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Contact Info --> <div> <h3 class="text-xl font-semibold mb-4">ADRES</h3> <p class="mb-6">İçerenköy Mahallesi, Güldane Sokak, Güller Hanım Apartmanı, No:52/B, Pk:347768, Zeytinburnu/İstanbul</p> <h3 class="text-xl font-semibold mb-4">TELEFON</h3> <p class="mb-6">(0216) 599 57 62</p> <h3 class="text-xl font-semibold mb-4">E-MAİL</h3> <p>info@betamuhendislik.com</p> </div> <!-- Social Media --> <div> <h3 class="text-xl font-semibold mb-4">Sosyal Medya</h3> <div class="flex space-x-4 mb-8"> <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-gray-100 transition duration-300"> <i class="fab fa-youtube text-xl"></i> </a> <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-gray-100 transition duration-300"> <i class="fab fa-facebook-f text-xl"></i> </a> <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-gray-100 transition duration-300"> <i class="fab fa-twitter text-xl"></i> </a> <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-gray-100 transition duration-300"> <i class="fab fa-instagram text-xl"></i> </a> <a href="#" class="bg-white text-blue-600 p-3 rounded-full hover:bg-gray-100 transition duration-300"> <i class="fab fa-linkedin-in text-xl"></i> </a> </div> <h3 class="text-xl font-semibold mb-4">Çalışma Saatleri</h3> <p>Pazartesi - Cuma: 09:00 - 18:00</p> <p>Cumartesi - Pazar: Kapalı</p> </div> <!-- Contact Form --> <div> <h3 class="text-xl font-semibold mb-4">Bize Ulaşın</h3> <form class="space-y-4"> <div> <input type="text" placeholder="Adınız" class="w-full px-4 py-3 rounded-lg bg-blue-500 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white"> </div> <div> <input type="email" placeholder="E-posta Adresiniz" class="w-full px-4 py-3 rounded-lg bg-blue-500 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white"> </div> <div> <input type="tel" placeholder="Telefon Numaranız" class="w-full px-4 py-3 rounded-lg bg-blue-500 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white"> </div> <div> <input placeholder="Mesajınız" rows="4" class="w-full px-4 py-3 rounded-lg bg-blue-500 text-white placeholder-blue-200 focus:outline-none focus:ring-2 focus:ring-white"/> </div> <button type="submit" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300 w-full">Gönder</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="bg-gray-900 text-white py-8 px-4"> <div class="max-w-7xl mx-auto"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <!-- About --> <div> <img src="https://via.placeholder.com/150x50?text=Beta" alt="Beta Logo" class="h-10 mb-4"> <p class="text-gray-400">Yenilenebilir enerji alanında mühendislik çözümleri ve danışmanlık hizmetleri sunuyoruz.</p> </div> <!-- Quick Links --> <div> <h3 class="text-lg font-semibold mb-4">Hızlı Linkler</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Ana Sayfa</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Hizmetler</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Referanslar</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Hakkımızda</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">İletişim</a></li> </ul> </div> <!-- Services --> <div> <h3 class="text-lg font-semibold mb-4">Hizmetler</h3> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Solar Tracker Sistemi</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Saha GES</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cephe GES</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Çatı GES</a></li> </ul> </div> <!-- Newsletter --> <div> <h3 class="text-lg font-semibold mb-4">Bültenimize Abone Olun</h3> <p class="text-gray-400 mb-4">Yeniliklerimizden haberdar olmak için e-posta listemize kaydolun.</p> <form class="flex"> <input type="email" placeholder="E-posta adresiniz" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full"> <button type="submit" class="bg-blue-600 hover:bg-blue-700 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-8 pt-8 text-center text-gray-400"> <p>© 2025 BETA Mühendislik Danışmanlık A. Ş. Tüm hakları saklıdır.</p> </div> </div> </footer> <script> // Mobile menu toggle document.getElementById('mobile-menu-button').addEventListener('click', function() { const menu = document.getElementById('mobile-menu'); menu.classList.toggle('hidden'); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Dropdown menu for mobile const mobileDropdownButtons = document.querySelectorAll('#mobile-menu button'); mobileDropdownButtons.forEach(button => { button.addEventListener('click', function() { const dropdownContent = this.nextElementSibling; dropdownContent.classList.toggle('hidden'); const icon = this.querySelector('i'); if (dropdownContent.classList.contains('hidden')) { icon.classList.remove('fa-chevron-up'); icon.classList.add('fa-chevron-down'); } else { icon.classList.remove('fa-chevron-down'); icon.classList.add('fa-chevron-up'); } }); }); </script> </body> </html>
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
