API tools faq
paste
Advertisement
andiahmads

Untitled

andiahmads
May 18th, 2025
402
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.54 KB | None | 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.     <title>Rahmat Tours - Travel Umroh Terpercaya</title>
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  8.     <style>
  9.         /* Reset dan Base Styles */
  10.         * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.             font-family: 'Poppins', sans-serif;
  15.         }
  16.        
  17.         body {
  18.             background-color: #f9f9f9;
  19.             color: #333;
  20.             line-height: 1.6;
  21.         }
  22.        
  23.         /* Header */
  24.         header {
  25.             background-color: #1e3a8a;
  26.             color: white;
  27.             padding: 1rem 0;
  28.             position: fixed;
  29.             width: 100%;
  30.             top: 0;
  31.             z-index: 1000;
  32.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  33.             transition: all 0.3s ease;
  34.         }
  35.        
  36.         .container {
  37.             width: 90%;
  38.             max-width: 1200px;
  39.             margin: 0 auto;
  40.         }
  41.        
  42.         .header-content {
  43.             display: flex;
  44.             justify-content: space-between;
  45.             align-items: center;
  46.         }
  47.        
  48.         .logo {
  49.             font-size: 1.8rem;
  50.             font-weight: 700;
  51.             display: flex;
  52.             align-items: center;
  53.         }
  54.        
  55.         .logo i {
  56.             margin-right: 10px;
  57.             color: #f59e0b;
  58.         }
  59.        
  60.         nav ul {
  61.             display: flex;
  62.             list-style: none;
  63.         }
  64.        
  65.         nav ul li {
  66.             margin-left: 2rem;
  67.         }
  68.        
  69.         nav ul li a {
  70.             color: white;
  71.             text-decoration: none;
  72.             font-weight: 500;
  73.             transition: color 0.3s;
  74.         }
  75.        
  76.         nav ul li a:hover {
  77.             color: #f59e0b;
  78.         }
  79.        
  80.         .cta-button {
  81.             background-color: #f59e0b;
  82.             color: white;
  83.             padding: 0.5rem 1.5rem;
  84.             border-radius: 50px;
  85.             font-weight: 600;
  86.             transition: background-color 0.3s;
  87.         }
  88.        
  89.         .cta-button:hover {
  90.             background-color: #d97706;
  91.             color: white;
  92.         }
  93.        
  94.         /* Hero Slider */
  95.         .hero {
  96.             margin-top: 80px;
  97.             position: relative;
  98.             height: 80vh;
  99.             overflow: hidden;
  100.         }
  101.        
  102.         .slider {
  103.             width: 100%;
  104.             height: 100%;
  105.             position: relative;
  106.         }
  107.        
  108.         .slide {
  109.             position: absolute;
  110.             top: 0;
  111.             left: 0;
  112.             width: 100%;
  113.             height: 100%;
  114.             opacity: 0;
  115.             transition: opacity 1s ease-in-out;
  116.             background-size: cover;
  117.             background-position: center;
  118.             display: flex;
  119.             align-items: center;
  120.         }
  121.        
  122.         .slide.active {
  123.             opacity: 1;
  124.         }
  125.        
  126.         .slide-content {
  127.             width: 50%;
  128.             padding: 2rem;
  129.             background-color: rgba(0, 0, 0, 0.6);
  130.             color: white;
  131.             border-radius: 10px;
  132.             margin-left: 5%;
  133.             animation: fadeInUp 1s ease-out;
  134.         }
  135.        
  136.         .slide-content h1 {
  137.             font-size: 2.5rem;
  138.             margin-bottom: 1rem;
  139.             color: #f59e0b;
  140.         }
  141.        
  142.         .slide-content p {
  143.             margin-bottom: 1.5rem;
  144.             font-size: 1.1rem;
  145.         }
  146.        
  147.         @keyframes fadeInUp {
  148.             from {
  149.                 opacity: 0;
  150.                 transform: translateY(30px);
  151.             }
  152.             to {
  153.                 opacity: 1;
  154.                 transform: translateY(0);
  155.             }
  156.         }
  157.        
  158.         /* Jadwal Keberangkatan */
  159.         .schedule {
  160.             padding: 5rem 0;
  161.             background-color: white;
  162.         }
  163.        
  164.         .section-title {
  165.             text-align: center;
  166.             margin-bottom: 3rem;
  167.         }
  168.        
  169.         .section-title h2 {
  170.             font-size: 2.2rem;
  171.             color: #1e3a8a;
  172.             position: relative;
  173.             display: inline-block;
  174.             padding-bottom: 10px;
  175.         }
  176.        
  177.         .section-title h2::after {
  178.             content: '';
  179.             position: absolute;
  180.             bottom: 0;
  181.             left: 50%;
  182.             transform: translateX(-50%);
  183.             width: 80px;
  184.             height: 3px;
  185.             background-color: #f59e0b;
  186.         }
  187.        
  188.         .packages {
  189.             display: grid;
  190.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  191.             gap: 2rem;
  192.         }
  193.        
  194.         .package-card {
  195.             background-color: #f8fafc;
  196.             border-radius: 10px;
  197.             overflow: hidden;
  198.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  199.             transition: transform 0.3s, box-shadow 0.3s;
  200.         }
  201.        
  202.         .package-card:hover {
  203.             transform: translateY(-10px);
  204.             box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  205.         }
  206.        
  207.         .package-image {
  208.             height: 200px;
  209.             background-size: cover;
  210.             background-position: center;
  211.         }
  212.        
  213.         .package-details {
  214.             padding: 1.5rem;
  215.         }
  216.        
  217.         .package-details h3 {
  218.             font-size: 1.4rem;
  219.             margin-bottom: 0.5rem;
  220.             color: #1e3a8a;
  221.         }
  222.        
  223.         .package-meta {
  224.             display: flex;
  225.             justify-content: space-between;
  226.             margin-bottom: 1rem;
  227.             color: #64748b;
  228.             font-size: 0.9rem;
  229.         }
  230.        
  231.         .price {
  232.             font-size: 1.5rem;
  233.             font-weight: 700;
  234.             color: #f59e0b;
  235.             margin: 1rem 0;
  236.         }
  237.        
  238.         .package-features {
  239.             margin: 1rem 0;
  240.         }
  241.        
  242.         .feature {
  243.             display: flex;
  244.             align-items: center;
  245.             margin-bottom: 0.5rem;
  246.         }
  247.        
  248.         .feature i {
  249.             color: #f59e0b;
  250.             margin-right: 10px;
  251.         }
  252.        
  253.         .book-now {
  254.             display: block;
  255.             width: 100%;
  256.             padding: 0.8rem;
  257.             background-color: #1e3a8a;
  258.             color: white;
  259.             border: none;
  260.             border-radius: 5px;
  261.             font-weight: 600;
  262.             cursor: pointer;
  263.             transition: background-color 0.3s;
  264.             text-align: center;
  265.             text-decoration: none;
  266.         }
  267.        
  268.         .book-now:hover {
  269.             background-color: #1e40af;
  270.         }
  271.        
  272.         /* Testimoni */
  273.         .testimonials {
  274.             padding: 5rem 0;
  275.             background-color: #f0f4f8;
  276.         }
  277.        
  278.         .testimonial-container {
  279.             display: flex;
  280.             overflow-x: auto;
  281.             scroll-snap-type: x mandatory;
  282.             gap: 2rem;
  283.             padding: 1rem 0;
  284.             scrollbar-width: none; /* Firefox */
  285.         }
  286.        
  287.         .testimonial-container::-webkit-scrollbar {
  288.             display: none; /* Chrome, Safari, Opera */
  289.         }
  290.        
  291.         .testimonial-card {
  292.             min-width: 300px;
  293.             scroll-snap-align: start;
  294.             background-color: white;
  295.             padding: 2rem;
  296.             border-radius: 10px;
  297.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  298.         }
  299.        
  300.         .testimonial-header {
  301.             display: flex;
  302.             align-items: center;
  303.             margin-bottom: 1rem;
  304.         }
  305.        
  306.         .testimonial-avatar {
  307.             width: 60px;
  308.             height: 60px;
  309.             border-radius: 50%;
  310.             object-fit: cover;
  311.             margin-right: 1rem;
  312.         }
  313.        
  314.         .testimonial-author h4 {
  315.             color: #1e3a8a;
  316.             margin-bottom: 0.2rem;
  317.         }
  318.        
  319.         .testimonial-author p {
  320.             color: #64748b;
  321.             font-size: 0.9rem;
  322.         }
  323.        
  324.         .testimonial-rating {
  325.             color: #f59e0b;
  326.             margin-bottom: 1rem;
  327.         }
  328.        
  329.         /* Video Testimoni */
  330.         .video-testimonials {
  331.             padding: 5rem 0;
  332.             background-color: white;
  333.         }
  334.        
  335.         .video-container {
  336.             display: grid;
  337.             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  338.             gap: 2rem;
  339.         }
  340.        
  341.         .video-card {
  342.             background-color: #f8fafc;
  343.             border-radius: 10px;
  344.             overflow: hidden;
  345.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  346.         }
  347.        
  348.         .video-wrapper {
  349.             position: relative;
  350.             padding-bottom: 56.25%; /* 16:9 aspect ratio */
  351.             height: 0;
  352.             overflow: hidden;
  353.         }
  354.        
  355.         .video-wrapper iframe {
  356.             position: absolute;
  357.             top: 0;
  358.             left: 0;
  359.             width: 100%;
  360.             height: 100%;
  361.             border: none;
  362.         }
  363.        
  364.         .video-info {
  365.             padding: 1.5rem;
  366.         }
  367.        
  368.         .video-info h3 {
  369.             color: #1e3a8a;
  370.             margin-bottom: 0.5rem;
  371.         }
  372.        
  373.         .video-info p {
  374.             color: #64748b;
  375.             font-size: 0.9rem;
  376.         }
  377.        
  378.         /* Footer */
  379.         footer {
  380.             background-color: #1e3a8a;
  381.             color: white;
  382.             padding: 4rem 0 2rem;
  383.         }
  384.        
  385.         .footer-content {
  386.             display: grid;
  387.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  388.             gap: 2rem;
  389.             margin-bottom: 3rem;
  390.         }
  391.        
  392.         .footer-column h3 {
  393.             font-size: 1.3rem;
  394.             margin-bottom: 1.5rem;
  395.             position: relative;
  396.             padding-bottom: 10px;
  397.         }
  398.        
  399.         .footer-column h3::after {
  400.             content: '';
  401.             position: absolute;
  402.             bottom: 0;
  403.             left: 0;
  404.             width: 50px;
  405.             height: 2px;
  406.             background-color: #f59e0b;
  407.         }
  408.        
  409.         .footer-column p {
  410.             margin-bottom: 1rem;
  411.             opacity: 0.8;
  412.         }
  413.        
  414.         .footer-links {
  415.             list-style: none;
  416.         }
  417.        
  418.         .footer-links li {
  419.             margin-bottom: 0.8rem;
  420.         }
  421.        
  422.         .footer-links a {
  423.             color: white;
  424.             text-decoration: none;
  425.             opacity: 0.8;
  426.             transition: opacity 0.3s;
  427.         }
  428.        
  429.         .footer-links a:hover {
  430.             opacity: 1;
  431.             color: #f59e0b;
  432.         }
  433.        
  434.         .social-links {
  435.             display: flex;
  436.             gap: 1rem;
  437.             margin-top: 1rem;
  438.         }
  439.        
  440.         .social-links a {
  441.             display: flex;
  442.             align-items: center;
  443.             justify-content: center;
  444.             width: 40px;
  445.             height: 40px;
  446.             background-color: rgba(255, 255, 255, 0.1);
  447.             border-radius: 50%;
  448.             color: white;
  449.             transition: background-color 0.3s;
  450.         }
  451.        
  452.         .social-links a:hover {
  453.             background-color: #f59e0b;
  454.         }
  455.        
  456.         .footer-bottom {
  457.             text-align: center;
  458.             padding-top: 2rem;
  459.             border-top: 1px solid rgba(255, 255, 255, 0.1);
  460.             opacity: 0.8;
  461.             font-size: 0.9rem;
  462.         }
  463.        
  464.         /* Animasi Scroll */
  465.         .section {
  466.             opacity: 0;
  467.             transform: translateY(50px);
  468.             transition: opacity 0.8s ease, transform 0.8s ease;
  469.         }
  470.        
  471.         .section.visible {
  472.             opacity: 1;
  473.             transform: translateY(0);
  474.         }
  475.        
  476.         /* Responsif */
  477.         @media (max-width: 768px) {
  478.             .header-content {
  479.                 flex-direction: column;
  480.                 text-align: center;
  481.             }
  482.            
  483.             nav ul {
  484.                 margin-top: 1rem;
  485.                 flex-wrap: wrap;
  486.                 justify-content: center;
  487.             }
  488.            
  489.             nav ul li {
  490.                 margin: 0.5rem;
  491.             }
  492.            
  493.             .slide-content {
  494.                 width: 90%;
  495.                 margin: 0 auto;
  496.             }
  497.            
  498.             .slide-content h1 {
  499.                 font-size: 1.8rem;
  500.             }
  501.            
  502.             .section-title h2 {
  503.                 font-size: 1.8rem;
  504.             }
  505.         }
  506.     </style>
  507. </head>
  508. <body>
  509.     <!-- Header -->
  510.     <header>
  511.         <div class="container">
  512.             <div class="header-content">
  513.                 <div class="logo">
  514.                     <i class="fas fa-kaaba"></i>
  515.                     <span>Rahmat Tours</span>
  516.                 </div>
  517.                 <nav>
  518.                     <ul>
  519.                         <li><a href="#home">Beranda</a></li>
  520.                         <li><a href="#packages">Paket Umroh</a></li>
  521.                         <li><a href="#testimonials">Testimoni</a></li>
  522.                         <li><a href="#video-testimonials">Video</a></li>
  523.                         <li><a href="#contact">Kontak</a></li>
  524.                     </ul>
  525.                 </nav>
  526.                 <a href="#packages" class="cta-button">Daftar Sekarang</a>
  527.             </div>
  528.         </div>
  529.     </header>
  530.  
  531.     <!-- Hero Slider -->
  532.     <section class="hero" id="home">
  533.         <div class="slider">
  534.             <div class="slide active" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
  535.                 <div class="slide-content">
  536.                     <h1>Umroh Berkah 2023</h1>
  537.                     <p>Nikmati perjalanan spiritual Anda dengan fasilitas terbaik dan bimbingan ustadz berpengalaman. Paket 12 hari dengan akomodasi bintang 5.</p>
  538.                     <a href="#packages" class="cta-button">Lihat Jadwal</a>
  539.                 </div>
  540.             </div>
  541.             <div class="slide" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
  542.                 <div class="slide-content">
  543.                     <h1>Umroh Plus Turki</h1>
  544.                     <p>Kombinasi sempurna antara ibadah umroh dan wisata ke Turki. Kunjungi masjid bersejarah dan tempat-tempat menarik di Istanbul.</p>
  545.                     <a href="#packages" class="cta-button">Lihat Jadwal</a>
  546.                 </div>
  547.             </div>
  548.             <div class="slide" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1566378246598-5b11a0d486cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
  549.                 <div class="slide-content">
  550.                     <h1>Umroh Ramadhan 2023</h1>
  551.                     <p>Raih keberkahan Ramadhan dengan beribadah di tanah suci. Paket khusus 20 hari dengan program ibadah intensif.</p>
  552.                     <a href="#packages" class="cta-button">Lihat Jadwal</a>
  553.                 </div>
  554.             </div>
  555.         </div>
  556.     </section>
  557.  
  558.     <!-- Jadwal Keberangkatan -->
  559.     <section class="schedule section" id="packages">
  560.         <div class="container">
  561.             <div class="section-title">
  562.                 <h2>Jadwal Keberangkatan</h2>
  563.                 <p>Pilih paket umroh yang sesuai dengan kebutuhan Anda</p>
  564.             </div>
  565.             <div class="packages">
  566.                 <div class="package-card">
  567.                     <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1544551763-46a013bb70d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
  568.                     <div class="package-details">
  569.                         <h3>Umroh Reguler 12 Hari</h3>
  570.                         <div class="package-meta">
  571.                             <span><i class="far fa-calendar-alt"></i> 12 Hari</span>
  572.                             <span><i class="fas fa-users"></i> 30 Orang</span>
  573.                         </div>
  574.                         <div class="price">Rp 32.500.000</div>
  575.                         <div class="package-features">
  576.                             <div class="feature">
  577.                                 <i class="fas fa-check-circle"></i>
  578.                                 <span>Hotel bintang 5 di Makkah & Madinah</span>
  579.                            </div>
  580.                            <div class="feature">
  581.                                <i class="fas fa-check-circle"></i>
  582.                                <span>Penerbangan langsung</span>
  583.                            </div>
  584.                            <div class="feature">
  585.                                <i class="fas fa-check-circle"></i>
  586.                                <span>Makan 3x sehari</span>
  587.                            </div>
  588.                        </div>
  589.                        <a href="#" class="book-now">Daftar Sekarang</a>
  590.                    </div>
  591.                </div>
  592.                
  593.                <div class="package-card">
  594.                    <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1519817650390-64a93db51149?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
  595.                     <div class="package-details">
  596.                         <h3>Umroh Plus Turki 15 Hari</h3>
  597.                         <div class="package-meta">
  598.                             <span><i class="far fa-calendar-alt"></i> 15 Hari</span>
  599.                             <span><i class="fas fa-users"></i> 25 Orang</span>
  600.                         </div>
  601.                         <div class="price">Rp 45.000.000</div>
  602.                         <div class="package-features">
  603.                             <div class="feature">
  604.                                 <i class="fas fa-check-circle"></i>
  605.                                 <span>Tur kota Istanbul 3 hari</span>
  606.                             </div>
  607.                             <div class="feature">
  608.                                 <i class="fas fa-check-circle"></i>
  609.                                 <span>Hotel bintang 4 & 5</span>
  610.                            </div>
  611.                            <div class="feature">
  612.                                <i class="fas fa-check-circle"></i>
  613.                                <span>Pemandu wisata berbahasa Indonesia</span>
  614.                            </div>
  615.                        </div>
  616.                        <a href="#" class="book-now">Daftar Sekarang</a>
  617.                    </div>
  618.                </div>
  619.                
  620.                <div class="package-card">
  621.                    <div class="package-image" style="background-image: url('https://images.unsplash.com/photo-1566378246598-5b11a0d486cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div>
  622.                     <div class="package-details">
  623.                         <h3>Umroh Ramadhan 20 Hari</h3>
  624.                         <div class="package-meta">
  625.                             <span><i class="far fa-calendar-alt"></i> 20 Hari</span>
  626.                             <span><i class="fas fa-users"></i> 20 Orang</span>
  627.                         </div>
  628.                         <div class="price">Rp 55.000.000</div>
  629.                         <div class="package-features">
  630.                             <div class="feature">
  631.                                 <i class="fas fa-check-circle"></i>
  632.                                 <span>Program ibadah khusus Ramadhan</span>
  633.                             </div>
  634.                             <div class="feature">
  635.                                 <i class="fas fa-check-circle"></i>
  636.                                 <span>Lokasi hotel dekat Masjidil Haram</span>
  637.                             </div>
  638.                             <div class="feature">
  639.                                 <i class="fas fa-check-circle"></i>
  640.                                 <span>Bimbingan ustadz berpengalaman</span>
  641.                             </div>
  642.                         </div>
  643.                         <a href="#" class="book-now">Daftar Sekarang</a>
  644.                     </div>
  645.                 </div>
  646.             </div>
  647.         </div>
  648.     </section>
  649.  
  650.     <!-- Testimoni -->
  651.     <section class="testimonials section" id="testimonials">
  652.         <div class="container">
  653.             <div class="section-title">
  654.                 <h2>Testimoni Jemaah</h2>
  655.                 <p>Apa kata mereka tentang pengalaman umroh bersama kami</p>
  656.             </div>
  657.             <div class="testimonial-container">
  658.                 <div class="testimonial-card">
  659.                     <div class="testimonial-header">
  660.                         <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Testimoni 1" class="testimonial-avatar">
  661.                         <div class="testimonial-author">
  662.                             <h4>Ibu Siti Rahayu</h4>
  663.                             <p>Umroh April 2023</p>
  664.                         </div>
  665.                     </div>
  666.                     <div class="testimonial-rating">
  667.                         <i class="fas fa-star"></i>
  668.                         <i class="fas fa-star"></i>
  669.                         <i class="fas fa-star"></i>
  670.                         <i class="fas fa-star"></i>
  671.                         <i class="fas fa-star"></i>
  672.                     </div>
  673.                     <p>"Alhamdulillah pelayanan Rahmat Tours sangat memuaskan. Hotelnya nyaman dan dekat dengan masjid, makanan enak, dan pemandu sangat sabar membimbing kami. Insya Allah akan berangkat lagi tahun depan."</p>
  674.                 </div>
  675.                
  676.                 <div class="testimonial-card">
  677.                     <div class="testimonial-header">
  678.                         <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Testimoni 2" class="testimonial-avatar">
  679.                         <div class="testimonial-author">
  680.                             <h4>Bapak Ahmad Fauzi</h4>
  681.                             <p>Umroh Plus Turki 2023</p>
  682.                         </div>
  683.                     </div>
  684.                     <div class="testimonial-rating">
  685.                         <i class="fas fa-star"></i>
  686.                         <i class="fas fa-star"></i>
  687.                         <i class="fas fa-star"></i>
  688.                         <i class="fas fa-star"></i>
  689.                         <i class="fas fa-star"></i>
  690.                     </div>
  691.                     <p>"Pengalaman yang sangat berkesan. Perpaduan antara ibadah umroh dan wisata di Turki sangat tepat. Pemandu wisata di Turki sangat berwawasan dan bisa bahasa Indonesia. Terima kasih Rahmat Tours!"</p>
  692.                 </div>
  693.                
  694.                 <div class="testimonial-card">
  695.                     <div class="testimonial-header">
  696.                         <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Testimoni 3" class="testimonial-avatar">
  697.                         <div class="testimonial-author">
  698.                             <h4>Ibu Dewi Kurnia</h4>
  699.                             <p>Umroh Ramadhan 2023</p>
  700.                         </div>
  701.                     </div>
  702.                     <div class="testimonial-rating">
  703.                         <i class="fas fa-star"></i>
  704.                         <i class="fas fa-star"></i>
  705.                         <i class="fas fa-star"></i>
  706.                         <i class="fas fa-star"></i>
  707.                         <i class="fas fa-star-half-alt"></i>
  708.                     </div>
  709.                     <p>"Beribadah di tanah suci selama Ramadhan adalah impian saya. Alhamdulillah terwujud dengan Rahmat Tours. Program tadarus dan kajiannya sangat bermanfaat. Hanya saja waktu di Madinah saya harap bisa lebih lama."</p>
  710.                 </div>
  711.                
  712.                 <div class="testimonial-card">
  713.                     <div class="testimonial-header">
  714.                         <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Testimoni 4" class="testimonial-avatar">
  715.                         <div class="testimonial-author">
  716.                             <h4>Bapak Hendra Setiawan</h4>
  717.                             <p>Umroh Februari 2023</p>
  718.                         </div>
  719.                     </div>
  720.                     <div class="testimonial-rating">
  721.                         <i class="fas fa-star"></i>
  722.                         <i class="fas fa-star"></i>
  723.                         <i class="fas fa-star"></i>
  724.                         <i class="fas fa-star"></i>
  725.                         <i class="fas fa-star"></i>
  726.                     </div>
  727.                     <p>"Ini kedua kalinya saya umroh dengan Rahmat Tours. Konsisten memberikan pelayanan terbaik. Ustadz pembimbing sangat menguasai materi dan sabar. Transportasi nyaman dan tepat waktu. Recommended!"</p>
  728.                 </div>
  729.             </div>
  730.         </div>
  731.     </section>
  732.  
  733.     <!-- Video Testimoni -->
  734.     <section class="video-testimonials section" id="video-testimonials">
  735.         <div class="container">
  736.             <div class="section-title">
  737.                 <h2>Video Testimoni</h2>
  738.                 <p>Simak pengalaman langsung dari jemaah kami</p>
  739.             </div>
  740.             <div class="video-container">
  741.                 <div class="video-card">
  742.                     <div class="video-wrapper">
  743.                         <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  744.                     </div>
  745.                     <div class="video-info">
  746.                         <h3>Pengalaman Umroh Ramadhan</h3>
  747.                         <p>Keluarga Pak Budi berbagi pengalaman umroh selama bulan Ramadhan 2023</p>
  748.                     </div>
  749.                 </div>
  750.                
  751.                 <div class="video-card">
  752.                     <div class="video-wrapper">
  753.                         <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  754.                     </div>
  755.                     <div class="video-info">
  756.                         <h3>Turki setelah Umroh</h3>
  757.                         <p>Jejak perjalanan kelompok umroh plus Turki November 2022</p>
  758.                     </div>
  759.                 </div>
  760.                
  761.                 <div class="video-card">
  762.                     <div class="video-wrapper">
  763.                         <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  764.                     </div>
  765.                     <div class="video-info">
  766.                         <h3>Kisah Umroh Pertama</h3>
  767.                         <p>Ibu Siti menceritakan pengalaman umroh pertamanya di usia 60 tahun</p>
  768.                     </div>
  769.                 </div>
  770.             </div>
  771.         </div>
  772.     </section>
  773.  
  774.     <!-- Footer -->
  775.     <footer id="contact">
  776.         <div class="container">
  777.             <div class="footer-content">
  778.                 <div class="footer-column">
  779.                     <h3>Tentang Kami</h3>
  780.                     <p>Rahmat Tours telah berpengalaman lebih dari 10 tahun menyelenggarakan perjalanan umroh dengan kualitas terbaik dan pelayanan memuaskan.</p>
  781.                     <div class="social-links">
  782.                         <a href="#"><i class="fab fa-facebook-f"></i></a>
  783.                         <a href="#"><i class="fab fa-instagram"></i></a>
  784.                         <a href="#"><i class="fab fa-youtube"></i></a>
  785.                         <a href="#"><i class="fab fa-whatsapp"></i></a>
  786.                     </div>
  787.                 </div>
  788.                
  789.                 <div class="footer-column">
  790.                     <h3>Link Cepat</h3>
  791.                     <ul class="footer-links">
  792.                         <li><a href="#home">Beranda</a></li>
  793.                         <li><a href="#packages">Paket Umroh</a></li>
  794.                         <li><a href="#testimonials">Testimoni</a></li>
  795.                         <li><a href="#video-testimonials">Video Testimoni</a></li>
  796.                         <li><a href="#">Syarat & Ketentuan</a></li>
  797.                    </ul>
  798.                </div>
  799.                
  800.                <div class="footer-column">
  801.                    <h3>Kontak Kami</h3>
  802.                    <p><i class="fas fa-map-marker-alt"></i> Jl. Mekkah No. 12, Jakarta Selatan</p>
  803.                    <p><i class="fas fa-phone"></i> 021-12345678</p>
  804.                    <p><i class="fas fa-mobile-alt"></i> 0812-3456-7890</p>
  805.                    <p><i class="fas fa-envelope"></i> [email protected]</p>
  806.                </div>
  807.                
  808.                <div class="footer-column">
  809.                    <h3>Jam Operasional</h3>
  810.                    <p>Senin - Jumat: 09.00 - 17.00</p>
  811.                    <p>Sabtu: 09.00 - 15.00</p>
  812.                    <p>Minggu & Hari Libur: Tutup</p>
  813.                    <p>Kami melayani konsultasi via WhatsApp 24 jam</p>
  814.                </div>
  815.            </div>
  816.            
  817.            <div class="footer-bottom">
  818.                <p>&copy; 2023 Rahmat Tours. Semua Hak Dilindungi. | Travel Umroh Terpercaya</p>
  819.             </div>
  820.         </div>
  821.     </footer>
  822.  
  823.     <script>
  824.         // Slider Otomatis
  825.         let currentSlide = 0;
  826.         const slides = document.querySelectorAll('.slide');
  827.        
  828.         function showSlide(n) {
  829.             slides.forEach(slide => slide.classList.remove('active'));
  830.             currentSlide = (n + slides.length) % slides.length;
  831.             slides[currentSlide].classList.add('active');
  832.         }
  833.        
  834.         function nextSlide() {
  835.             showSlide(currentSlide + 1);
  836.         }
  837.        
  838.         // Ganti slide setiap 5 detik
  839.         setInterval(nextSlide, 5000);
  840.        
  841.         // Animasi Scroll
  842.         document.addEventListener('DOMContentLoaded', function() {
  843.             const sections = document.querySelectorAll('.section');
  844.            
  845.             function checkVisibility() {
  846.                 sections.forEach(section => {
  847.                     const sectionTop = section.getBoundingClientRect().top;
  848.                     const windowHeight = window.innerHeight;
  849.                    
  850.                     if (sectionTop < windowHeight - 100) {
  851.                        section.classList.add('visible');
  852.                    }
  853.                });
  854.            }
  855.            
  856.            // Jalankan saat load dan scroll
  857.            window.addEventListener('load', checkVisibility);
  858.            window.addEventListener('scroll', checkVisibility);
  859.            
  860.            // Smooth scroll untuk navigasi
  861.            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  862.                 anchor.addEventListener('click', function(e) {
  863.                     e.preventDefault();
  864.                    
  865.                     const targetId = this.getAttribute('href');
  866.                     const targetElement = document.querySelector(targetId);
  867.                    
  868.                     if (targetElement) {
  869.                         window.scrollTo({
  870.                             top: targetElement.offsetTop - 80,
  871.                             behavior: 'smooth'
  872.                         });
  873.                     }
  874.                 });
  875.             });
  876.         });
  877.     </script>
  878. </body>
  879. </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!