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,323 @@
<!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 - Blog 5</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 header-lg center border-bottom">
<div class="container-fluid">
<!-- 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 class="link-social-facebook" href="#"><i class="bi bi-facebook"></i></a></li>
<li><a class="link-social-twitter" href="#"><i class="bi bi-twitter-x"></i></a></li>
<li><a class="link-social-instagram" href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
<!-- Menu Toggle -->
<button class="header-toggle">
<span></span>
</button>
</div><!-- end container -->
</div>
<!-- end Header -->
<!-- Hero Posts -->
<div class="section-sm">
<div class="container">
<div class="owl-carousel" data-owl-items="1" data-owl-autoplay="true">
<!-- Carousel Item 1 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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...</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- Carousel Item 2 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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...</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- Carousel Item 3 -->
<div class="hoverbox-4 bottom aspect-ratio-2x1">
<img src="../assets/images/col-1.jpg" alt="">
<div class="content">
<h3 class="fw-normal">Blog Post Title</h3>
<p class="d-none d-lg-block">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...</p>
</div>
<div class="hover-content">
<a class="button button-md button-radius button-outline-white" href="#">Continue Reading</a>
</div>
</div>
<!-- end Carousel Item 3 -->
</div>
</div><!-- end container -->
</div>
<!-- end Hero Posts -->
<!-- Blog Posts -->
<div class="section-sm pt-0">
<div class="container">
<div class="row g-4 gy-5">
<!-- Blog Post box 1 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 4 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 5 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- Blog Post box 6 -->
<div class="col-12 col-md-6 col-lg-4">
<div class="hoverbox-6 border-radius text-end">
<a href="#">
<img src="../assets/images/col-2-tall.jpg" alt="">
<div class="content top bg-dark border-radius">
<span class="font-small text-white">Jan 10, 2021</span>
</div>
</a>
</div>
<div class="mt-3">
<h5 class="fw-medium"><a class="text-link-1" href="#">Blog Post Title</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore..</p>
</div>
</div>
<!-- end Blog Post box 6 -->
</div><!-- end row -->
<div class="mt-4 mt-lg-5 text-center">
<a class="button button-lg button-radius button-outline-gray" href="#">View More Posts</a>
</div>
</div><!-- end container -->
</div>
<!-- end Blog Posts -->
<footer>
<div class="section-sm bg-dark">
<div class="container text-center">
<ul class="list-inline-sm mb-2">
<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>
<p>&copy; 2025 FlaTheme, All Rights Reserved.</p>
</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>