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://raudlahleuwilimus.ponpes.id

  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.    <title>Pondok Pesantren Raudlah Leuwilimus</title>
  7.    <meta name="description" content="Website resmi Pondok Pesantren Raudlah Leuwilimus — Mendidik santri berakhlak mulia melalui pendidikan Islam, tahfidz Al-Qur&#039;an, kajian kitab, dan pembinaan karakter di Leuwilimus.">
  8.    <meta property="og:title" content="Pondok Pesantren Raudlah Leuwilimus">
  9.    <meta property="og:description" content="Website resmi Pondok Pesantren Raudlah Leuwilimus — Mendidik santri berakhlak mulia melalui pendidikan Islam, tahfidz Al-Qur&#039;an, kajian kitab, dan pembinaan karakter di Leuwilimus.">
  10.    <meta property="og:url" content="http://raudlahleuwilimus.ponpes.id/">
  11.    <meta property="og:image" content="http://raudlahleuwilimus.ponpes.id/assets/ogimage.jpg">
  12.    <meta property="og:type" content="website">
  13.    <meta property="og:site_name" content="raudlahleuwilimus.ponpes.id">
  14.    <meta name="twitter:card" content="summary_large_image">
  15.    <meta name="twitter:title" content="Pondok Pesantren Raudlah Leuwilimus">
  16.    <meta name="twitter:description" content="Website resmi Pondok Pesantren Raudlah Leuwilimus — Mendidik santri berakhlak mulia melalui pendidikan Islam, tahfidz Al-Qur&#039;an, kajian kitab, dan pembinaan karakter di Leuwilimus.">
  17.    <meta name="twitter:image" content="http://raudlahleuwilimus.ponpes.id/assets/ogimage.jpg">
  18.    <link rel="canonical" href="https://raudlahleuwilimus.ponpes.id/">
  19.    <link rel="icon" href="https://raudlahleuwilimus.ponpes.id/assets/ponpes.png">
  20.    <!-- Tailwind CSS CDN -->
  21.    <script src="https://cdn.tailwindcss.com" type="7a5479e3b9a5ca59e65a5f54-text/javascript"></script>
  22. </head>
  23. <body>
  24.  
  25. <!-- Navbar: clean blue variant -->
  26. <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 bg-white/90 backdrop-blur border-b border-gray-100">
  27.  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  28.    <div class="h-16 flex items-center justify-between">
  29.      <a href="#beranda" class="flex items-center space-x-3">
  30.        <img src="assets/ponpes.png" alt="Logo" class="h-9">
  31.        <span class="text-blue-700 font-extrabold tracking-tight">Pondok Pesantren
  32.        </span>
  33.      </a>
  34.      <div class="hidden md:flex items-center space-x-8">
  35.        <a href="#beranda" class="text-gray-700 hover:text-blue-600">Beranda</a>
  36.        <a href="#tentang" class="text-gray-700 hover:text-blue-600">Tentang</a>
  37.        <a href="#fasilitas" class="text-gray-700 hover:text-blue-600">Fasilitas</a>
  38.  <a href="#guru" class="text-gray-700 hover:text-blue-600">Pengajar</a>
  39.        <a href="#kontak" class="text-gray-700 hover:text-blue-600">Kontak</a>
  40.        <a href="#kontak" class="px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700">Daftar</a>
  41.      </div>
  42.      <button id="mobile-menu-btn" class="md:hidden text-gray-700 hover:text-blue-600">
  43.        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
  44.      </button>
  45.    </div>
  46.    <div id="mobile-menu" class="md:hidden hidden pb-3">
  47.      <div class="flex flex-col space-y-3">
  48.        <a href="#beranda" class="text-gray-700 hover:text-blue-600">Beranda</a>
  49.        <a href="#tentang" class="text-gray-700 hover:text-blue-600">Tentang</a>
  50.        <a href="#fasilitas" class="text-gray-700 hover:text-blue-600">Fasilitas</a>
  51.  <a href="#guru" class="text-gray-700 hover:text-blue-600">Pengajar</a>
  52.        <a href="#kontak" class="text-gray-700 hover:text-blue-600">Kontak</a>
  53.        <a href="#kontak" class="px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold w-max">Daftar</a>
  54.      </div>
  55.    </div>
  56.  </div>
  57. </nav>
  58.  
  59. <!-- Hero: full-bleed background image with overlay + floating stats card -->
  60. <section id="beranda" class="pt-16">
  61.    <div class="relative h-[70vh] min-h-[520px] bg-gray-900">
  62.    <img src="assets/hero.jpg" alt="Hero" class="absolute inset-0 w-full h-full object-cover">
  63.    <div class="absolute inset-0 bg-gradient-to-br from-blue-900/60 via-blue-800/40 to-indigo-900/60"></div>
  64.    <div class="relative z-10 h-full">
  65.      <div class="max-w-7xl mx-auto h-full px-4 sm:px-6 lg:px-8 flex items-center">
  66.        <div class="max-w-2xl">
  67.          <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight text-white">
  68.            Pondok Pesantren Raudlah Leuwilimus          </h1>
  69.          <p class="mt-6 text-lg md:text-xl text-blue-100">
  70.            Website resmi Pondok Pesantren Raudlah Leuwilimus — Mendidik santri berakhlak mulia melalui pendidikan Islam, tahfidz Al-Qur&#039;an, kajian kitab, dan pembinaan karakter di Leuwilimus.          </p>
  71.          <div class="mt-8 flex flex-col sm:flex-row gap-4">
  72.            <a href="#tentang" class="px-8 py-4 rounded-xl bg-white text-blue-700 font-semibold shadow hover:bg-gray-100">Pelajari Lebih Lanjut</a>
  73.            <a href="#kontak" class="px-8 py-4 rounded-xl border-2 border-white text-white font-semibold hover:bg-white/10">Hubungi Kami</a>
  74.          </div>
  75.        </div>
  76.      </div>
  77.      <!-- Floating stats card -->
  78.      <div class="absolute -bottom-12 left-0 right-0">
  79.        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  80.        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
  81.            <div class="bg-white/90 backdrop-blur rounded-xl p-5 text-center shadow">
  82.              <div class="text-2xl font-bold text-blue-700">500+</div>
  83.              <div class="text-gray-700 text-sm">Siswa</div>
  84.            </div>
  85.            <div class="bg-white/90 backdrop-blur rounded-xl p-5 text-center shadow">
  86.              <div class="text-2xl font-bold text-indigo-700">50+</div>
  87.              <div class="text-gray-700 text-sm">Guru</div>
  88.            </div>
  89.            <div class="bg-white/90 backdrop-blur rounded-xl p-5 text-center shadow">
  90.              <div class="text-2xl font-bold text-sky-700">15+</div>
  91.              <div class="text-gray-700 text-sm">Tahun</div>
  92.            </div>
  93.            <div class="bg-white/90 backdrop-blur rounded-xl p-5 text-center shadow">
  94.              <div class="text-2xl font-bold text-blue-700">95%</div>
  95.              <div class="text-gray-700 text-sm">Kelulusan</div>
  96.            </div>
  97.          </div>
  98.        </div>
  99.      </div>
  100.    </div>
  101.  </div>
  102. </section>
  103. <div class="h-16"></div>
  104.  
  105. <!-- Tentang: step/timeline style -->
  106. <section id="tentang" class="py-20 bg-white">
  107.  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  108.  <div class="grid lg:grid-cols-2 gap-12 items-start">
  109.      <div>
  110.  <h2 class="text-4xl font-bold text-gray-900">Tentang Pesantren</h2>
  111.        <p class="mt-4 text-lg text-gray-600">
  112.          Pondok Pesantren Raudlah Leuwilimus berkomitmen dalam pendidikan Islam yang berlandaskan Al-Qur&#039;an dan Sunnah, mencetak santri berilmu dan berakhlak mulia.        </p>
  113.        <div class="mt-8 space-y-6">
  114.          <div class="flex items-start space-x-4">
  115.            <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div>
  116.            <div><h3 class="font-semibold text-gray-900">Pendidikan Islam</h3><p class="text-gray-600">Diniyah, tahfidz, dan penguatan akhlak.</p></div>
  117.          </div>
  118.          <div class="flex items-start space-x-4">
  119.            <div class="w-10 h-10 rounded-xl bg-indigo-100 text-indigo-700 flex items-center justify-center"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg></div>
  120.            <div><h3 class="font-semibold text-gray-900">Pembinaan Akhlak</h3><p class="text-gray-600">Menanamkan adab dan keteladanan.</p></div>
  121.          </div>
  122.          <div class="flex items-start space-x-4">
  123.            <div class="w-10 h-10 rounded-xl bg-sky-100 text-sky-700 flex items-center justify-center"><svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div>
  124.            <div><h3 class="font-semibold text-gray-900">Inovasi Pembelajaran</h3><p class="text-gray-600">Talaqqi, halaqah, dan teknologi pendukung.</p></div>
  125.          </div>
  126.        </div>
  127.      </div>
  128.      <div>
  129.        <div class="relative">
  130.          <div class="aspect-[4/3] rounded-3xl overflow-hidden shadow">
  131.            <img src="assets/hero2.jpg" alt="Sekolah" class="w-full h-full object-cover">
  132.          </div>
  133.          <div class="absolute -bottom-6 -left-6 w-32 h-32 bg-blue-200 rounded-3xl -z-10"></div>
  134.          <div class="absolute -top-6 -right-6 w-24 h-24 bg-indigo-200 rounded-full -z-10"></div>
  135.        </div>
  136.      </div>
  137.    </div>
  138.  </div>
  139. </section>
  140.  
  141. <!-- Fasilitas: staggered cards with subtle stripes -->
  142. <section id="fasilitas" class="py-20 bg-gray-50">
  143.  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  144.    <div class="flex items-end justify-between mb-8">
  145.      <div>
  146.  <h2 class="text-4xl font-bold text-gray-900">Fasilitas Pesantren</h2>
  147.        <p class="mt-2 text-gray-600">Sarana modern untuk mendukung pembelajaran.</p>
  148.      </div>
  149.    </div>
  150.    <div class="grid md:grid-cols-3 gap-6">
  151.                      <div class="relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition">
  152.          <div class="pointer-events-none absolute inset-0 rounded-2xl opacity-[0.06]" style="background-image: repeating-linear-gradient(45deg,#000 0,#000 2px,transparent 2px,transparent 10px);"></div>
  153.          <div class="relative">
  154.            <div class="w-12 h-12 rounded-xl text-white flex items-center justify-center mb-4 bg-blue-600">
  155.                              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
  156.                          </div>
  157.            <h3 class="text-lg font-semibold text-gray-900 mb-1">Masjid &amp; Mushola</h3>
  158.            <p class="text-gray-600">Sarana ibadah utama untuk kegiatan shalat berjamaah dan kajian.</p>
  159.          </div>
  160.        </div>
  161.                      <div class="relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition">
  162.          <div class="pointer-events-none absolute inset-0 rounded-2xl opacity-[0.06]" style="background-image: repeating-linear-gradient(45deg,#000 0,#000 2px,transparent 2px,transparent 10px);"></div>
  163.          <div class="relative">
  164.            <div class="w-12 h-12 rounded-xl text-white flex items-center justify-center mb-4 bg-indigo-600">
  165.                              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
  166.                          </div>
  167.            <h3 class="text-lg font-semibold text-gray-900 mb-1">Asrama Santri</h3>
  168.            <p class="text-gray-600">Asrama nyaman dengan pengasuhan 24 jam untuk pembinaan karakter.</p>
  169.          </div>
  170.        </div>
  171.                      <div class="relative bg-white rounded-2xl p-6 shadow-sm hover:shadow-xl transition">
  172.          <div class="pointer-events-none absolute inset-0 rounded-2xl opacity-[0.06]" style="background-image: repeating-linear-gradient(45deg,#000 0,#000 2px,transparent 2px,transparent 10px);"></div>
  173.          <div class="relative">
  174.            <div class="w-12 h-12 rounded-xl text-white flex items-center justify-center mb-4 bg-sky-600">
  175.                              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
  176.                          </div>
  177.            <h3 class="text-lg font-semibold text-gray-900 mb-1">Madrasah Diniyah</h3>
  178.            <p class="text-gray-600">Kegiatan belajar kitab kuning, tahfidz, dan kajian keislaman terstruktur.</p>
  179.          </div>
  180.        </div>
  181.          </div>
  182.  </div>
  183. </section>
  184.  
  185. <!-- Guru: bordered cards with top accent -->
  186. <section id="guru" class="py-20 bg-white">
  187.  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  188.    <div class="text-center mb-12">
  189.  <h2 class="text-4xl font-bold text-gray-900">Asatidz/Astatidzah</h2>
  190.      <p class="mt-3 text-gray-600">Berpengalaman dan berdedikasi.</p>
  191.    </div>
  192.    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
  193.              <div class="rounded-2xl border border-gray-100 hover:shadow-lg transition overflow-hidden">
  194.          <div class="h-1 w-full bg-gradient-to-r from-blue-600 via-indigo-600 to-sky-600"></div>
  195.          <div class="p-6 flex flex-col items-center">
  196.            <div class="w-24 h-24 rounded-full overflow-hidden ring-4 ring-blue-100">
  197.              <img src="assets/guru1.jpg" alt="Ust. Ahmad Fauzi" class="w-full h-full object-cover">
  198.            </div>
  199.            <h3 class="mt-4 text-lg font-semibold text-gray-900 text-center">Ust. Ahmad Fauzi</h3>
  200.            <p class="text-blue-700 font-medium text-sm text-center">Tahfidz Al-Qur&#039;an</p>
  201.          </div>
  202.        </div>
  203.              <div class="rounded-2xl border border-gray-100 hover:shadow-lg transition overflow-hidden">
  204.          <div class="h-1 w-full bg-gradient-to-r from-blue-600 via-indigo-600 to-sky-600"></div>
  205.          <div class="p-6 flex flex-col items-center">
  206.            <div class="w-24 h-24 rounded-full overflow-hidden ring-4 ring-blue-100">
  207.              <img src="assets/guru2.jpg" alt="Ustadzah Siti Maryam" class="w-full h-full object-cover">
  208.            </div>
  209.            <h3 class="mt-4 text-lg font-semibold text-gray-900 text-center">Ustadzah Siti Maryam</h3>
  210.            <p class="text-blue-700 font-medium text-sm text-center">Fiqih &amp; Akhlak</p>
  211.          </div>
  212.        </div>
  213.              <div class="rounded-2xl border border-gray-100 hover:shadow-lg transition overflow-hidden">
  214.          <div class="h-1 w-full bg-gradient-to-r from-blue-600 via-indigo-600 to-sky-600"></div>
  215.          <div class="p-6 flex flex-col items-center">
  216.            <div class="w-24 h-24 rounded-full overflow-hidden ring-4 ring-blue-100">
  217.              <img src="assets/guru3.jpg" alt="Ust. Muhammad Yusuf" class="w-full h-full object-cover">
  218.            </div>
  219.            <h3 class="mt-4 text-lg font-semibold text-gray-900 text-center">Ust. Muhammad Yusuf</h3>
  220.            <p class="text-blue-700 font-medium text-sm text-center">Tafsir &amp; Hadits</p>
  221.          </div>
  222.        </div>
  223.              <div class="rounded-2xl border border-gray-100 hover:shadow-lg transition overflow-hidden">
  224.          <div class="h-1 w-full bg-gradient-to-r from-blue-600 via-indigo-600 to-sky-600"></div>
  225.          <div class="p-6 flex flex-col items-center">
  226.            <div class="w-24 h-24 rounded-full overflow-hidden ring-4 ring-blue-100">
  227.              <img src="assets/guru4.jpg" alt="Ustadzah Nabila Rahma" class="w-full h-full object-cover">
  228.            </div>
  229.            <h3 class="mt-4 text-lg font-semibold text-gray-900 text-center">Ustadzah Nabila Rahma</h3>
  230.            <p class="text-blue-700 font-medium text-sm text-center">Bahasa Arab</p>
  231.          </div>
  232.        </div>
  233.          </div>
  234.  </div>
  235. </section>
  236.  
  237. <!-- Kontak: map + hours + form (no duplicate footer info) -->
  238. <section id="kontak" class="py-20 bg-gradient-to-br from-blue-700 to-indigo-600 text-white">
  239.  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  240.    <div class="text-center mb-12">
  241.      <h2 class="text-4xl font-bold">Hubungi Kami</h2>
  242.      <p class="mt-2 text-blue-100">Kami siap membantu kebutuhan informasi Anda.</p>
  243.    </div>
  244.    <div class="grid lg:grid-cols-2 gap-10 items-start">
  245.      <div class="space-y-8">
  246.                <div class="bg-white/10 backdrop-blur rounded-2xl p-6">
  247.          <h3 class="text-2xl font-semibold mb-3">Lokasi</h3>
  248.          <div class="rounded-xl overflow-hidden shadow" style="position:relative;padding-bottom:56.25%;height:0;">
  249.            <iframe src="https://www.google.com/maps?q=Jl.+Pendidikan+No.+123%2C+Jakarta&output=embed" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
  250.          </div>
  251.        </div>
  252.        <div class="bg-white/10 backdrop-blur rounded-2xl p-6">
  253.          <h3 class="text-2xl font-semibold mb-4">Jam Operasional</h3>
  254.          <ul class="space-y-2 text-blue-50">
  255.            <li class="flex justify-between"><span>Senin – Jumat</span><span class="font-semibold text-white">07.00 – 15.00</span></li>
  256.            <li class="flex justify-between"><span>Sabtu</span><span class="font-semibold text-white">07.00 – 12.00</span></li>
  257.            <li class="flex justify-between"><span>Minggu</span><span class="font-semibold text-white">Tutup</span></li>
  258.          </ul>
  259.        </div>
  260.      </div>
  261.      <div class="bg-white/10 backdrop-blur rounded-2xl p-8">
  262.        <h3 class="text-2xl font-bold mb-6 text-center">Kirim Pesan</h3>
  263.        <form class="space-y-6">
  264.          <div class="grid md:grid-cols-2 gap-4">
  265.            <input type="text" placeholder="Nama Lengkap" class="w-full px-5 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
  266.            <input type="email" placeholder="Email" class="w-full px-5 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
  267.          </div>
  268.          <input type="text" placeholder="Subjek" class="w-full px-5 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50">
  269.          <textarea rows="4" placeholder="Pesan Anda" class="w-full px-5 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 resize-none"></textarea>
  270.          <button type="submit" class="w-full bg-white text-blue-700 font-semibold px-6 py-3 rounded-xl hover:bg-gray-100 transition">Kirim Pesan</button>
  271.        </form>
  272.      </div>
  273.    </div>
  274.  </div>
  275. </section>
  276.  
  277. <script type="7a5479e3b9a5ca59e65a5f54-text/javascript">
  278. document.addEventListener('DOMContentLoaded', function() {
  279.  // Mobile menu toggle
  280.  const mobileBtn = document.getElementById('mobile-menu-btn');
  281.  const mobileMenu = document.getElementById('mobile-menu');
  282.  if (mobileBtn && mobileMenu) mobileBtn.addEventListener('click', () => mobileMenu.classList.toggle('hidden'));
  283.  
  284.  // Smooth scroll
  285.  document.querySelectorAll('a[href^="#"]').forEach(a => {
  286.    a.addEventListener('click', e => {
  287.      const href = a.getAttribute('href');
  288.      if (href && href.startsWith('#')) {
  289.        e.preventDefault();
  290.        const target = document.querySelector(href);
  291.        if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
  292.        if (mobileMenu && !mobileMenu.classList.contains('hidden')) mobileMenu.classList.add('hidden');
  293.      }
  294.    });
  295.  });
  296.  
  297.  // Navbar shadow on scroll
  298.  const navbar = document.getElementById('navbar');
  299.  window.addEventListener('scroll', () => {
  300.    if (window.scrollY > 10) navbar.classList.add('shadow'); else navbar.classList.remove('shadow');
  301.  });
  302. });
  303. </script>
  304.  
  305. <!-- Footer -->
  306. <footer id="footer" class="bg-gray-900 text-white relative overflow-hidden">
  307.  
  308.    <div class="relative z-10">
  309.        <!-- Main Footer Content -->
  310.        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
  311.            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
  312.                <!-- Pesantren Info -->
  313.                <div class="md:col-span-2">
  314.                    <div class="flex items-center space-x-3 mb-6">
  315.                        <img src="assets/ponpes.png" alt="Logo" class="h-10">
  316.                        <h3 class="text-2xl font-bold text-blue-400">
  317.                            Pondok Pesantren Raudlah Leuwilimus                        </h3>
  318.                    </div>
  319.                    <p class="text-gray-300 mb-6 leading-relaxed">
  320.                        Website resmi Pondok Pesantren Raudlah Leuwilimus — Mendidik santri berakhlak mulia melalui pendidikan Islam, tahfidz Al-Qur&#039;an, kajian kitab, dan pembinaan karakter di Leuwilimus.                    </p>
  321.                    <div class="flex space-x-4">
  322.                        <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110">
  323.                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
  324.                                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
  325.                            </svg>
  326.                        </a>
  327.                        <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110">
  328.                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
  329.                                <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z" />
  330.                            </svg>
  331.                        </a>
  332.                        <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110">
  333.                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
  334.                                <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378 0 0-.599 2.282-.744 2.840-.282 1.086-1.03 2.486-1.541 3.318C9.494 23.815 10.717 24.001 12.017 24.001c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z" />
  335.                            </svg>
  336.                        </a>
  337.                        <a href="#" class="bg-blue-600 hover:bg-blue-700 p-3 rounded-full transition duration-300 transform hover:scale-110">
  338.                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
  339.                                <path d="M12.036 6.24c-3.25 0-5.88 2.64-5.88 5.88s2.63 5.88 5.88 5.88c3.25 0 5.88-2.64 5.88-5.88s-2.63-5.88-5.88-5.88zm0 9.71c-2.12 0-3.83-1.71-3.83-3.83s1.71-3.83 3.83-3.83 3.83 1.71 3.83 3.83-1.71 3.83-3.83 3.83zm7.51-9.95c0 .76-.62 1.38-1.38 1.38s-1.38-.62-1.38-1.38.62-1.38 1.38-1.38 1.38.62 1.38 1.38zm3.91 1.4c-.09-1.85-.52-3.49-1.91-4.87-1.38-1.38-3.02-1.82-4.87-1.91-1.92-.11-7.68-.11-9.6 0-1.85.09-3.49.52-4.87 1.91-1.38 1.38-1.82 3.02-1.91 4.87-.11 1.92-.11 7.68 0 9.6.09 1.85.52 3.49 1.91 4.87 1.38 1.38 3.02 1.82 4.87 1.91 1.92.11 7.68.11 9.6 0 1.85-.09 3.49-.52 4.87-1.91 1.38-1.38 1.82-3.02 1.91-4.87.11-1.92.11-7.68 0-9.6zm-2.46 11.64c-.41 1.03-1.21 1.83-2.24 2.24-1.55.61-5.23.47-6.94.47s-5.39.14-6.94-.47c-1.03-.41-1.83-1.21-2.24-2.24-.61-1.55-.47-5.23-.47-6.94s-.14-5.39.47-6.94c.41-1.03 1.21-1.83 2.24-2.24 1.55-.61 5.23-.47 6.94-.47s5.39-.14 6.94.47c1.03.41 1.83 1.21 2.24 2.24.61 1.55.47 5.23.47 6.94s.14 5.39-.47 6.94z" />
  340.                            </svg>
  341.                        </a>
  342.                    </div>
  343.                </div>
  344.  
  345.                <!-- Quick Links -->
  346.                <div>
  347.                    <h4 class="text-lg font-semibold mb-6 text-blue-400">Tautan Cepat</h4>
  348.                    <ul class="space-y-3">
  349.                        <li><a href="#beranda" class="text-gray-300 hover:text-white transition duration-300 flex items-center group">
  350.                                <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  351.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  352.                                </svg>
  353.                                Beranda
  354.                            </a></li>
  355.                        <li><a href="#tentang" class="text-gray-300 hover:text-white transition duration-300 flex items-center group">
  356.                                <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  357.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  358.                                </svg>
  359.                                Tentang Kami
  360.                            </a></li>
  361.                        <li><a href="#fasilitas" class="text-gray-300 hover:text-white transition duration-300 flex items-center group">
  362.                                <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  363.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  364.                                </svg>
  365.                                Fasilitas
  366.                            </a></li>
  367.                        <li><a href="#guru" class="text-gray-300 hover:text-white transition duration-300 flex items-center group">
  368.                                <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  369.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  370.                                </svg>
  371.                                Pengajar
  372.                            </a></li>
  373.                        <li><a href="#kontak" class="text-gray-300 hover:text-white transition duration-300 flex items-center group">
  374.                                <svg class="w-4 h-4 mr-2 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  375.                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
  376.                                </svg>
  377.                                Kontak
  378.                            </a></li>
  379.                    </ul>
  380.                </div>
  381.  
  382.                <!-- Contact Info -->
  383.                <div>
  384.                    <h4 class="text-lg font-semibold mb-6 text-blue-400">Informasi Kontak</h4>
  385.                    <div class="space-y-4">
  386.                        <div class="flex items-start space-x-3">
  387.                            <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  388.                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
  389.                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
  390.                            </svg>
  391.                            <p class="text-gray-300 text-sm">
  392.                                Jl. Pendidikan No. 02, Leuwilimus                            </p>
  393.                        </div>
  394.                        <div class="flex items-center space-x-3">
  395.                            <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  396.                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
  397.                            </svg>
  398.                            <p class="text-gray-300 text-sm">
  399.                                021-2439-4159                            </p>
  400.                        </div>
  401.                        <div class="flex items-center space-x-3">
  402.                            <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  403.                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
  404.                            </svg>
  405.                            <p class="text-gray-300 text-sm">
  406.                                <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ee7e0e8e1cefceffbeae2efe6e2ebfbf9e7e2e7e3fbfda0fee1e0feebfda0e7ea">[email&#160;protected]</a>                            </p>
  407.                        </div>
  408.                    </div>
  409.                </div>
  410.            </div>
  411.        </div>
  412.  
  413.        <!-- Bottom Footer -->
  414.        <div class="border-t border-gray-800">
  415.            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
  416.                <div class="flex flex-col md:flex-row items-center justify-between">
  417.                    <div class="text-gray-400 text-sm mb-4 md:mb-0">
  418.                        &copy; 2025 Pondok Pesantren Raudlah Leuwilimus. Seluruh hak cipta dilindungi.
  419.                    </div>
  420.                    <div class="flex items-center space-x-6 text-sm text-gray-400">
  421.                        <a href="#" class="hover:text-white transition duration-300">Kebijakan Privasi</a>
  422.                        <span>•</span>
  423.                        <a href="#" class="hover:text-white transition duration-300">Syarat & Ketentuan</a>
  424.                        <span>•</span>
  425.                        <a href="#" class="hover:text-white transition duration-300">Sitemap</a>
  426.                    </div>
  427.                </div>
  428.            </div>
  429.        </div>
  430.    </div>
  431.  
  432.    <!-- Back to Top Button -->
  433.    <button id="backToTop" class="fixed bottom-8 right-8 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transform translate-y-16 transition-all duration-300 z-50">
  434.        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  435.            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
  436.        </svg>
  437.    </button>
  438. </footer>
  439.  
  440.  
  441. <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="7a5479e3b9a5ca59e65a5f54-text/javascript">
  442.    // Back to top button functionality
  443.    const backToTopButton = document.getElementById('backToTop');
  444.  
  445.    window.addEventListener('scroll', function() {
  446.        if (window.scrollY > 300) {
  447.            backToTopButton.style.transform = 'translateY(0)';
  448.        } else {
  449.            backToTopButton.style.transform = 'translateY(4rem)';
  450.        }
  451.    });
  452.  
  453.    backToTopButton.addEventListener('click', function() {
  454.        window.scrollTo({
  455.            top: 0,
  456.            behavior: 'smooth'
  457.        });
  458.    });
  459.  
  460.    // Add loading animation
  461.    window.addEventListener('load', function() {
  462.        document.body.classList.add('loaded');
  463.    });
  464. </script>
  465.  
  466. <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="7a5479e3b9a5ca59e65a5f54-|49" defer></script></body>
  467.  
  468. </html>

Home · About · News · Docs · Terms

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