This repository has been archived on 2025-08-21. You can view files and clone it. You cannot open issues or pull requests or push a commit.
Files
hugo-mistergeek/docs/theme/Mono v10.0.1 HTML5/Mono v10.0.1/4. Blog/blog-sidebar-right.html
2025-08-18 17:15:47 +02:00

354 lines
16 KiB
HTML

<!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 Sidebar Right</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 header-color-dark">
<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-sm bg-gray-lighter">
<div class="container text-center">
<h3 class="font-family-playfair">mono blog.</h3>
</div><!-- end container -->
</div>
<!-- Blog section -->
<div class="section">
<div class="container">
<div class="row g-5">
<!-- Blog Posts -->
<div class="col-12 col-lg-8">
<!-- Blog Post box 1 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Lifestyle</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of Minimalism</a></h4>
<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 class="mt-3">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 2 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Knowledge</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">10 Books that I will recommend</a></h4>
<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 class="mt-3">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Blog Post box 3 -->
<div class="mb-5">
<div class="img-link-box">
<a href="#">
<img src="../assets/images/col-1.jpg" alt="">
</a>
</div>
<div class="mt-4">
<div class="d-flex justify-content-between mb-2">
<div class="d-inline-flex">
<a class="font-family-poppins font-small fw-medium uppercase" href="#">Health</a>
</div>
<div class="d-inline-flex">
<span class="font-small">Jan 24, 2019</span>
</div>
</div>
<h4><a class="text-link-1" href="#">Benefits of house plants</a></h4>
<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 class="mt-3">
<a class="button-text-1" href="#">Read More</a>
</div>
</div>
</div>
<!-- Pagination -->
<nav>
<ul class="pagination justify-content-center mt-5">
<li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
</ul>
</nav>
</div>
<!-- end Blog Posts -->
<!-- Blog Sidebar -->
<div class="col-12 col-lg-4 d-none d-lg-block">
<!-- Sidebar box 1 - About me -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">About Me</h6>
<img class="img-mask-avatar-md mb-3" src="../assets/images/img-avatar-md.jpg" alt="">
<p>Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<ul class="list-inline mt-3">
<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>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
<!-- Sidebar box 2 - Categories -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Categories</h6>
<ul class="list-unstyled">
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Art <span>11</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Fashion <span>4</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Lifestyle <span>12</span></a></li>
<li class="pb-2 border-bottom"><a class="d-flex justify-content-between" href="#">Nature <span>8</span></a></li>
<li class="pb-2"><a class="d-flex justify-content-between" href="#">Travel <span>15</span></a></li>
</ul>
</div>
<!-- Sidebar box 3 - Popular Posts -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Popular Posts</h6>
<!-- Popular post 1 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 2 -->
<div class="d-flex align-items-center mb-3">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
<!-- Popular post 3 -->
<div class="d-flex align-items-center">
<a href="#">
<img src="../assets/images/img-avatar-sm.jpg" alt="">
</a>
<div class="ps-3">
<h6 class="fw-normal mb-0"><a class="text-link-1" href="#">Blog Post with Image</a></h6>
<span class="font-small">January 07, 2018</span>
</div>
</div>
</div>
<!-- Sidebar box 4 - Banner Image -->
<div class="mb-4">
<a href="#">
<img src="../assets/images/col-3.jpg" alt="">
</a>
</div>
<!-- Sidebar box 5 - Tags -->
<div class="border p-4 mb-4">
<h6 class="font-small fw-medium uppercase mb-4 text-center">Tags</h6>
<ul class="list-inline">
<li><a class="button-text-1" href="#">Art</a></li>
<li><a class="button-text-1" href="#">Design</a></li>
<li><a class="button-text-1" href="#">Event</a></li>
<li><a class="button-text-1" href="#">Fashion</a></li>
<li><a class="button-text-1" href="#">Food</a></li>
<li><a class="button-text-1" href="#">Inspiration</a></li>
<li><a class="button-text-1" href="#">Movie</a></li>
<li><a class="button-text-1" href="#">Music</a></li>
<li><a class="button-text-1" href="#">Nature</a></li>
<li><a class="button-text-1" href="#">Office</a></li>
<li><a class="button-text-1" href="#">Painting</a></li>
<li><a class="button-text-1" href="#">Photography</a></li>
<li><a class="button-text-1" href="#">People</a></li>
<li><a class="button-text-1" href="#">Work</a></li>
</ul>
</div>
<!-- Sidebar box 6 - Facebook Like box -->
<div class="border p-4 mb-4 text-center">
<h6 class="font-small fw-medium uppercase mb-4">Follow on</h6>
<ul class="list-inline">
<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>
<li><a href="#"><i class="bi bi-behance"></i></a></li>
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
</ul>
</div>
</div>
<!-- end Blog Sidebar -->
</div><!-- end row -->
</div><!-- end container -->
</div>
<!-- end Blog section -->
<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">
<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">
<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>
<li><a 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>