File manager

File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/siyavarpalace.com/gallery.php

Back
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="author" content="bracket-web"> <meta name="description" content=""> <title>Gallery </title> <!-- favicons Icons --> <link rel="icon" type="image/png" sizes="32x32" href="assets/images/logo.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/images/logo.png"> <!-- fonts --> <link rel="preconnect" href="https://fonts.googleapis.com/"> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="assets/vendors/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/vendors/bootstrap-select/bootstrap-select.min.css"> <link rel="stylesheet" href="assets/vendors/animate/animate.min.css"> <link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css"> <link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.css"> <link rel="stylesheet" href="assets/vendors/jarallax/jarallax.css"> <link rel="stylesheet" href="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css"> <link rel="stylesheet" href="assets/vendors/nouislider/nouislider.min.css"> <link rel="stylesheet" href="assets/vendors/nouislider/nouislider.pips.css"> <link rel="stylesheet" href="assets/vendors/tiny-slider/tiny-slider.css"> <link rel="stylesheet" href="assets/vendors/icons/style.css"> <link rel="stylesheet" href="assets/vendors/owl-carousel/css/owl.carousel.min.css"> <link rel="stylesheet" href="assets/vendors/owl-carousel/css/owl.theme.default.min.css"> <link rel="stylesheet" href="assets/vendors/slick-carousel/slick.css"> <link rel="stylesheet" href="assets/vendors/flipster/flipster.css"> <!-- template styles --> <link rel="stylesheet" href="assets/css/style.css"> <style> :root { overflow-x: hidden!important; } /**/ .video-one { background-color: #F4EFEA; padding-top: 80px; padding-bottom: 80px; display: block; width: 100%; } .video-one .container { max-width: 1200px; margin: 0 auto; padding-left: 15px; padding-right: 15px; } .video-one__title { text-align: center; margin-bottom: 50px; font-size: 36px; font-weight: 700; color: #1a1a1a; text-transform: capitalize; } .video-one__box { position: relative; width: 100%; height: 500px; overflow: hidden; border-radius: 8px; background-color: #f9f9f9; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); background-color: #000; } .video-one__box video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .video-one__overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; transition: all 0.3s ease; cursor: pointer; pointer-events: all; } .video-one__overlay.hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.8); pointer-events: none; } .video-one__play-icon { width: 80px; height: 80px; background-color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); } .video-one__play-icon::after { content: ''; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #000; margin-left: 4px; } @media (max-width: 768px) { .video-one__box { height: 300px; } .video-one__title { font-size: 24px; margin-bottom: 30px; } .video-one__play-icon { width: 60px; height: 60px; } } </style> </head> <body class="custom-cursor"> <div class="preloader"> <div class="preloader__image" style="background-image: url(assets/images/loader.png);"></div> </div> <!-- /.preloader --> <div class="page-wrapper"> <!-- Top Bar Three --> <?php include 'include/header.php';?> <section class="page-header"> <div class="page-header__bg" style="background-image: url(assets/images/backgrounds/header-bg.jpg);"></div> <div class="container"> <img src="assets/images/shapes/page-header-s-1.png" alt="Gallery" class="page-header__shape"> <h1 class="page-header__title">Gallery</h1> <ul class="solinom-breadcrumb list-unstyled"> <li> <a href="index.php">Home</a> </li> <li> <span>Our Gallery</span> </li> </ul> </div> </section> <section class="gallery-one gallery-one--page"> <div class="container"> <div class="row masonry-layout"> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/1.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/1.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/2.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/2.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/3.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/3.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/4.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/4.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/5.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/5.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/6.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/6.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/8.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/8.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/9.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/9.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/10.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/10.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/11.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/11.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/12.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/12.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/13.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/13.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/14.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/14.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/15.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/15.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/16.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/16.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> <div class="col-md-6 col-lg-4"> <div class="gallery-one__card"> <img src="assets/images/gallery/17.jpg" alt=""> <div class="gallery-one__card__hover"> <a href="assets/images/gallery/17.jpg" class="img-popup"> <div class="gallery-one__card__icon"> <span class="gallery-one__card__icon__item"></span> </div> </a> </div> </div> </div> </div> </div> </section> <!----> <!--<section class="video-one">--> <!-- <div class="container">--> <!-- <h2 class="video-one__title">Latest Video Highlights</h2>--> <!-- <div class="video-one__box">--> <!-- <video id="customVideo" poster="assets/images/video-poster.jpg">--> <!-- <source src="assets/images/gallery/white-river-video.mp4" type="video/mp4">--> <!-- Your browser does not support the video tag.--> <!-- </video>--> <!-- <div class="video-one__overlay" id="playBtnOverlay">--> <!-- <div class="video-one__play-icon"></div>--> <!-- </div>--> <!-- </div>--> <!-- </div>--> <!--</section>--> <section class="video-one"> <div class="container"> <h2 class="video-one__title">Latest Video Highlights</h2> <div class="video-one__box"> <video id="customVideo" poster="assets/images/video-poster.jpg" autoplay muted playsinline> <source src="assets/images/gallery/white-river-video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <div class="video-one__overlay" id="playBtnOverlay"> <div class="video-one__play-icon"></div> </div> </div> </div> </section> <!----> </div> <?php include 'include/footer.php';?> <script src="assets/vendors/jquery/jquery-3.7.0.min.js"></script> <!-- <script src="assets/vendors/jquery/jquery-migrate.min.js"></script> --> <script src="assets/vendors/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="assets/vendors/bootstrap-select/bootstrap-select.min.js"></script> <script src="assets/vendors/jarallax/jarallax.min.js"></script> <script src="assets/vendors/jquery-ui/jquery-ui.js"></script> <script src="assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js"></script> <script src="assets/vendors/jquery-appear/jquery.appear.min.js"></script> <script src="assets/vendors/jquery-circle-progress/jquery.circle-progress.min.js"></script> <script src="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js"></script> <script src="assets/vendors/jquery-validate/jquery.validate.min.js"></script> <script src="assets/vendors/nouislider/nouislider.min.js"></script> <script src="assets/vendors/tiny-slider/tiny-slider.js"></script> <script src="assets/vendors/wnumb/wNumb.min.js"></script> <script src="assets/vendors/owl-carousel/js/owl.carousel.min.js"></script> <script src="assets/vendors/slick-carousel/slick.min.js"></script> <script src="assets/vendors/flipster/flipster.js"></script> <script src="assets/vendors/wow/wow.js"></script> <script src="assets/vendors/imagesloaded/imagesloaded.min.js"></script> <script src="assets/vendors/isotope/isotope.js"></script> <!--<script src="assets/vendors/countdown/countdown.min.js"></script>--> <script src="assets/vendors/jquery-circleType/jquery.circleType.js"></script> <script src="assets/vendors/jquery-lettering/jquery.lettering.min.js"></script> <!-- GSAP Animation --> <script src="assets/vendors/gsap/gsap.js"></script> <script src="assets/vendors/gsap/ScrollTrigger.min.js"></script> <script src="assets/vendors/gsap/splittext.min.js"></script> <script src="assets/js/gsap.js"></script> <!-- template js --> <script src="assets/js/script.js"></script> <!----> <script> document.addEventListener("DOMContentLoaded", function() { const videoBox = document.querySelector('.video-one__box'); const video = document.getElementById('customVideo'); const playBtn = document.getElementById('playBtnOverlay'); if (videoBox && video && playBtn) { function togglePlay() { if (video.paused) { video.play(); } else { video.pause(); } } playBtn.addEventListener('click', function(e) { e.stopPropagation(); video.play(); }); video.addEventListener('click', function() { togglePlay(); }); video.addEventListener('play', function() { playBtn.classList.add('hidden'); }); video.addEventListener('pause', function() { playBtn.classList.remove('hidden'); video.removeAttribute('controls'); }); videoBox.addEventListener('mouseenter', () => { if (!video.paused) { video.setAttribute('controls', 'true'); } }); videoBox.addEventListener('mouseleave', () => { video.removeAttribute('controls'); }); if (!video.paused) { playBtn.classList.add('hidden'); } } }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.02 | proxy | phpinfo | Settings