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,452 @@
<!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 - Team 3</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">
<!-- 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 data-preloader="1">
<!-- Header -->
<div class="header right transparent-light">
<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="#">Link Only</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dropdown</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
<li class="nav-dropdown-item"><a class="nav-dropdown-link" href="#">Dropdown Item</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subdropdown</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
<ul class="nav-subdropdown">
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
</ul>
</li>
<li class="nav-dropdown-item">
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
<ul class="nav-subdropdown">
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subdropdown LG</a>
<ul class="nav-dropdown">
<li class="nav-dropdown-item">
<a class="nav-dropdown-link" href="#">Dropdown Item</a>
<div class="nav-subdropdown nav-subdropdown-lg">
<div class="row g-2 g-lg-3">
<div class="col-12 col-lg-6">
<ul>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
</ul>
</div>
<div class="col-12 col-lg-6">
<ul>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
<li class="nav-subdropdown-item"><a class="nav-subdropdown-link" href="#">Subdropdown Item</a></li>
</ul>
</div>
</div><!-- end row -->
</div>
</li>
</ul>
</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-xl bg-image parallax section-divider-curve-bottom" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-06">
<div class="container text-center">
<div class="row g-4">
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h1 class="display-4 m-0">We Are Mono</h1>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div><!-- end bg-dark-* -->
</div>
<div class="section">
<div class="container">
<div class="row g-4">
<div class="col-12 col-lg-6">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>
<div class="col-12 col-lg-6">
<p>Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.</p>
</div>
</div><!-- end row -->
<div class="row g-4 mt-5 text-center">
<!-- Counter box 1 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 2 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 3 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 4 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 5 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
<!-- Counter box 6 -->
<div class="col-6 col-md-4 col-lg-2">
<h2 class="fw-light display-6 m-0"><span class="counter">100</span></h2>
<p>Fact Counter</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- Team section -->
<div class="section pt-0">
<div class="container">
<div class="row g-4 gy-5 team-wrapper border-radius">
<!-- 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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>CEO</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Co-Founder</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Lead Developer</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Lead Designer</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Manager</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Designer</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Developer</p>
</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>
<h6 class="font-small fw-medium uppercase m-0">John Doe</h6>
<p>Photographer</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Team section -->
<!-- Services section -->
<div class="section pt-0">
<div class="container text-center icon-5xl">
<div class="row g-4 g-lg-5">
<!-- Service box 1 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Service box 2 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
<!-- Service box 3 -->
<div class="col-12 col-lg-4">
<div class="text-dark mb-3">
<i class="bi bi-globe"></i>
</div>
<h5 class="fw-normal">Service Title</h5>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Services section -->
<!-- Clients section -->
<div class="section-sm border-top">
<div class="container text-center">
<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-4.jpg" alt=""></a>
</div>
<!-- Client box 2 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 3 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 4 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 5 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 6 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
<!-- Client box 7 -->
<div class="client-box">
<a href="#"><img src="../assets/images/col-4.jpg" alt=""></a>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
<!-- end Clients section -->
<!-- Testimonial section -->
<div class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
<div class="bg-dark-05">
<div class="container">
<div class="owl-carousel icon-2xl" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
<!-- Testimonial box 1 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Emiley Haley</h4>
<span class="fw-normal text-white-09">Manager - Mono</span>
</div>
<!-- Testimonial box 2 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Andrew Palmer</h4>
<span class="fw-normal text-white-09">Developer - Mono</span>
</div>
<!-- Testimonial box 3 -->
<div class="testimonial-box">
<i class="fas fa-quote-right text-white mb-4"></i>
<p class="mb-3 font-large">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
<h4 class="fw-normal m-0 line-height-140">Anna Mullen</h4>
<span class="fw-normal text-white-09">Designer - Mono</span>
</div>
</div><!-- end owl-carousel -->
</div><!-- end container -->
</div>
</div>
<!-- end Testimonial section -->
<footer>
<div class="section-sm bg-dark">
<div class="container">
<div class="row align-items-center g-3">
<div class="col-12 col-md-6 text-center text-md-start">
<ul class="list-inline-dash">
<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-inline-sm">
<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-pinterest" href="#"><i class="bi bi-pinterest"></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-dark" 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>