File size: 29.68Kb
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Katen - Minimal Blog & Magazine HTML Theme</title>
<meta name="description" content="Katen - Minimal Blog & Magazine HTML Theme">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
<!-- STYLES -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/all.min.css" type="text/css" media="all">
<link rel="stylesheet" href="css/slick.css" type="text/css" media="all">
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- preloader -->
<div id="preloader">
<div class="book">
<div class="inner">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!-- site wrapper -->
<div class="site-wrapper">
<div class="main-overlay"></div>
<!-- header -->
<header class="header-classic">
<div class="container-xl">
<!-- header top -->
<div class="header-top">
<div class="row align-items-center">
<div class="col-md-4 col-xs-12">
<!-- site logo -->
<a class="navbar-brand" href="classic.html"><img src="images/logo.svg" alt="logo" /></a>
</div>
<div class="col-md-8 d-none d-md-block">
<!-- social icons -->
<ul class="social-icons list-unstyled list-inline mb-0 float-end">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-expand-lg">
<!-- header bottom -->
<div class="header-bottom w-100">
<div class="container-xl">
<div class="d-flex align-items-center">
<div class="collapse navbar-collapse flex-grow-1">
<!-- menus -->
<ul class="navbar-nav">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="index.html">Home</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="index.html">Magazine</a></li>
<li><a class="dropdown-item" href="personal.html">Personal</a></li>
<li><a class="dropdown-item" href="personal-alt.html">Personal Alt</a></li>
<li><a class="dropdown-item" href="minimal.html">Minimal</a></li>
<li><a class="dropdown-item" href="classic.html">Classic</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Lifestyle</a>
</li>
<li class="nav-item">
<a class="nav-link" href="category.html">Inspiration</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">Pages</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="category.html">Category</a></li>
<li><a class="dropdown-item" href="blog-single.html">Blog Single</a></li>
<li><a class="dropdown-item" href="blog-single-alt.html">Blog Single Alt</a></li>
<li><a class="dropdown-item" href="about.html">About</a></li>
<li><a class="dropdown-item" href="contact.html">Contact</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
<!-- header buttons -->
<div class="header-buttons">
<button class="search icon-button">
<i class="icon-magnifier"></i>
</button>
<button class="burger-menu icon-button ms-2 float-end float-lg-none">
<span class="burger-icon"></span>
</button>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="hero-carousel">
<div class="container-xl">
<div class="post-carousel-lg">
<!-- post -->
<div class="post featured-post-xl">
<div class="details clearfix">
<a href="category.html" class="category-badge lg">Lifestyle</a>
<h4 class="post-title"><a href="blog-single.html">9 Most Awesome Blue Lake With Snow Mountain</a></h4>
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#">Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
<a href="blog-single.html">
<div class="thumb rounded">
<div class="inner data-bg-image" data-bg-image="images/posts/featured-xl-1.jpg"></div>
</div>
</a>
</div>
<!-- post -->
<div class="post featured-post-xl">
<div class="details clearfix">
<a href="category.html" class="category-badge lg">Culture</a>
<h4 class="post-title"><a href="blog-single.html">Important Thing You Need To Know About Swim</a></h4>
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#">Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
<a href="blog-single.html">
<div class="thumb rounded">
<div class="inner data-bg-image" data-bg-image="images/posts/featured-xl-2.jpg"></div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- section main content -->
<section class="main-content">
<div class="container-xl">
<div class="row gy-4">
<div class="col-lg-8">
<!-- post -->
<div class="post post-classic rounded bordered">
<div class="thumb top-rounded">
<a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
<span class="post-format">
<i class="icon-picture"></i>
</span>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/post-lg-1.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details">
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
<li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
</ul>
<h5 class="post-title mb-3 mt-3"><a href="blog-single.html">How To Become Better With Building In 1 Month</a></h5>
<p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<div class="post-bottom clearfix d-flex align-items-center">
<div class="social-share me-auto">
<button class="toggle-button icon-share"></button>
<ul class="icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-telegram-plane"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
</ul>
</div>
<div class="float-end d-none d-md-block">
<a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
</div>
<div class="more-button d-block d-md-none float-end">
<a href="blog-single.html"><span class="icon-options"></span></a>
</div>
</div>
</div>
<!-- post -->
<div class="post post-classic rounded bordered">
<div class="thumb top-rounded">
<a href="category.html" class="category-badge lg position-absolute">Inspiration</a>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/post-lg-2.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details">
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
<li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
</ul>
<h5 class="post-title mb-3 mt-3"><a href="blog-single.html">10 Ways To Immediately Start Selling Furniture</a></h5>
<p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<div class="post-bottom clearfix d-flex align-items-center">
<div class="social-share me-auto">
<button class="toggle-button icon-share"></button>
<ul class="icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-telegram-plane"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
</ul>
</div>
<div class="float-end d-none d-md-block">
<a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
</div>
<div class="more-button d-block d-md-none float-end">
<a href="blog-single.html"><span class="icon-options"></span></a>
</div>
</div>
</div>
<!-- post -->
<div class="post post-classic rounded bordered">
<div class="thumb top-rounded">
<a href="category.html" class="category-badge lg position-absolute">Culture</a>
<span class="post-format">
<i class="icon-camrecorder"></i>
</span>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/post-lg-3.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details">
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
<li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
</ul>
<h5 class="post-title mb-3 mt-3"><a href="blog-single.html">Most Important Thing You Need To Know About Swim</a></h5>
<p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<div class="post-bottom clearfix d-flex align-items-center">
<div class="social-share me-auto">
<button class="toggle-button icon-share"></button>
<ul class="icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-telegram-plane"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
</ul>
</div>
<div class="float-end d-none d-md-block">
<a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
</div>
<div class="more-button d-block d-md-none float-end">
<a href="blog-single.html"><span class="icon-options"></span></a>
</div>
</div>
</div>
<!-- post -->
<div class="post post-classic rounded bordered">
<div class="thumb top-rounded">
<a href="category.html" class="category-badge lg position-absolute">Lifestyle</a>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/post-lg-4.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details">
<ul class="meta list-inline mb-0">
<li class="list-inline-item"><a href="#"><img src="images/other/author-sm.png" class="author" alt="author"/>Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
<li class="list-inline-item"><i class="icon-bubble"></i> (0)</li>
</ul>
<h5 class="post-title mb-3 mt-3"><a href="blog-single.html">Your Light Is About To Stop Being Relevant</a></h5>
<p class="excerpt mb-0">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
</div>
<div class="post-bottom clearfix d-flex align-items-center">
<div class="social-share me-auto">
<button class="toggle-button icon-share"></button>
<ul class="icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-telegram-plane"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="far fa-envelope"></i></a></li>
</ul>
</div>
<div class="float-end d-none d-md-block">
<a href="blog-single.html" class="more-link">Continue reading<i class="icon-arrow-right"></i></a>
</div>
<div class="more-button d-block d-md-none float-end">
<a href="blog-single.html"><span class="icon-options"></span></a>
</div>
</div>
</div>
<nav>
<ul class="pagination justify-content-center">
<li class="page-item active" aria-current="page">
<span class="page-link">1</span>
</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>
</ul>
</nav>
</div>
<div class="col-lg-4">
<!-- sidebar -->
<div class="sidebar">
<!-- widget about -->
<div class="widget rounded">
<div class="widget-about data-bg-image text-center" data-bg-image="images/map-bg.png">
<img src="images/logo.svg" alt="logo" class="mb-4" />
<p class="mb-4">Hello, We’re content writer who is fascinated by content fashion, celebrity and lifestyle. We helps clients bring the right content to the right people.</p>
<ul class="social-icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
</div>
<!-- widget popular posts -->
<div class="widget rounded">
<div class="widget-header text-center">
<h3 class="widget-title">Popular Posts</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<div class="widget-content">
<!-- post -->
<div class="post post-list-sm circle">
<div class="thumb circle">
<span class="number">1</span>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/tabs-1.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details clearfix">
<h6 class="post-title my-0"><a href="blog-single.html">3 Easy Ways To Make Your iPhone Faster</a></h6>
<ul class="meta list-inline mt-1 mb-0">
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
</div>
<!-- post -->
<div class="post post-list-sm circle">
<div class="thumb circle">
<span class="number">2</span>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/tabs-2.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details clearfix">
<h6 class="post-title my-0"><a href="blog-single.html">An Incredibly Easy Method That Works For All</a></h6>
<ul class="meta list-inline mt-1 mb-0">
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
</div>
<!-- post -->
<div class="post post-list-sm circle">
<div class="thumb circle">
<span class="number">3</span>
<a href="blog-single.html">
<div class="inner">
<img src="images/posts/tabs-3.jpg" alt="post-title" />
</div>
</a>
</div>
<div class="details clearfix">
<h6 class="post-title my-0"><a href="blog-single.html">10 Ways To Immediately Start Selling Furniture</a></h6>
<ul class="meta list-inline mt-1 mb-0">
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
</div>
</div>
</div>
<!-- widget categories -->
<div class="widget rounded">
<div class="widget-header text-center">
<h3 class="widget-title">Explore Topics</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<div class="widget-content">
<ul class="list">
<li><a href="#">Lifestyle</a><span>(5)</span></li>
<li><a href="#">Inspiration</a><span>(2)</span></li>
<li><a href="#">Fashion</a><span>(4)</span></li>
<li><a href="#">Politic</a><span>(1)</span></li>
<li><a href="#">Trending</a><span>(7)</span></li>
<li><a href="#">Culture</a><span>(3)</span></li>
</ul>
</div>
</div>
<!-- widget newsletter -->
<div class="widget rounded">
<div class="widget-header text-center">
<h3 class="widget-title">Newsletter</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<div class="widget-content">
<span class="newsletter-headline text-center mb-3">Join 70,000 subscribers!</span>
<form>
<div class="mb-2">
<input class="form-control w-100 text-center" placeholder="Email address…" type="email">
</div>
<button class="btn btn-default btn-full" type="submit">Sign Up</button>
</form>
<span class="newsletter-privacy text-center mt-3">By signing up, you agree to our <a href="#">Privacy Policy</a></span>
</div>
</div>
<!-- widget post carousel -->
<div class="widget rounded">
<div class="widget-header text-center">
<h3 class="widget-title">Celebration</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<div class="widget-content">
<div class="post-carousel-widget">
<!-- post -->
<div class="post post-carousel">
<div class="thumb rounded">
<a href="category.html" class="category-badge position-absolute">How to</a>
<a href="blog-single.html">
<div class="inner">
<img src="images/widgets/widget-carousel-1.jpg" alt="post-title" />
</div>
</a>
</div>
<h5 class="post-title mb-0 mt-4"><a href="blog-single.html">5 Easy Ways You Can Turn Future Into Success</a></h5>
<ul class="meta list-inline mt-2 mb-0">
<li class="list-inline-item"><a href="#">Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
<!-- post -->
<div class="post post-carousel">
<div class="thumb rounded">
<a href="category.html" class="category-badge position-absolute">Trending</a>
<a href="blog-single.html">
<div class="inner">
<img src="images/widgets/widget-carousel-2.jpg" alt="post-title" />
</div>
</a>
</div>
<h5 class="post-title mb-0 mt-4"><a href="blog-single.html">Master The Art Of Nature With These 7 Tips</a></h5>
<ul class="meta list-inline mt-2 mb-0">
<li class="list-inline-item"><a href="#">Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
<!-- post -->
<div class="post post-carousel">
<div class="thumb rounded">
<a href="category.html" class="category-badge position-absolute">How to</a>
<a href="blog-single.html">
<div class="inner">
<img src="images/widgets/widget-carousel-1.jpg" alt="post-title" />
</div>
</a>
</div>
<h5 class="post-title mb-0 mt-4"><a href="blog-single.html">5 Easy Ways You Can Turn Future Into Success</a></h5>
<ul class="meta list-inline mt-2 mb-0">
<li class="list-inline-item"><a href="#">Katen Doe</a></li>
<li class="list-inline-item">29 March 2021</li>
</ul>
</div>
</div>
<!-- carousel arrows -->
<div class="slick-arrows-bot">
<button type="button" data-role="none" class="carousel-botNav-prev slick-custom-buttons" aria-label="Previous"><i class="icon-arrow-left"></i></button>
<button type="button" data-role="none" class="carousel-botNav-next slick-custom-buttons" aria-label="Next"><i class="icon-arrow-right"></i></button>
</div>
</div>
</div>
<!-- widget advertisement -->
<div class="widget no-container rounded text-md-center">
<span class="ads-title">- Sponsored Ad -</span>
<a href="#" class="widget-ads">
<img src="images/ads/ad-360.png" alt="Advertisement" />
</a>
</div>
<!-- widget tags -->
<div class="widget rounded">
<div class="widget-header text-center">
<h3 class="widget-title">Tag Clouds</h3>
<img src="images/wave.svg" class="wave" alt="wave" />
</div>
<div class="widget-content">
<a href="#" class="tag">#Trending</a>
<a href="#" class="tag">#Video</a>
<a href="#" class="tag">#Featured</a>
<a href="#" class="tag">#Gallery</a>
<a href="#" class="tag">#Celebrities</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- instagram feed -->
<div class="instagram">
<div class="container-xl">
<!-- button -->
<a href="#" class="btn btn-default btn-instagram">@Katen on Instagram</a>
<!-- images -->
<div class="instagram-feed d-flex flex-wrap">
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-1.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-2.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-3.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-4.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-5.jpg" alt="insta-title" />
</a>
</div>
<div class="insta-item col-sm-2 col-6 col-md-2">
<a href="#">
<img src="images/insta/insta-6.jpg" alt="insta-title" />
</a>
</div>
</div>
</div>
</div>
<!-- footer -->
<footer>
<div class="container-xl">
<div class="footer-inner">
<div class="row d-flex align-items-center gy-4">
<!-- copyright text -->
<div class="col-md-4">
<span class="copyright">© 2021 Katen. Template by ThemeGer.</span>
</div>
<!-- social icons -->
<div class="col-md-4 text-center">
<ul class="social-icons list-unstyled list-inline mb-0">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<!-- go to top button -->
<div class="col-md-4">
<a href="#" id="return-to-top" class="float-md-end"><i class="icon-arrow-up"></i>Back to Top</a>
</div>
</div>
</div>
</div>
</footer>
</div><!-- end site wrapper -->
<!-- search popup area -->
<div class="search-popup">
<!-- close button -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- content -->
<div class="search-content">
<div class="text-center">
<h3 class="mb-4 mt-0">Press ESC to close</h3>
</div>
<!-- form -->
<form class="d-flex search-form">
<input class="form-control me-2" type="search" placeholder="Search and press enter ..." aria-label="Search">
<button class="btn btn-default btn-lg" type="submit"><i class="icon-magnifier"></i></button>
</form>
</div>
</div>
<!-- canvas menu -->
<div class="canvas-menu d-flex align-items-end flex-column">
<!-- close button -->
<button type="button" class="btn-close" aria-label="Close"></button>
<!-- logo -->
<div class="logo">
<img src="images/logo.svg" alt="Katen" />
</div>
<!-- menu -->
<nav>
<ul class="vertical-menu">
<li class="active">
<a href="index.html">Home</a>
<ul class="submenu">
<li><a href="index.html">Magazine</a></li>
<li><a href="personal.html">Personal</a></li>
<li><a href="personal-alt.html">Personal Alt</a></li>
<li><a href="minimal.html">Minimal</a></li>
<li><a href="classic.html">Classic</a></li>
</ul>
</li>
<li><a href="category.html">Lifestyle</a></li>
<li><a href="category.html">Inspiration</a></li>
<li>
<a href="#">Pages</a>
<ul class="submenu">
<li><a href="category.html">Category</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
<li><a href="blog-single-alt.html">Blog Single Alt</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<!-- social icons -->
<ul class="social-icons list-unstyled list-inline mb-0 mt-auto w-100">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<!-- JAVA SCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.sticky-sidebar.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>