Spaces:
Running
Running
| <html lang="id"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Keluarga Achmad Sari Kebumen</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .family-tree { | |
| position: relative; | |
| } | |
| .family-tree::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| width: 2px; | |
| height: 100%; | |
| background: #d1d5db; | |
| transform: translateX(-50%); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 24px; | |
| left: -38px; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| border: 3px solid #93c5fd; | |
| } | |
| .gallery-item { | |
| transition: all 0.3s ease; | |
| } | |
| .gallery-item:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: #3b82f6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header/Navbar --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-home text-blue-600 text-2xl mr-2"></i> | |
| <h1 class="title-font text-xl font-bold text-gray-800">Achmad Sari Kebumen</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link text-gray-700 hover:text-blue-600">Beranda</a> | |
| <a href="#history" class="nav-link text-gray-700 hover:text-blue-600">Sejarah</a> | |
| <a href="#family" class="nav-link text-gray-700 hover:text-blue-600">Keluarga</a> | |
| <a href="#activities" class="nav-link text-gray-700 hover:text-blue-600">Kegiatan</a> | |
| <a href="#messages" class="nav-link text-gray-700 hover:text-blue-600">Pesan</a> | |
| <a href="#gallery" class="nav-link text-gray-700 hover:text-blue-600">Galeri</a> | |
| </nav> | |
| <button class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero pt-20 min-h-screen flex items-center justify-center text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="title-font text-4xl md:text-6xl font-bold mb-6">Keluarga Achmad Sari</h1> | |
| <h2 class="text-xl md:text-2xl mb-8">Kebumen, Jawa Tengah</h2> | |
| <p class="max-w-2xl mx-auto text-lg mb-10">Sebuah keluarga yang dibangun dengan cinta, kejujuran, dan semangat gotong royong. Menjunjung tinggi nilai-nilai agama dan budaya Jawa.</p> | |
| <a href="#history" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300"> | |
| <i class="fas fa-book-open mr-2"></i> Pelajari Sejarah Kami | |
| </a> | |
| </div> | |
| </section> | |
| <!-- History Section --> | |
| <section id="history" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Sejarah Keluarga</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-gray-600">Asal usul dan perjalanan keluarga Achmad Sari dari generasi ke generasi</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative family-tree pl-8 md:pl-0"> | |
| <!-- Timeline Item --> | |
| <div class="relative pb-12 timeline-item"> | |
| <div class="md:flex items-start"> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 absolute left-1/2 -ml-6 -mt-2"> | |
| <i class="fas fa-home text-xl"></i> | |
| </div> | |
| <div class="md:w-5/12 md:pr-8 md:text-right"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">Tahun 1950</h3> | |
| <p class="text-gray-600">Achmad Sari lahir di Kebumen</p> | |
| </div> | |
| <div class="hidden md:flex w-2"></div> | |
| <div class="md:w-5/12 md:pl-8 mt-4 md:mt-0"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-gray-700">Achmad Sari dilahirkan di Desa Karangsari, Kebumen. Beliau merupakan anak pertama dari 5 bersaudara.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="relative pb-12 timeline-item"> | |
| <div class="md:flex items-start"> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 absolute left-1/2 -ml-6 -mt-2"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </div> | |
| <div class="md:w-5/12 md:pr-8 md:text-right order-last"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-gray-700">Pernikahan sederhana namun penuh makna dilaksanakan di Masjid Al-Hidayah Kebumen. Pasangan ini membangun rumah pertama mereka di Jl. Merpati No. 12.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex w-2"></div> | |
| <div class="md:w-5/12 md:pl-8 mt-4 md:mt-0"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">Tahun 1975</h3> | |
| <p class="text-gray-600">Achmad Sari menikah dengan Siti Aminah</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="relative pb-12 timeline-item"> | |
| <div class="md:flex items-start"> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 absolute left-1/2 -ml-6 -mt-2"> | |
| <i class="fas fa-baby text-xl"></i> | |
| </div> | |
| <div class="md:w-5/12 md:pr-8 md:text-right"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">1976-1985</h3> | |
| <p class="text-gray-600">Kelahiran anak-anak</p> | |
| </div> | |
| <div class="hidden md:flex w-2"></div> | |
| <div class="md:w-5/12 md:pl-8 mt-4 md:mt-0"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-gray-700">Pasangan ini dikaruniai 4 orang anak: Ahmad Fauzi (1976), Nurul Hidayati (1978), Muhammad Arif (1981), dan Siti Fatimah (1985). Keluarga pindah ke rumah yang lebih besar di Jl. Garuda No. 45.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="relative pb-12 timeline-item"> | |
| <div class="md:flex items-start"> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 absolute left-1/2 -ml-6 -mt-2"> | |
| <i class="fas fa-graduation-cap text-xl"></i> | |
| </div> | |
| <div class="md:w-5/12 md:pr-8 md:text-right order-last"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-gray-700">Semua anak berhasil menyelesaikan pendidikan tinggi. Ahmad Fauzi menjadi dokter, Nurul Hidayati menjadi guru, Muhammad Arif menjadi insinyur, dan Siti Fatimah menjadi pengusaha.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex w-2"></div> | |
| <div class="md:w-5/12 md:pl-8 mt-4 md:mt-0"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">1995-2005</h3> | |
| <p class="text-gray-600">Prestasi pendidikan anak-anak</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Timeline Item --> | |
| <div class="relative timeline-item"> | |
| <div class="md:flex items-start"> | |
| <div class="hidden md:flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 text-blue-600 absolute left-1/2 -ml-6 -mt-2"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div class="md:w-5/12 md:pr-8 md:text-right"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">2010-Sekarang</h3> | |
| <p class="text-gray-600">Keluarga besar yang harmonis</p> | |
| </div> | |
| <div class="hidden md:flex w-2"></div> | |
| <div class="md:w-5/12 md:pl-8 mt-4 md:mt-0"> | |
| <div class="bg-blue-50 p-6 rounded-lg shadow-sm"> | |
| <p class="text-gray-700">Keluarga Achmad Sari kini telah memiliki 12 cucu. Mereka rutin mengadakan reuni keluarga setiap tahun dan aktif dalam kegiatan sosial di Kebumen. Rumah keluarga di Jl. Garuda No. 45 menjadi pusat berkumpul seluruh anggota keluarga.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Family Data Section --> | |
| <section id="family" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Data Keluarga</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-gray-600">Anggota keluarga Achmad Sari dari generasi pertama hingga sekarang</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Family Member 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1607990283143-e81e7a2c9349?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Achmad Sari" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-xl">Achmad Sari</h3> | |
| <p class="text-blue-200">Kepala Keluarga</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-birthday-cake text-blue-600 mr-2"></i> | |
| <span>Lahir: 12 Januari 1950</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> | |
| <span>Kebumen, Jawa Tengah</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-briefcase text-blue-600 mr-2"></i> | |
| <span>Pensiunan PNS</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ayah dari 4 anak yang sangat mencintai keluarga. Aktif dalam kegiatan sosial dan keagamaan di masyarakat.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Pendiri Keluarga</span> | |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Tokoh Masyarakat</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Family Member 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Siti Aminah" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-xl">Siti Aminah</h3> | |
| <p class="text-blue-200">Ibu Rumah Tangga</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-birthday-cake text-blue-600 mr-2"></i> | |
| <span>Lahir: 5 Mei 1955</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> | |
| <span>Kebumen, Jawa Tengah</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-briefcase text-blue-600 mr-2"></i> | |
| <span>Ibu Rumah Tangga</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ibu yang penuh kasih sayang dan sangat memperhatikan pendidikan anak-anaknya. Ahli dalam memasak masakan Jawa.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Pengurus PKK</span> | |
| <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Ahli Masak</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Family Member 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1540569014875-4a360bd40606?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Ahmad Fauzi" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-xl">Ahmad Fauzi</h3> | |
| <p class="text-blue-200">Anak Pertama</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-birthday-cake text-blue-600 mr-2"></i> | |
| <span>Lahir: 3 Maret 1976</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> | |
| <span>Jakarta</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-briefcase text-blue-600 mr-2"></i> | |
| <span>Dokter Spesialis</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Dokter spesialis jantung di RS Harapan Kita Jakarta. Menikah dengan dr. Rina dan memiliki 3 anak.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Dokter</span> | |
| <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Spesialis Jantung</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Family Member 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 hover:shadow-xl"> | |
| <div class="relative h-64 bg-gray-200"> | |
| <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Nurul Hidayati" class="w-full h-full object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-xl">Nurul Hidayati</h3> | |
| <p class="text-blue-200">Anak Kedua</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-birthday-cake text-blue-600 mr-2"></i> | |
| <span>Lahir: 15 Agustus 1978</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i> | |
| <span>Yogyakarta</span> | |
| </div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-briefcase text-blue-600 mr-2"></i> | |
| <span>Guru SMA</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Guru Matematika di SMA Negeri 3 Yogyakarta. Menikah dengan Dr. Budi Santoso dan memiliki 2 anak.</p> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Guru</span> | |
| <span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Matematika</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-white hover:bg-gray-100 text-blue-600 border border-blue-600 px-6 py-3 rounded-full font-medium transition duration-300"> | |
| <i class="fas fa-users mr-2"></i> Lihat Seluruh Anggota Keluarga | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Activities Section --> | |
| <section id="activities" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Kegiatan Keluarga</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-gray-600">Berbagai aktivitas yang dilakukan bersama sebagai keluarga besar Achmad Sari</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Activity 1 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 relative"> | |
| <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Reuni Keluarga" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Tahunan | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">Reuni Keluarga Tahunan</h3> | |
| <p class="text-gray-600 mb-4">Setiap bulan Juni, seluruh keluarga berkumpul di rumah orang tua di Kebumen untuk reuni selama 3 hari dengan berbagai kegiatan seru.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>10-12 Juni 2023</span> | |
| </div> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Lihat Foto <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity 2 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 relative"> | |
| <img src="https://images.unsplash.com/photo-1529333166447-3398d57256b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bakti Sosial" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Rutin | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">Bakti Sosial Ramadhan</h3> | |
| <p class="text-gray-600 mb-4">Setiap bulan Ramadhan, keluarga Achmad Sari mengadakan bakti sosial berupa pembagian sembako dan santunan anak yatim di sekitar Kebumen.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>April 2023</span> | |
| </div> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Lihat Foto <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity 3 --> | |
| <div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 relative"> | |
| <img src="https://images.unsplash.com/photo-1523050853548-5d00ad1073d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wisata Edukasi" class="w-full h-full object-cover"> | |
| <div class="absolute top-4 right-4 bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium"> | |
| Insidental | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="title-font text-xl font-semibold text-gray-800 mb-2">Wisata Edukasi</h3> | |
| <p class="text-gray-600 mb-4">Kegiatan wisata edukasi ke berbagai tempat bersejarah di Jawa Tengah untuk mempererat hubungan keluarga dan menambah pengetahuan.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Desember 2022</span> | |
| </div> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium"> | |
| Lihat Foto <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Upcoming Activity --> | |
| <div class="bg-blue-50 rounded-lg p-8"> | |
| <h3 class="title-font text-2xl font-semibold text-blue-800 mb-4">Kegiatan Mendatang</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-utensils text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Syukuran Keluarga</h4> | |
| <p class="text-sm text-gray-600">12 November 2023 - Rumah Keluarga, Kebumen</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-graduation-cap text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Wisuda Cucu</h4> | |
| <p class="text-sm text-gray-600">15 Desember 2023 - Universitas Gadjah Mada</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-plane text-lg"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Liburan Akhir Tahun</h4> | |
| <p class="text-sm text-gray-600">26-30 Desember 2023 - Bali</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Activity Stats --> | |
| <div class="bg-white rounded-lg shadow-sm p-8"> | |
| <h3 class="title-font text-2xl font-semibold text-gray-800 mb-6">Statistik Kegiatan</h3> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-blue-600 mb-2">12</div> | |
| <div class="text-gray-600">Kegiatan Tahunan</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-green-600 mb-2">48</div> | |
| <div class="text-gray-600">Anggota Hadir</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-purple-600 mb-2">6</div> | |
| <div class="text-gray-600">Lokasi Berbeda</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold text-yellow-600 mb-2">15</div> | |
| <div class="text-gray-600">Tahun Berjalan</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Messages Section --> | |
| <section id="messages" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Pesan & Nasehat</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-gray-600">Kata-kata bijak dan nasehat dari orang tua untuk seluruh anggota keluarga</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Message 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-blue-600 p-8 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <img src="https://images.unsplash.com/photo-1607990283143-e81e7a2c9349?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Achmad Sari" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-white"> | |
| <h3 class="text-white font-bold text-xl">Achmad Sari</h3> | |
| <p class="text-blue-200">Kepala Keluarga</p> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-quote-left text-xl opacity-50 mr-2"></i> | |
| <span class="text-2xl font-bold">"</span> | |
| </div> | |
| <p class="text-gray-700 text-lg mb-6">Sebuah keluarga yang kuat dibangun di atas dasar kejujuran, kerja keras, dan saling percaya. Jangan pernah melupakan asal usulmu dan selalu bantu mereka yang membutuhkan. Kekayaan sejati bukanlah harta benda, tetapi hubungan baik dengan sesama dan ridho Ilahi.</p> | |
| <div class="flex items-center text-gray-500 text-sm"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Pesan terakhir, 1 Januari 2023</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-purple-600 p-8 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Siti Aminah" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 border-4 border-white"> | |
| <h3 class="text-white font-bold text-xl">Siti Aminah</h3> | |
| <p class="text-purple-200">Ibu Rumah Tangga</p> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-8"> | |
| <div class="flex items-center text-yellow-400 mb-4"> | |
| <i class="fas fa-quote-left text-xl opacity-50 mr-2"></i> | |
| <span class="text-2xl font-bold">"</span> | |
| </div> | |
| <p class="text-gray-700 text-lg mb-6">Anak-anakku, dalam hidup ini kalian akan menghadapi banyak tantangan. Ingatlah bahwa keluarga adalah tempat kalian berpulang. Selalu jaga silaturahmi, hormati yang lebih tua, dan sayangi yang lebih muda. Makanan terenak adalah yang dimasak dengan cinta, dan rumah ternyaman adalah yang dipenuhi kasih sayang.</p> | |
| <div class="flex items-center text-gray-500 text-sm"> | |
| <i class="fas fa-calendar-alt mr-2"></i> | |
| <span>Pesan rutin, setiap pertemuan keluarga</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Message Form --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-8"> | |
| <h3 class="title-font text-2xl font-semibold text-gray-800 mb-6">Kirim Pesan untuk Keluarga</h3> | |
| <form> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nama Anda</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="Masukkan nama lengkap"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="relation" class="block text-gray-700 font-medium mb-2">Hubungan dengan Keluarga</label> | |
| <select id="relation" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"> | |
| <option value="">Pilih hubungan</option> | |
| <option value="child">Anak</option> | |
| <option value="grandchild">Cucu</option> | |
| <option value="son-in-law">Menantu</option> | |
| <option value="relative">Kerabat</option> | |
| <option value="friend">Teman Keluarga</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Pesan Anda</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="Tulis pesan atau nasehat untuk keluarga"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300"> | |
| <i class="fas fa-paper-plane mr-2"></i> Kirim Pesan | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section id="gallery" class="py-20 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="title-font text-3xl md:text-4xl font-bold text-gray-800 mb-4">Galeri Keluarga</h2> | |
| <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div> | |
| <p class="max-w-2xl mx-auto text-gray-600">Momen berharga yang diabadikan bersama keluarga besar Achmad Sari</p> | |
| </div> | |
| <div class="mb-8 flex justify-center"> | |
| <div class="inline-flex rounded-md shadow-sm"> | |
| <button type="button" class="px-6 py-2 text-sm font-medium rounded-l-lg bg-blue-600 text-white"> | |
| Semua | |
| </button> | |
| <button type="button" class="px-6 py-2 text-sm font-medium bg-white border-t border-b border-gray-200 text-gray-700"> | |
| Reuni | |
| </button> | |
| <button type="button" class="px-6 py-2 text-sm font-medium bg-white border-t border-b border-gray-200 text-gray-700"> | |
| Wisata | |
| </button> | |
| <button type="button" class="px-6 py-2 text-sm font-medium bg-white border border-gray-200 text-gray-700 rounded-r-lg"> | |
| Acara Khusus | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Gallery Item 1 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1529333166447-3398d57256b9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Reuni Keluarga 2022" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Reuni Keluarga 2022</h3> | |
| <p class="text-sm text-gray-600">12 Juni 2022 - Kebumen</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 2 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1523050853548-5d00ad1073d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wisata Borobudur" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Wisata Borobudur</h3> | |
| <p class="text-sm text-gray-600">27 Desember 2021 - Magelang</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 3 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1527481138388-bdca5752f5eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="HUT Ke-50 Pernikahan" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">HUT Ke-50 Pernikahan</h3> | |
| <p class="text-sm text-gray-600">15 Agustus 2021 - Kebumen</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 4 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bakti Sosial Ramadhan" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Bakti Sosial Ramadhan</h3> | |
| <p class="text-sm text-gray-600">18 April 2021 - Kebumen</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 5 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1511988617509-a57c8a288659?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Reuni Keluarga 2020" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Reuni Keluarga 2020</h3> | |
| <p class="text-sm text-gray-600">14 Juni 2020 - Kebumen</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 6 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Wisata Pantai" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Wisata Pantai</h3> | |
| <p class="text-sm text-gray-600">22 Desember 2019 - Pantai Ayah</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 7 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="HUT Achmad Sari" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">HUT Achmad Sari</h3> | |
| <p class="text-sm text-gray-600">12 Januari 2019 - Kebumen</p> | |
| </div> | |
| </div> | |
| <!-- Gallery Item 8 --> | |
| <div class="gallery-item rounded-lg overflow-hidden shadow-md"> | |
| <img src="https://images.unsplash.com/photo-1526666923127-b2970f64b422?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pernikahan Cucu" class="w-full h-64 object-cover"> | |
| <div class="p-4 bg-white"> | |
| <h3 class="font-medium text-gray-800 mb-1">Pernikahan Cucu</h3> | |
| <p class="text-sm text-gray-600">8 September 2018 - Yogyakarta</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition duration-300"> | |
| <i class="fas fa-images mr-2"></i> Lihat Lebih Banyak Foto | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="title-font text-xl font-bold mb-4">Achmad Sari Kebumen</h3> | |
| <p class="text-gray-400">Sebuah keluarga yang dibangun dengan cinta dan kejujuran. Menjunjung tinggi nilai-nilai agama dan budaya Jawa.</p> | |
| </div> | |
| <div> | |
| <h4 class="title-font text-lg font-semibold mb-4">Tautan Cepat</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white transition">Beranda</a></li> | |
| <li><a href="#history" class="text-gray-400 hover:text-white transition">Sejarah</a></li> | |
| <li><a href="#family" class="text-gray-400 hover:text-white transition">Keluarga</a></li> | |
| <li><a href="#activities" class="text-gray-400 hover:text-white transition">Kegiatan</a></li> | |
| <li><a href="#gallery" class="text-gray-400 hover:text-white transition">Galeri</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="title-font text-lg font-semibold mb-4">Kontak</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-blue-400 mr-3"></i> | |
| <span class="text-gray-400">Jl. Garuda No. 45, Kebumen, Jawa Tengah</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-blue-400 mr-3"></i> | |
| <span class="text-gray-400">(0287) 1234567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-blue-400 mr-3"></i> | |
| <span class="text-gray-400">[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="title-font text-lg font-semibold mb-4">Ikuti Kami</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-blue-600 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-blue-400 transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-pink-600 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center text-white hover:bg-red-600 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h5 class="text-gray-400 mb-2">Berlangganan Newsletter</h5> | |
| <div class="flex"> | |
| <input type="email" placeholder="Email Anda" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full"> | |
| <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-10 pt-6 text-center text-gray-400"> | |
| <p>© 2023 Keluarga Achmad Sari Kebumen. Seluruh hak cipta dilindungi.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <a href="#home" class="fixed bottom-6 right-6 w-12 h-12 bg-blue-600 text-white rounded-full flex items-center justify-center shadow-lg hover:bg-blue-700 transition duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </a> | |
| <script> | |
| // Mobile menu toggle | |
| document.querySelector('button.md\\:hidden').addEventListener('click', function() { | |
| const nav = document.querySelector('nav.hidden'); | |
| nav.classList.toggle('hidden'); | |
| nav.classList.toggle('flex'); | |
| nav.classList.toggle('flex-col'); | |
| nav.classList.toggle('absolute'); | |
| nav.classList.toggle('top-16'); | |
| nav.classList.toggle('right-4'); | |
| nav.classList.toggle('bg-white'); | |
| nav.classList.toggle('p-4'); | |
| nav.classList.toggle('rounded-lg'); | |
| nav.classList.toggle('shadow-lg'); | |
| nav.classList.toggle('space-y-4'); | |
| nav.classList.toggle('space-x-8'); | |
| }); | |
| // 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 nav = document.querySelector('nav'); | |
| if (!nav.classList.contains('hidden')) { | |
| nav.classList.add('hidden'); | |
| nav.classList.remove('flex'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Gallery filter functionality | |
| const galleryButtons = document.querySelectorAll('#gallery button'); | |
| galleryButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| galleryButtons.forEach(btn => { | |
| btn.classList.remove('bg-blue-600', 'text-white'); | |
| btn.classList.add('bg-white', 'text-gray-700', 'border'); | |
| }); | |
| // Add active class to clicked button | |
| this.classList.remove('bg-white', 'text-gray-700', 'border'); | |
| this.classList.add('bg-blue-600', 'text-white'); | |
| // Here you would normally filter gallery items | |
| // For this example, we'll just log the filter | |
| console.log('Filter by:', this.textContent.trim()); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=asronsr/achmad-sari-kebumen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |