WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Un code de Metr
1,577
Metehan
Ouvrir dans l'éditeur
Publiez votre code
1
Recommandé
4 May 2025
Modèle de barre de navigation HTML et CSS réactif
10 February 2025
Un code par bachir123
29 October 2025
Modèle HTML de base Three.js
HTML
Copy
<!DOCTYPE html> <html lang="tr" class="scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Archinova - Modern Mimarlık & Tasarım Stüdyosu</title> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Google Fonts: Inter --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <style> /* Özel Stiller ve Tailwind Yapılandırması */ body { font-family: 'Inter', sans-serif; background-color: #111827; /* Koyu Gri-Mavi Arka Plan */ color: #F3F4F6; /* Açık Gri Yazı Rengi */ } /* Navigasyon linkleri için hover alt çizgisi */ .nav-link { position: relative; transition: color 0.3s ease; } .nav-link:hover { color: #FBBF24; /* Vurgu rengi - Amber */ } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; background-color: #FBBF24; bottom: -5px; left: 50%; transform: translateX(-50%); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* Proje görselleri üzerine gelince efekt */ .project-card .overlay { opacity: 0; transition: opacity 0.4s ease; } .project-card:hover .overlay { opacity: 1; } .project-card img { transition: transform 0.4s ease; } .project-card:hover img { transform: scale(1.05); } /* Galeri itemleri için play ikonu */ .gallery-item .play-icon { opacity: 0; transition: all 0.3s ease; } .gallery-item:hover .play-icon { opacity: 1; transform: scale(1.1); } </style> </head> <body> <!-- HEADER ve NAVİGASYON --> <header class="bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50"> <div class="container mx-auto px-6 py-4 flex justify-between items-center"> <a href="#ana-sayfa" class="text-2xl font-bold tracking-wider text-white"> ARCHI<span class="text-amber-400">NOVA</span> </a> <nav class="hidden md:flex items-center space-x-8"> <a href="#ana-sayfa" class="nav-link">Ana Sayfa</a> <a href="#hizmetler" class="nav-link">Hizmetler</a> <a href="#projeler" class="nav-link">Projeler</a> <a href="#hakkimizda" class="nav-link">Hakkımızda</a> <a href="#galeri" class="nav-link">Galeri</a> <a href="#blog" class="nav-link">Blog</a> </nav> <a href="#iletisim" class="hidden md:inline-block bg-amber-500 text-gray-900 font-bold py-2 px-5 rounded-full hover:bg-amber-400 transition-colors"> Bize Ulaşın </a> <button id="mobile-menu-button" class="md:hidden text-white focus:outline-none"> <svg xmlns="http://www.w3.org/2000/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 12h16m-7 6h7" /> </svg> </button> </div> <!-- Mobil Menü --> <div id="mobile-menu" class="hidden md:hidden bg-gray-900"> <a href="#ana-sayfa" class="block py-2 px-6 text-white hover:bg-gray-800">Ana Sayfa</a> <a href="#hizmetler" class="block py-2 px-6 text-white hover:bg-gray-800">Hizmetler</a> <a href="#projeler" class="block py-2 px-6 text-white hover:bg-gray-800">Projeler</a> <a href="#hakkimizda" class="block py-2 px-6 text-white hover:bg-gray-800">Hakkımızda</a> <a href="#galeri" class="block py-2 px-6 text-white hover:bg-gray-800">Galeri</a> <a href="#blog" class="block py-2 px-6 text-white hover:bg-gray-800">Blog</a> <a href="#iletisim" class="block py-4 px-6 text-white bg-amber-500 text-center font-bold">Bize Ulaşın</a> </div> </header> <main> <!-- 1. ANA SAYFA (HERO) BÖLÜMÜ --> <section id="ana-sayfa" class="h-screen bg-cover bg-center flex items-center" style="background-image: linear-gradient(rgba(17, 24, 39, 0.7), rgba(17, 24, 39, 0.7)), url('https://images.pexels.com/photos/2251247/pexels-photo-2251247.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2');"> <div class="container mx-auto px-6 text-center"> <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white leading-tight mb-4">Mekana Sanat, Yaşama Değer Katıyoruz</h1> <p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-8">Yenilikçi tasarım anlayışımız ve sürdürülebilir mimari çözümlerimizle hayallerinizdeki mekanları gerçeğe dönüştürüyoruz.</p> <a href="#projeler" class="bg-amber-500 text-gray-900 font-bold py-3 px-8 rounded-full text-lg hover:bg-amber-400 transition-colors"> Projelerimizi Keşfedin </a> </div> </section> <!-- 2. HİZMETLER BÖLÜMÜ --> <section id="hizmetler" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">Hizmetlerimiz</h2> <p class="text-gray-400 mt-2">Konseptten uygulamaya, mimarinin her alanında profesyonel çözümler sunuyoruz.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Hizmet Kartı 1 --> <div class="bg-gray-900 p-8 rounded-lg text-center"> <div class="flex justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg> </div> <h3 class="text-2xl font-semibold mb-2">Mimari Tasarım</h3> <p class="text-gray-400">Estetik ve fonksiyonelliği birleştiren, kullanıcı odaklı konut, ticari ve kamusal alan projeleri geliştiriyoruz.</p> </div> <!-- Hizmet Kartı 2 --> <div class="bg-gray-900 p-8 rounded-lg text-center"> <div class="flex justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg> </div> <h3 class="text-2xl font-semibold mb-2">İç Mekan Tasarımı</h3> <p class="text-gray-400">Mekanların ruhunu yansıtan, malzeme ve renk uyumuyla özgün ve yaşanabilir iç mekanlar yaratıyoruz.</p> </div> <!-- Hizmet Kartı 3 --> <div class="bg-gray-900 p-8 rounded-lg text-center"> <div class="flex justify-center mb-4"> <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l5.447 2.724A1 1 0 0021 16.382V5.618a1 1 0 00-1.447-.894L15 7m-6 13h6M9 7L15 4"/></svg> </div> <h3 class="text-2xl font-semibold mb-2">Proje Yönetimi & Danışmanlık</h3> <p class="text-gray-400">Tasarım sürecinden anahtar teslime kadar projenizin her aşamasını titizlikle yönetiyor ve danışmanlık hizmeti sunuyoruz.</p> </div> </div> </div> </section> <!-- 3. PROJELER BÖLÜMÜ --> <section id="projeler" class="py-20 bg-gray-900"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">Öne Çıkan Projeler</h2> <p class="text-gray-400 mt-2">İmzamızı taşıyan, fark yaratan ve ilham veren çalışmalarımız.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Proje Kartı 1 --> <div class="project-card group relative overflow-hidden rounded-lg"> <img src="https://images.pexels.com/photos/1396122/pexels-photo-1396122.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Modern Villa Projesi" class="w-full h-full object-cover"> <div class="overlay absolute inset-0 bg-black/70 flex flex-col justify-end p-6"> <h3 class="text-2xl font-bold text-white">Deniz Manzaralı Villa</h3> <p class="text-amber-400">Konut Mimarisi</p> </div> </div> <!-- Proje Kartı 2 --> <div class="project-card group relative overflow-hidden rounded-lg"> <img src="https://images.pexels.com/photos/276724/pexels-photo-276724.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Ofis Binası Projesi" class="w-full h-full object-cover"> <div class="overlay absolute inset-0 bg-black/70 flex flex-col justify-end p-6"> <h3 class="text-2xl font-bold text-white">Teknoloji Merkezi Ofisi</h3> <p class="text-amber-400">Ticari Mimari</p> </div> </div> <!-- Proje Kartı 3 --> <div class="project-card group relative overflow-hidden rounded-lg"> <img src="https://images.pexels.com/photos/220769/pexels-photo-220769.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Restoran Projesi" class="w-full h-full object-cover"> <div class="overlay absolute inset-0 bg-black/70 flex flex-col justify-end p-6"> <h3 class="text-2xl font-bold text-white">Şehir Restoranı</h3> <p class="text-amber-400">İç Mekan Tasarımı</p> </div> </div> </div> </div> </section> <!-- 4. HAKKIMIZDA BÖLÜMÜ --> <section id="hakkimizda" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> <div> <img src="https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" alt="Mimarlık Ofisi Ekibi" class="rounded-lg shadow-2xl"> </div> <div> <h2 class="text-4xl font-bold text-white mb-4">Biz Kimiz?</h2> <h3 class="text-2xl font-semibold text-amber-400 mb-4">Tasarımın Tutkuyla Buluştuğu Yer.</h3> <p class="text-gray-300 mb-4">Archinova, 2010 yılında kurulmuş, mimari ve iç mimari alanlarında yenilikçi çözümler üreten bir tasarım stüdyosudur. Her projeye, kendine özgü bir kimlik kazandırma ve mekanları sadece estetik değil, aynı zamanda işlevsel ve sürdürülebilir kılma hedefiyle yaklaşıyoruz.</p> <p class="text-gray-300">Farklı disiplinlerden gelen yaratıcı ekibimizle, müşterilerimizin vizyonunu anlıyor ve bu vizyonu gerçeğe dönüştürmek için tutkuyla çalışıyoruz.</p> </div> </div> </div> </section> <!-- YAKLAŞIMIMIZ (PLATFORM) BÖLÜMÜ --> <section id="yaklasimimiz" class="py-20 bg-gray-900"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">Tasarım Yaklaşımımız</h2> <p class="text-gray-400 mt-2">Her projede izlediğimiz 3 temel adım.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> <div class="border border-gray-700 p-8 rounded-lg"> <div class="text-5xl font-extrabold text-amber-400 mb-4">01</div> <h3 class="text-2xl font-semibold mb-2">Keşif & Konsept</h3> <p class="text-gray-400">Sizi dinliyor, ihtiyaçlarınızı anlıyor ve projenin temelini oluşturacak yaratıcı konsepti geliştiriyoruz.</p> </div> <div class="border border-gray-700 p-8 rounded-lg"> <div class="text-5xl font-extrabold text-amber-400 mb-4">02</div> <h3 class="text-2xl font-semibold mb-2">Tasarım & Geliştirme</h3> <p class="text-gray-400">Konsepti detaylandırarak, 3D modellemeler ve teknik çizimlerle projenizi somutlaştırıyoruz.</p> </div> <div class="border border-gray-700 p-8 rounded-lg"> <div class="text-5xl font-extrabold text-amber-400 mb-4">03</div> <h3 class="text-2xl font-semibold mb-2">Uygulama & Teslim</h3> <p class="text-gray-400">İnşaat sürecini yönetiyor, kalite kontrolü yapıyor ve hayalinizdeki mekanı zamanında teslim ediyoruz.</p> </div> </div> </div> </section> <!-- 5. GALERİ BÖLÜMÜ --> <section id="galeri" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">Fotoğraf & Video Galeri</h2> <p class="text-gray-400 mt-2">Projelerimizden ve tasarım süreçlerimizden ilham veren kareler.</p> </div> <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> <div class="grid gap-4"> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/2089698/pexels-photo-2089698.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/271816/pexels-photo-271816.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> </div> <div class="grid gap-4"> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/2724749/pexels-photo-2724749.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> <div class="absolute inset-0 bg-black/50 flex items-center justify-center play-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /></svg> </div> </div> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/1571460/pexels-photo-1571460.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> </div> <div class="grid gap-4"> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/259962/pexels-photo-259962.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/2079234/pexels-photo-2079234.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> </div> <div class="grid gap-4"> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/3797991/pexels-photo-3797991.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> </div> <div class="gallery-item group relative"> <img class="h-auto max-w-full rounded-lg" src="https://images.pexels.com/photos/2635038/pexels-photo-2635038.jpeg?auto=compress&cs=tinysrgb&w=600" alt=""> <div class="absolute inset-0 bg-black/50 flex items-center justify-center play-icon"> <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /></svg> </div> </div> </div> </div> </div> </section> <!-- 6. BLOG BÖLÜMÜ --> <section id="blog" class="py-20 bg-gray-900"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">Blog & Makaleler</h2> <p class="text-gray-400 mt-2">Mimari dünyasından son trendler, ipuçları ve ilham veren yazılar.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Blog Yazısı 1 --> <div class="bg-gray-800 rounded-lg overflow-hidden"> <img src="https://images.pexels.com/photos/6207818/pexels-photo-6207818.jpeg?auto=compress&cs=tinysrgb&w=600&h=400&dpr=2" alt="Sürdürülebilir mimari" class="w-full h-48 object-cover"> <div class="p-6"> <p class="text-sm text-amber-400 mb-2">Sürdürülebilirlik</p> <h3 class="text-xl font-semibold mb-3">Geleceğin Mimarisi: Yeşil Binalar ve Pasif Evler</h3> <a href="#" class="font-semibold text-white hover:text-amber-400 transition-colors">Devamını Oku →</a> </div> </div> <!-- Blog Yazısı 2 --> <div class="bg-gray-800 rounded-lg overflow-hidden"> <img src="https://images.pexels.com/photos/1105754/pexels-photo-1105754.jpeg?auto=compress&cs=tinysrgb&w=600&h=400&dpr=2" alt="Minimalist tasarım" class="w-full h-48 object-cover"> <div class="p-6"> <p class="text-sm text-amber-400 mb-2">Tasarım Trendleri</p> <h3 class="text-xl font-semibold mb-3">Minimalizmin Gücü: Az ile Çok Şey Anlatma Sanatı</h3> <a href="#" class="font-semibold text-white hover:text-amber-400 transition-colors">Devamını Oku →</a> </div> </div> <!-- Blog Yazısı 3 --> <div class="bg-gray-800 rounded-lg overflow-hidden"> <img src="https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&cs=tinysrgb&w=600&h=400&dpr=2" alt="Ofis tasarımı" class="w-full h-48 object-cover"> <div class="p-6"> <p class="text-sm text-amber-400 mb-2">İç Mekan</p> <h3 class="text-xl font-semibold mb-3">Akıllı Ofisler: Verimliliği Artıran Mekan Çözümleri</h3> <a href="#" class="font-semibold text-white hover:text-amber-400 transition-colors">Devamını Oku →</a> </div> </div> </div> </div> </section> <!-- 7. İLETİŞİM BÖLÜMÜ --> <section id="iletisim" class="py-20 bg-gray-800"> <div class="container mx-auto px-6"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-white">İletişime Geçin</h2> <p class="text-gray-400 mt-2">Projeniz hakkında konuşmak veya bir kahve içmek için bize ulaşın.</p> </div> <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 bg-gray-900 p-8 rounded-lg"> <!-- İletişim Formu --> <form> <div class="mb-4"> <label for="name" class="block text-gray-300 mb-2">Adınız Soyadınız</label> <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-md py-2 px-3 text-white focus:outline-none focus:border-amber-500"> </div> <div class="mb-4"> <label for="email" class="block text-gray-300 mb-2">E-posta Adresiniz</label> <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-md py-2 px-3 text-white focus:outline-none focus:border-amber-500"> </div> <div class="mb-4"> <label for="message" class="block text-gray-300 mb-2">Mesajınız</label> <input id="message" rows="5" class="w-full bg-gray-800 border border-gray-700 rounded-md py-2 px-3 text-white focus:outline-none focus:border-amber-500"/> </div> <button type="submit" class="w-full bg-amber-500 text-gray-900 font-bold py-3 px-5 rounded-full hover:bg-amber-400 transition-colors"> Mesajı Gönder </button> </form> <!-- İletişim Bilgileri --> <div class="space-y-6"> <div> <h3 class="text-xl font-semibold text-amber-400">Adres</h3> <p class="text-gray-300">Örnek Mahallesi, Mimarlık Caddesi No:123, 34700 İstanbul, Türkiye</p> </div> <div> <h3 class="text-xl font-semibold text-amber-400">Telefon</h3> <p class="text-gray-300">+90 216 123 45 67</p> </div> <div> <h3 class="text-xl font-semibold text-amber-400">E-posta</h3> <p class="text-gray-300">info@archinova.com</p> </div> <div> <img src="https://placehold.co/600x400/111827/4b5563?text=Harita" alt="Harita" class="rounded-lg w-full h-40 object-cover"> </div> </div> </div> </div> </section> </main> <!-- FOOTER --> <footer class="bg-gray-900"> <div class="container mx-auto px-6 py-8 text-center text-gray-400"> <a href="#ana-sayfa" class="text-2xl font-bold tracking-wider text-white"> ARCHI<span class="text-amber-400">NOVA</span> </a> <p class="my-4">Hayalinizdeki mekanları tasarlıyoruz.</p> <p>© 2024 Archinova Mimarlık. Tüm Hakları Saklıdır.</p> </div> </footer> <script> // Mobil menü açma/kapama const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Mobil menüdeki bir linke tıklanınca menüyü kapat const mobileNavLinks = mobileMenu.getElementsByTagName('a'); for (let link of mobileNavLinks) { link.addEventListener('click', () => { mobileMenu.classList.add('hidden'); }); } </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) */
