API tools faq
paste
Advertisement
andiahmads

Untitled

andiahmads
May 18th, 2025
196
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 42.24 KB | Writing | 0 0
raw download clone embed print report
  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.     <meta name="description" content="Rahmah Umroh menyediakan paket perjalanan umroh berkualitas dengan bimbingan ustadz berpengalaman. Wujudkan impian ibadah umroh Anda bersama kami.">
  7.     <meta name="keywords" content="umroh, paket umroh, rahmah umroh, perjalanan spiritual, ibadah umroh, ustadz berpengalaman">
  8.     <meta name="author" content="Rahmah Umroh">
  9.     <title>Rahmah Umroh - Perjalanan Spiritual Terbaik Anda</title>
  10.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  11.     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  12.     <style>
  13.         /* Reset dan Base Styles */
  14.         * {
  15.             margin: 0;
  16.             padding: 0;
  17.             box-sizing: border-box;
  18.             font-family: 'Poppins', sans-serif;
  19.         }
  20.  
  21.         :root {
  22.             --primary: #2c786c;
  23.             --secondary: #004445;
  24.             --accent: #f8b400;
  25.             --light: #faf5e4;
  26.             --dark: #333;
  27.         }
  28.  
  29.         body {
  30.             background-color: #f9f9f9;
  31.             color: var(--dark);
  32.             line-height: 1.6;
  33.             overflow-x: hidden;
  34.         }
  35.  
  36.         /* Header Styles */
  37.         header {
  38.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  39.             color: white;
  40.             padding: 1rem 0;
  41.             position: fixed;
  42.             width: 100%;
  43.             top: 0;
  44.             z-index: 1000;
  45.             box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  46.             transition: all 0.3s ease;
  47.         }
  48.  
  49.         .header-container {
  50.             display: flex;
  51.             justify-content: space-between;
  52.             align-items: center;
  53.             max-width: 1200px;
  54.             margin: 0 auto;
  55.             padding: 0 2rem;
  56.         }
  57.  
  58.         .logo {
  59.             display: flex;
  60.             align-items: center;
  61.         }
  62.  
  63.         .logo img {
  64.             height: 50px;
  65.             margin-right: 10px;
  66.         }
  67.  
  68.         .logo h1 {
  69.             font-size: 1.5rem;
  70.             font-weight: 700;
  71.         }
  72.  
  73.         nav ul {
  74.             display: flex;
  75.             list-style: none;
  76.         }
  77.  
  78.         nav ul li {
  79.             margin-left: 2rem;
  80.         }
  81.  
  82.         nav ul li a {
  83.             color: white;
  84.             text-decoration: none;
  85.             font-weight: 500;
  86.             font-size: 1.1rem;
  87.             transition: all 0.3s ease;
  88.             position: relative;
  89.             padding: 0.5rem 0;
  90.         }
  91.  
  92.         nav ul li a:hover {
  93.             color: var(--accent);
  94.         }
  95.  
  96.         nav ul li a::after {
  97.             content: '';
  98.             position: absolute;
  99.             bottom: 0;
  100.             left: 0;
  101.             width: 0;
  102.             height: 2px;
  103.             background-color: var(--accent);
  104.             transition: width 0.3s ease;
  105.         }
  106.  
  107.         nav ul li a:hover::after {
  108.             width: 100%;
  109.         }
  110.  
  111.         .mobile-menu-btn {
  112.             display: none;
  113.             background: none;
  114.             border: none;
  115.             color: white;
  116.             font-size: 1.5rem;
  117.             cursor: pointer;
  118.         }
  119.  
  120.         /* Hero Section */
  121.         .hero {
  122.             background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
  123.             background-size: cover;
  124.             background-position: center;
  125.             height: 100vh;
  126.             display: flex;
  127.             align-items: center;
  128.             text-align: center;
  129.             color: white;
  130.             padding-top: 80px;
  131.         }
  132.  
  133.         .hero-content {
  134.             max-width: 800px;
  135.             margin: 0 auto;
  136.             padding: 0 2rem;
  137.             animation: fadeInUp 1s ease;
  138.         }
  139.  
  140.         .hero h2 {
  141.             font-size: 3rem;
  142.             margin-bottom: 1rem;
  143.             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  144.         }
  145.  
  146.         .hero p {
  147.             font-size: 1.2rem;
  148.             margin-bottom: 2rem;
  149.             text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  150.         }
  151.  
  152.         .cta-button {
  153.             display: inline-block;
  154.             background-color: var(--accent);
  155.             color: var(--dark);
  156.             padding: 0.8rem 2rem;
  157.             border-radius: 50px;
  158.             text-decoration: none;
  159.             font-weight: 600;
  160.             font-size: 1.1rem;
  161.             transition: all 0.3s ease;
  162.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  163.         }
  164.  
  165.         .cta-button:hover {
  166.             background-color: #ffcc00;
  167.             transform: translateY(-3px);
  168.             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  169.         }
  170.  
  171.         /* Section Styles */
  172.         section {
  173.             padding: 5rem 0;
  174.             scroll-margin-top: 80px;
  175.         }
  176.  
  177.         .section-title {
  178.             text-align: center;
  179.             margin-bottom: 3rem;
  180.             position: relative;
  181.         }
  182.  
  183.         .section-title h2 {
  184.             font-size: 2.5rem;
  185.             color: var(--primary);
  186.             display: inline-block;
  187.         }
  188.  
  189.         .section-title h2::after {
  190.             content: '';
  191.             position: absolute;
  192.             bottom: -10px;
  193.             left: 50%;
  194.             transform: translateX(-50%);
  195.             width: 80px;
  196.             height: 3px;
  197.             background-color: var(--accent);
  198.         }
  199.  
  200.         .container {
  201.             max-width: 1200px;
  202.             margin: 0 auto;
  203.             padding: 0 2rem;
  204.         }
  205.  
  206.         /* Paket Umroh Section */
  207.         .packages {
  208.             background-color: white;
  209.         }
  210.  
  211.         .package-grid {
  212.             display: grid;
  213.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  214.             gap: 2rem;
  215.         }
  216.  
  217.         .package-card {
  218.             background-color: white;
  219.             border-radius: 10px;
  220.             overflow: hidden;
  221.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  222.             transition: all 0.3s ease;
  223.             opacity: 0;
  224.             transform: translateY(20px);
  225.         }
  226.  
  227.         .package-card.visible {
  228.             opacity: 1;
  229.             transform: translateY(0);
  230.         }
  231.  
  232.         .package-card:hover {
  233.             transform: translateY(-10px);
  234.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  235.         }
  236.  
  237.         .package-image {
  238.             height: 200px;
  239.             overflow: hidden;
  240.         }
  241.  
  242.         .package-image img {
  243.             width: 100%;
  244.             height: 100%;
  245.             object-fit: cover;
  246.             transition: transform 0.5s ease;
  247.         }
  248.  
  249.         .package-card:hover .package-image img {
  250.             transform: scale(1.1);
  251.         }
  252.  
  253.         .package-content {
  254.             padding: 1.5rem;
  255.         }
  256.  
  257.         .package-content h3 {
  258.             font-size: 1.5rem;
  259.             margin-bottom: 0.5rem;
  260.             color: var(--secondary);
  261.         }
  262.  
  263.         .package-price {
  264.             font-size: 1.8rem;
  265.             font-weight: 700;
  266.             color: var(--primary);
  267.             margin-bottom: 1rem;
  268.         }
  269.  
  270.         .package-duration {
  271.             display: inline-block;
  272.             background-color: var(--light);
  273.             color: var(--dark);
  274.             padding: 0.3rem 0.8rem;
  275.             border-radius: 50px;
  276.             font-size: 0.9rem;
  277.             margin-bottom: 1rem;
  278.         }
  279.  
  280.         .package-features {
  281.             margin-bottom: 1.5rem;
  282.         }
  283.  
  284.         .package-features li {
  285.             margin-bottom: 0.5rem;
  286.             display: flex;
  287.             align-items: center;
  288.         }
  289.  
  290.         .package-features i {
  291.             color: var(--accent);
  292.             margin-right: 0.5rem;
  293.         }
  294.  
  295.         .package-button {
  296.             display: block;
  297.             text-align: center;
  298.             background-color: var(--primary);
  299.             color: white;
  300.             padding: 0.6rem 0;
  301.             border-radius: 5px;
  302.             text-decoration: none;
  303.             font-weight: 500;
  304.             transition: all 0.3s ease;
  305.         }
  306.  
  307.         .package-button:hover {
  308.             background-color: var(--secondary);
  309.         }
  310.  
  311.         /* Tentang Kami Section */
  312.         .about {
  313.             background-color: var(--light);
  314.         }
  315.  
  316.         .about-content {
  317.             display: grid;
  318.             grid-template-columns: 1fr 1fr;
  319.             gap: 3rem;
  320.             align-items: center;
  321.         }
  322.  
  323.         .about-image {
  324.             border-radius: 10px;
  325.             overflow: hidden;
  326.             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  327.         }
  328.  
  329.         .about-image img {
  330.             width: 100%;
  331.             height: auto;
  332.             display: block;
  333.             transition: transform 0.5s ease;
  334.         }
  335.  
  336.         .about-image:hover img {
  337.             transform: scale(1.05);
  338.         }
  339.  
  340.         .about-text h3 {
  341.             font-size: 2rem;
  342.             color: var(--secondary);
  343.             margin-bottom: 1.5rem;
  344.         }
  345.  
  346.         .about-text p {
  347.             margin-bottom: 1.5rem;
  348.         }
  349.  
  350.         .about-stats {
  351.             display: grid;
  352.             grid-template-columns: repeat(3, 1fr);
  353.             gap: 1rem;
  354.             margin-top: 2rem;
  355.         }
  356.  
  357.         .stat-item {
  358.             text-align: center;
  359.             padding: 1.5rem;
  360.             background-color: white;
  361.             border-radius: 10px;
  362.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  363.         }
  364.  
  365.         .stat-item h4 {
  366.             font-size: 2.5rem;
  367.             color: var(--primary);
  368.             margin-bottom: 0.5rem;
  369.         }
  370.  
  371.         .stat-item p {
  372.             font-size: 0.9rem;
  373.             color: #666;
  374.         }
  375.  
  376.         /* Ustadz Section */
  377.         .ustadz {
  378.             background-color: white;
  379.         }
  380.  
  381.         .ustadz-grid {
  382.             display: grid;
  383.             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  384.             gap: 2rem;
  385.         }
  386.  
  387.         .ustadz-card {
  388.             background-color: white;
  389.             border-radius: 10px;
  390.             overflow: hidden;
  391.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  392.             text-align: center;
  393.             transition: all 0.3s ease;
  394.             opacity: 0;
  395.             transform: translateY(20px);
  396.         }
  397.  
  398.         .ustadz-card.visible {
  399.             opacity: 1;
  400.             transform: translateY(0);
  401.         }
  402.  
  403.         .ustadz-card:hover {
  404.             transform: translateY(-10px);
  405.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  406.         }
  407.  
  408.         .ustadz-image {
  409.             height: 250px;
  410.             overflow: hidden;
  411.         }
  412.  
  413.         .ustadz-image img {
  414.             width: 100%;
  415.             height: 100%;
  416.             object-fit: cover;
  417.             transition: transform 0.5s ease;
  418.         }
  419.  
  420.         .ustadz-card:hover .ustadz-image img {
  421.             transform: scale(1.1);
  422.         }
  423.  
  424.         .ustadz-info {
  425.             padding: 1.5rem;
  426.         }
  427.  
  428.         .ustadz-info h3 {
  429.             font-size: 1.3rem;
  430.             margin-bottom: 0.5rem;
  431.             color: var(--secondary);
  432.         }
  433.  
  434.         .ustadz-info p {
  435.             color: #666;
  436.             font-size: 0.9rem;
  437.             margin-bottom: 1rem;
  438.         }
  439.  
  440.         .ustadz-social {
  441.             display: flex;
  442.             justify-content: center;
  443.             gap: 1rem;
  444.         }
  445.  
  446.         .ustadz-social a {
  447.             display: flex;
  448.             align-items: center;
  449.             justify-content: center;
  450.             width: 35px;
  451.             height: 35px;
  452.             background-color: var(--light);
  453.             color: var(--dark);
  454.             border-radius: 50%;
  455.             transition: all 0.3s ease;
  456.         }
  457.  
  458.         .ustadz-social a:hover {
  459.             background-color: var(--primary);
  460.             color: white;
  461.         }
  462.  
  463.         /* Testimoni Section */
  464.         .testimonials {
  465.             background-color: var(--light);
  466.         }
  467.  
  468.         .testimonial-grid {
  469.             display: grid;
  470.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  471.             gap: 2rem;
  472.         }
  473.  
  474.         .testimonial-card {
  475.             background-color: white;
  476.             border-radius: 10px;
  477.             padding: 2rem;
  478.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  479.             position: relative;
  480.             transition: all 0.3s ease;
  481.             opacity: 0;
  482.             transform: translateY(20px);
  483.         }
  484.  
  485.         .testimonial-card.visible {
  486.             opacity: 1;
  487.             transform: translateY(0);
  488.         }
  489.  
  490.         .testimonial-card:hover {
  491.             transform: translateY(-10px);
  492.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  493.         }
  494.  
  495.         .testimonial-rating {
  496.             color: var(--accent);
  497.             margin-bottom: 1rem;
  498.         }
  499.  
  500.         .testimonial-text {
  501.             font-style: italic;
  502.             margin-bottom: 1.5rem;
  503.             position: relative;
  504.         }
  505.  
  506.         .testimonial-text::before,
  507.         .testimonial-text::after {
  508.             content: '"';
  509.             font-size: 3rem;
  510.             color: rgba(0, 0, 0, 0.1);
  511.             position: absolute;
  512.         }
  513.  
  514.         .testimonial-text::before {
  515.             top: -20px;
  516.             left: -10px;
  517.         }
  518.  
  519.         .testimonial-text::after {
  520.             bottom: -40px;
  521.             right: -10px;
  522.         }
  523.  
  524.         .testimonial-author {
  525.             display: flex;
  526.             align-items: center;
  527.         }
  528.  
  529.         .testimonial-author img {
  530.             width: 50px;
  531.             height: 50px;
  532.             border-radius: 50%;
  533.             object-fit: cover;
  534.             margin-right: 1rem;
  535.         }
  536.  
  537.         .author-info h4 {
  538.             font-size: 1.1rem;
  539.             margin-bottom: 0.2rem;
  540.             color: var(--secondary);
  541.         }
  542.  
  543.         .author-info p {
  544.             font-size: 0.9rem;
  545.             color: #666;
  546.         }
  547.  
  548.         /* Rating Section */
  549.         .rating {
  550.             background: linear-gradient(135deg, var(--primary), var(--secondary));
  551.             color: white;
  552.             text-align: center;
  553.         }
  554.  
  555.         .rating-stats {
  556.             display: flex;
  557.             justify-content: center;
  558.             flex-wrap: wrap;
  559.             gap: 3rem;
  560.             margin-top: 3rem;
  561.         }
  562.  
  563.         .rating-item {
  564.             flex: 1;
  565.             min-width: 200px;
  566.             max-width: 250px;
  567.         }
  568.  
  569.         .rating-item h3 {
  570.             font-size: 3rem;
  571.             margin-bottom: 0.5rem;
  572.             color: var(--accent);
  573.         }
  574.  
  575.         .rating-item p {
  576.             font-size: 1.1rem;
  577.         }
  578.  
  579.         .rating-stars {
  580.             font-size: 2rem;
  581.             color: var(--accent);
  582.             margin-bottom: 1rem;
  583.         }
  584.  
  585.         /* Footer */
  586.         footer {
  587.             background-color: var(--secondary);
  588.             color: white;
  589.             padding: 4rem 0 2rem;
  590.         }
  591.  
  592.         .footer-container {
  593.             display: grid;
  594.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  595.             gap: 2rem;
  596.             max-width: 1200px;
  597.             margin: 0 auto;
  598.             padding: 0 2rem;
  599.         }
  600.  
  601.         .footer-col h3 {
  602.             font-size: 1.3rem;
  603.             margin-bottom: 1.5rem;
  604.             position: relative;
  605.             padding-bottom: 0.5rem;
  606.         }
  607.  
  608.         .footer-col h3::after {
  609.             content: '';
  610.             position: absolute;
  611.             bottom: 0;
  612.             left: 0;
  613.             width: 50px;
  614.             height: 2px;
  615.             background-color: var(--accent);
  616.         }
  617.  
  618.         .footer-col p {
  619.             margin-bottom: 1rem;
  620.             opacity: 0.8;
  621.         }
  622.  
  623.         .footer-col ul {
  624.             list-style: none;
  625.         }
  626.  
  627.         .footer-col ul li {
  628.             margin-bottom: 0.8rem;
  629.         }
  630.  
  631.         .footer-col ul li a {
  632.             color: white;
  633.             text-decoration: none;
  634.             opacity: 0.8;
  635.             transition: all 0.3s ease;
  636.         }
  637.  
  638.         .footer-col ul li a:hover {
  639.             opacity: 1;
  640.             padding-left: 5px;
  641.         }
  642.  
  643.         .footer-social {
  644.             display: flex;
  645.             gap: 1rem;
  646.             margin-top: 1.5rem;
  647.         }
  648.  
  649.         .footer-social a {
  650.             display: flex;
  651.             align-items: center;
  652.             justify-content: center;
  653.             width: 40px;
  654.             height: 40px;
  655.             background-color: rgba(255, 255, 255, 0.1);
  656.             border-radius: 50%;
  657.             transition: all 0.3s ease;
  658.         }
  659.  
  660.         .footer-social a:hover {
  661.             background-color: var(--accent);
  662.             color: var(--dark);
  663.         }
  664.  
  665.         .copyright {
  666.             text-align: center;
  667.             padding-top: 2rem;
  668.             margin-top: 2rem;
  669.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  670.             opacity: 0.7;
  671.             font-size: 0.9rem;
  672.         }
  673.  
  674.         /* Animations */
  675.         @keyframes fadeInUp {
  676.             from {
  677.                 opacity: 0;
  678.                 transform: translateY(30px);
  679.             }
  680.             to {
  681.                 opacity: 1;
  682.                 transform: translateY(0);
  683.             }
  684.         }
  685.  
  686.         /* Smooth Scroll Animation */
  687.         html {
  688.             scroll-behavior: smooth;
  689.         }
  690.  
  691.         /* Responsive Styles */
  692.         @media (max-width: 992px) {
  693.             .about-content {
  694.                 grid-template-columns: 1fr;
  695.             }
  696.  
  697.             .about-image {
  698.                 max-width: 600px;
  699.                 margin: 0 auto;
  700.             }
  701.         }
  702.  
  703.         @media (max-width: 768px) {
  704.             .mobile-menu-btn {
  705.                 display: block;
  706.             }
  707.  
  708.             nav {
  709.                 position: fixed;
  710.                 top: 80px;
  711.                 left: 0;
  712.                 width: 100%;
  713.                 background-color: var(--secondary);
  714.                 padding: 1rem 0;
  715.                 clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  716.                 transition: all 0.4s ease;
  717.             }
  718.  
  719.             nav.active {
  720.                 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  721.             }
  722.  
  723.             nav ul {
  724.                 flex-direction: column;
  725.                 align-items: center;
  726.             }
  727.  
  728.             nav ul li {
  729.                 margin: 0.8rem 0;
  730.             }
  731.  
  732.             .hero h2 {
  733.                 font-size: 2.2rem;
  734.             }
  735.  
  736.             .section-title h2 {
  737.                 font-size: 2rem;
  738.             }
  739.  
  740.             .about-stats {
  741.                 grid-template-columns: 1fr 1fr;
  742.             }
  743.         }
  744.  
  745.         @media (max-width: 576px) {
  746.             .hero h2 {
  747.                 font-size: 1.8rem;
  748.             }
  749.  
  750.             .hero p {
  751.                 font-size: 1rem;
  752.             }
  753.  
  754.             .section-title h2 {
  755.                 font-size: 1.8rem;
  756.             }
  757.  
  758.             .about-stats {
  759.                 grid-template-columns: 1fr;
  760.             }
  761.  
  762.             .rating-item {
  763.                 min-width: 150px;
  764.             }
  765.         }
  766.     </style>
  767. </head>
  768. <body>
  769.     <!-- Header -->
  770.     <header>
  771.         <div class="header-container">
  772.             <div class="logo">
  773.                 <img src="https://via.placeholder.com/50x50" alt="Rahmah Umroh Logo">
  774.                 <h1>Rahmah Umroh</h1>
  775.             </div>
  776.             <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle menu">
  777.                 <i class="fas fa-bars"></i>
  778.             </button>
  779.             <nav id="mainNav" aria-label="Main navigation">
  780.                 <ul>
  781.                     <li><a href="#home">Beranda</a></li>
  782.                     <li><a href="#packages">Paket Umroh</a></li>
  783.                     <li><a href="#ustadz">Ustadz Kami</a></li>
  784.                     <li><a href="#about">Tentang Kami</a></li>
  785.                     <li><a href="#testimonials">Testimoni</a></li>
  786.                 </ul>
  787.             </nav>
  788.         </div>
  789.     </header>
  790.  
  791.     <!-- Hero Section -->
  792.     <section class="hero" id="home">
  793.         <div class="hero-content">
  794.             <h2>Perjalanan Spiritual Terbaik Anda</h2>
  795.             <p>Rahmah Umroh menyediakan paket perjalanan umroh berkualitas dengan bimbingan ustadz berpengalaman. Wujudkan impian ibadah umroh Anda bersama kami.</p>
  796.             <a href="#packages" class="cta-button">Lihat Paket Umroh</a>
  797.         </div>
  798.     </section>
  799.  
  800.     <!-- Paket Umroh Section -->
  801.     <section class="packages" id="packages">
  802.         <div class="container">
  803.             <div class="section-title">
  804.                 <h2>Paket Umroh Kami</h2>
  805.             </div>
  806.             <div class="package-grid">
  807.                 <div class="package-card">
  808.                     <div class="package-image">
  809.                         <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 Ekonomis" loading="lazy">
  810.                     </div>
  811.                     <div class="package-content">
  812.                         <h3>Paket Ekonomis</h3>
  813.                         <div class="package-price">Rp 25.000.000</div>
  814.                         <span class="package-duration">9 Hari</span>
  815.                         <ul class="package-features">
  816.                             <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi</li>
  817.                             <li><i class="fas fa-check"></i> Akomodasi hotel bintang 3</li>
  818.                             <li><i class="fas fa-check"></i> Makan 3x sehari</li>
  819.                             <li><i class="fas fa-check"></i> Bimbingan ustadz</li>
  820.                             <li><i class="fas fa-check"></i> Ziarah ke tempat bersejarah</li>
  821.                         </ul>
  822.                         <a href="#" class="package-button" onclick="bookPackage('Ekonomis')">Pesan Sekarang</a>
  823.                     </div>
  824.                 </div>
  825.                 <div class="package-card">
  826.                     <div class="package-image">
  827.                         <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 Reguler" loading="lazy">
  828.                     </div>
  829.                     <div class="package-content">
  830.                         <h3>Paket Reguler</h3>
  831.                         <div class="package-price">Rp 32.000.000</div>
  832.                         <span class="package-duration">12 Hari</span>
  833.                         <ul class="package-features">
  834.                             <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi</li>
  835.                             <li><i class="fas fa-check"></i> Akomodasi hotel bintang 4</li>
  836.                             <li><i class="fas fa-check"></i> Makan 3x sehari</li>
  837.                             <li><i class="fas fa-check"></i> Bimbingan ustadz berpengalaman</li>
  838.                             <li><i class="fas fa-check"></i> Ziarah lengkap</li>
  839.                             <li><i class="fas fa-check"></i> Free baggage 30kg</li>
  840.                         </ul>
  841.                         <a href="#" class="package-button" onclick="bookPackage('Reguler')">Pesan Sekarang</a>
  842.                     </div>
  843.                 </div>
  844.                 <div class="package-card">
  845.                     <div class="package-image">
  846.                         <img src="https://images.unsplash.com/photo-1547981609-4b6bfe67ca0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Umroh Premium" loading="lazy">
  847.                     </div>
  848.                     <div class="package-content">
  849.                         <h3>Paket Premium</h3>
  850.                         <div class="package-price">Rp 45.000.000</div>
  851.                         <span class="package-duration">15 Hari</span>
  852.                         <ul class="package-features">
  853.                             <li><i class="fas fa-check"></i> Tiket pesawat kelas bisnis</li>
  854.                             <li><i class="fas fa-check"></i> Akomodasi hotel bintang 5</li>
  855.                             <li><i class="fas fa-check"></i> Makan prasmanan 3x sehari</li>
  856.                             <li><i class="fas fa-check"></i> Bimbingan ustadz ternama</li>
  857.                             <li><i class="fas fa-check"></i> Ziarah lengkap + kota Madinah</li>
  858.                             <li><i class="fas fa-check"></i> Free baggage 40kg</li>
  859.                             <li><i class="fas fa-check"></i> Transportasi VIP</li>
  860.                         </ul>
  861.                         <a href="#" class="package-button" onclick="bookPackage('Premium')">Pesan Sekarang</a>
  862.                     </div>
  863.                 </div>
  864.                 <div class="package-card">
  865.                     <div class="package-image">
  866.                         <img src="https://images.unsplash.com/photo-1519748771451-a94c186828ff?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Umroh Keluarga" loading="lazy">
  867.                     </div>
  868.                     <div class="package-content">
  869.                         <h3>Paket Keluarga</h3>
  870.                         <div class="package-price">Rp 120.000.000</div>
  871.                         <span class="package-duration">12 Hari</span>
  872.                         <ul class="package-features">
  873.                             <li><i class="fas fa-check"></i> Untuk 4 orang (2 dewasa + 2 anak)</li>
  874.                             <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi</li>
  875.                             <li><i class="fas fa-check"></i> Akomodasi hotel bintang 4</li>
  876.                             <li><i class="fas fa-check"></i> Makan 3x sehari</li>
  877.                             <li><i class="fas fa-check"></i> Bimbingan ustadz khusus keluarga</li>
  878.                             <li><i class="fas fa-check"></i> Ziarah lengkap</li>
  879.                             <li><i class="fas fa-check"></i> Aktivitas khusus anak</li>
  880.                         </ul>
  881.                         <a href="#" class="package-button" onclick="bookPackage('Keluarga')">Pesan Sekarang</a>
  882.                     </div>
  883.                 </div>
  884.             </div>
  885.         </div>
  886.     </section>
  887.  
  888.     <!-- Ustadz Section -->
  889.     <section class="ustadz" id="ustadz">
  890.         <div class="container">
  891.             <div class="section-title">
  892.                 <h2>Ustadz Pembimbing</h2>
  893.             </div>
  894.             <div class="ustadz-grid">
  895.                 <div class="ustadz-card">
  896.                     <div class="ustadz-image">
  897.                         <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Ahmad Al-Faruq" loading="lazy">
  898.                     </div>
  899.                     <div class="ustadz-info">
  900.                         <h3>Ustadz Ahmad Al-Faruq</h3>
  901.                         <p>Spesialis Fiqih Ibadah</p>
  902.                         <div class="ustadz-social">
  903.                             <a href="#" aria-label="Facebook Ustadz Ahmad"><i class="fab fa-facebook-f"></i></a>
  904.                             <a href="#" aria-label="Instagram Ustadz Ahmad"><i class="fab fa-instagram"></i></a>
  905.                             <a href="#" aria-label="YouTube Ustadz Ahmad"><i class="fab fa-youtube"></i></a>
  906.                         </div>
  907.                     </div>
  908.                 </div>
  909.                 <div class="ustadz-card">
  910.                     <div class="ustadz-image">
  911.                         <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Muhammad Hasyim" loading="lazy">
  912.                     </div>
  913.                     <div class="ustadz-info">
  914.                         <h3>Ustadz Muhammad Hasyim</h3>
  915.                         <p>Ahli Tafsir Al-Qur'an</p>
  916.                         <div class="ustadz-social">
  917.                             <a href="#" aria-label="Facebook Ustadz Muhammad"><i class="fab fa-facebook-f"></i></a>
  918.                             <a href="#" aria-label="Instagram Ustadz Muhammad"><i class="fab fa-instagram"></i></a>
  919.                             <a href="#" aria-label="YouTube Ustadz Muhammad"><i class="fab fa-youtube"></i></a>
  920.                         </div>
  921.                     </div>
  922.                 </div>
  923.                 <div class="ustadz-card">
  924.                     <div class="ustadz-image">
  925.                         <img src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Abdullah Syafi'i" loading="lazy">
  926.                     </div>
  927.                     <div class="ustadz-info">
  928.                         <h3>Ustadz Abdullah Syafi'i</h3>
  929.                         <p>Pakar Sejarah Islam</p>
  930.                         <div class="ustadz-social">
  931.                             <a href="#" aria-label="Facebook Ustadz Abdullah"><i class="fab fa-facebook-f"></i></a>
  932.                             <a href="#" aria-label="Instagram Ustadz Abdullah"><i class="fab fa-instagram"></i></a>
  933.                             <a href="#" aria-label="YouTube Ustadz Abdullah"><i class="fab fa-youtube"></i></a>
  934.                         </div>
  935.                     </div>
  936.                 </div>
  937.                 <div class="ustadz-card">
  938.                     <div class="ustadz-image">
  939.                         <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="Ustadz Ismail Yusuf" loading="lazy">
  940.                     </div>
  941.                     <div class="ustadz-info">
  942.                         <h3>Ustadz Ismail Yusuf</h3>
  943.                         <p>Ahli Tasawuf & Spiritual</p>
  944.                        <div class="ustadz-social">
  945.                            <a href="#" aria-label="Facebook Ustadz Ismail"><i class="fab fa-facebook-f"></i></a>
  946.                            <a href="#" aria-label="Instagram Ustadz Ismail"><i class="fab fa-instagram"></i></a>
  947.                            <a href="#" aria-label="YouTube Ustadz Ismail"><i class="fab fa-youtube"></i></a>
  948.                        </div>
  949.                    </div>
  950.                </div>
  951.            </div>
  952.        </div>
  953.    </section>
  954.  
  955.    <!-- Tentang Kami Section -->
  956.    <section class="about" id="about">
  957.        <div class="container">
  958.            <div class="section-title">
  959.                <h2>Tentang Kami</h2>
  960.            </div>
  961.            <div class="about-content">
  962.                <div class="about-image">
  963.                    <img src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Tim Rahmah Umroh" loading="lazy">
  964.                </div>
  965.                <div class="about-text">
  966.                    <h3>Rahmah Umroh - Partner Spiritual Anda</h3>
  967.                    <p>Rahmah Umroh telah berpengalaman lebih dari 10 tahun dalam menyelenggarakan perjalanan ibadah umroh. Kami berkomitmen untuk memberikan pengalaman ibadah yang khusyuk dan bermakna bagi setiap jamaah.</p>
  968.                    <p>Dengan tim yang profesional dan ustadz-ustadz berpengalaman, kami memastikan setiap perjalanan umroh Anda berjalan lancar dan penuh berkah. Kami memahami bahwa umroh bukan sekadar perjalanan biasa, melainkan perjalanan spiritual yang sangat berarti.</p>
  969.                    <div class="about-stats">
  970.                        <div class="stat-item">
  971.                            <h4>10+</h4>
  972.                            <p>Tahun Pengalaman</p>
  973.                        </div>
  974.                        <div class="stat-item">
  975.                            <h4>5.000+</h4>
  976.                            <p>Jamaah Umroh</p>
  977.                        </div>
  978.                        <div class="stat-item">
  979.                            <h4>98%</h4>
  980.                            <p>Kepuasan Jamaah</p>
  981.                        </div>
  982.                    </div>
  983.                </div>
  984.            </div>
  985.        </div>
  986.    </section>
  987.  
  988.    <!-- Testimoni Section -->
  989.    <section class="testimonials" id="testimonials">
  990.        <div class="container">
  991.            <div class="section-title">
  992.                <h2>Testimoni Jamaah</h2>
  993.            </div>
  994.            <div class="testimonial-grid">
  995.                <div class="testimonial-card">
  996.                    <div class="testimonial-rating">
  997.                        <i class="fas fa-star"></i>
  998.                        <i class="fas fa-star"></i>
  999.                        <i class="fas fa-star"></i>
  1000.                        <i class="fas fa-star"></i>
  1001.                        <i class="fas fa-star"></i>
  1002.                    </div>
  1003.                    <p class="testimonial-text">Perjalanan umroh bersama Rahmah Umroh sangat berkesan. Pelayanan dari awal sampai akhir sangat memuaskan. Ustadz pembimbing sangat berwawasan dan membuat kami memahami setiap ritual ibadah dengan baik.</p>
  1004.                    <div class="testimonial-author">
  1005.                        <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Siti Aminah" loading="lazy">
  1006.                        <div class="author-info">
  1007.                            <h4>Siti Aminah</h4>
  1008.                            <p>Jamaah Umroh 2023</p>
  1009.                        </div>
  1010.                    </div>
  1011.                </div>
  1012.                <div class="testimonial-card">
  1013.                    <div class="testimonial-rating">
  1014.                        <i class="fas fa-star"></i>
  1015.                        <i class="fas fa-star"></i>
  1016.                        <i class="fas fa-star"></i>
  1017.                        <i class="fas fa-star"></i>
  1018.                        <i class="fas fa-star"></i>
  1019.                    </div>
  1020.                    <p class="testimonial-text">Alhamdulillah, pengalaman pertama umroh kami sangat menyenangkan. Akomodasi nyaman, makanan enak dan halal, serta bimbingan ustadz yang sabar. Kami sudah merekomendasikan Rahmah Umroh ke keluarga dan teman-teman.</p>
  1021.                    <div class="testimonial-author">
  1022.                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Budi Santoso" loading="lazy">
  1023.                        <div class="author-info">
  1024.                            <h4>Budi Santoso</h4>
  1025.                            <p>Jamaah Umroh Keluarga 2022</p>
  1026.                        </div>
  1027.                    </div>
  1028.                </div>
  1029.                <div class="testimonial-card">
  1030.                    <div class="testimonial-rating">
  1031.                        <i class="fas fa-star"></i>
  1032.                        <i class="fas fa-star"></i>
  1033.                        <i class="fas fa-star"></i>
  1034.                        <i class="fas fa-star"></i>
  1035.                        <i class="fas fa-star"></i>
  1036.                    </div>
  1037.                    <p class="testimonial-text">Pelayanan tim Rahmah Umroh sangat profesional. Dari proses pendaftaran hingga kepulangan, semua terorganisir dengan baik. Saya sangat merekomendasikan untuk umroh bersama mereka.</p>
  1038.                    <div class="testimonial-author">
  1039.                        <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Fatimah Zahra" loading="lazy">
  1040.                        <div class="author-info">
  1041.                            <h4>Fatimah Zahra</h4>
  1042.                            <p>Jamaah Umroh 2024</p>
  1043.                        </div>
  1044.                    </div>
  1045.                </div>
  1046.            </div>
  1047.        </div>
  1048.    </section>
  1049.  
  1050.    <!-- Rating Section -->
  1051.    <section class="rating">
  1052.        <div class="container">
  1053.            <div class="section-title">
  1054.                <h2>Penilaian Jamaah</h2>
  1055.            </div>
  1056.            <div class="rating-stars">
  1057.                <i class="fas fa-star"></i>
  1058.                <i class="fas fa-star"></i>
  1059.                <i class="fas fa-star"></i>
  1060.                <i class="fas fa-star"></i>
  1061.                <i class="fas fa-star-half-alt"></i>
  1062.                <span>4.7/5.0</span>
  1063.            </div>
  1064.            <div class="rating-stats">
  1065.                <div class="rating-item">
  1066.                    <h3>4.9</h3>
  1067.                    <p>Kualitas Bimbingan</p>
  1068.                </div>
  1069.                <div class="rating-item">
  1070.                    <h3>4.8</h3>
  1071.                    <p>Kenyamanan Akomodasi</p>
  1072.                </div>
  1073.                <div class="rating-item">
  1074.                    <h3>4.7</h3>
  1075.                    <p>Pelayanan Tim</p>
  1076.                </div>
  1077.                <div class="rating-item">
  1078.                    <h3>4.6</h3>
  1079.                    <p>Nilai Keseluruhan</p>
  1080.                </div>
  1081.            </div>
  1082.        </div>
  1083.    </section>
  1084.  
  1085.    <!-- Footer -->
  1086.    <footer>
  1087.        <div class="footer-container">
  1088.            <div class="footer-col">
  1089.                <h3>Tentang Rahmah Umroh</h3>
  1090.                <p>Rahmah Umroh adalah biro perjalanan umroh profesional yang berkomitmen untuk memberikan pengalaman ibadah terbaik bagi setiap jamaah.</p>
  1091.                <div class="footer-social">
  1092.                    <a href="#" aria-label="Facebook Rahmah Umroh"><i class="fab fa-facebook-f"></i></auidas
  1093.                    <a href="#" aria-label="Instagram Rahmah Umroh"><i class="fab fa-instagram"></i></a>
  1094.                    <a href="#" aria-label="YouTube Rahmah Umroh"><i class="fab fa-youtube"></i></a>
  1095.                    <a href="#" aria-label="WhatsApp Rahmah Umroh"><i class="fab fa-whatsapp"></i></a>
  1096.                </div>
  1097.            </div>
  1098.            <div class="footer-col">
  1099.                <h3>Kontak Kami</h3>
  1100.                <p><i class="fas fa-map-marker-alt"></i> Jl. Spiritual No. 123, Jakarta</p>
  1101.                <p><i class="fas fa-phone"></i> +62 812 3456 7890</p>
  1102.                <p><i class="fas fa-envelope"></i> [email protected]</p>
  1103.            </div>
  1104.            <div class="footer-col">
  1105.                <h3>Link Cepat</h3>
  1106.                <ul>
  1107.                    <li><a href="#home">Beranda</a></li>
  1108.                    <li><a href="#packages">Paket Umroh</a></li>
  1109.                    <li><a href="#ustadz">Ustadz Kami</a></li>
  1110.                    <li><a href="#about">Tentang Kami</a></li>
  1111.                    <li><a href="#testimonials">Testimoni</a></li>
  1112.                </ul>
  1113.            </div>
  1114.            <div class="footer-col">
  1115.                <h3>Jam Operasional</h3>
  1116.                <p>Senin - Jumat: 08.00 - 17.00</p>
  1117.                <p>Sabtu: 08.00 - 15.00</p>
  1118.                <p>Minggu & Hari Libur: Tutup</p>
  1119.            </div>
  1120.        </div>
  1121.        <div class="copyright">
  1122.            <p>© 2025 Rahmah Umroh. Semua Hak Dilindungi.</p>
  1123.        </div>
  1124.    </footer>
  1125.  
  1126.    <script>
  1127.        // Mobile Menu Toggle
  1128.        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  1129.         const mainNav = document.getElementById('mainNav');
  1130.  
  1131.         mobileMenuBtn.addEventListener('click', () => {
  1132.             mainNav.classList.toggle('active');
  1133.             mobileMenuBtn.innerHTML = mainNav.classList.contains('active') ?
  1134.                 '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
  1135.             mobileMenuBtn.setAttribute('aria-expanded', mainNav.classList.contains('active'));
  1136.         });
  1137.  
  1138.         // Close mobile menu when clicking outside
  1139.         document.addEventListener('click', (e) => {
  1140.             if (!mainNav.contains(e.target) && !mobileMenuBtn.contains(e.target) && mainNav.classList.contains('active')) {
  1141.                mainNav.classList.remove('active');
  1142.                 mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  1143.                 mobileMenuBtn.setAttribute('aria-expanded', 'false');
  1144.             }
  1145.         });
  1146.  
  1147.         // Close mobile menu when clicking on a link
  1148.         const navLinks = document.querySelectorAll('nav ul li a');
  1149.         navLinks.forEach(link => {
  1150.             link.addEventListener('click', () => {
  1151.                 if (mainNav.classList.contains('active')) {
  1152.                     mainNav.classList.remove('active');
  1153.                     mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  1154.                     mobileMenuBtn.setAttribute('aria-expanded', 'false');
  1155.                 }
  1156.             });
  1157.         });
  1158.  
  1159.         // Smooth scrolling for anchor links
  1160.         document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  1161.             anchor.addEventListener('click', function (e) {
  1162.                 e.preventDefault();
  1163.                 const targetId = this.getAttribute('href');
  1164.                 const targetElement = document.querySelector(targetId);
  1165.                 if (targetElement) {
  1166.                     const headerHeight = document.querySelector('header').offsetHeight;
  1167.                     window.scrollTo({
  1168.                         top: targetElement.offsetTop - headerHeight,
  1169.                         behavior: 'smooth'
  1170.                     });
  1171.                 }
  1172.             });
  1173.         });
  1174.  
  1175.         // Header scroll effect
  1176.         window.addEventListener('scroll', () => {
  1177.             const header = document.querySelector('header');
  1178.             if (window.scrollY > 100) {
  1179.                 header.style.padding = '0.5rem 0';
  1180.                 header.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
  1181.             } else {
  1182.                 header.style.padding = '1rem 0';
  1183.                 header.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.1)';
  1184.             }
  1185.         });
  1186.  
  1187.         // Animate elements when scrolling using IntersectionObserver
  1188.         const animateElements = document.querySelectorAll('.package-card, .ustadz-card, .testimonial-card');
  1189.         const observerOptions = {
  1190.             root: null,
  1191.             rootMargin: '0px',
  1192.             threshold: 0.1
  1193.         };
  1194.  
  1195.         const observer = new IntersectionObserver((entries) => {
  1196.             entries.forEach(entry => {
  1197.                 if (entry.isIntersecting) {
  1198.                     entry.target.classList.add('visible');
  1199.                     observer.unobserve(entry.target);
  1200.                 }
  1201.             });
  1202.         }, observerOptions);
  1203.  
  1204.         animateElements.forEach(element => observer.observe(element));
  1205.  
  1206.         // Placeholder booking function
  1207.         function bookPackage(packageName) {
  1208.             alert(`Anda memilih Paket ${packageName}. Silakan hubungi kami di +62 812 3456 7890 untuk pemesanan!`);
  1209.             // In a real app, this could open a modal or redirect to a booking form
  1210.         }
  1211.     </script>
  1212. </body>
  1213. </html>
Tags: Template 1
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!