Access_New/pages/blog-post-type-slider.html
2024-09-05 11:33:27 +05:45

1082 lines
62 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 class="no-js" lang="en">
<head>
<title>Crafto - The Multipurpose HTML5 Template</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="ThemeZaa">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="css/vendors.min.css" />
<link rel="stylesheet" href="css/icon.min.css" />
<link rel="stylesheet" href="css/style.min.css" />
<link rel="stylesheet" href="css/responsive.min.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo border-bottom border-color-extra-medium-gray" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto col-lg-2 me-lg-0 me-auto">
<a class="navbar-brand" href="index.html">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto col-lg-8 menu-order position-static">
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
<span class="navbar-toggler-line"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
<li><a href="demo-business.html" target="_blank">Business</a></li>
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
</ul>
<ul class="col">
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
</ul>
<ul class="col">
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
</ul>
<ul class="col">
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Pages</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">About Pages</li>
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Services Pages</li>
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
<li><a href="demo-marketing-services-details.html" target="_blank">Single Marketing</a></li>
<li><a href="demo-accounting-services-details.html" target="_blank">Single Accounting</a></li>
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col">
<li class="sub-title">Contact Pages</li>
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
</ul>
<ul class="col">
<li class="sub-title">Other Pages</li>
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
<li><a href="404.html">Error 404</a></li>
<li><a href="search-result.html">Search Results</a></li>
<li><a href="maintenance.html">Maintenance</a></li>
<li><a href="coming-soon.html">Coming Soon</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Elements</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li><a href="element-accordion.html">Accordion</a></li>
<li><a href="element-buttons.html">Button</a></li>
<li><a href="element-team.html">Team</a></li>
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-clients.html">Clients</a></li>
<li><a href="element-review.html">Review</a></li>
<li><a href="element-subscribe.html">Subscribe</a></li>
<li><a href="element-call-to-action.html">Call to Action</a></li>
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-contact-form.html">Contact Form</a></li>
<li><a href="element-columns.html">Columns</a></li>
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
<li><a href="element-image-gallery.html">Image Gallery</a></li>
</ul>
<ul class="col">
<li><a href="element-progress-bar.html">Progress Bar</a></li>
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
<li><a href="element-counters.html">Counters</a></li>
<li><a href="element-countdown.html">Countdown</a></li>
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
<li><a href="element-heading.html">Heading</a></li>
<li><a href="element-dropcaps.html">Dropcaps</a></li>
<li><a href="element-blockquote.html">Blockquote</a></li>
<li><a href="element-highlights.html">Highlights</a></li>
<li><a href="element-lists.html">Lists</a></li>
<li><a href="element-social-icons.html">Social Icons</a></li>
<li><a href="element-pricing-table.html">Pricing Table</a></li>
</ul>
<ul class="col">
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
<li><a href="element-services-box.html">Services Box</a></li>
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
<li><a href="element-instagram.html">Instagram</a></li>
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
<li><a href="element-content-carousel.html">Content Carousel</a></li>
<li><a href="element-media.html">Media</a></li>
<li><a href="element-event.html">Event</a></li>
<li><a href="element-dividers.html">Dividers</a></li>
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
<li><a href="element-banners.html">Banners</a></li>
<li><a href="element-carousel.html">Carousel</a></li>
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
</ul>
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
<li class="sub-title">Premium Elements</li>
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
<li><a href="element-sticky-column.html">Sticky Column</a></li>
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
<li><a href="element-animated-particles.html">Animated Particles</a></li>
<li><a href="element-marquee.html">Marquee</a></li>
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
<li><a href="element-fancy-images.html">Fancy Images</a></li>
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
</ul>
</div>
</div>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Features</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
<li class="dropdown">
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="modal-simple.html">Simple Modal</a></li>
<li><a href="modal-subscription.html">Subscription</a></li>
<li><a href="modal-contact-form.html">Contact Form</a></li>
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
<li><a href="modal-google-map.html">Google Map</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
<li><a href="icon-packs-feather.html">Feather</a></li>
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
<li><a href="icon-packs-themify.html">Themify</a></li>
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
</ul>
</li>
<li class="dropdown">
<a href="animations.html">Animations</a>
</li>
<li class="dropdown">
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
</li>
<li class="dropdown">
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
</li>
<li class="dropdown">
<a href="demo-startup.html" target="_blank">Back to Top</a>
</li>
<li class="dropdown">
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
</li>
</ul>
</li>
<li class="nav-item dropdown simple-dropdown">
<a href="javascript:void(0);" class="nav-link">Blog</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
<li class="dropdown">
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
<ul class="dropdown-menu">
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
<li><a href="blog-post-type-video.html">Post - Video</a></li>
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown submenu">
<a href="javascript:void(0);" class="nav-link">Shop</a>
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
<div class="d-lg-flex mega-menu m-auto">
<ul class="col">
<li class="sub-title">Shop Layout</li>
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
</ul>
<ul class="col">
<li class="sub-title">Utility Pages</li>
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
</ul>
<ul class="col">
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-auto col-lg-2 text-end xs-pe-0">
<div class="header-icon">
<div class="header-button">
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
<span>
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>
<section class="top-space-margin right-side-bar">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 blog-standard md-mb-50px sm-mb-40px">
<div class="col-12 blog-details mb-12">
<div class="entry-meta mb-20px fs-15">
<span><i class="text-dark-gray feather icon-feather-calendar"></i><a href="blog-grid.html">26 August 2023</a></span>
<span><i class="text-dark-gray feather icon-feather-user"></i><a href="blog-grid.html">Jonse robbert</a></span>
<span><i class="text-dark-gray feather icon-feather-folder"></i><a href="blog-grid.html">Creative</a></span>
</div>
<h5 class="text-dark-gray fw-600 w-80 sm-w-100 mb-6">The best way to get started is to quit talking and begin doing.</h5>
<div class="overflow-hidden mb-7">
<div class="swiper magic-cursor magic-cursor-light" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 0, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 2000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-three-slide-pagination&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 1 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/blog-images-56.jpg" class="w-100" alt />
</div>
<div class="swiper-slide">
<img src="images/blog-images-57.jpg" class="w-100" alt />
</div>
<div class="swiper-slide">
<img src="images/blog-images-58.jpg" class="w-100" alt />
</div>
<div class="swiper-slide">
<img src="images/blog-images-59.jpg" class="w-100" alt />
</div>
</div>
<div class="slider-one-slide-prev-1 icon-very-small text-dark-gray swiper-button-prev slider-navigation-style-02 bg-white text-dark-gray box-shadow-small"><i class="feather icon-feather-arrow-left"></i></div>
<div class="slider-one-slide-next-1 icon-very-small text-dark-gray swiper-button-next slider-navigation-style-02 bg-white text-dark-gray box-shadow-small"><i class="feather icon-feather-arrow-right"></i></div>
</div>
</div>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic.</p>
<blockquote class="alt-font border-4 border-start border-color-base-color text-dark-gray fw-500 ps-40px mt-7 mb-7 ms-60px lg-ms-30px sm-ms-0 lg-ps-30px">
<p>Tomorrow is the most important thing in life. Comes into us at midnight very clean. It's perfect when it arrives and it puts itself in our hands. It hopes we've learned something from yesterday.</p>
<footer class="fs-14 fw-600 text-base-color d-inline-block text-uppercase">John Wayne</footer>
</blockquote>
<img src="images/blog-images-10.jpg" alt class="w-100 border-radius-6px mb-7">
<p><span class="alt-font first-letter text-dark-gray">M</span>lorem ipsum dolor sit amet consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non , sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-12">
<div class="row mb-50px sm-mb-30px">
<div class="tag-cloud col-12 col-md-9 text-center text-md-start sm-mb-15px">
<a href="blog-grid.html">Development</a>
<a href="blog-grid.html">Event</a>
<a href="blog-grid.html">Multimedia </a>
<a href="blog-grid.html">Fashion</a>
</div>
<div class="tag-cloud col-12 col-md-3 text-uppercase text-center text-md-end">
<a class="likes-count fw-500 mx-0" href="blog-post-type-slider.html#"><i class="fa-regular fa-heart text-red me-10px"></i><span class="text-dark-gray text-dark-gray-hover">05 Likes</span></a>
</div>
</div>
<div class="row">
<div class="col-12 mb-7">
<div class="d-block d-md-flex w-100 box-shadow-extra-large align-items-center border-radius-4px p-8">
<div class="w-140px text-center me-60px sm-mx-auto">
<img src="images/avtar-07.jpg" class="rounded-circle w-110px" alt>
<a href="blog-grid.html" class="text-dark-gray fw-500 mt-25px d-inline-block lh-20">Colene Landin</a>
<span class="fs-15 lh-20 d-block sm-mb-15px">Co-founder</span>
</div>
<div class="w-75 sm-w-100 text-center text-md-start">
<p class="mb-5px">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type.</p>
<a href="blog-grid.html" class="btn btn-link btn-large text-dark-gray mt-20px fw-600">All author posts</a>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 text-center elements-social social-icon-style-04">
<ul class="medium-icon dark">
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"><span></span></i></a></li>
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></a></li>
<li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<aside class="col-12 col-xl-4 col-lg-4 col-md-7 ps-55px xl-ps-50px lg-ps-15px sidebar">
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Popular posts</div>
<ul class="popular-post-sidebar position-relative">
<li class="d-flex align-items-center">
<figure>
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-magazine-home-20.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-elearning-blog-single-simple.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">Trendy is the last stage before tacky.</a>
<div><a href="blog-grid.html" class="d-inline-block fs-15">20 February 2023</a></div>
</div>
</li>
<li class="d-flex align-items-center">
<figure>
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-magazine-home-21.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-elearning-blog-single-simple.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">Believe you can and you're halfway there.</a>
<div><a href="blog-grid.html" class="d-inline-block fs-15">18 February 2023</a></div>
</div>
</li>
<li class="d-flex align-items-center">
<figure>
<a href="demo-elearning-blog-single-simple.html"><img src="images/demo-magazine-home-22.jpg" alt></a>
</figure>
<div class="col media-body">
<a href="demo-elearning-blog-single-simple.html" class="fw-600 fs-17 text-dark-gray d-inline-block mb-10px">In a gentle way, you can shake the world.</a>
<div><a href="blog-grid.html" class="d-inline-block fs-15">16 February 2023</a></div>
</div>
</li>
</ul>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Explore category</div>
<ul class="category-list-sidebar position-relative">
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-23.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="blog-grid.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-500 fancy-text-style-4">Fashion</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-24.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="blog-grid.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-500 fancy-text-style-4">Creative</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-25.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="blog-grid.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-500 fancy-text-style-4">Business</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
<li class="d-flex align-items-center h-80px cover-background ps-35px pe-35px" style="background-image: url('images/demo-magazine-home-26.jpg')">
<div class="opacity-medium bg-gradient-dark-transparent"></div>
<a href="blog-grid.html" class="d-flex align-items-center position-relative w-100 h-100">
<span class="text-white mb-0 fs-20 fw-500 fancy-text-style-4">Lifestyle</span>
<span class="btn text-white position-absolute"><i class="bi bi-arrow-right ms-0 fs-24"></i></span>
</a>
</li>
</ul>
</div>
<div class="mb-17 md-mb-50px xs-mb-35px">
<div class="bg-white box-shadow-extra-large p-14 xl-p-10 newsletter-style-05">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-20px pb-15px position-relative">Newsletter subscribe</div>
<p class="fs-15 lh-24">Signup for free and be the first to get notified on new updates.</p>
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative">
<input class="w-100 fs-15 input-small form-control box-shadow-medium-bottom border-radius-0px text-center required mb-10px" type="email" name="email" placeholder="Enter your email address" />
<input type="hidden" name="redirect" value>
<button class="btn btn-small btn-dark-gray w-100 btn-box-shadow submit" aria-label="submit now">submit now</button>
<div class="d-flex fs-14 mt-10px">
<div class="d-inline-block"><i class="line-icon-Handshake me-10px align-middle icon-very-medium"></i>Protecting your privacy</div>
</div>
<div class="form-results border-radius-4px mt-10px lh-normal pt-10px pb-10px ps-15px pe-15px fs-16 w-100 text-center position-absolute z-index-1 d-none"></div>
</form>
</div>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px elements-social social-icon-style-10">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Stay connected</div>
<div class="row row-cols-2 row-cols-lg-2 justify-content-center align-items-center g-0">
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="facebook text-dark-gray" href="https://www.facebook.com/" target="_blank">
<i class="fa-brands fa-facebook-f fs-18 me-10px"></i>
<span class="fw-500">Facebook</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="dribbble text-dark-gray" href="http://www.dribbble.com" target="_blank">
<i class="fa-brands fa-dribbble fs-18 me-10px"></i>
<span class="fw-500">Dribbble</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="twitter text-dark-gray" href="https://www.twitter.com" target="_blank">
<i class="fa-brands fa-twitter fs-18 me-10px"></i>
<span class="fw-500">Twitter</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="youtube text-dark-gray" href="https://www.youtube.com" target="_blank">
<i class="fa-brands fa-youtube fs-18 me-10px"></i>
<span class="fw-500">Youtube</span>
</a>
</div>
<div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="instagram text-dark-gray" href="https://www.instagram.com" target="_blank">
<i class="fa-brands fa-instagram fs-18 me-10px"></i>
<span class="fw-500">Instagram</span>
</a>
</div>
<div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="vimeo text-dark-gray" href="https://vimeo.com/" target="_blank">
<i class="fa-brands fa-vimeo-v fs-18 me-10px"></i>
<span class="fw-500">Vimeo</span>
</a>
</div>
<div class="col border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="linkedin text-dark-gray" href="https://www.linkedin.com/" target="_blank">
<i class="fa-brands fa-linkedin-in fs-18 me-10px"></i>
<span class="fw-500">Linkedin</span>
</a>
</div>
<div class="col ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
<a class="behance text-dark-gray" href="http://www.behance.com/" target="_blank">
<i class="fa-brands fa-behance fs-18 me-10px"></i>
<span class="fw-500 fs-16">Behance</span>
</a>
</div>
</div>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Tags cloud</div>
<div class="tag-cloud">
<a href="blog-grid.html">Development</a>
<a href="blog-grid.html">Mountains</a>
<a href="blog-grid.html">Lifestyle</a>
<a href="blog-grid.html">Hotel</a>
<a href="blog-grid.html">Event</a>
<a href="blog-grid.html">Multimedia </a>
<a href="blog-grid.html">Fashion</a>
</div>
</div>
<div class="mb-15 md-mb-50px xs-mb-35px">
<div class="fw-600 fs-19 lh-22 ls-minus-05px text-dark-gray border-bottom border-color-dark-gray border-2 d-block mb-30px pb-15px position-relative">Instagram</div>
<ul class="instafeed-grid instafeed-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-3col sm-grid-3col xs-grid-3col gutter-medium" data-total="6">
<li class="grid-item"><figure><a href="blog-post-type-slider.html#" data-href="{{link}}" target="_blank"><img src="blog-post-type-slider.html#" data-src="{{image}}" class="insta-image" alt /><span class="insta-icon"><i class="fa-brands fa-instagram"></i>{{likes}}</span></a></figure></li>
</ul>
</div>
</aside>
</div>
</div>
</section>
<section class="bg-very-light-gray">
<div class="container">
<div class="row justify-content-center mb-2">
<div class="col-12 col-lg-7 text-center">
<span class="fs-15 fw-500 text-uppercase d-inline-block">You may also like</span>
<h4 class="text-dark-gray fw-600">Related posts</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large">
<li class="grid-sizer"></li>
<li class="grid-item">
<div class="card border-0 border-radius-4px box-shadow-extra-large box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-business-blog-single-modern.html" class="d-block"><img src="images/blog-images-56.jpg" alt /></a>
<div class="blog-categories">
<a href="blog-classic.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Agency</a>
</div>
</div>
<div class="card-body p-12">
<a href="demo-business-blog-single-modern.html" class="card-title mb-15px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block">How to bring the season into your great marketing.</a>
<p>Lorem ipsum has been industry standard dummy text ever...</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date fw-500 d-inline-block">30 August 2023</span>
<div class="d-inline-block author-name">By <a href="blog-classic.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Den viliamson</a></div>
</div>
<div class="like-count">
<a href="demo-business-blog-single-modern.html"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-600">65</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-4px box-shadow-extra-large box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-business-blog-single-modern.html" class="d-block"><img src="images/blog-images-59.jpg" alt /></a>
<div class="blog-categories">
<a href="blog-classic.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Luxurious</a>
</div>
</div>
<div class="card-body p-12">
<a href="demo-business-blog-single-modern.html" class="card-title mb-15px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block">Build up healthy habits and strong peaceful life.</a>
<p>Lorem ipsum has been industry standard dummy text ever...</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date fw-500 d-inline-block">28 August 2023</span>
<div class="d-inline-block author-name">By <a href="blog-classic.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Hugh macleod</a></div>
</div>
<div class="like-count">
<a href="demo-business-blog-single-modern.html"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-600">25</span></a>
</div>
</div>
</div>
</div>
</li>
<li class="grid-item">
<div class="card border-0 border-radius-4px box-shadow-extra-large box-shadow-extra-large-hover">
<div class="blog-image">
<a href="demo-business-blog-single-modern.html" class="d-block"><img src="images/blog-images-52.jpg" alt /></a>
<div class="blog-categories">
<a href="blog-classic.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase alt-font fw-700">Business</a>
</div>
</div>
<div class="card-body p-12">
<a href="demo-business-blog-single-modern.html" class="card-title mb-15px fw-600 fs-17 lh-26 text-dark-gray text-dark-gray-hover d-inline-block">Make business easy with beautiful application.</a>
<p>Lorem ipsum has been industry standard dummy text ever...</p>
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
<div class="me-auto">
<span class="blog-date fw-500 d-inline-block">26 August 2023</span>
<div class="d-inline-block author-name">By <a href="blog-classic.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Walton smith</a></div>
</div>
<div class="like-count">
<a href="demo-business-blog-single-modern.html"><i class="fa-regular fa-heart text-red d-inline-block"></i><span class="text-dark-gray align-middle fw-600">30</span></a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 text-center mb-3">
<h4 class="text-dark-gray fw-600">4 Comments</h4>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<ul class="blog-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-50px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-35px last-paragraph-no-margin sm-ps-0">
<a href="blog-post-type-slider.html#" class="text-dark-gray fw-500">Herman Miller</a>
<a href="blog-post-type-slider.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-15px">17 July 2023, 6:05 PM</div>
<p class="w-85">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make book.</p>
</div>
</div>
<ul class="child-comment">
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-50px sm-mb-10px">
<img src="images/avtar-19.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-35px last-paragraph-no-margin sm-ps-0">
<a href="blog-post-type-slider.html#" class="text-dark-gray fw-500">Wilbur Haddock</a>
<a href="blog-post-type-slider.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-15px">18 July 2023, 10:19 PM</div>
<p class="w-85">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since.</p>
</div>
</div>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start border-radius-5px p-50px md-p-30px sm-p-20px bg-very-light-gray">
<div class="w-90px sm-w-50px sm-mb-10px">
<img src="images/avtar-17.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-35px last-paragraph-no-margin sm-ps-0">
<a href="blog-post-type-slider.html#" class="text-dark-gray fw-500">Colene Landin</a>
<a href="blog-post-type-slider.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-15px">18 July 2023, 12:39 PM</div>
<p class="w-85">Lorem ipsum is simply dummy text of the printing and typesetting industry. Ipsum has been the industry's standard dummy text.</p>
</div>
</div>
</li>
</ul>
</li>
<li>
<div class="d-block d-md-flex w-100 align-items-center align-items-md-start ">
<div class="w-90px sm-w-50px sm-mb-10px">
<img src="images/avtar-18.jpg" class="rounded-circle" alt>
</div>
<div class="w-100 ps-35px last-paragraph-no-margin sm-ps-0">
<a href="blog-post-type-slider.html#" class="text-dark-gray fw-500">Jennifer Freeman</a>
<a href="blog-post-type-slider.html#comments" class="btn-reply text-uppercase section-link">Reply</a>
<div class="fs-14 lh-24 mb-15px">19 July 2023, 8:25 PM</div>
<p class="w-85">Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem ipsum has been the industry's standard dummy text ever since the make a type specimen book.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section id="comments" class="pt-0">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 mb-4">
<h5 class="text-dark-gray fw-600 mb-5px">Write a comment</h5>
<div class="mb-5px">Your email address will not be published. Required fields are marked *</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-9">
<form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
<div class="col-md-6 mb-40px">
<input class="input-name border-radius-4px form-control required" type="text" name="name" placeholder="Enter your name*">
</div>
<div class="col-md-6 mb-40px">
<input class="border-radius-4px form-control required" type="email" name="email" placeholder="Enter your email address*">
</div>
<div class="col-md-12 mb-40px">
<textarea class="border-radius-4px form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
</div>
<div class="col-12">
<input type="hidden" name="redirect" value>
<button class="btn btn-dark-gray btn-small btn-round-edge submit fw-600" type="submit">Post Comment</button>
<div class="form-results mt-20px d-none"></div>
</div>
</form>
</div>
</div>
</div>
</section>
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
<div class="container">
<div class="row mb-6 md-mb-30px">
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
<div class="row">
<div class="col-lg-5 col-sm-6 xs-mb-20px">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
<a href="cdn-cgi/l/email-protection.html#422b2c242d02362a272f273823236c212d2f"><span class="__cf_email__" data-cfemail="d1b8bfb7be91a5b9b4bcb4abb0b0ffb2bebc">[email&#160;protected]</span></a>
</div>
<div class="col-lg-5 col-sm-6">
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Getting started</span>
<a href="https://1.envato.market/R53mL2" target="_blank">Purchase on Envato</a>
</div>
</div>
</div>
<div class="col-lg-2 col-6 offset-xl-1 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Useful links</span>
<ul>
<li><a href="documentation/index.html" target="_blank">Documentation</a></li>
<li><a href="https://www.themezaa.com/support/" target="_blank">Support center</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Video tutorials</a></li>
<li><a href="https://themeforest.net/user/themezaa/portfolio" target="_blank">Envato portfolio</a></li>
<li><a href="https://www.themezaa.com/theme-customization/" target="_blank">Customization</a></li>
</ul>
</div>
<div class="col-lg-2 col-6 text-center text-lg-start">
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Follow Us</span>
<ul>
<li><a href="https://www.facebook.com/themezaastudio/" target="_blank">Facebook</a></li>
<li><a href="https://www.twitter.com/themezaa" target="_blank">Twitter</a></li>
<li><a href="https://www.dribbble.com/linksture" target="_blank">Dribbble</a></li>
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Youtube</a></li>
<li><a href="https://www.linkedin.com/company/themezaa/" target="_blank">Linkedin</a></li>
</ul>
</div>
<div class="col-lg-2 order-first order-lg-4 text-center text-lg-start md-mb-20px">
<a href="index.html" class="footer-logo"><img src="images/logo-white-demo.png" data-at2x="images/logo-white-demo@2x.png" alt></a>
</div>
</div>
<div class="row">
<div class="col-lg-7 last-paragraph-no-margin text-center text-lg-start">
<p class="fs-13 lh-22 w-90 md-w-100">ThemeZaa - The best WordPress, Shopify and Magento themes and plugins provider. We design and develop quality themes and plugins to create your awesome website.</p>
</div>
<div class="col-lg-5 text-center text-lg-end md-mt-15px last-paragraph-no-margin">
<p class="fs-13 lh-22">&copy; 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
</div>
</div>
</div>
</footer>
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/vendors.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>