आर्किनोवा: वास्तुकला और डिजाइन स्टूडियो | तुर्किये

17 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

आर्किनोवा: वास्तुकला और डिजाइन स्टूडियो | तुर्किये

अनुशंसित

22 June 2025

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

23 August 2025

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

22 August 2025

ब्लॉगियम: प्रौद्योगिकी, डिज़ाइन और जीवन ब्लॉग HTML टेम्पलेट

HTML

<!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>
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <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">

/* 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 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>
        
        <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>
        
        <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>

<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">
                    
                    <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>
                    
                    <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>
                    
                    <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>

<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">
                    
                    <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>
                    
                    <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>
                    
                    <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>

<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>
        
        
        <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>

<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>

<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">
                    
                    <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>
                    
                    <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>
                    
                    <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>

<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">
                    
                    <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>
                    
                    <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 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>

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>

अनुशंसित

क्रिएटिव ब्लॉग: डिज़ाइन, पॉडकास्ट और पोर्टफोलियो HTML

तुर्की लॉगिन पृष्ठ HTML और CSS कोड

ब्लॉगियम: प्रौद्योगिकी, डिज़ाइन और जीवन ब्लॉग HTML टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS