Add a pagination partial

This commit is contained in:
kbe
2025-08-18 17:15:47 +02:00
parent 7432ac7d4d
commit c5c947c5d7
4811 changed files with 410066 additions and 38 deletions

View File

@@ -0,0 +1,606 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mono - Event</title>
<!-- Favicon -->
<link href="../assets/images/favicon.png" rel="shortcut icon">
<!-- CSS -->
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
<link href="../assets/css/theme.css" rel="stylesheet">
<link href="../assets/css/theme-colors/theme-color-very-peri.css" rel="stylesheet">
<!-- Fonts/Icons -->
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
</head>
<body class="theme-color-very-peri preloader-theme" data-preloader="1">
<!-- Header -->
<div class="header center header-color-dark transparent-light sticky">
<div class="container">
<!-- Logo -->
<div class="header-logo">
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
<!--
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
-->
</div>
<!-- Menu -->
<div class="header-menu">
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#schedule">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#gallery">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#speakers">Speakers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sponsors">Sponsors</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#prices">Buy Tickets</a>
</li>
</ul>
</div>
<!-- Menu Extra -->
<div class="header-menu-extra">
<ul class="list-inline-sm">
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
</ul>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06 section-divider-wavesOpacity-bottom">
<div class="container text-center">
<h1 class="display-4 fw-bold">Mono Conference 2022</h1>
<h1 class="display-5 countdown mt-3" data-countdown="2025/12/31"></h1>
<a class="button button-lg button-radius button-theme mt-4" href="#prices">Buy Tickets</a>
</div><!-- end container -->
</div>
</div>
<!-- About section -->
<div id="about" class="section pb-0">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="fw-normal">About The Event</h2>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-12 col-md-8 col-lg-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-12 col-md-4 col-lg-3">
<div>
<h6 class="font-small fw-normal uppercase m-0">Where:</h6>
<span>121 King St, Melbourne VIC 3000</span>
</div>
<div class="mt-3">
<h6 class="font-small fw-normal uppercase m-0">When:</h6>
<span>July 27 to 28, 2022</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end About section -->
<!-- Schedule section -->
<div id="schedule" class="section">
<div class="container">
<div class="row g-4 g-lg-5">
<div class="col-12 col-lg-6">
<div class="card border-0 box-shadow">
<div class="card-header bg-color-theme border-0 p-4 d-flex justify-content-between align-items-center">
<div>
<h5 class="fw-normal m-0"><i class="bi bi-calendar me-2"></i>Day 1</h5>
</div>
<div>July 27, 2022</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">09:00 - 09:30</h6>
<p>Opening Cerenomy</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">09:30 - 10:00</h6>
<p>Brenda, Founder @ Agency</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">10:00 - 10:30</h6>
<p>Melissa, CEO @ Company</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">10:30 - 11:00</h6>
<p>Coffee Break</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:00 - 11:40</h6>
<p>Robert, Senior Marketer @ Company</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:40 - 14:00</h6>
<p>Networking Sessions</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">14:00</h6>
<p>Closing Cerenomy</p>
</li>
</ul>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="card border-0 box-shadow">
<div class="card-header bg-color-theme border-0 p-4 d-flex justify-content-between align-items-center">
<div>
<h5 class="fw-normal m-0"><i class="bi bi-calendar me-2"></i>Day 2</h5>
</div>
<div>July 28, 2022</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:00 - 11:30</h6>
<p>Registration</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">11:30 - 12:30</h6>
<p>Mono Team @ FlaTheme</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">12:30 - 13:00</h6>
<p>Michelle, Senior Designer @ Agency</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">13:00 - 14:00</h6>
<p>Lunch Break</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">14:00 - 16:00</h6>
<p>Networking Sessions</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">16:00</h6>
<p>Closing Cerenomy</p>
</li>
<li class="list-group-item p-4">
<h6 class="font-small fw-normal uppercase m-0">19:00</h6>
<p>After Party @ Corporate Hotel</p>
</li>
</ul>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Schedule section -->
<!-- Gallery section -->
<div id="gallery" class="section bg-dark-lighter">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
<h2>Mono Conference 2018</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
<div class="row gallery-wrapper hover-style-2 g-3 mt-5">
<!-- Gallery box 1 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 1">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 2 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 2">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 3 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 3">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
<!-- Gallery box 4 -->
<div class="col-12 col-md-6 gallery-box">
<div class="gallery-img">
<a href="../assets/images/col-1.jpg" data-gallery-title="Gallery Image 4">
<img src="../assets/images/col-2.jpg" alt="">
</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Gallery section -->
<!-- Team section -->
<div id="speakers" class="section">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2>Invited Speakers</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="row g-3 gy-4 team-wrapper">
<!-- Team box 1 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Robert Vincent</h6>
<span>Entrepreneur</span>
</div>
</div>
<!-- Team box 2 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Brenda Johnson</h6>
<span>Entrepreneur</span>
</div>
</div>
<!-- Team box 3 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Rodney Scott</h6>
<span>Entrepreneur</span>
</div>
</div>
<!-- Team box 4 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Michelle White</h6>
<span>Entrepreneur</span>
</div>
</div>
<!-- Team box 5 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Alice Trumbo</h6>
<span>Marketer @ Corporate</span>
</div>
</div>
<!-- Team box 6 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Thomas Willis</h6>
<span>CEO @ Company</span>
</div>
</div>
<!-- Team box 7 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Mary Enderson</h6>
<span>UI/UX Designer @ Agency</span>
</div>
</div>
<!-- Team box 8 -->
<div class="col-12 col-sm-6 col-lg-3 team-box">
<div class="team-img">
<img src="../assets/images/col-4-square.jpg" alt=""><!-- image source -->
<!-- social links -->
<div>
<ul>
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
</ul>
</div>
</div>
<div class="mb-2">
<h6 class="fw-normal m-0">Ernest Hermen</h6>
<span>Photographer</span>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Sponsors section -->
<div id="sponsors" class="section bg-gray-lighter">
<div class="container">
<div class="mb-5">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="fw-normal">Event Sponsors</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
<div class="owl-carousel" data-owl-dots="false" data-owl-margin="50" data-owl-autoplay="true" data-owl-xs="1" data-owl-sm="2" data-owl-md="3" data-owl-lg="4" data-owl-xl="5">
<!-- Client box 1 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 2 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 3 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 4 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 5 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 6 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
<!-- Client box 7 -->
<div class="client-box">
<a href="#">
<img src="../assets/images/col-5.jpg" alt="">
</a>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Sponsors section -->
<!-- Parallax section -->
<div class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container">
<div class="row align-items-center">
<div class="col-12 col-md-8 col-lg-6 text-center text-md-start">
<h3 class="fw-light m-0">Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</h3>
</div>
<div class="col-12 col-md-4 col-lg-6 text-center text-md-end">
<a class="button-circle button-circle-xl button-circle-white-2 button-hover-scale lightbox-media-link" href="https://www.youtube.com/watch?v=W-j4QGAgNu8"><i class="fas fa-play"></i></a>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</div>
<!-- end Parallax section -->
<!-- Ticket Prices section -->
<div id="buytickets" class="section bg-gray-lighter">
<div class="container">
<div class="row text-center">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2>Buy Tickets</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Integer tincidunt.</p>
</div>
</div>
<div class="row g-4 mt-5 text-center">
<!-- Price box 1 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">1 Day Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$39.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 2 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Full Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$69.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
<!-- Price box 3 -->
<div class="col-12 col-md-4">
<div class="bg-white box-shadow hover-float border-radius px-4 py-5">
<h6 class="font-small fw-medium uppercase letter-spacing-1">Exclusive Pass</h6>
<div class="mt-3">
<h1 class="line-height-100 fw-medium mb-0">$99.99</h1>
</div>
<ul class="list-unstyled mt-4">
<li>Access to Conference Hall</li>
<li>Access to Networking Event</li>
<li>Workshops</li>
<li>Engage Sessions</li>
</ul>
<a class="button button-md button-theme button-rounded mt-4" href="#">Choose Plan</a>
</div>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Ticket Prices section -->
<!-- Google Maps -->
<div class="container-fluid p-0">
<div id="map1" class="gmap gmap-xl" data-latitude="51.513569" data-longitude="-0.123443"></div>
</div>
<!-- end Google Maps -->
<footer>
<div class="section bg-dark">
<div class="container">
<div class="row g-4 align-items-center">
<div class="col-12 col-md-6 text-center text-md-start">
<h2 class="uppercase letter-spacing-1">mono</h2>
<ul class="list-inline-dash mt-3">
<li><a href="#">FAQ</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Clients</a></li>
</ul>
<p class="mt-2">&copy; 2025 FlaTheme, All Rights Reserved.</p>
</div>
<div class="col-12 col-md-6 text-center text-md-end">
<ul class="list-unstyled">
<li>121 King St, Melbourne VIC 3000</li>
<li>contact@example.com</li>
</ul>
<ul class="list-inline-sm mt-3 mt-lg-4">
<li><a class="button-circle button-circle-sm button-circle-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="button-circle button-circle-sm button-circle-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
</footer>
<!-- Scroll to top button -->
<div class="scrolltotop icon-lg">
<a class="button-circle button-circle-md button-circle-theme" href="#"><i class="bi bi-arrow-up-short"></i></a>
</div>
<!-- end Scroll to top button -->
<!-- ***** JAVASCRIPTS ***** -->
<script src="../assets/plugins/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="../assets/plugins/plugins.js"></script>
<script src="../assets/js/functions.js"></script>
</body>
</html>