It looks like this is a web page, not a feed. I looked for a feed associated with this page, but couldn't find one. Please enter the address of your feed to validate.

Source: https://hasanfoto.my.id/

  1. <!DOCTYPE html>
  2.    <html lang="id">
  3.  
  4.    <head>
  5.        <meta charset="UTF-8">
  6.        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.        <title>Hasan Foto - Abadikan Momen Terbaik Anda</title>
  8.        <!-- Tailwind CSS CDN untuk styling modern dan responsif -->
  9.        <script src="https://cdn.tailwindcss.com"></script>
  10.        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  11.        <style>
  12.            /* Hilangkan scrollbar di seluruh aplikasi */
  13.            html,
  14.            body {
  15.                scrollbar-width: none;
  16.                /* Firefox */
  17.                -ms-overflow-style: none;
  18.                /* IE and Edge */
  19.            }
  20.  
  21.            html::-webkit-scrollbar,
  22.            body::-webkit-scrollbar {
  23.                display: none;
  24.                /* Chrome, Safari, Opera */
  25.            }
  26.  
  27.            body {
  28.                font-family: 'Inter', sans-serif;
  29.                background-color: #f8fafc;
  30.            }
  31.  
  32.            /* Gaya untuk tab aktif */
  33.            .tab.active {
  34.                background-color: #3b82f6;
  35.                color: #fff;
  36.            }
  37.  
  38.            /* Gaya untuk konten tab aktif */
  39.            .tab-content {
  40.                display: none;
  41.            }
  42.  
  43.            .tab-content.active {
  44.                display: block;
  45.            }
  46.  
  47.            /* Styling for the hero section with a gradient overlay */
  48.            .hero-section {
  49.                background-color: rgb(59, 130, 246);
  50.                background-image: url('https://placehold.co/1920x1080/64748b');
  51.                background-size: cover;
  52.                background-position: center;
  53.            }
  54.  
  55.            /* Gaya untuk modal pop-up */
  56.            .modal {
  57.                position: fixed;
  58.                z-index: 50;
  59.                left: 0;
  60.                top: 0;
  61.                width: 100%;
  62.                height: 100%;
  63.                background-color: rgba(0, 0, 0, 0.8);
  64.                display: none;
  65.                justify-content: center;
  66.                align-items: center;
  67.            }
  68.  
  69.            .modal-content {
  70.                max-width: 90%;
  71.                max-height: 90%;
  72.                background-color: #fff;
  73.                border-radius: 1rem;
  74.                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  75.                position: relative;
  76.                display: flex;
  77.                flex-direction: column;
  78.                overflow: hidden;
  79.            }
  80.  
  81.            .close-button {
  82.                position: absolute;
  83.                top: 1rem;
  84.                right: 1rem;
  85.                color: #fff;
  86.                font-size: 2rem;
  87.                font-weight: bold;
  88.                cursor: pointer;
  89.                z-index: 60;
  90.                background-color: rgba(0, 0, 0, 0.5);
  91.                border-radius: 50%;
  92.                width: 2.5rem;
  93.                height: 2.5rem;
  94.                display: flex;
  95.                justify-content: center;
  96.                align-items: center;
  97.                transition: background-color 0.3s;
  98.            }
  99.  
  100.            .close-button:hover {
  101.                background-color: rgba(0, 0, 0, 0.7);
  102.            }
  103.  
  104.            .carousel-container {
  105.                position: relative;
  106.                width: 100%;
  107.                height: auto;
  108.            }
  109.  
  110.            .carousel-image {
  111.                display: none;
  112.                width: 100%;
  113.                height: auto;
  114.                object-fit: cover;
  115.            }
  116.  
  117.            .carousel-image.active {
  118.                display: block;
  119.            }
  120.  
  121.            .carousel-nav {
  122.                position: absolute;
  123.                top: 50%;
  124.                width: 100%;
  125.                display: flex;
  126.                justify-content: space-between;
  127.                transform: translateY(-50%);
  128.            }
  129.  
  130.            .carousel-nav-btn {
  131.                background-color: rgba(0, 0, 0, 0.5);
  132.                color: #fff;
  133.                border: none;
  134.                padding: 0.5rem 1rem;
  135.                cursor: pointer;
  136.                font-size: 1.5rem;
  137.                transition: background-color 0.3s;
  138.            }
  139.  
  140.            .carousel-nav-btn:hover {
  141.                background-color: rgba(0, 0, 0, 0.7);
  142.            }
  143.  
  144.            .carousel-nav-btn.left {
  145.                border-top-right-radius: 9999px;
  146.                border-bottom-right-radius: 9999px;
  147.            }
  148.  
  149.            .carousel-nav-btn.right {
  150.                border-top-left-radius: 9999px;
  151.                border-bottom-left-radius: 9999px;
  152.            }
  153.  
  154.            /* Fade-in animation for gallery modal */
  155.            @keyframes fade-in {
  156.                from {
  157.                    opacity: 0;
  158.                    transform: scale(0.97);
  159.                }
  160.  
  161.                to {
  162.                    opacity: 1;
  163.                    transform: scale(1);
  164.                }
  165.            }
  166.  
  167.            .animate-fade-in {
  168.                animation: fade-in 0.3s cubic-bezier(.4, 0, .2, 1);
  169.            }
  170.  
  171.            @media (max-width: 640px) {
  172.                #gallery-modal .rounded-2xl {
  173.                    border-radius: 0.75rem !important;
  174.                }
  175.  
  176.                #gallery-modal .shadow-2xl {
  177.                    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18) !important;
  178.                }
  179.  
  180.                #gallery-modal .modal-content {
  181.                    width: calc(100vw - 20px) !important;
  182.                    max-width: calc(100vw - 20px) !important;
  183.                    min-width: 0 !important;
  184.                    margin-left: 0 !important;
  185.                    margin-right: 0 !important;
  186.                    padding: 0.5rem 0.5rem 1.5rem 0.5rem !important;
  187.                    border-radius: 0.75rem !important;
  188.                    box-sizing: border-box !important;
  189.                }
  190.  
  191.                #gallery-modal .flex-1.flex.items-center.justify-center.w-full {
  192.                    padding-left: 0.5rem !important;
  193.                    padding-right: 0.5rem !important;
  194.                }
  195.  
  196.                #gallery-modal #gallery-image {
  197.                    padding: 0.5rem;
  198.                    background: #f3f4f6;
  199.                    border-radius: 0.5rem;
  200.                    width: 100% !important;
  201.                    max-width: 100% !important;
  202.                    height: auto !important;
  203.                    object-fit: contain !important;
  204.                    box-sizing: border-box !important;
  205.                }
  206.            }
  207.        </style>
  208.    </head>
  209.  
  210.    <body class="text-slate-700">
  211.  
  212.        <!-- ========== Navbar Responsif ========== -->
  213.        <nav class="bg-white shadow-lg fixed w-full z-20 top-0">
  214.            <div class="container mx-auto px-4 py-3 flex justify-between items-center">
  215.                <!-- Logo/Nama Brand -->
  216.                <a href="#beranda" class="text-2xl font-bold text-blue-600">Hasan Foto</a>
  217.                
  218.  
  219.                <!-- Tautan Navigasi (Desktop) -->
  220.                <div class="hidden md:flex space-x-6 items-center">
  221.                    <a href="#beranda"
  222.                        class="text-slate-700 hover:text-blue-600 font-semibold transition-colors duration-300">Beranda</a>
  223.                    <a href="#services"
  224.                        class="text-slate-700 hover:text-blue-600 font-semibold transition-colors duration-300">Layanan</a>
  225.                    <a href="#portfolio-gallery"
  226.                        class="text-slate-700 hover:text-blue-600 font-semibold transition-colors duration-300">Galeri</a>
  227.  
  228.                </div>
  229.  
  230.                <!-- Tombol Hamburger (Mobile) -->
  231.                <button id="menu-button" class="md:hidden text-slate-700 hover:text-blue-600 focus:outline-none">
  232.                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
  233.                        xmlns="http://www.w3.org/2000/svg">
  234.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
  235.                            d="M4 6h16M4 12h16m-7 6h7">
  236.                        </path>
  237.                    </svg>
  238.                </button>
  239.            </div>
  240.            <!-- Menu Mobile yang bisa ditutup/dibuka -->
  241.            <div id="mobile-menu" class="hidden md:hidden bg-white shadow-inner pb-4">
  242.                <a href="#beranda"
  243.                    class="block py-2 px-4 text-slate-700 hover:bg-slate-100 transition-colors duration-300 font-semibold">Beranda</a>
  244.                <a href="#services"
  245.                    class="block py-2 px-4 text-slate-700 hover:bg-slate-100 transition-colors duration-300 font-semibold">Layanan</a>
  246.                <a href="#portfolio-gallery"
  247.                    class="block py-2 px-4 text-slate-700 hover:bg-slate-100 transition-colors duration-300 font-semibold">Galeri</a>
  248.  
  249.            </div>
  250.        </nav>
  251.        <!-- ========== Akhir Navbar ========== -->
  252.  
  253.        <!-- Bagian Header/Hero -->
  254.        <header id="beranda" class="hero-section text-white py-24 md:py-32 overflow-hidden ">
  255.            <div class="relative container mx-auto px-4 text-center z-10">
  256.                <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-4">Hasan Foto</h1>
  257.                
  258.                <p class="text-lg sm:text-xl md:text-2xl font-light mb-8">Abadikan setiap momen berharga dan ciptakan
  259.                    kenangan tak terlupakan bersama kami.</p>
  260.                <a href="#services"
  261.                    class="bg-white text-blue-600 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-blue-100 transition-all duration-300">Lihat
  262.                    Layanan Kami</a>
  263.            </div>
  264.        </header>
  265.  
  266.        <!-- Konten utama halaman -->
  267.        <main class="flex-grow container mx-auto px-4 py-8">
  268.            
  269.    <!-- Bagian Layanan Utama (Foto & Undangan) -->
  270.    <section id="services" class="py-16 md:py-24 bg-white">
  271.        <div class="container mx-auto px-4">
  272.            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Layanan Kami</h2>
  273.            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
  274.                <!-- Layanan Jasa Foto -->
  275.                <div
  276.                    class="bg-slate-50 p-6 md:p-8 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
  277.                    <h3 class="text-2xl font-bold text-blue-600 mb-4">Jasa Fotografi Sekolah</h3>
  278.                    <p class="mb-4 text-slate-600">Spesialisasi kami dalam mengabadikan momen-momen istimewa di
  279.                        sekolah:</p>
  280.                    <ul class="list-disc list-inside space-y-2 text-slate-600 pl-4">
  281.                        <li>Foto Wisuda TK & PAUD</li>
  282.                        <li>Dokumentasi Manasik Haji TK & PAUD</li>
  283.                        <li>Foto Raport / Ijazah SD,SMP,SMA/SMK</li>
  284.                        <li>Liputan Kegiatan Sekolah (Pentas Seni, Perpisahan, dll)</li>
  285.                    </ul>
  286.                </div>
  287.  
  288.                <!-- Layanan Jual Undangan -->
  289.                <div
  290.                    class="bg-slate-50 p-6 md:p-8 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
  291.                    <h3 class="text-2xl font-bold text-blue-600 mb-4">Penjualan Undangan</h3>
  292.                    <p class="mb-4 text-slate-600"> Abadikan momen bahagia Anda dengan undangan pernikahan yang
  293.                        indah, baik
  294.                        dalam bentuk blangko cetak maupun versi digital.
  295.                    </p>
  296.                    <ul class="list-disc list-inside space-y-2 text-slate-600 pl-4">
  297.                        <li>Undangan Blangko Pernikahan</li>
  298.                        <li>Undangan Pernikahan Website / Digital</li>
  299.                    </ul>
  300.                    <a href="#portfolio-gallery" class="mt-6 inline-block text-blue-600 font-semibold hover:underline">Lihat
  301.                        Galeri Kami
  302.                        &rarr;</a>
  303.                </div>
  304.            </div>
  305.        </div>
  306.    </section>
  307.  
  308.    <!-- Bagian Galeri dengan Tabs -->
  309.    <section id="portfolio-gallery" class="py-16 md:py-24 bg-slate-100">
  310.        <div class="container mx-auto px-4">
  311.            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Galeri Kami</h2>
  312.  
  313.            <!-- Tabs -->
  314.            <div class="flex flex-wrap justify-center gap-x-2 gap-y-3 md:gap-x-4 mb-8">
  315.                <button id="photo-tab"
  316.                    class="tab active px-4 md:px-6 py-2 rounded-full font-semibold text-sm md:text-base transition-colors duration-300 whitespace-nowrap">
  317.                    Galeri Foto
  318.                </button>
  319.                <button id="invitation-tab"
  320.                    class="tab px-4 md:px-6 py-2 rounded-full font-semibold text-sm md:text-base transition-colors duration-300 bg-slate-200 hover:bg-slate-300 text-slate-700 whitespace-nowrap">
  321.                    Blanko Undangan
  322.                </button>
  323.                <button id="digital-tab"
  324.                    class="tab px-4 md:px-6 py-2 rounded-full font-semibold text-sm md:text-base transition-colors duration-300 bg-slate-200 hover:bg-slate-300 text-slate-700 whitespace-nowrap">
  325.                    Undangan Digital
  326.                </button>
  327.            </div>
  328.  
  329.            <!-- Konten Tab 1: Galeri Foto -->
  330.            <div id="photo-content" class="tab-content active">
  331.                <div id="photo-grid" class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-6">
  332.  
  333.                    
  334.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  335.                            onclick="openModal('Wisuda Paud As-Salam', [&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+1&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+2&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+3&quot;], '2023-10-20 10:00:00', 'As-Salam, Cibarusah', '50 anak')">
  336.                            <img src="https://placehold.co/800x1000/fcd34d/ffffff?text=Wisuda Paud As-Salam" alt="Foto Wisuda Paud As-Salam"
  337.                                class="w-full h-48 object-cover ">
  338.                            <div class="p-4 text-center">
  339.                                <p class="text-lg font-semibold">Wisuda Paud As-Salam</p>
  340.                            </div>
  341.                        </div>
  342.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  343.                            onclick="openModal('Manasik Haji Nurul Huda', [&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+1&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+2&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+3&quot;], '', 'Masjid Agung Al-Falah, Bandung', '75 anak')">
  344.                            <img src="https://placehold.co/800x1000/fcd34d/ffffff?text=Manasik Haji Paud Nurul Huda" alt="Foto Manasik Haji Nurul Huda"
  345.                                class="w-full h-48 object-cover ">
  346.                            <div class="p-4 text-center">
  347.                                <p class="text-lg font-semibold">Manasik Haji Nurul Huda</p>
  348.                            </div>
  349.                        </div>
  350.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  351.                            onclick="openModal('Pentas Seni Sd Kota 02', [&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+1&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+2&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+3&quot;], '', 'Gedung Kesenian, Surabaya', '120 anak')">
  352.                            <img src="https://placehold.co/800x1000/fcd34d/ffffff?text=Pentas+Seni Sd Kota 02" alt="Foto Pentas Seni Sd Kota 02"
  353.                                class="w-full h-48 object-cover ">
  354.                            <div class="p-4 text-center">
  355.                                <p class="text-lg font-semibold">Pentas Seni Sd Kota 02</p>
  356.                            </div>
  357.                        </div>
  358.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  359.                            onclick="openModal('Pentas Seni Sd Kota 03', [&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+1&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+2&quot;,&quot;https:\/\/placehold.co\/3000x2398\/fcd34d\/ffffff?text=Pentas+Seni+3&quot;], '', 'Gedung Kesenian, Surabaya', '120 anak')">
  360.                            <img src="https://placehold.co/800x1000/fcd34d/ffffff?text=Pentas+Seni Sd Kota 03" alt="Foto Pentas Seni Sd Kota 03"
  361.                                class="w-full h-48 object-cover ">
  362.                            <div class="p-4 text-center">
  363.                                <p class="text-lg font-semibold">Pentas Seni Sd Kota 03</p>
  364.                            </div>
  365.                        </div>
  366.                    
  367.                </div>
  368.            </div>
  369.            <!-- Konten Tab 2: Blanko Undangan -->
  370.            <div id="invitation-content" class="tab-content">
  371.                
  372.                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  373.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  374.                            onclick="openInvitationModal([&quot;https:\/\/placehold.co\/400x500\/87CEEB\/ffffff?text=BLK-1800-01&quot;,&quot;https:\/\/placehold.co\/400x500\/87CEEB\/ffffff?text=BLK-1800-02&quot;])">
  375.                            <img src="https://placehold.co/400x500/87CEEB/ffffff?text=Harga+1800" alt="Harga 1800"
  376.                                class="w-full h-48 object-cover ">
  377.                            <div class="p-4 text-center">
  378.                                <p class="text-lg font-semibold">Harga 1800</p>
  379.                            </div>
  380.                        </div>
  381.                                            <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  382.                            onclick="openInvitationModal([&quot;https:\/\/placehold.co\/400x500\/A0A0A0\/ffffff?text=BLK-1500-01&quot;,&quot;https:\/\/placehold.co\/400x500\/A0A0A0\/ffffff?text=BLK-1500-02&quot;])">
  383.                            <img src="https://placehold.co/400x500/A0A0A0/ffffff?text=Harga+1500" alt="Harga 1500"
  384.                                class="w-full h-48 object-cover ">
  385.                            <div class="p-4 text-center">
  386.                                <p class="text-lg font-semibold">Harga 1500</p>
  387.                            </div>
  388.                        </div>
  389.                                    </div>
  390.  
  391.  
  392.            </div>
  393.  
  394.            <!-- Konten Tab 3: Undangan Digital -->
  395.            <div id="digital-content" class="tab-content">
  396.                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  397.                    <!-- Item Undangan Digital 1: Tema Bunga -->
  398.                    <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  399.                        onclick="openModal('Undangan Digital Tema Bunga', 'Undangan digital dengan sentuhan floral yang indah. Desain ini memberikan kesan romantis dan alami.', ['https://placehold.co/400x500/f87171/ffffff?text=Web+Undangan+1A', 'https://placehold.co/400x500/f87171/ffffff?text=Web+Undangan+1B'])">
  400.                        <img src="https://placehold.co/400x500/f87171/ffffff?text=Web+Undangan+1"
  401.                            alt="Undangan Digital Tema Bunga" class="w-full h-auto object-cover">
  402.                        <div class="p-4 text-center">
  403.                            <p class="text-lg font-semibold">Tema Bunga Klasik</p>
  404.                            <p class="text-sm text-slate-500 mt-1">Undangan digital dengan sentuhan floral yang
  405.                                indah.</p>
  406.                        </div>
  407.                    </div>
  408.                    <!-- Item Undangan Digital 2: Minimalis Modern -->
  409.                    <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  410.                        onclick="openModal('Undangan Digital Tema Minimalis', 'Desain bersih dan modern untuk Anda yang stylish. Tampilan yang elegan dan mudah diakses.', ['https://placehold.co/400x500/fbbf24/ffffff?text=Web+Undangan+2A', 'https://placehold.co/400x500/fbbf24/ffffff?text=Web+Undangan+2B'])">
  411.                        <img src="https://placehold.co/400x500/fbbf24/ffffff?text=Web+Undangan+2"
  412.                            alt="Undangan Digital Tema Minimalis" class="w-full h-auto object-cover">
  413.                        <div class="p-4 text-center">
  414.                            <p class="text-lg font-semibold">Tema Minimalis Modern</p>
  415.                            <p class="text-sm text-slate-500 mt-1">Desain bersih dan modern untuk Anda yang
  416.                                stylish.</p>
  417.                        </div>
  418.                    </div>
  419.                    <!-- Item Undangan Digital 3: Rustic Elegan -->
  420.                    <div class="bg-white rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300 cursor-pointer"
  421.                        onclick="openModal('Undangan Digital Tema Rustic', 'Gabungan nuansa alam dan elegansi dalam satu undangan. Desain unik dengan elemen kayu dan bunga kering.', ['https://placehold.co/400x500/a78bfa/ffffff?text=Web+Undangan+3A', 'https://placehold.co/400x500/a78bfa/ffffff?text=Web+Undangan+3B'])">
  422.                        <img src="https://placehold.co/400x500/a78bfa/ffffff?text=Web+Undangan+3"
  423.                            alt="Undangan Digital Tema Rustic" class="w-full h-auto object-cover">
  424.                        <div class="p-4 text-center">
  425.                            <p class="text-lg font-semibold">Tema Rustic Elegan</p>
  426.                            <p class="text-sm text-slate-500 mt-1">Gabungan nuansa alam dan elegansi dalam satu
  427.                                undangan.</p>
  428.                        </div>
  429.                    </div>
  430.                </div>
  431.            </div>
  432.        </div>
  433.    </section>
  434.  
  435.    <!-- Bagian Mengapa Memilih Kami -->
  436.    <section id="why-us" class="py-16 md:py-24 bg-white">
  437.        <div class="container mx-auto px-4">
  438.            <h2 class="text-3xl md:text-4xl font-bold text-center mb-12">Mengapa Memilih Kami?</h2>
  439.            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
  440.                <!-- Keunggulan 1 -->
  441.                <div class="bg-slate-100 p-6 rounded-lg shadow-md text-center">
  442.                    <div class="text-3xl text-blue-600 mb-4">📸</div>
  443.                    <h4 class="font-semibold text-lg mb-2">Fotografer Profesional</h4>
  444.                    <p class="text-sm text-slate-600">Tim berpengalaman yang ramah dan sabar, terutama dengan
  445.                        anak-anak.</p>
  446.                </div>
  447.                <!-- Keunggulan 2 -->
  448.                <div class="bg-slate-100 p-6 rounded-lg shadow-md text-center">
  449.                    <div class="text-3xl text-blue-600 mb-4">💎</div>
  450.                    <h4 class="font-semibold text-lg mb-2">Kualitas Terbaik</h4>
  451.                    <p class="text-sm text-slate-600">Kami menggunakan peralatan terbaik untuk hasil foto yang
  452.                        tajam dan cetakan yang berkualitas.</p>
  453.                </div>
  454.                <!-- Keunggulan 3 -->
  455.                <div class="bg-slate-100 p-6 rounded-lg shadow-md text-center">
  456.                    <div class="text-3xl text-blue-600 mb-4">📦</div>
  457.                    <h4 class="font-semibold text-lg mb-2">Paket Fleksibel</h4>
  458.                    <p class="text-sm text-slate-600">Berbagai pilihan paket yang dapat disesuaikan dengan
  459.                        kebutuhan dan anggaran Anda.</p>
  460.                </div>
  461.                <!-- Keunggulan 4 -->
  462.                <div class="bg-slate-100 p-6 rounded-lg shadow-md text-center">
  463.                    <div class="text-3xl text-blue-600 mb-4">⏱️</div>
  464.                    <h4 class="font-semibold text-lg mb-2">Proses Cepat</h4>
  465.                    <p class="text-sm text-slate-600">Kami memastikan hasil cetak foto dan undangan Anda selesai
  466.                        tepat waktu.</p>
  467.                </div>
  468.            </div>
  469.        </div>
  470.    </section>
  471.  
  472.  
  473.  
  474.        </main>
  475.  
  476.        <footer class="bg-gray-800 text-white py-8">
  477.            <div class="container mx-auto px-4">
  478.                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
  479.                    <div>
  480.                        <h4 class="text-xl font-bold mb-4">Hasan Foto</h4>
  481.                        
  482.                        <p class="text-sm text-slate-300">Mengabadikan momen spesial anak-anak dengan sentuhan
  483.                            profesional
  484.                            dan penuh kasih sayang.
  485.                        </p>
  486.                    </div>
  487.                    <div>
  488.                        <h4 class="text-xl font-bold mb-4">Layanan</h4>
  489.                        <ul class="text-sm space-y-2">
  490.                            <li><a href="#services" class="hover:underline text-slate-300">Jasa Fotografi</a></li>
  491.                            <li><a href="#portfolio-gallery" class="hover:underline text-slate-300">Galeri Kami</a></li>
  492.                        </ul>
  493.                    </div>
  494.                    <div>
  495.                        <h4 class="text-xl font-bold mb-4">Hubungi Kami</h4>
  496.                        <ul class="text-sm space-y-2 text-slate-300">
  497.                            <li>Telepon: 0812-3456-7890</li>
  498.                            <li>Email: info@.com</li>
  499.                            <li>Alamat: Jl. Contoh No. 123, Kota Anda</li>
  500.                        </ul>
  501.                    </div>
  502.                </div>
  503.                <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
  504.                    <p>&copy; 2025 Hasan Foto. Semua hak cipta dilindungi.</p>
  505.                    
  506.                </div>
  507.            </div>
  508.        </footer>
  509.  
  510.        <!-- Modal Pop-up Galeri Foto -->
  511.        <div id="gallery-modal"
  512.            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 hidden transition-opacity duration-300">
  513.            <div class="relative w-full max-w-lg sm:max-w-2xl md:max-w-3xl mx-2 sm:mx-8 rounded-2xl shadow-2xl bg-white flex flex-col items-center p-0 sm:p-6 animate-fade-in"
  514.                style="min-height:200px; max-height:95vh;">
  515.                <!-- Tombol Close -->
  516.                <button id="gallery-close"
  517.                    class="absolute top-2 right-2 sm:top-3 sm:right-3 text-gray-500 hover:text-red-500 text-2xl font-bold focus:outline-none transition-colors duration-200 bg-white bg-opacity-80 rounded-full w-9 h-9 flex items-center justify-center"
  518.                    aria-label="Tutup">&times;</button>
  519.                <!-- Navigasi Kiri -->
  520.                <button id="gallery-prev"
  521.                    class="absolute left-1 sm:left-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full shadow p-2 text-2xl text-gray-700 hover:text-blue-600 focus:outline-none transition-all duration-200 z-10 block sm:block"
  522.                    aria-label="Sebelumnya">
  523.                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
  524.                        class="w-7 h-7">
  525.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
  526.                    </svg>
  527.                </button>
  528.                <!-- Navigasi Kanan -->
  529.                <button id="gallery-next"
  530.                    class="absolute right-1 sm:right-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full shadow p-2 text-2xl text-gray-700 hover:text-blue-600 focus:outline-none transition-all duration-200 z-10 block sm:block"
  531.                    aria-label="Berikutnya">
  532.                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
  533.                        class="w-7 h-7">
  534.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
  535.                    </svg>
  536.                </button>
  537.                <!-- Gambar -->
  538.                <div
  539.                    class="flex-1 flex items-center justify-center w-full min-h-[180px] sm:min-h-[250px] max-h-[60vh] sm:max-h-[70vh]">
  540.                    <img id="gallery-image" src="" alt="Galeri"
  541.                        class="max-h-[60vh] sm:max-h-[70vh] w-auto max-w-full object-contain rounded-xl shadow-lg transition-opacity duration-500 opacity-0 bg-gray-100"
  542.                        style="background: #f3f4f6; max-width:98vw;" />
  543.                </div>
  544.                <!-- Indikator & Caption -->
  545.                <div class="w-full flex flex-col items-center mt-2 mb-2 px-2">
  546.                    <span id="gallery-indicator"
  547.                        class="text-xs sm:text-sm text-gray-600 bg-white bg-opacity-80 rounded-full px-2 sm:px-3 py-1 shadow font-semibold"></span>
  548.                    <span id="gallery-caption"
  549.                        class="text-xs sm:text-base text-gray-700 mt-1 text-center break-words"></span>
  550.                </div>
  551.            </div>
  552.        </div>
  553.  
  554.        <!-- Modal Pop-up Blanko Undangan -->
  555.        <div id="invitation-modal"
  556.            class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 hidden transition-opacity duration-300">
  557.            <div class="relative w-full max-w-lg sm:max-w-2xl md:max-w-3xl mx-2 sm:mx-8 rounded-2xl shadow-2xl bg-white flex flex-col items-center p-0 sm:p-6 animate-fade-in"
  558.                style="min-height:200px; max-height:95vh;">
  559.                <!-- Tombol Close -->
  560.                <button id="invitation-close"
  561.                    class="absolute top-2 right-2 sm:top-3 sm:right-3 text-gray-500 hover:text-red-500 text-2xl font-bold focus:outline-none transition-colors duration-200 bg-white bg-opacity-80 rounded-full w-9 h-9 flex items-center justify-center"
  562.                    aria-label="Tutup">&times;</button>
  563.                <!-- Navigasi Kiri -->
  564.                <button id="invitation-prev"
  565.                    class="absolute left-1 sm:left-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full shadow p-2 text-2xl text-gray-700 hover:text-blue-600 focus:outline-none transition-all duration-200 z-10 block sm:block"
  566.                    aria-label="Sebelumnya">
  567.                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
  568.                        class="w-7 h-7">
  569.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
  570.                    </svg>
  571.                </button>
  572.                <!-- Navigasi Kanan -->
  573.                <button id="invitation-next"
  574.                    class="absolute right-1 sm:right-2 top-1/2 -translate-y-1/2 bg-white bg-opacity-80 hover:bg-opacity-100 rounded-full shadow p-2 text-2xl text-gray-700 hover:text-blue-600 focus:outline-none transition-all duration-200 z-10 block sm:block"
  575.                    aria-label="Berikutnya">
  576.                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
  577.                        class="w-7 h-7">
  578.                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
  579.                    </svg>
  580.                </button>
  581.                <!-- Gambar -->
  582.                <div
  583.                    class="flex-1 flex items-center justify-center w-full min-h-[180px] sm:min-h-[250px] max-h-[60vh] sm:max-h-[70vh]">
  584.                    <img id="invitation-image" src="" alt="Undangan"
  585.                        class="max-h-[60vh] sm:max-h-[70vh] w-auto max-w-full object-contain rounded-xl shadow-lg transition-opacity duration-500 opacity-0 bg-gray-100"
  586.                        style="background: #f3f4f6; max-width:98vw;" />
  587.                </div>
  588.                <!-- Indikator -->
  589.                <div class="w-full flex flex-col items-center mt-2 mb-2 px-2">
  590.                    <span id="invitation-indicator"
  591.                        class="text-xs sm:text-sm text-gray-600 bg-white bg-opacity-80 rounded-full px-2 sm:px-3 py-1 shadow font-semibold"></span>
  592.                </div>
  593.                
  594.            </div>
  595.        </div>
  596.  
  597.        <script>
  598.            // ========== Modal Pop-up Blanko Undangan ==========
  599.            document.addEventListener('DOMContentLoaded', function() {
  600.                let invitationImages = [];
  601.                let invitationCurrent = 0;
  602.                const modal = document.getElementById('invitation-modal');
  603.                const img = document.getElementById('invitation-image');
  604.                const indicator = document.getElementById('invitation-indicator');
  605.                const closeBtn = document.getElementById('invitation-close');
  606.                const prevBtn = document.getElementById('invitation-prev');
  607.                const nextBtn = document.getElementById('invitation-next');
  608.  
  609.                window.openInvitationModal = function(images) {
  610.                    invitationImages = images;
  611.                    invitationCurrent = 0;
  612.                    showInvitationImage(0);
  613.                    modal.classList.remove('hidden');
  614.                    setTimeout(() => {
  615.                        modal.classList.add('opacity-100');
  616.                    }, 10);
  617.                    document.body.classList.add('overflow-hidden');
  618.                }
  619.  
  620.                function closeModal() {
  621.                    modal.classList.remove('opacity-100');
  622.                    setTimeout(() => {
  623.                        modal.classList.add('hidden');
  624.                    }, 250);
  625.                    document.body.classList.remove('overflow-hidden');
  626.                }
  627.  
  628.                function showInvitationImage(idx) {
  629.                    if (!invitationImages.length) return;
  630.                    invitationCurrent = idx;
  631.                    img.classList.remove('opacity-100');
  632.                    img.classList.add('opacity-0');
  633.                    setTimeout(() => {
  634.                        img.src = invitationImages[invitationCurrent];
  635.                        img.onload = () => {
  636.                            img.classList.remove('opacity-0');
  637.                            img.classList.add('opacity-100');
  638.                        };
  639.                    }, 200);
  640.                    indicator.textContent = (invitationCurrent + 1) + ' / ' + invitationImages.length;
  641.                    prevBtn.style.display = invitationImages.length > 1 ? '' : 'none';
  642.                    nextBtn.style.display = invitationImages.length > 1 ? '' : 'none';
  643.                }
  644.  
  645.                function nextImage() {
  646.                    if (invitationImages.length < 2) return;
  647.                    showInvitationImage((invitationCurrent + 1) % invitationImages.length);
  648.                }
  649.  
  650.                function prevImage() {
  651.                    if (invitationImages.length < 2) return;
  652.                    showInvitationImage((invitationCurrent - 1 + invitationImages.length) % invitationImages.length);
  653.                }
  654.  
  655.                if (closeBtn) closeBtn.addEventListener('click', closeModal);
  656.                if (nextBtn) nextBtn.addEventListener('click', nextImage);
  657.                if (prevBtn) prevBtn.addEventListener('click', prevImage);
  658.  
  659.                if (modal) {
  660.                    modal.addEventListener('mousedown', function(e) {
  661.                        if (e.target === modal) closeModal();
  662.                    });
  663.                }
  664.                document.addEventListener('keydown', function(e) {
  665.                    if (!modal.classList.contains('hidden')) {
  666.                        if (e.key === 'Escape') closeModal();
  667.                        if (e.key === 'ArrowRight') nextImage();
  668.                        if (e.key === 'ArrowLeft') prevImage();
  669.                    }
  670.                });
  671.            });
  672.            // ========== Modal Pop-up Galeri Foto Modern ==========
  673.            document.addEventListener('DOMContentLoaded', function() {
  674.                let galleryImages = [];
  675.                let galleryTitle = '';
  676.                let galleryCurrent = 0;
  677.                let galleryLocation = '';
  678.                let galleryNumberOfChildren = '';
  679.                const modal = document.getElementById('gallery-modal');
  680.                const img = document.getElementById('gallery-image');
  681.                const indicator = document.getElementById('gallery-indicator');
  682.                const caption = document.getElementById('gallery-caption');
  683.                const closeBtn = document.getElementById('gallery-close');
  684.                const prevBtn = document.getElementById('gallery-prev');
  685.                const nextBtn = document.getElementById('gallery-next');
  686.  
  687.                let galleryTanggal = '';
  688.                window.openModal = function(title, images, time, location, numberOfChildren) {
  689.                    galleryImages = images;
  690.                    galleryTitle = title;
  691.                    galleryLocation = location;
  692.                    galleryNumberOfChildren = numberOfChildren;
  693.                    galleryCurrent = 0;
  694.                    // Format tanggal (dari string time, misal '2025-08-25 14:32:10')
  695.                    galleryTanggal = '';
  696.                    if (time) {
  697.                        let tgl = time.split(' ')[0];
  698.                        let [year, month, day] = tgl.split('-');
  699.                        const bulan = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus',
  700.                            'September', 'Oktober', 'November', 'Desember'
  701.                        ];
  702.                        galleryTanggal = day + ' ' + bulan[parseInt(month, 10) - 1] + ' ' + year;
  703.                    }
  704.                    showImage(0);
  705.                    // Set time if element exists (opsional, jika ingin tetap tampilkan di bawah)
  706.                    const timeEl = document.getElementById('gallery-time');
  707.                    if (timeEl) timeEl.textContent = galleryTanggal;
  708.                    modal.classList.remove('hidden');
  709.                    setTimeout(() => {
  710.                        modal.classList.add('opacity-100');
  711.                    }, 10);
  712.                    document.body.classList.add('overflow-hidden');
  713.                }
  714.  
  715.                function closeModal() {
  716.                    modal.classList.remove('opacity-100');
  717.                    setTimeout(() => {
  718.                        modal.classList.add('hidden');
  719.                    }, 250);
  720.                    document.body.classList.remove('overflow-hidden');
  721.                }
  722.  
  723.                function showImage(idx) {
  724.                    if (!galleryImages.length) return;
  725.                    galleryCurrent = idx;
  726.                    img.classList.remove('opacity-100');
  727.                    img.classList.add('opacity-0');
  728.                    setTimeout(() => {
  729.                        img.src = galleryImages[galleryCurrent];
  730.                        img.onload = () => {
  731.                            img.classList.remove('opacity-0');
  732.                            img.classList.add('opacity-100');
  733.                        };
  734.                    }, 200);
  735.                    indicator.textContent = (galleryCurrent + 1) + ' / ' + galleryImages.length;
  736.                    // Format caption: Judul - Tanggal - Lokasi (Jumlah Anak)
  737.                    let cap = galleryTitle;
  738.                    if (galleryTanggal) cap += ' - ' + galleryTanggal;
  739.                    if (galleryLocation) cap += ' - ' + galleryLocation;
  740.                    if (galleryNumberOfChildren) cap += ' (' + galleryNumberOfChildren + ')';
  741.                    caption.textContent = cap;
  742.                    // Show/hide nav
  743.                    prevBtn.style.display = galleryImages.length > 1 ? '' : 'none';
  744.                    nextBtn.style.display = galleryImages.length > 1 ? '' : 'none';
  745.                }
  746.  
  747.                function nextImage() {
  748.                    if (galleryImages.length < 2) return;
  749.                    showImage((galleryCurrent + 1) % galleryImages.length);
  750.                }
  751.  
  752.                function prevImage() {
  753.                    if (galleryImages.length < 2) return;
  754.                    showImage((galleryCurrent - 1 + galleryImages.length) % galleryImages.length);
  755.                }
  756.  
  757.                if (closeBtn) closeBtn.addEventListener('click', closeModal);
  758.                if (nextBtn) nextBtn.addEventListener('click', nextImage);
  759.                if (prevBtn) prevBtn.addEventListener('click', prevImage);
  760.  
  761.                // Close modal on click outside image
  762.                if (modal) {
  763.                    modal.addEventListener('mousedown', function(e) {
  764.                        if (e.target === modal) closeModal();
  765.                    });
  766.                }
  767.                // ESC key
  768.                document.addEventListener('keydown', function(e) {
  769.                    if (!modal.classList.contains('hidden')) {
  770.                        if (e.key === 'Escape') closeModal();
  771.                        if (e.key === 'ArrowRight') nextImage();
  772.                        if (e.key === 'ArrowLeft') prevImage();
  773.                    }
  774.                });
  775.            });
  776.            // Data untuk setiap item galeri
  777.            // Saya menambahkan data 'location' dan 'numberOfChildren' di sini.
  778.            document.addEventListener('DOMContentLoaded', function() {
  779.                const photoTab = document.getElementById('photo-tab');
  780.                const invitationTab = document.getElementById('invitation-tab');
  781.                const digitalTab = document.getElementById('digital-tab');
  782.                const photoContent = document.getElementById('photo-content');
  783.                const invitationContent = document.getElementById('invitation-content');
  784.                const digitalContent = document.getElementById('digital-content');
  785.  
  786.                const tabs = [photoTab, invitationTab, digitalTab];
  787.                const contents = [photoContent, invitationContent, digitalContent];
  788.  
  789.                // Fungsi untuk menampilkan tab yang dipilih
  790.                function showTab(tabToShow, contentToShow) {
  791.                    tabs.forEach(tab => {
  792.                        tab.classList.remove('active', 'bg-blue-600', 'text-white');
  793.                        tab.classList.add('bg-slate-200', 'hover:bg-slate-300', 'text-slate-700');
  794.                    });
  795.  
  796.                    contents.forEach(content => content.classList.remove('active'));
  797.  
  798.                    tabToShow.classList.add('active', 'bg-blue-600', 'text-white');
  799.                    tabToShow.classList.remove('bg-slate-200', 'hover:bg-slate-300', 'text-slate-700');
  800.                    contentToShow.classList.add('active');
  801.                }
  802.  
  803.                // Tambahkan event listener untuk klik tab
  804.                photoTab.addEventListener('click', function() {
  805.                    showTab(photoTab, photoContent);
  806.                });
  807.  
  808.                invitationTab.addEventListener('click', function() {
  809.                    showTab(invitationTab, invitationContent);
  810.                });
  811.  
  812.                digitalTab.addEventListener('click', function() {
  813.                    showTab(digitalTab, digitalContent);
  814.                });
  815.  
  816.                // Tampilkan tab foto secara default saat halaman dimuat
  817.                showTab(photoTab, photoContent);
  818.            });
  819.  
  820.            // ========== JavaScript untuk Navbar ==========
  821.            document.addEventListener('DOMContentLoaded', function() {
  822.                const menuButton = document.getElementById('menu-button');
  823.                const mobileMenu = document.getElementById('mobile-menu');
  824.  
  825.                // Fungsi untuk menampilkan atau menyembunyikan menu mobile
  826.                menuButton.addEventListener('click', function() {
  827.                    mobileMenu.classList.toggle('hidden');
  828.                });
  829.  
  830.                // Tutup menu mobile ketika salah satu tautan diklik
  831.                const mobileLinks = mobileMenu.querySelectorAll('a');
  832.                mobileLinks.forEach(link => {
  833.                    link.addEventListener('click', function() {
  834.                        mobileMenu.classList.add('hidden');
  835.                    });
  836.                });
  837.            });
  838.            // ========== Akhir JavaScript Navbar ==========
  839.  
  840.            // ========== JavaScript Smooth Scrolling ==========
  841.            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  842.                anchor.addEventListener('click', function(e) {
  843.                    e.preventDefault();
  844.                    document.querySelector(this.getAttribute('href')).scrollIntoView({
  845.                        behavior: 'smooth'
  846.                    });
  847.                });
  848.            });
  849.            // ========== Akhir JavaScript Smooth Scrolling ==========
  850.        </script>
  851.    </body>
  852.  
  853.    </html>
  854.  

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda