API tools faq
paste
Advertisement
andiahmads

Untitled

andiahmads
May 18th, 2025
377
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.73 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="id">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Rahmah Umroh - Perjalanan Suci Penuh Barokah</title>
  8.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  9.     <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
  10.     <style>
  11.         :root {
  12.             --green: #2E8B57;
  13.             --gold: #B8860B;
  14.             --cream: #F5F5DC;
  15.             --dark: #333333;
  16.             --light: #FFFFFF;
  17.         }
  18.  
  19.         * {
  20.             margin: 0;
  21.             padding: 0;
  22.             box-sizing: border-box;
  23.         }
  24.  
  25.         body {
  26.             font-family: 'Open Sans', sans-serif;
  27.             color: var(--dark);
  28.             background-color: var(--cream);
  29.             line-height: 1.8;
  30.         }
  31.  
  32.         h1, h2, h3, h4 {
  33.             font-family: 'Amiri', serif;
  34.             color: var(--green);
  35.             font-weight: 700;
  36.         }
  37.  
  38.         /* Header */
  39.         header {
  40.             background-color: var(--light);
  41.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  42.             position: fixed;
  43.             width: 100%;
  44.             z-index: 1000;
  45.         }
  46.  
  47.         .header-container {
  48.             display: flex;
  49.             justify-content: space-between;
  50.             align-items: center;
  51.             padding: 1rem 2rem;
  52.             max-width: 1200px;
  53.             margin: 0 auto;
  54.         }
  55.  
  56.         .logo {
  57.             display: flex;
  58.             align-items: center;
  59.             gap: 0.5rem;
  60.         }
  61.  
  62.         .logo img {
  63.             height: 40px;
  64.         }
  65.  
  66.         .logo-text {
  67.             font-family: 'Amiri', serif;
  68.             font-size: 1.5rem;
  69.             color: var(--green);
  70.         }
  71.  
  72.         .logo-text span {
  73.             color: var(--gold);
  74.         }
  75.  
  76.         nav ul {
  77.             display: flex;
  78.             list-style: none;
  79.             gap: 2rem;
  80.         }
  81.  
  82.         nav ul li a {
  83.             color: var(--dark);
  84.             text-decoration: none;
  85.             font-weight: 500;
  86.             position: relative;
  87.         }
  88.  
  89.         nav ul li a::after {
  90.             content: '';
  91.             position: absolute;
  92.             bottom: -5px;
  93.             left: 0;
  94.             width: 0;
  95.             height: 2px;
  96.             background-color: var(--gold);
  97.             transition: width 0.3s ease;
  98.         }
  99.  
  100.         nav ul li a:hover::after {
  101.             width: 100%;
  102.         }
  103.  
  104.         .mobile-menu-btn {
  105.             display: none;
  106.             background: none;
  107.             border: none;
  108.             font-size: 1.5rem;
  109.             color: var(--green);
  110.         }
  111.  
  112.         /* Hero Section */
  113.         .hero {
  114.             min-height: 100vh;
  115.             background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  116.                         url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
  117.             background-size: cover;
  118.             background-position: center;
  119.             display: flex;
  120.             align-items: center;
  121.             text-align: center;
  122.             color: var(--light);
  123.             padding: 0 2rem;
  124.         }
  125.  
  126.         .hero-content {
  127.             max-width: 800px;
  128.             margin: 0 auto;
  129.         }
  130.  
  131.         .hero h1 {
  132.             font-size: 3.5rem;
  133.             margin-bottom: 1.5rem;
  134.             color: var(--light);
  135.             line-height: 1.3;
  136.         }
  137.  
  138.         .hero p {
  139.             font-size: 1.2rem;
  140.             margin-bottom: 2rem;
  141.             opacity: 0.9;
  142.         }
  143.  
  144.         .btn {
  145.             display: inline-block;
  146.             padding: 0.8rem 2rem;
  147.             border-radius: 0;
  148.             text-decoration: none;
  149.             font-weight: 600;
  150.             transition: all 0.3s ease;
  151.         }
  152.  
  153.         .btn-primary {
  154.             background-color: var(--gold);
  155.             color: var(--dark);
  156.         }
  157.  
  158.         .btn-primary:hover {
  159.             background-color: transparent;
  160.             color: var(--gold);
  161.             border: 1px solid var(--gold);
  162.         }
  163.  
  164.         .btn-secondary {
  165.             background-color: transparent;
  166.             color: var(--light);
  167.             border: 1px solid var(--light);
  168.         }
  169.  
  170.         .btn-secondary:hover {
  171.             background-color: var(--light);
  172.             color: var(--dark);
  173.         }
  174.  
  175.         /* Section Styles */
  176.         .section {
  177.             padding: 6rem 0;
  178.         }
  179.  
  180.         .section-title {
  181.             text-align: center;
  182.             margin-bottom: 4rem;
  183.         }
  184.  
  185.         .section-title h2 {
  186.             font-size: 2.5rem;
  187.             position: relative;
  188.             display: inline-block;
  189.         }
  190.  
  191.         .section-title h2::after {
  192.             content: '';
  193.             position: absolute;
  194.             bottom: -10px;
  195.             left: 50%;
  196.             transform: translateX(-50%);
  197.             width: 80px;
  198.             height: 3px;
  199.             background-color: var(--gold);
  200.         }
  201.  
  202.         .section-title p {
  203.             max-width: 700px;
  204.             margin: 1rem auto 0;
  205.             color: var(--dark);
  206.         }
  207.  
  208.         /* Features */
  209.         .features {
  210.             background-color: var(--light);
  211.         }
  212.  
  213.         .features-grid {
  214.             display: grid;
  215.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  216.             gap: 2rem;
  217.             max-width: 1200px;
  218.             margin: 0 auto;
  219.         }
  220.  
  221.         .feature-card {
  222.             text-align: center;
  223.             padding: 2rem;
  224.             border: 1px solid rgba(0, 0, 0, 0.05);
  225.             transition: all 0.3s ease;
  226.         }
  227.  
  228.         .feature-card:hover {
  229.             transform: translateY(-10px);
  230.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  231.         }
  232.  
  233.         .feature-icon {
  234.             font-size: 2.5rem;
  235.             color: var(--gold);
  236.             margin-bottom: 1.5rem;
  237.         }
  238.  
  239.         .feature-card h3 {
  240.             margin-bottom: 1rem;
  241.         }
  242.  
  243.         /* Packages */
  244.         .packages {
  245.             background-color: var(--cream);
  246.         }
  247.  
  248.         .packages-grid {
  249.             display: grid;
  250.             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  251.             gap: 2rem;
  252.             max-width: 1200px;
  253.             margin: 0 auto;
  254.         }
  255.  
  256.         .package-card {
  257.             background-color: var(--light);
  258.             border-radius: 5px;
  259.             overflow: hidden;
  260.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  261.             transition: all 0.3s ease;
  262.         }
  263.  
  264.         .package-card:hover {
  265.             transform: translateY(-10px);
  266.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  267.         }
  268.  
  269.         .package-image {
  270.             height: 250px;
  271.             overflow: hidden;
  272.         }
  273.  
  274.         .package-image img {
  275.             width: 100%;
  276.             height: 100%;
  277.             object-fit: cover;
  278.             transition: transform 0.5s ease;
  279.         }
  280.  
  281.         .package-card:hover .package-image img {
  282.             transform: scale(1.1);
  283.         }
  284.  
  285.         .package-content {
  286.             padding: 2rem;
  287.         }
  288.  
  289.         .package-content h3 {
  290.             margin-bottom: 0.5rem;
  291.         }
  292.  
  293.         .package-price {
  294.             font-size: 1.8rem;
  295.             color: var(--gold);
  296.             margin-bottom: 1rem;
  297.             font-weight: 700;
  298.         }
  299.  
  300.         .package-features {
  301.             margin-bottom: 2rem;
  302.         }
  303.  
  304.         .package-features li {
  305.             margin-bottom: 0.5rem;
  306.             display: flex;
  307.             align-items: center;
  308.         }
  309.  
  310.         .package-features i {
  311.             color: var(--green);
  312.             margin-right: 0.5rem;
  313.         }
  314.  
  315.         /* Ustadz */
  316.         .ustadz {
  317.             background-color: var(--light);
  318.         }
  319.  
  320.         .ustadz-grid {
  321.             display: grid;
  322.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  323.             gap: 2rem;
  324.             max-width: 1200px;
  325.             margin: 0 auto;
  326.         }
  327.  
  328.         .ustadz-card {
  329.             text-align: center;
  330.             padding: 2rem;
  331.             border: 1px solid rgba(0, 0, 0, 0.05);
  332.             transition: all 0.3s ease;
  333.         }
  334.  
  335.         .ustadz-card:hover {
  336.             transform: translateY(-10px);
  337.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  338.         }
  339.  
  340.         .ustadz-image {
  341.             width: 150px;
  342.             height: 150px;
  343.             border-radius: 50%;
  344.             overflow: hidden;
  345.             margin: 0 auto 1.5rem;
  346.             border: 3px solid var(--gold);
  347.         }
  348.  
  349.         .ustadz-image img {
  350.             width: 100%;
  351.             height: 100%;
  352.             object-fit: cover;
  353.         }
  354.  
  355.         .ustadz-info h3 {
  356.             margin-bottom: 0.5rem;
  357.         }
  358.  
  359.         .ustadz-info p {
  360.             color: var(--green);
  361.             margin-bottom: 1.5rem;
  362.         }
  363.  
  364.         /* Testimonials */
  365.         .testimonials {
  366.             background-color: var(--cream);
  367.         }
  368.  
  369.         .testimonials-grid {
  370.             display: grid;
  371.             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  372.             gap: 2rem;
  373.             max-width: 1200px;
  374.             margin: 0 auto;
  375.         }
  376.  
  377.         .testimonial-card {
  378.             background-color: var(--light);
  379.             padding: 2rem;
  380.             border-radius: 5px;
  381.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  382.         }
  383.  
  384.         .testimonial-rating {
  385.             color: var(--gold);
  386.             margin-bottom: 1rem;
  387.         }
  388.  
  389.         .testimonial-text {
  390.             font-style: italic;
  391.             margin-bottom: 1.5rem;
  392.             position: relative;
  393.         }
  394.  
  395.         .testimonial-text::before {
  396.             content: '"';
  397.             font-size: 3rem;
  398.             color: rgba(0, 0, 0, 0.1);
  399.             position: absolute;
  400.             top: -20px;
  401.             left: -10px;
  402.         }
  403.  
  404.         .testimonial-author {
  405.             display: flex;
  406.             align-items: center;
  407.         }
  408.  
  409.         .testimonial-author img {
  410.             width: 60px;
  411.             height: 60px;
  412.             border-radius: 50%;
  413.             object-fit: cover;
  414.             margin-right: 1rem;
  415.         }
  416.  
  417.         .author-info h4 {
  418.             margin-bottom: 0.2rem;
  419.         }
  420.  
  421.         /* Gallery */
  422.         .gallery {
  423.             background-color: var(--light);
  424.         }
  425.  
  426.         .gallery-grid {
  427.             display: grid;
  428.             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  429.             gap: 1rem;
  430.             max-width: 1200px;
  431.             margin: 0 auto;
  432.         }
  433.  
  434.         .gallery-item {
  435.             height: 200px;
  436.             overflow: hidden;
  437.             position: relative;
  438.         }
  439.  
  440.         .gallery-item img {
  441.             width: 100%;
  442.             height: 100%;
  443.             object-fit: cover;
  444.             transition: transform 0.5s ease;
  445.         }
  446.  
  447.         .gallery-item:hover img {
  448.             transform: scale(1.1);
  449.         }
  450.  
  451.         /* Footer */
  452.         footer {
  453.             background-color: var(--green);
  454.             color: var(--light);
  455.             padding: 4rem 0 2rem;
  456.         }
  457.  
  458.         .footer-container {
  459.             display: grid;
  460.             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  461.             gap: 2rem;
  462.             max-width: 1200px;
  463.             margin: 0 auto;
  464.             padding: 0 2rem;
  465.         }
  466.  
  467.         .footer-col h3 {
  468.             color: var(--light);
  469.             margin-bottom: 1.5rem;
  470.             position: relative;
  471.             padding-bottom: 0.5rem;
  472.         }
  473.  
  474.         .footer-col h3::after {
  475.             content: '';
  476.             position: absolute;
  477.             bottom: 0;
  478.             left: 0;
  479.             width: 50px;
  480.             height: 2px;
  481.             background-color: var(--gold);
  482.         }
  483.  
  484.         .footer-col p {
  485.             margin-bottom: 1rem;
  486.             opacity: 0.9;
  487.         }
  488.  
  489.         .footer-links {
  490.             list-style: none;
  491.         }
  492.  
  493.         .footer-links li {
  494.             margin-bottom: 0.8rem;
  495.         }
  496.  
  497.         .footer-links a {
  498.             color: var(--light);
  499.             opacity: 0.9;
  500.             transition: all 0.3s ease;
  501.         }
  502.  
  503.         .footer-links a:hover {
  504.             opacity: 1;
  505.             padding-left: 5px;
  506.         }
  507.  
  508.         .footer-social {
  509.             display: flex;
  510.             gap: 1rem;
  511.             margin-top: 1.5rem;
  512.         }
  513.  
  514.         .footer-social a {
  515.             width: 40px;
  516.             height: 40px;
  517.             border-radius: 50%;
  518.             background-color: rgba(255, 255, 255, 0.1);
  519.             color: var(--light);
  520.             display: flex;
  521.             align-items: center;
  522.             justify-content: center;
  523.             transition: all 0.3s ease;
  524.         }
  525.  
  526.         .footer-social a:hover {
  527.             background-color: var(--gold);
  528.             color: var(--dark);
  529.         }
  530.  
  531.         .copyright {
  532.             text-align: center;
  533.             padding-top: 2rem;
  534.             margin-top: 2rem;
  535.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  536.             opacity: 0.7;
  537.         }
  538.  
  539.         /* Responsive */
  540.         @media (max-width: 768px) {
  541.             .mobile-menu-btn {
  542.                 display: block;
  543.             }
  544.  
  545.             nav {
  546.                 position: fixed;
  547.                 top: 80px;
  548.                 left: 0;
  549.                 width: 100%;
  550.                 background-color: var(--light);
  551.                 padding: 1rem 0;
  552.                 clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  553.                 transition: all 0.4s ease;
  554.             }
  555.  
  556.             nav.active {
  557.                 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  558.             }
  559.  
  560.             nav ul {
  561.                 flex-direction: column;
  562.                 align-items: center;
  563.                 gap: 1rem;
  564.             }
  565.  
  566.             .hero h1 {
  567.                 font-size: 2.5rem;
  568.             }
  569.         }
  570.     </style>
  571. </head>
  572. <body>
  573.     <!-- Header -->
  574.     <header>
  575.         <div class="header-container">
  576.             <div class="logo">
  577.                 <img src="https://via.placeholder.com/40x40" alt="Logo Rahmah Umroh">
  578.                 <div class="logo-text">Rahmah <span>Umroh</span></div>
  579.             </div>
  580.             <button class="mobile-menu-btn" id="mobileMenuBtn">
  581.                 <i class="fas fa-bars"></i>
  582.             </button>
  583.             <nav id="mainNav">
  584.                 <ul>
  585.                     <li><a href="#home">Beranda</a></li>
  586.                     <li><a href="#features">Keunggulan</a></li>
  587.                     <li><a href="#packages">Paket</a></li>
  588.                     <li><a href="#ustadz">Pembimbing</a></li>
  589.                     <li><a href="#testimonials">Testimoni</a></li>
  590.                     <li><a href="#gallery">Galeri</a></li>
  591.                     <li><a href="#contact" class="btn btn-primary">Kontak</a></li>
  592.                 </ul>
  593.             </nav>
  594.         </div>
  595.     </header>
  596.  
  597.     <!-- Hero Section -->
  598.     <section class="hero" id="home">
  599.         <div class="hero-content">
  600.             <h1>Perjalanan Suci Penuh Barokah</h1>
  601.             <p>Rahmah Umroh menyediakan paket perjalanan umroh dengan bimbingan ustadz berpengalaman dan pelayanan terbaik untuk pengalaman ibadah yang khusyuk.</p>
  602.             <div class="hero-buttons">
  603.                 <a href="#packages" class="btn btn-primary">Lihat Paket</a>
  604.                 <a href="#contact" class="btn btn-secondary">Konsultasi</a>
  605.             </div>
  606.         </div>
  607.     </section>
  608.  
  609.     <!-- Features Section -->
  610.     <section class="section features" id="features">
  611.         <div class="section-title">
  612.             <h2>Keunggulan Kami</h2>
  613.             <p>Mengapa memilih Rahmah Umroh untuk perjalanan spiritual Anda</p>
  614.         </div>
  615.         <div class="features-grid">
  616.             <div class="feature-card">
  617.                 <div class="feature-icon">
  618.                     <i class="fas fa-kaaba"></i>
  619.                 </div>
  620.                 <h3>Bimbingan Ibadah</h3>
  621.                 <p>Dibimbing oleh ustadz berpengalaman yang akan memandu setiap tahapan ibadah umroh Anda</p>
  622.             </div>
  623.             <div class="feature-card">
  624.                 <div class="feature-icon">
  625.                     <i class="fas fa-hotel"></i>
  626.                 </div>
  627.                 <h3>Akomodasi Nyaman</h3>
  628.                 <p>Hotel bintang 3 & 4 dengan jarak strategis dekat Masjidil Haram dan Masjid Nabawi</p>
  629.            </div>
  630.            <div class="feature-card">
  631.                <div class="feature-icon">
  632.                    <i class="fas fa-utensils"></i>
  633.                </div>
  634.                <h3>Makanan Halal</h3>
  635.                <p>Menu makanan bergizi dan halal yang disiapkan khusus untuk jamaah Indonesia</p>
  636.            </div>
  637.        </div>
  638.    </section>
  639.  
  640.    <!-- Packages Section -->
  641.    <section class="section packages" id="packages">
  642.        <div class="section-title">
  643.            <h2>Paket Umroh</h2>
  644.            <p>Pilihan paket perjalanan umroh dengan fasilitas terbaik</p>
  645.        </div>
  646.        <div class="packages-grid">
  647.            <div class="package-card">
  648.                <div class="package-image">
  649.                    <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Umroh Reguler">
  650.                </div>
  651.                <div class="package-content">
  652.                    <h3>Paket Reguler</h3>
  653.                    <div class="package-price">Rp 25.000.000</div>
  654.                    <ul class="package-features">
  655.                        <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi</li>
  656.                        <li><i class="fas fa-check"></i> Akomodasi hotel bintang 3</li>
  657.                        <li><i class="fas fa-check"></i> Makan 3x sehari</li>
  658.                        <li><i class="fas fa-check"></i> Bimbingan ustadz</li>
  659.                        <li><i class="fas fa-check"></i> Ziarah ke tempat bersejarah</li>
  660.                    </ul>
  661.                    <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  662.                </div>
  663.            </div>
  664.            <div class="package-card">
  665.                <div class="package-image">
  666.                    <img src="https://images.unsplash.com/photo-1544572571-ab94f872a694?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Umroh Plus">
  667.                </div>
  668.                <div class="package-content">
  669.                    <h3>Paket Plus</h3>
  670.                    <div class="package-price">Rp 32.000.000</div>
  671.                    <ul class="package-features">
  672.                        <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi</li>
  673.                        <li><i class="fas fa-check"></i> Akomodasi hotel bintang 4</li>
  674.                        <li><i class="fas fa-check"></i> Makan prasmanan 3x sehari</li>
  675.                        <li><i class="fas fa-check"></i> Bimbingan ustadz berpengalaman</li>
  676.                        <li><i class="fas fa-check"></i> Ziarah lengkap</li>
  677.                        <li><i class="fas fa-check"></i> Free baggage 30kg</li>
  678.                    </ul>
  679.                    <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  680.                </div>
  681.            </div>
  682.            <div class="package-card">
  683.                <div class="package-image">
  684.                    <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Umroh Premium">
  685.                </div>
  686.                <div class="package-content">
  687.                    <h3>Paket Premium</h3>
  688.                    <div class="package-price">Rp 45.000.000</div>
  689.                    <ul class="package-features">
  690.                        <li><i class="fas fa-check"></i> Tiket pesawat kelas bisnis</li>
  691.                        <li><i class="fas fa-check"></i> Akomodasi hotel bintang 5</li>
  692.                        <li><i class="fas fa-check"></i> Makan prasmanan 3x sehari</li>
  693.                        <li><i class="fas fa-check"></i> Bimbingan ustadz ternama</li>
  694.                        <li><i class="fas fa-check"></i> Ziarah lengkap + kota Madinah</li>
  695.                        <li><i class="fas fa-check"></i> Free baggage 40kg</li>
  696.                        <li><i class="fas fa-check"></i> Transportasi VIP</li>
  697.                    </ul>
  698.                    <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  699.                </div>
  700.            </div>
  701.        </div>
  702.    </section>
  703.  
  704.    <!-- Ustadz Section -->
  705.    <section class="section ustadz" id="ustadz">
  706.        <div class="section-title">
  707.            <h2>Ustadz Pembimbing</h2>
  708.            <p>Dibimbing oleh ustadz-ustadz kompeten di bidangnya</p>
  709.        </div>
  710.        <div class="ustadz-grid">
  711.            <div class="ustadz-card">
  712.                <div class="ustadz-image">
  713.                    <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Ahmad">
  714.                </div>
  715.                <div class="ustadz-info">
  716.                    <h3>Ustadz Ahmad Al-Faruq</h3>
  717.                    <p>Spesialis Fiqih Ibadah</p>
  718.                </div>
  719.            </div>
  720.            <div class="ustadz-card">
  721.                <div class="ustadz-image">
  722.                    <img src="https://images.unsplash.com/photo-1544717305-2782549b5136?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Muhammad">
  723.                </div>
  724.                <div class="ustadz-info">
  725.                    <h3>Ustadz Muhammad Hasyim</h3>
  726.                    <p>Ahli Tafsir Al-Qur'an</p>
  727.                </div>
  728.            </div>
  729.            <div class="ustadz-card">
  730.                <div class="ustadz-image">
  731.                    <img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Abdullah">
  732.                </div>
  733.                <div class="ustadz-info">
  734.                    <h3>Ustadz Abdullah Syafi'i</h3>
  735.                    <p>Pakar Sejarah Islam</p>
  736.                </div>
  737.            </div>
  738.        </div>
  739.    </section>
  740.  
  741.    <!-- Testimonials Section -->
  742.    <section class="section testimonials" id="testimonials">
  743.        <div class="section-title">
  744.            <h2>Testimoni Jamaah</h2>
  745.            <p>Apa kata mereka yang telah berangkat umroh bersama kami</p>
  746.        </div>
  747.        <div class="testimonials-grid">
  748.            <div class="testimonial-card">
  749.                <div class="testimonial-rating">
  750.                    <i class="fas fa-star"></i>
  751.                    <i class="fas fa-star"></i>
  752.                    <i class="fas fa-star"></i>
  753.                    <i class="fas fa-star"></i>
  754.                    <i class="fas fa-star"></i>
  755.                </div>
  756.                <p class="testimonial-text">Alhamdulillah perjalanan umroh kami sangat menyenangkan. Pelayanan dari Rahmah Umroh sangat memuaskan mulai dari keberangkatan sampai kepulangan. Ustadz pembimbing sangat sabar dalam membimbing kami yang baru pertama kali umroh.</p>
  757.                <div class="testimonial-author">
  758.                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Siti Nurhaliza">
  759.                    <div class="author-info">
  760.                        <h4>Siti Nurhaliza</h4>
  761.                        <p>Jamaah Umroh 2023</p>
  762.                    </div>
  763.                </div>
  764.            </div>
  765.            <div class="testimonial-card">
  766.                <div class="testimonial-rating">
  767.                    <i class="fas fa-star"></i>
  768.                    <i class="fas fa-star"></i>
  769.                    <i class="fas fa-star"></i>
  770.                    <i class="fas fa-star"></i>
  771.                    <i class="fas fa-star"></i>
  772.                </div>
  773.                <p class="testimonial-text">Hotelnya nyaman dan dekat dengan Masjidil Haram. Makanannya juga enak dan sesuai selera Indonesia. Petugasnya ramah-ramah dan selalu siap membantu. Insya Allah akan umroh lagi bersama Rahmah Umroh.</p>
  774.                <div class="testimonial-author">
  775.                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Budi Santoso">
  776.                    <div class="author-info">
  777.                        <h4>Budi Santoso</h4>
  778.                        <p>Jamaah Umroh 2022</p>
  779.                    </div>
  780.                </div>
  781.            </div>
  782.        </div>
  783.    </section>
  784.  
  785.    <!-- Gallery Section -->
  786.    <section class="section gallery" id="gallery">
  787.        <div class="section-title">
  788.            <h2>Galeri Perjalanan</h2>
  789.            <p>Momen-momen indah jamaah kami selama menunaikan ibadah umroh</p>
  790.        </div>
  791.        <div class="gallery-grid">
  792.            <div class="gallery-item">
  793.                <img src="https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Masjidil Haram">
  794.            </div>
  795.            <div class="gallery-item">
  796.                <img src="https://images.unsplash.com/photo-1565992441121-4367c2967103?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Masjid Nabawi">
  797.            </div>
  798.            <div class="gallery-item">
  799.                <img src="https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Ka'bah">
  800.            </div>
  801.            <div class="gallery-item">
  802.                <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Perjalanan Umroh">
  803.            </div>
  804.        </div>
  805.    </section>
  806.  
  807.    <!-- Footer -->
  808.    <footer id="contact">
  809.        <div class="footer-container">
  810.            <div class="footer-col">
  811.                <h3>Tentang Kami</h3>
  812.                <p>Rahmah Umroh adalah biro perjalanan umroh profesional yang berkomitmen untuk memberikan pengalaman ibadah terbaik bagi setiap jamaah.</p>
  813.                <div class="footer-social">
  814.                    <a href="#"><i class="fab fa-facebook-f"></i></a>
  815.                    <a href="#"><i class="fab fa-instagram"></i></a>
  816.                    <a href="#"><i class="fab fa-youtube"></i></a>
  817.                    <a href="#"><i class="fab fa-whatsapp"></i></a>
  818.                </div>
  819.            </div>
  820.            <div class="footer-col">
  821.                <h3>Kontak Kami</h3>
  822.                <p><i class="fas fa-map-marker-alt"></i> Jl. Spiritual No. 123, Jakarta</p>
  823.                <p><i class="fas fa-phone"></i> +62 812 3456 7890</p>
  824.                <p><i class="fas fa-envelope"></i> [email protected]</p>
  825.            </div>
  826.            <div class="footer-col">
  827.                <h3>Link Cepat</h3>
  828.                <ul class="footer-links">
  829.                    <li><a href="#home">Beranda</a></li>
  830.                    <li><a href="#packages">Paket Umroh</a></li>
  831.                    <li><a href="#ustadz">Ustadz Kami</a></li>
  832.                    <li><a href="#testimonials">Testimoni</a></li>
  833.                    <li><a href="#gallery">Galeri</a></li>
  834.                </ul>
  835.            </div>
  836.        </div>
  837.        <div class="copyright">
  838.            <p>&copy; 2023 Rahmah Umroh. Semua Hak Dilindungi.</p>
  839.         </div>
  840.     </footer>
  841.  
  842.     <script>
  843.         // Mobile Menu Toggle
  844.         const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  845.         const mainNav = document.getElementById('mainNav');
  846.  
  847.         mobileMenuBtn.addEventListener('click', () => {
  848.             mainNav.classList.toggle('active');
  849.             mobileMenuBtn.innerHTML = mainNav.classList.contains('active') ?
  850.                 '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
  851.         });
  852.  
  853.         // Close mobile menu when clicking on a link
  854.         const navLinks = document.querySelectorAll('nav ul li a');
  855.         navLinks.forEach(link => {
  856.             link.addEventListener('click', () => {
  857.                 if (mainNav.classList.contains('active')) {
  858.                     mainNav.classList.remove('active');
  859.                     mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  860.                 }
  861.             });
  862.         });
  863.  
  864.         // Smooth scrolling for anchor links
  865.         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  866.             anchor.addEventListener('click', function(e) {
  867.                 e.preventDefault();
  868.                
  869.                 const targetId = this.getAttribute('href');
  870.                 const targetElement = document.querySelector(targetId);
  871.                
  872.                 if (targetElement) {
  873.                     window.scrollTo({
  874.                         top: targetElement.offsetTop - 80,
  875.                         behavior: 'smooth'
  876.                     });
  877.                 }
  878.             });
  879.         });
  880.     </script>
  881. </body>
  882. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!