Files
2026-04-28 21:15:09 +03:00

856 lines
39 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blogzine - Blog and Magazine Bootstrap 5 Theme</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Webestica.com">
<meta name="description" content="Bootstrap based News, Magazine and Blog Theme">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Plugins CSS -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/tiny-slider/tiny-slider.css">
<!-- Theme CSS -->
<link id="style-switch" rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<!-- =======================
Header START -->
<header class="navbar-light navbar-sticky header-static">
<!-- Logo Nav START -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<!-- Logo START -->
<a class="navbar-brand" href="index.html">
<img class="navbar-brand-item light-mode-item" src="assets/images/logo.svg" alt="logo">
<img class="navbar-brand-item dark-mode-item" src="assets/images/logo-light.svg" alt="logo">
</a>
<!-- Logo END -->
<!-- Responsive navbar toggler -->
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="text-body h6 d-none d-sm-inline-block">Menu</span>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Main navbar START -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav navbar-nav-scroll mx-auto">
<!-- Nav item 1 Demos -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" href="#" id="homeMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
<ul class="dropdown-menu" aria-labelledby="homeMenu">
<li> <a class="dropdown-item" href="index.html">Home default</a></li>
<li> <a class="dropdown-item" href="index-lazy.html">Home lazy load</a></li>
<li> <a class="dropdown-item" href="index-2.html">Magazine classic</a></li>
<li> <a class="dropdown-item" href="index-3.html">Magazine</a></li>
<li> <a class="dropdown-item active" href="index-4.html">Home cards</a></li>
<li> <a class="dropdown-item" href="index-5.html">Blog classic</a></li>
<li> <a class="dropdown-item" href="index-6.html">Blog Personal </a></li>
<li> <a class="dropdown-item" href="index-7.html">Blog Vintage</a></li>
<li> <a class="dropdown-item" href="index-8.html">Blog Tech</a></li>
<li> <a class="dropdown-item" href="index-9.html">Blog Fashion</a></li>
<li> <a class="dropdown-item" href="index-10.html">Blog Podcast</a></li>
<li> <a class="dropdown-item" href="index-11.html">Home Shop <span class="badge bg-danger smaller me-1">New</span></a></li>
</ul>
</li>
<!-- Nav item 2 Pages -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu" aria-labelledby="pagesMenu">
<li> <a class="dropdown-item" href="about-us.html">About</a></li>
<li> <a class="dropdown-item" href="contact-us.html">Contact</a></li>
<!-- Dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Shop <span class="badge bg-danger smaller me-1">New</span></a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="shop-grid.html">Shop grid <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="shop-detail.html">Shop detail <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="checkout.html">Checkout <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="my-cart.html">Cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="empty-cart.html">Empty cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
</ul>
</li>
<!-- Dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Other Archives</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="author.html">Author Page</a> </li>
<li> <a class="dropdown-item" href="categories.html">Category page 1</a> </li>
<li> <a class="dropdown-item" href="categories-2.html">Category page 2</a> </li>
<li> <a class="dropdown-item" href="tag.html"># tag</a> </li>
<li> <a class="dropdown-item" href="search-result.html">Search result</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="404.html">Error 404</a></li>
<li> <a class="dropdown-item" href="signin.html">signin</a></li>
<li> <a class="dropdown-item" href="signup.html">signup</a></li>
<li> <a class="dropdown-item" href="offline.html">offline</a></li>
<!-- Dropdown submenu levels -->
<li class="dropdown-divider"></li>
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown levels</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<!-- dropdown submenu open right -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown (end)</a>
<ul class="dropdown-menu" data-bs-popper="none">
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<!-- dropdown submenu open left -->
<li class="dropdown-submenu dropstart">
<a class="dropdown-item dropdown-toggle" href="#">Dropdown (start)</a>
<ul class="dropdown-menu dropdown-menu-end" data-bs-popper="none">
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="#">Dropdown item</a> </li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="https://support.webestica.com/" target="_blank">
<i class="text-warning fa-fw bi bi-life-preserver me-2"></i>Support
</a>
</li>
<li>
<a class="dropdown-item" href="docs/index.html" target="_blank">
<i class="text-danger fa-fw bi bi-card-text me-2"></i>Documentation
</a>
</li>
<li class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="https://blogzine.webestica.com/rtl" target="_blank">
<i class="text-info fa-fw bi bi-toggle-off me-2"></i>RTL demo
</a>
</li>
<li>
<a class="dropdown-item" href="https://themes.getbootstrap.com/store/webestica/" target="_blank">
<i class="text-success fa-fw bi bi-cloud-download-fill me-2"></i>Buy blogzine!
</a>
</li>
</ul>
</li>
<!-- Nav item 3 Post -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="postMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Post</a>
<ul class="dropdown-menu" aria-labelledby="postMenu">
<!-- dropdown submenu -->
<li class="dropdown-submenu dropend">
<a class="dropdown-item dropdown-toggle" href="#">Post grid</a>
<ul class="dropdown-menu dropdown-menu-start" data-bs-popper="none">
<li> <a class="dropdown-item" href="post-grid.html">Post grid</a> </li>
<li> <a class="dropdown-item" href="post-grid-4-col.html">Post grid 4 col</a> </li>
<li> <a class="dropdown-item" href="post-grid-masonry.html">Post grid masonry</a> </li>
<li> <a class="dropdown-item" href="post-grid-masonry-filter.html">Post grid masonry filter</a> </li>
<li> <a class="dropdown-item" href="post-large-and-grid.html">Post mixed large than grid</a> </li>
</ul>
</li>
<li> <a class="dropdown-item" href="post-list.html">Post list</a> </li>
<li> <a class="dropdown-item" href="post-list-2.html">Post list 2</a> </li>
<li> <a class="dropdown-item" href="post-cards.html">Post card</a> </li>
<li> <a class="dropdown-item" href="post-overlay.html">Post Overlay</a> </li>
<li> <a class="dropdown-item" href="post-types.html">Post types</a> </li>
<li class="dropdown-divider"></li>
<li> <a class="dropdown-item" href="post-single.html">Post single magazine</a> </li>
<li> <a class="dropdown-item" href="post-single-2.html">Post single classic</a> </li>
<li> <a class="dropdown-item" href="post-single-3.html">Post single minimal</a> </li>
<li> <a class="dropdown-item" href="post-single-4.html">Post single card</a> </li>
<li> <a class="dropdown-item" href="post-single-5.html">Post single review</a> </li>
<li> <a class="dropdown-item" href="post-single-6.html">Post single video</a> </li>
<li> <a class="dropdown-item" href="podcast-single.html">Podcast single</a> </li>
<li class="dropdown-divider"></li>
<li> <a class="dropdown-item" href="pagination-styles.html">Pagination styles</a> </li>
</ul>
</li>
<!-- Nav item 4 Mega menu -->
<li class="nav-item dropdown dropdown-fullwidth">
<a class="nav-link dropdown-toggle" href="#" id="megaMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lifestyle</a>
<div class="dropdown-menu" aria-labelledby="megaMenu">
<div class="container">
<div class="row g-4 p-3 flex-fill">
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/01.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">7 common mistakes everyone makes while traveling</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Joan Wallace</a>
</li>
<li class="nav-item">Feb 18, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/02.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">12 worst types of business accounts you follow on Twitter</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Lori Stevens</a>
</li>
<li class="nav-item">Jun 03, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="card bg-transparent">
<!-- Card img -->
<img class="card-img rounded" src="assets/images/blog/16by9/small/03.jpg" alt="Card image">
<div class="card-body px-0 pt-3">
<h6 class="card-title mb-0"><a href="#" class="btn-link text-reset fw-bold">Skills that you can learn from business</a></h6>
<!-- Card info -->
<ul class="nav nav-divider align-items-center text-uppercase small mt-2">
<li class="nav-item">
<a href="#" class="text-reset btn-link">Judy Nguyen</a>
</li>
<li class="nav-item">Sep 07, 2022</li>
</ul>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-3">
<div class="bg-primary bg-opacity-10 p-4 text-center h-100 w-100 rounded">
<span>The Blogzine</span>
<h3>Premium Membership</h3>
<p>Become a Member Today!</p>
<a href="#" class="btn btn-warning">View pricing plans</a>
</div>
</div>
<!-- Card item END -->
</div> <!-- Row END -->
<!-- Trending tags -->
<div class="row px-3">
<div class="col-12">
<ul class="list-inline mt-3">
<li class="list-inline-item">Trending tags:</li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Travel</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-warning-soft">Business</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Tech</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Gadgets</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Lifestyle</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-primary-soft">Vaccine</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-success-soft">Sports</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-danger-soft">Covid-19</a></li>
<li class="list-inline-item"><a href="#" class="btn btn-sm btn-info-soft">Politics</a></li>
</ul>
</div>
</div> <!-- Row END -->
</div>
</div>
</li>
<!-- Nav item 5 link-->
<li class="nav-item"> <a class="nav-link" href="dashboard.html">Dashboard</a></li>
</ul>
</div>
<!-- Main navbar END -->
<!-- Nav right START -->
<div class="nav ms-sm-3 flex-nowrap align-items-center">
<!-- Dark mode switch -->
<div class="nav-item">
<div class="modeswitch" id="darkModeSwitch">
<div class="switch"></div>
</div>
</div>
<!-- Nav Button -->
<div class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-danger mb-0 mx-2">Subscribe!</a>
</div>
<!-- Nav Search -->
<div class="nav-item dropdown nav-search dropdown-toggle-icon-none">
<a class="nav-link pe-0 dropdown-toggle" role="button" href="#" id="navSearch" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-search fs-4"> </i>
</a>
<div class="dropdown-menu dropdown-menu-end shadow rounded p-2" aria-labelledby="navSearch">
<form class="input-group">
<input class="form-control border-success" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success m-0" type="submit">Search</button>
</form>
</div>
</div>
</div>
<!-- Nav right END -->
</div>
</nav>
<!-- Logo Nav END -->
</header>
<!-- =======================
Header END -->
<!-- **************** MAIN CONTENT START **************** -->
<main>
<!-- =======================
Main hero START -->
<section class="pt-3 pb-3 mb-2 card-grid">
<div class="container">
<div class="row">
<div class="col-12">
<div class="tiny-slider arrow-hover arrow-blur arrow-white arrow-round rounded-3 overflow-hidden">
<div class="tiny-slider-inner"
data-autoplay="true"
data-hoverpause="true"
data-gutter="1"
data-arrow="true"
data-dots="false"
data-items="1">
<!-- Slide 1 -->
<div class="card bg-dark-overlay-3 h-400 h-sm-500 h-md-600 rounded-0" style="background-image:url(assets/images/blog/16by9/05.jpg); background-position: center left; background-size: cover;">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-5">
<div class="w-100 my-auto">
<div class="col-md-10 col-lg-7 mx-auto text-center">
<!-- Card category -->
<a href="#" class="badge text-bg-primary mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
<!-- Card title -->
<h2 class="text-white display-5"><a href="post-single-2.html" class="btn-link text-reset fw-normal">Never underestimate the influence of social media</a></h2>
<p class="text-white">For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do.</p>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center text-white position-relative">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/14.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Carolyn</a></span>
</div>
</div>
</li>
<li class="nav-item">Jan 26, 2022</li>
<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 5 Comments</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Slide 2 -->
<div class="card bg-dark-overlay-3 h-400 h-sm-500 h-md-600 rounded-0" style="background-image:url(assets/images/blog/16by9/02.jpg); background-position: center left; background-size: cover;">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex align-items-center p-3 p-sm-5">
<div class="w-100 my-auto">
<div class="col-md-10 col-lg-7 mx-auto text-center">
<!-- Card category -->
<a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Lifestyle</a>
<!-- Card title -->
<h2 class="text-white display-5"><a href="post-single-2.html" class="btn-link text-reset fw-normal">This is why this year will be the year of startups</a></h2>
<p class="text-white">Particular way thoroughly unaffected projection favorable Mrs can be projecting own. </p>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center d-none d-sm-inline-block">
<li class="nav-item">
<div class="nav-link">
<div class="d-flex align-items-center text-white position-relative">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/10.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Louis</a></span>
</div>
</div>
</li>
<li class="nav-item">Nov 15, 2022</li>
<li class="nav-item"><a href="#" class="btn-link"><i class="far fa-comment-alt me-1"></i> 3 Comments</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =======================
Main hero END -->
<!-- =======================
Cards START -->
<section class="p-0">
<div class="container">
<div class="row g-4">
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-img-scale overflow-hidden">
<!-- Card featured -->
<span class="card-featured" title="Featured post"><i class="fas fa-star"></i></span>
<!-- Card Image -->
<img src="assets/images/blog/3by4/01.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-warning"><i class="fas fa-circle me-2 small fw-bold"></i>Technology</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">Best Pinterest boards for learning about business</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
</div>
</li>
<li class="nav-item">Aug 18, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-image-scale">
<!-- Card Image -->
<img src="assets/images/blog/3by4/02.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-success mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">5 intermediate guide to business</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Joan</a>
</div>
</li>
<li class="nav-item">Jun 03, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-12 col-lg-4">
<div class="card card-overlay-bottom bg-parallax h-400 h-lg-100" data-jarallax-video="https://youtu.be/WS-MfCjzztg" data-speed="1.2">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Travel</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">5 investment doubts you should clarify</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a>
</div>
</li>
<li class="nav-item">Jan 28, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-image-scale">
<!-- Card Image -->
<img src="assets/images/blog/3by4/04.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-primary mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">7 common mistakes everyone makes while traveling</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
</div>
</li>
<li class="nav-item">May 26, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card bg-primary h-400 h-sm-100">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-dark mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Travel</a>
<!-- Card title -->
<blockquote class="blockquote blockquote-icon-bg mt-3">
<p class="mb-0 text-white">Your time is limited, so dont waste it living someone elses life. Dont be trapped by dogma which is living with the results of other peoples thinking</p>
<footer class="blockquote-footer text-white">Steve Jobs @ <cite title="Source Title">Apple Inc</cite></footer>
</blockquote>
</div>
<div class="w-100 mt-auto">
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Samuel</a></span>
</div>
</li>
<li class="nav-item">May 26, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-image-scale">
<!-- Card Image -->
<img src="assets/images/blog/3by4/05.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Covid-19</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">Bad habits that people in the industry need to quit</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Billy</a>
</div>
</li>
<li class="nav-item">Feb 22, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card bg-light border h-500 h-sm-100">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-warning mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Covid-19</a>
<!-- Card title -->
<h3><a href="#" class="btn-link text-reset">The pros and cons of business agency</a></h3>
<p class="card-text d-none d-md-block">Interested has all Devonshire difficulty gay assistance joy.</p>
<div class="mt-3 rounded overflow-hidden">
<div class="ratio ratio-16x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/tXHviS-4ygo" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="w-100 mt-auto">
<!-- Card info -->
<ul class="nav nav-divider align-items-center small">
<li class="nav-item position-relative">
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-xs">
<img class="avatar-img rounded-circle" src="assets/images/avatar/05.jpg" alt="avatar">
</div>
<span class="ms-3">by <a href="#" class="stretched-link text-reset btn-link">Joan</a></span>
</div>
</li>
<li class="nav-item">Aug 28, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-image-scale">
<!-- Card Image -->
<img src="assets/images/blog/3by4/06.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-primary mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">7 common mistakes everyone makes while traveling</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Bryan</a>
</div>
</li>
<li class="nav-item">May 26, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
<!-- Card item START -->
<div class="col-sm-6 col-lg-4">
<div class="card card-overlay-bottom card-image-scale">
<!-- Card Image -->
<img src="assets/images/blog/3by4/07.jpg" alt="">
<!-- Card Image overlay -->
<div class="card-img-overlay d-flex flex-column p-3 p-md-4">
<div>
<!-- Card category -->
<a href="#" class="badge text-bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Covid-19</a>
</div>
<div class="w-100 mt-auto">
<!-- Card title -->
<h4 class="text-white"><a href="post-single-5.html" class="btn-link text-reset stretched-link">Ten questions you should answer truthfully.</a></h4>
<!-- Card info -->
<ul class="nav nav-divider text-white-force align-items-center small">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Billy</a>
</div>
</li>
<li class="nav-item">Feb 22, 2022</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Card item END -->
</div> <!-- Row END -->
</div>
</section>
<!-- =======================
Cards END -->
<!-- =======================
Adv START -->
<section class="py-3 my-2">
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="d-block card-img-flash rounded-3 overflow-hidden">
<img src="assets/images/adv-3.png" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- =======================
Adv END -->
<!-- =======================
Trending topics START -->
<section class="p-0">
<div class="container">
<div class="row">
<div class="col">
<!-- Slider -->
<div class="tiny-slider arrow-hover arrow-dark arrow-round">
<div class="tiny-slider-inner"
data-autoplay="false"
data-hoverpause="true"
data-gutter="24"
data-arrow="true"
data-dots="false"
data-items-xl="5"
data-items-lg="4"
data-items-md="3"
data-items-sm="2"
data-items-xs="2"
>
<!-- Category item -->
<div>
<div class="card card-overlay-bottom card-img-scale">
<img class="card-img" src="assets/images/blog/1by1/thumb/01.jpg" alt="card image">
<div class="card-img-overlay d-flex px-3 px-sm-5">
<h5 class="mt-auto mx-auto">
<a href="#" class="stretched-link btn-link fw-bold text-white">Travel</a>
</h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card card-overlay-bottom card-img-scale">
<img class="card-img" src="assets/images/blog/1by1/thumb/02.jpg" alt="card image">
<div class="card-img-overlay d-flex px-3 px-sm-5">
<h5 class="mt-auto mx-auto">
<a href="#" class="stretched-link btn-link fw-bold text-white">Business</a>
</h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card card-overlay-bottom card-img-scale">
<img class="card-img" src="assets/images/blog/1by1/thumb/03.jpg" alt="card image">
<div class="card-img-overlay d-flex px-3 px-sm-5">
<h5 class="mt-auto mx-auto">
<a href="#" class="stretched-link btn-link fw-bold text-white">Marketing</a>
</h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card card-overlay-bottom card-img-scale">
<img class="card-img" src="assets/images/blog/1by1/thumb/04.jpg" alt="card image">
<div class="card-img-overlay d-flex px-3 px-sm-5">
<h5 class="mt-auto mx-auto">
<a href="#" class="stretched-link btn-link fw-bold text-white">Photography</a>
</h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card card-overlay-bottom card-img-scale">
<img class="card-img" src="assets/images/blog/1by1/thumb/05.jpg" alt="card image">
<div class="card-img-overlay d-flex px-3 px-sm-5">
<h5 class="mt-auto mx-auto">
<a href="#" class="stretched-link btn-link fw-bold text-white">Sports</a>
</h5>
</div>
</div>
</div>
</div>
</div> <!-- Slider END -->
</div>
</div>
</div>
</section>
<!-- =======================
Trending topics END -->
<!-- =======================
Newsletter START -->
<section class="pb-0 pt-3 mt-1">
<div class="container">
<div class="row">
<div class="col">
<div class="bg-dark p-3 p-sm-4 rounded-3 position-relative overflow-hidden">
<div class="row">
<div class="col-md-8 col-lg-6 mx-auto text-center py-5 position-relative">
<!-- Title -->
<h2 class="display-6 text-white">Never miss a story!</h2>
<p class="text-white">Get the freshest headlines and updates sent uninterrupted to your inbox.</p>
<!-- Form -->
<form class="row row-cols-sm-auto g-2 align-items-center justify-content-center mt-3">
<div class="col-12">
<input type="email" class="form-control" placeholder="Enter your email address">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary m-0">Subscribe</button>
</div>
<div class="form-text text-white opacity-6 mt-2">By subscribing you agree to our
<a href="#" class="text-decoration-underline text-reset">Privacy Policy</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- =======================
Newsletter END -->
</main>
<!-- **************** MAIN CONTENT END **************** -->
<!-- =======================
Footer START -->
<footer class="pb-5">
<div class="container">
<div class="row pt-5">
<div class="col-lg-7 mx-auto text-center">
<!-- Logo -->
<img class="light-mode-item mx-auto" src="assets/images/logo.svg" alt="logo">
<img class="dark-mode-item mx-auto" src="assets/images/logo-light.svg" alt="logo">
<p class="mt-3">The next-generation blog, news, and magazine theme for you to start sharing your stories today! This Bootstrap 5 based theme is ideal for all types of sites that deliver the news.</p>
<!-- Links -->
<ul class="nav text-center text-sm-end justify-content-center justify-content-center mt-3 mt-md-0">
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link" href="#">Career<span class="badge text-bg-danger ms-2">2 Job</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link pe-0" href="#">Cookies</a></li>
</ul>
<div class="mt-2">©2022 <a href="https://www.webestica.com/" class="text-reset btn-link" target="_blank">Webestica</a>. All rights reserved </div>
</div>
</div>
</div>
</footer>
<!-- =======================
Footer END -->
<!-- Back to top -->
<div class="back-top"><i class="bi bi-arrow-up-short"></i></div>
<!-- =======================
JS libraries, plugins and custom scripts -->
<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Vendors -->
<script src="assets/vendor/tiny-slider/tiny-slider.js"></script>
<script src="assets/vendor/jarallax/jarallax.min.js"></script>
<script src="assets/vendor/jarallax/jarallax-video.min.js"></script>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>