Content Cards
Component 1
Popular Destinations
Traveler’s Favorite
Bali, Indonesia
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
Explore
Dubai, UAE
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
Recommended
Venice, Italy
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
California, USA
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
Les Calanques, France
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
Mykonos, Greece
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
Green Beach, Thailand
Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.
<div class="bg-gray-100 travel-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="mb-4">Popular Destinations</h3>
<div class="card border-0 overflow-hidden rounded-6 shadow-dark-80 bg-white mb-4">
<div class="row align-items-center">
<div class="col-lg-7">
<img src="../assets/img/templates/travel1.jpg" class="img-fluid w-100" alt="Travel">
</div>
<div class="col-lg-5">
<div class="py-4 pl-4 pr-4 pr-md-5">
<span class="d-block font-weight-semibold mb-2 text-gray-600">
<svg class="mr-1" data-name="Group 1" xmlns="http://www.w3.org/2000/svg" width="24" height="23.25" viewBox="0 0 24 23.25">
<path d="M23.823,11.991a.466.466,0,0,0,0-.731L21.54,8.7c-.12-.122-.12-.243-.12-.486L21.779,4.8c0-.244-.121-.609-.478-.609L18.06,3.46c-.12,0-.36-.122-.36-.244L16.022.292a.682.682,0,0,0-.839-.244l-3,1.341a.361.361,0,0,1-.48,0L8.7.048a.735.735,0,0,0-.84.244L6.183,3.216c0,.122-.24.244-.36.244L2.58,4.191a.823.823,0,0,0-.48.731l.36,3.412a.74.74,0,0,1-.12.487L.18,11.381a.462.462,0,0,0,0,.732l2.16,2.437c.12.124.12.243.12.486L2.1,18.449c0,.244.12.609.48.609l3.24.735c.12,0,.36.122.36.241l1.68,2.924a.683.683,0,0,0,.84.244l3-1.341a.353.353,0,0,1,.48,0l3,1.341a.786.786,0,0,0,.839-.244L17.7,20.035c.122-.124.24-.243.36-.243l3.24-.734c.24,0,.48-.367.48-.609l-.361-3.413a.726.726,0,0,1,.121-.485Z" fill="#11bf78"></path>
<path data-name="Path" d="M4.036,10,0,5.8,1.527,4.2,4.036,6.818,10.582,0,12,1.591Z" transform="translate(5.938 6.625)" fill="#fff"></path>
</svg>
<small>Traveler’s Favorite</small></span>
<h2>Bali, Indonesia</h2>
<p class="lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
<a href="javascript:void(0);" class="btn btn-lg btn-outline-dark mt-2">Explore</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel2.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Dubai, UAE</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel3.jpg" class="img-fluid w-100" alt="Travel">
</a>
<span class="badge badge-sm badge-warning rounded badge-absolute py-1 fs-11 font-weight-semibold">Recommended</span>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Venice, Italy</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel4.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">California, USA</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel5.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Les Calanques, France</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel6.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Mykonos, Greece</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel7.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Green Beach, Thailand</a></h5>
<p class="pb-0 pb-md-4 mb-0 mb-md-3 small lh-lg">Duis quis ex ultrices, consectetur neque sed, blandit elit. In vitae est et est maximus lacinia. Aliquam erat volutpat.</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 2
Around the world
Moondance Festival
Lahore, Pakistan
Brick Lane
London, United Kingdom
Morocooan Architecture
Rabat, Morocco
Great Pyramids
Giza, Egypt
Holi Festival
Mumbai, India
The Louvre Museum
Paris, France
<div class="bg-gray-100 travel-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="mb-3 mt-3 mt-md-0">Around the world</h3>
<div class="row">
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel8.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Moondance Festival</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>Lahore, Pakistan</small></span>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel9.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Brick Lane</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>London, United Kingdom</small></span>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel10.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Morocooan Architecture</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>Rabat, Morocco</small></span>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel11.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Great Pyramids</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>Giza, Egypt</small></span>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel12.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">Holi Festival</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>Mumbai, India</small></span>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4">
<figure class="card muse-card mb-0 mb-md-4 transition-3d-hover">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/templates/travel13.jpg" class="img-fluid w-100" alt="Travel">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">The Louvre Museum</a></h5>
<span class="mb-2 d-block text-gray-600"><svg class="mr-1" data-name="icons/tabler/map" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Map background" width="16" height="16" fill="none"></rect>
<path d="M5.45,15.356l-3.4-3.4a7.005,7.005,0,1,1,9.907,0l-3.4,3.4a2.2,2.2,0,0,1-3.112,0ZM2.9,2.9a5.812,5.812,0,0,0,0,8.209l3.4,3.4a1,1,0,0,0,1.415,0l3.4-3.4a5.8,5.8,0,0,0,0-8.209l-.153-.148A5.8,5.8,0,0,0,2.9,2.9ZM4,7.006a3,3,0,1,1,3,3A3.005,3.005,0,0,1,4,7.006Zm1.2,0a1.8,1.8,0,1,0,1.8-1.8A1.8,1.8,0,0,0,5.2,7.006Z" transform="translate(1)" fill="#6C757D"></path>
</svg> <small>Paris, France</small></span>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 3
Latest work
P4 Branding and packaging
Branding . UI design
Blood Orange book ddesign and print
Branding . UI design
Cobra Motors rebrand
Branding . UI design
Nike 3d design tv advertisment
Branding . UI design
<div class="portfolio-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h2 class="mb-3 mb-md-4">Latest work</h2>
<div class="card border-gray-300 mb-4 mb-md-5 rounded-0">
<div class="row g-2">
<div class="col-lg-8 order-0 order-lg-2">
<img src="../assets/img/templates/portfolio1.jpg" class="img-fluid w-100" alt="Portfolio">
</div>
<div class="col-lg-4 d-flex flex-column justify-content-md-end mt-0">
<div class="py-3 py-md-4 py-xl-5 px-sm-4 px-3 ml-xl-3">
<h3><a href="javascript:void(0);" class="stretched-link">P4 Branding and packaging</a></h3>
<small class="text-gray-600 d-block mt-2 mb-0 mb-md-4">Branding . UI design</small>
</div>
</div>
</div>
</div>
<div class="card border-gray-300 mb-4 mb-md-5 rounded-0">
<div class="row g-2">
<div class="col-lg-8 order-0 order-lg-2">
<img src="../assets/img/templates/portfolio2.jpg" class="img-fluid w-100" alt="Portfolio">
</div>
<div class="col-lg-4 d-flex flex-column justify-content-md-end mt-0">
<div class="py-3 py-md-4 py-xl-5 px-sm-4 px-3 ml-xl-3">
<h3><a href="javascript:void(0);" class="stretched-link">Blood Orange book ddesign and print</a></h3>
<small class="text-gray-600 d-block mt-2 mb-0 mb-md-4">Branding . UI design</small>
</div>
</div>
</div>
</div>
<div class="card border-gray-300 mb-4 mb-md-5 rounded-0">
<div class="row g-2">
<div class="col-lg-8 order-0 order-lg-2">
<img src="../assets/img/templates/portfolio3.jpg" class="img-fluid w-100" alt="Portfolio">
</div>
<div class="col-lg-4 d-flex flex-column justify-content-md-end mt-0">
<div class="py-3 py-md-4 py-xl-5 px-sm-4 px-3 ml-xl-3">
<h3><a href="javascript:void(0);" class="stretched-link">Cobra Motors rebrand</a></h3>
<small class="text-gray-600 d-block mt-2 mb-0 mb-md-4">Branding . UI design</small>
</div>
</div>
</div>
</div>
<div class="card border-gray-300 rounded-0 aos-init">
<div class="row g-2">
<div class="col-lg-8 order-0 order-lg-2">
<img src="../assets/img/templates/portfolio4.jpg" class="img-fluid w-100" alt="Portfolio">
</div>
<div class="col-lg-4 d-flex flex-column justify-content-md-end mt-0">
<div class="py-3 py-md-4 py-xl-5 px-sm-4 px-3 ml-xl-3">
<h3><a href="javascript:void(0);" class="stretched-link">Nike 3d design tv advertisment</a></h3>
<small class="text-gray-600 d-block mt-2 mb-0 mb-md-4">Branding . UI design</small>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 4
Music
The madmen came to life
Release date: 1.6.2021
Sally goes to the park
Release date: 1.6.2021
<div class="pricing-template bg-gray-100">
<div class="container">
<!-- Muse Section -->
<section class="muse-section py-4 py-md-5 mt-md-2">
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="mb-4 mb-md-5 mb-lg-4">
<span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/freebies.svg" alt="freebies"></span>
<h5 class="mt-4">Monthly Freebies</h5>
<p class="lh-lg">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
<a href="#" class="btn btn-link link-primary caption">Explore offers <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
</svg></a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="mb-4 mb-md-5 mb-lg-4">
<span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/intergration.svg" alt="intergration"></span>
<h5 class="mt-4">Integrations</h5>
<p class="lh-lg">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</p>
<a href="#" class="btn btn-link link-primary caption">See all plugins <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
</svg></a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="mb-4 mb-md-5 mb-lg-4">
<span class="d-inline-block rounded-pill shadow-dark-80 bg-white square-box-100 d-flex flex-column align-items-center justify-content-end"><img src="../assets/img/pages/file.svg" alt="file"></span>
<h5 class="mt-4">File Explorer</h5>
<p class="lh-lg">It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum.</p>
<a href="#" class="btn btn-link link-primary caption">Learn more <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
</svg></a>
</div>
</div>
</div>
</section>
</div>
</div>
Component 5
Appointments
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected.
Opening Hours
- Mon - Wed 16:00 - 10 pm
- Thursday 1:00 - 3 pm
- Friday 2:00 - 5 pm
- Sat - Sun Closed
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="rounded-6 overflow-hidden">
<div class="row g-0">
<div class="order-lg-2 col-lg-4 col-md-6">
<div class="pt-md-5 pt-4 pb-4 px-4 bg-blue-300 h-100">
<div class="px-lg-3 d-flex flex-column h-100 pb-2">
<h5 class="text-white mb-3">Appointments</h5>
<p class="text-white lh-lg">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected.</p>
<div class="mt-auto text-lg-center">
<a href="#" class="btn btn-outline-light">Book now</a>
</div>
</div>
</div>
</div>
<div class="order-lg-3 col-lg-4 col-md-6">
<div class="pt-md-5 pt-4 pb-4 px-4 bg-cyan-500 h-100">
<div class="px-lg-3 d-flex flex-column h-100 pb-2">
<h5 class="text-white mb-3">Emergency</h5>
<p class="text-white lh-auto mb-2">Our emergency services are available 24/7 in all areas</p>
<a href="tel:1233326359" class="text-white fs-20 mb-3">+(123 332 6359)</a>
<div class="mt-auto text-lg-center">
<a href="#" class="btn btn-outline-light">Call now</a>
</div>
</div>
</div>
</div>
<div class="order-lg-1 col-lg-4 col-md-6 col-md-12">
<div class="py-md-5 py-4 px-4 bg-blue-400 h-100">
<div class="px-lg-3 pb-2">
<h5 class="text-white">Opening Hours</h5>
<ul class="hours-list mb-0">
<li>
<span>Mon - Wed</span>
<span class="ml-auto">16:00 - 10 pm</span>
</li>
<li>
<span>Thursday</span>
<span class="ml-auto">1:00 - 3 pm</span>
</li>
<li>
<span>Friday</span>
<span class="ml-auto">2:00 - 5 pm</span>
</li>
<li>
<span>Sat - Sun</span>
<span class="ml-auto">Closed</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
Component 6
Departments
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="h1 mb-4 mb-md-5">Departments</h3>
<div class="row">
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="36" viewBox="0 0 40 36">
<path id="cardiology" d="M20.005,36H20c-.032,0-.066,0-.107,0l-.035,0c-.033,0-.067-.007-.1-.013l-.033-.005c-.029-.005-.057-.011-.085-.018l-.02,0-.02,0c-.034-.009-.068-.019-.1-.03l-.008,0-.015-.006-.089-.035-.027-.012c-.038-.017-.073-.034-.106-.052l-.007,0c-.037-.02-.073-.042-.106-.064l-.007,0c-.037-.025-.073-.051-.106-.077l-.005,0c-.046-.038-.083-.07-.115-.1l0-.005c-.028-.028-.057-.06-.088-.1l-.022-.024a.016.016,0,0,0,0-.006,55.155,55.155,0,0,0-6.258-6l-.049-.043c-1.056-.921-2.149-1.873-3.221-2.851a1.544,1.544,0,0,1-.093-2.192,1.57,1.57,0,0,1,2.208-.093c1.066.974,2.157,1.924,3.212,2.842C16.576,28.825,18.46,30.466,20,32.1c1.542-1.63,3.424-3.271,5.418-5.008l.036-.032a1.571,1.571,0,0,1,2.206.143,1.545,1.545,0,0,1-.144,2.19l-.037.031a55.113,55.113,0,0,0-6.261,6l-.005.006-.01.012-.01.012c-.031.036-.06.067-.088.1l0,.005a1.508,1.508,0,0,1-.115.1l0,0c-.042.033-.075.057-.108.079l-.008,0c-.03.02-.066.043-.1.063l-.01.005c-.032.017-.066.035-.105.052l-.013.006-.015.007-.087.034-.01,0-.015.005c-.033.011-.067.021-.1.03l-.041.01c-.027.007-.055.013-.082.018l-.035.005c-.033.005-.066.009-.1.013l-.035,0C20.071,36,20.037,36,20.005,36ZM17.891,25.138h-.039a1.567,1.567,0,0,1-1.389-.919l-3.17-7.055-1.552,3.148a1.554,1.554,0,0,1-1.4.869H1.562a1.552,1.552,0,1,1,0-3.1h.4A13.557,13.557,0,0,1,0,11.272,11.333,11.333,0,0,1,3.151,3.065,10.637,10.637,0,0,1,10.781,0c5.167,0,7.839,2.64,9.17,4.856l.024.041L20,4.937l.025-.041.025-.041C21.38,2.64,24.052,0,29.219,0a10.637,10.637,0,0,1,7.63,3.065A11.33,11.33,0,0,1,40,11.272c0,5.432-3.894,9.986-6.824,12.938a1.571,1.571,0,0,1-2.21.016,1.544,1.544,0,0,1-.016-2.194c4.043-4.074,5.926-7.493,5.926-10.76,0-4.809-3.148-8.168-7.656-8.168a7.032,7.032,0,0,0-6.433,3.255,9,9,0,0,0-1.228,3.517,1.563,1.563,0,0,1-3.116-.007,9.074,9.074,0,0,0-1.228-3.51A7.03,7.03,0,0,0,10.781,3.1c-4.508,0-7.656,3.359-7.656,8.168a11.825,11.825,0,0,0,2.53,6.806H9.364l2.592-5.26a1.572,1.572,0,0,1,1.4-.87h.032a1.567,1.567,0,0,1,1.4.92l3.192,7.106,2.033-3.993a1.562,1.562,0,0,1,1.382-.852h.013a1.559,1.559,0,0,1,1.382.83l1.123,2.119h3.51a1.552,1.552,0,1,1,0,3.1H22.969a1.561,1.561,0,0,1-1.383-.829l-.151-.286-2.149,4.221A1.556,1.556,0,0,1,17.891,25.138Z" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">Cardiology</a></h5>
<p class="mb-0">4 Doctors</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="39.999" viewBox="0 0 40 39.999">
<path id="tooth" d="M25.778,39.988a2.88,2.88,0,0,1-2.329-1.012c-.95-1.19-.588-2.774-.169-4.609.731-3.2,1.555-6.817-3.269-9.273-4.829,2.532-4.01,6.128-3.285,9.317.413,1.814.769,3.382-.175,4.565a2.888,2.888,0,0,1-2.336,1.012c-.086.006-.174.01-.26.01a5.252,5.252,0,0,1-3.706-1.96,24.132,24.132,0,0,1-4.51-8.051,21.024,21.024,0,0,1-1.492-8.058C3.225,20.247,0,14.587,0,10.078,0,4.38,4.643.061,10.814,0h.111a15.282,15.282,0,0,1,5.83,1.238,12.129,12.129,0,0,0,4.513,1.024A13.53,13.53,0,0,1,29.063,0a11.606,11.606,0,0,1,7.622,2.742A9.6,9.6,0,0,1,40,10.078c0,4.507-3.222,10.165-4.245,11.849a18.539,18.539,0,0,1-.854,6.083,1.563,1.563,0,0,1-3-.865,13.957,13.957,0,0,0,.7-5.342,1.566,1.566,0,0,1,.231-1.09c.041-.061,4.046-6.317,4.046-10.635,0-3.948-3.361-6.937-7.817-6.953-4.178,0-7.283,1.83-9.769,5.757a1.562,1.562,0,0,1-2.641-1.67,19.983,19.983,0,0,1,1.6-2.2,21.421,21.421,0,0,1-2.6-.851,12.13,12.13,0,0,0-4.756-1.037c-3.864.02-7.769,2.412-7.769,6.953,0,4.318,4.006,10.574,4.046,10.636A1.559,1.559,0,0,1,7.4,21.8c-.24,1.539.248,4.27,1.276,7.125a21.316,21.316,0,0,0,3.84,6.962c.735.778,1.238.982,1.441.982h.006l.038,0h.013a16.743,16.743,0,0,0-.339-1.765,14.494,14.494,0,0,1-.4-6.5c.644-2.866,2.686-5.108,6.07-6.66a1.561,1.561,0,0,1,1.285-.008c3.4,1.508,5.457,3.73,6.1,6.6a14.568,14.568,0,0,1-.41,6.53,16.968,16.968,0,0,0-.346,1.807l.026,0h.007c.305.022,1.4-.474,2.97-3.006a1.562,1.562,0,1,1,2.658,1.643C29.8,38.49,27.915,40,26.043,40,25.954,40,25.866,39.994,25.778,39.988Zm4.812-29.91c0-.2-.023-.221-.108-.3a2.276,2.276,0,0,0-1.438-.419,1.562,1.562,0,0,1,.009-3.125h.01a5.293,5.293,0,0,1,3.483,1.2,3.374,3.374,0,0,1,1.17,2.643,1.563,1.563,0,0,1-3.126,0Z" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">Dentistry</a></h5>
<p class="mb-0">6 Doctors</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
<path id="lungs" d="M29.508,29.182a10.879,10.879,0,0,1-3.295-1.335,3.569,3.569,0,0,1-1.839-3.019v-11.5a14.09,14.09,0,0,1-4.421-3.047,11.728,11.728,0,0,1-4.329,3.049V24.826a3.566,3.566,0,0,1-1.839,3.019,10.836,10.836,0,0,1-3.295,1.335A31.742,31.742,0,0,1,3.348,30,2.948,2.948,0,0,1,.382,27.443,45.665,45.665,0,0,1,0,22.5C0,14.958,2.11,9.909,3.879,7c1.977-3.249,4.65-5.683,7.15-6.51a3.47,3.47,0,0,1,3.576.821,3.357,3.357,0,0,1,1.021,2.413V9.889A6.694,6.694,0,0,0,18.36,7.084a1.507,1.507,0,0,1,.077-.368V1.531a1.563,1.563,0,0,1,3.125,0V7.1c0,.027,0,.054,0,.081a6.411,6.411,0,0,0,2.808,2.685V3.8A3.352,3.352,0,0,1,25.4,1.39,3.466,3.466,0,0,1,28.972.569,13.491,13.491,0,0,1,34.939,5.31a25.25,25.25,0,0,1,4.513,10.8,1.533,1.533,0,0,1-1.266,1.774,1.56,1.56,0,0,1-1.811-1.24,21.965,21.965,0,0,0-3.94-9.5,10.526,10.526,0,0,0-4.462-3.671.319.319,0,0,0-.367.086.345.345,0,0,0-.1.247V24.828c0,.136.5.809,2.79,1.39a28.268,28.268,0,0,0,6.242.721c.016-.136.033-.274.05-.415.113-.942.243-2.01.294-2.923a1.563,1.563,0,0,1,3.12.168c-.057,1.01-.193,2.128-.311,3.115-.023.193-.047.38-.068.562A2.949,2.949,0,0,1,36.652,30,31.73,31.73,0,0,1,29.508,29.182Z" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">Pulmonology</a></h5>
<p class="mb-0">8 Doctors</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<path id="stethoscope" d="M9.062,30.781V26.387L3.442,18.23a1.554,1.554,0,0,1-.149-.269c-.063-.061-.127-.124-.189-.187A11.288,11.288,0,0,1,0,9.766c0-.049,0-.1.007-.145S0,9.526,0,9.477V3.632A3.637,3.637,0,0,1,3.632,0H6.484A1.562,1.562,0,0,1,8.047,1.562V3.046a1.562,1.562,0,0,1-3.123.078H3.632a.508.508,0,0,0-.508.508V9.477c0,.049,0,.1-.007.144s.007.1.007.145c0,4.617,3.155,7.969,7.5,7.969,4.322,0,7.465-3.316,7.5-7.895,0-.024,0-.05,0-.075l0-6.133a.508.508,0,0,0-.508-.508H16.25a1.563,1.563,0,0,1-3.126,0V1.562A1.563,1.563,0,0,1,14.687,0h2.93A3.637,3.637,0,0,1,21.25,3.632l0,6.053c0,.026,0,.053,0,.08a11.288,11.288,0,0,1-3.1,8.008q-.153.155-.312.3a1.4,1.4,0,0,1-.092.153l-5.555,8.06v4.49a6.093,6.093,0,1,0,12.187,0,1.563,1.563,0,0,1,3.126,0,9.219,9.219,0,0,1-18.438,0Zm21.563-9.609a4.693,4.693,0,0,1,3.125-4.418V6.25a3.125,3.125,0,1,0-6.25,0V22.969a1.563,1.563,0,0,1-3.126,0V6.25a6.25,6.25,0,0,1,12.5,0v10.5a4.687,4.687,0,1,1-6.25,4.418Z" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">General Medicine</a></h5>
<p class="mb-0">12 Doctors</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
<path id="stomach" d="M13.248,34.937c-1.419-1.55-2.219-2.359-3.489-2.359l-.082,0a4.622,4.622,0,0,0-.313,1.651c0,.073.005.148.005.222v3.984a1.561,1.561,0,1,1-3.122,0V34.453c0-.024,0-.049,0-.074s-.067-2.694,1.243-4.067a2.962,2.962,0,0,1,2.271-.859c2.7,0,4.273,1.714,5.791,3.373,1.822,1.99,3.705,4.048,8.1,4.048a11.906,11.906,0,0,0,7.894-2.588,1.562,1.562,0,0,1,2.007,2.395A14.939,14.939,0,0,1,23.651,40C17.88,40,15.2,37.074,13.248,34.937ZM0,38.437v-3.9C-.023,33.593.019,29.1,2.969,26a9.123,9.123,0,0,1,6.79-2.8A10.341,10.341,0,0,1,16,25.283a4.859,4.859,0,0,0,2.735,1.123,1.481,1.481,0,0,0,.368-.036,1.341,1.341,0,0,0,.023-.276V17.032A5.131,5.131,0,0,0,19,15.755a7.707,7.707,0,0,1-4.876-2.546A17.225,17.225,0,0,1,10.7,7.793,16.923,16.923,0,0,1,9.525,1.562a1.561,1.561,0,1,1,3.122,0,13.78,13.78,0,0,0,3.766,9.519,4.6,4.6,0,0,0,3.067,1.575,2.4,2.4,0,0,1,1.887.935,5.427,5.427,0,0,1,.879,3.439l0,9.063a3.226,3.226,0,0,1-3.514,3.438A7.7,7.7,0,0,1,14.289,27.9a7.375,7.375,0,0,0-4.531-1.57,6.079,6.079,0,0,0-4.531,1.828c-2.165,2.272-2.116,5.9-2.1,6.306v3.975a1.561,1.561,0,1,1-3.121,0Zm35.928-7.152A1.563,1.563,0,0,1,35.1,29.24a27.579,27.579,0,0,0,1.75-11c0-.038,0-.076,0-.112,0-4.3-1.022-7.478-3.039-9.431A7.357,7.357,0,0,0,29.01,6.639h-.051A8.466,8.466,0,0,0,23.846,8.6a7.216,7.216,0,0,1-2.313,1.245,2.891,2.891,0,0,1-3.053-1.136,10.673,10.673,0,0,1-2.712-7.151,1.561,1.561,0,1,1,3.122,0,7.6,7.6,0,0,0,1.95,5.106c.019.022.038.043.055.066l.027.032a10.154,10.154,0,0,0,1.142-.729,11.527,11.527,0,0,1,6.879-2.522,10.454,10.454,0,0,1,7.029,2.933c2.639,2.555,3.981,6.466,3.99,11.624a30.3,30.3,0,0,1-1.988,12.375,1.56,1.56,0,0,1-2.043.838Z" transform="translate(0)" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">Gastroenterology</a></h5>
<p class="mb-0">4 Doctors</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card dept-card bg-gray-100 border-0 text-center rounded-12 p-4 p-lg-5 transition-3d-hover">
<span class="dept-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="35" viewBox="0 0 40 35">
<path id="pulse" d="M12.969,35a1.591,1.591,0,0,1,0-3.182h5.468V28.644H6.25A6.316,6.316,0,0,1,0,22.279V6.366A6.316,6.316,0,0,1,6.25,0h27.5A6.316,6.316,0,0,1,40,6.366v7.956a1.563,1.563,0,1,1-3.125,0V6.366A3.158,3.158,0,0,0,33.75,3.182H6.25A3.158,3.158,0,0,0,3.125,6.366V22.279A3.158,3.158,0,0,0,6.25,25.462h27.5a3.158,3.158,0,0,0,3.125-3.183,1.563,1.563,0,1,1,3.125,0,6.316,6.316,0,0,1-6.25,6.366H21.562v3.173h5.469a1.591,1.591,0,0,1,0,3.182ZM24.426,22.279a1.563,1.563,0,0,1-1.424-1l-3.663-9.328L16.1,18.976a1.549,1.549,0,0,1-2.769.116l-1.972-3.5H7.813a1.591,1.591,0,0,1,0-3.182h4.452a1.557,1.557,0,0,1,1.355.8l.927,1.645,3.491-7.576a1.552,1.552,0,0,1,2.866.085l3.618,9.213,1.391-3.217a1.563,1.563,0,0,1,1.43-.95h4.844a1.591,1.591,0,0,1,0,3.182H28.363l-2.479,5.734a1.562,1.562,0,0,1-1.43.95Z" fill="#fff"></path>
</svg>
</span>
<h5 class="mb-0 mt-3"><a href="#" class="stretched-link">Scans</a></h5>
<p class="mb-0">CT, MRI, X-Ray (+6)</p>
</div>
</div>
</div>
</section>
</div>
Component 7
New Arrivals
Sennheiser HD 6XX Headphones
$1,465
Vultur Music Player Plus
$195Sennheiser HD 6XX Headphones
$1,465Vultur Music Player Plus
$195
<div class="ecommerce-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="swiper-container swiper-list">
<h3 class="text-uppercase pb-3 pb-md-5">New Arrivals</h3>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 mb-md-4 muse-animation has-height"><img src="../assets/img/templates/headphone2.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Sennheiser HD 6XX Headphones</a></h4>
<span class="h5">$1,465</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 muse-animation has-height mb-md-4"><img src="../assets/img/templates/keyboard.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Kardo F5 645 Mechanical Keyboard</a></h4>
<span class="h5">$299</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 muse-animation has-height mb-md-4"><img src="../assets/img/templates/music-player.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Vultur Music Player Plus</a></h4>
<span class="h5">$195 <del class="font-size-16 text-muted font-weight-normal ml-2">$220</del></span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 muse-animation has-height mb-md-4"><img src="../assets/img/templates/headphone2.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Sennheiser HD 6XX Headphones</a></h4>
<span class="h5">$1,465</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 muse-animation has-height mb-md-4"><img src="../assets/img/templates/music-player.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Vultur Music Player Plus</a></h4>
<span class="h5">$195 <del class="font-size-16 text-muted font-weight-normal ml-2">$220</del></span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<div><small class="star-icon big bg-white rounded-pill pl-2 pr-3 d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<a href="#" class="py-2 muse-animation has-height mb-md-4"><img src="../assets/img/templates/keyboard.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"/>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"/>
</svg>
</a>
</div>
<figcaption class="pt-3">
<h4 class="mb-sm-3 title-box"><a href="#">Kardo F5 645 Mechanical Keyboard</a></h4>
<span class="h5">$299</span>
</figcaption>
</figure>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</section>
</div>
</div>
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<script>
//Muse Swiper Product Listing Slider JavaScript
var swiper = new Swiper('.swiper-list', {
slidesPerView: 3,
spaceBetween: 28,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 3,
},
}
});
</script>
Component 8
POPULAR CATEGORIES
<div class="ecommerce-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-md-7">
<h3 class="text-uppercase pb-md-4">POPULAR CATEGORIES</h3>
</div>
<div class="col-md-5 text-md-right pt-md-2 mb-4">
<a href="#" class="btn btn-link link-dark">View All <svg class="ml-1" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0D6EFD"></path>
</svg></a>
</div>
</div>
<div class="row">
<div class="col-6 col-lg-3 mt-1">
<figure class="card border-0 transition-3d-hover mb-0 mb-md-3">
<a href="#"><img src="../assets/img/templates/headphone.jpg" class="rounded-6 w-100" alt="img"></a>
<figcaption class="pt-3 pb-4">
<h5 class="mb-0 mb-md-3 title-box"><a href="#">Headphones</a></h5>
</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3 mt-1">
<figure class="card border-0 transition-3d-hover mb-0 mb-md-3">
<a href="#"><img src="../assets/img/templates/gaming.jpg" class="rounded-6 w-100" alt="img"></a>
<figcaption class="pt-3 pb-4">
<h5 class="mb-0 mb-md-3 title-box"><a href="#">Gaming</a></h5>
</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3 mt-1">
<figure class="card border-0 transition-3d-hover mb-0 mb-md-3">
<a href="#"><img src="../assets/img/templates/equipment.jpg" class="rounded-6 w-100" alt="img"></a>
<figcaption class="pt-3 pb-4">
<h5 class="mb-0 mb-md-3 title-box"><a href="#">Musical Equipment</a></h5>
</figcaption>
</figure>
</div>
<div class="col-6 col-lg-3 mt-1">
<figure class="card border-0 transition-3d-hover mb-0 mb-md-3">
<a href="#"><img src="../assets/img/templates/keyboard2.jpg" class="rounded-6 w-100" alt="img"></a>
<figcaption class="pt-3 pb-4">
<h5 class="mb-0 mb-md-3 title-box"><a href="#">Keyboards</a></h5>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 9
New Arrivals
4.8
Opus #2 Digital Audio Player
$195
4.2
HIFIMAN HE-35X Headphones
$195
4.1
JVC HA-FW01 Wood Series
$240
3.1
OLKB Planck Keyboard
$100 4.8
Opus #2 Digital Audio Player
$195 4.2
HIFIMAN HE-35X Headphones
$195 4.1
JVC HA-FW01 Wood Series
$240
<div class="ecommerce-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="swiper-container swiper-list2">
<h3 class="text-uppercase pb-3 pb-md-5">New Arrivals</h3>
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival1.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<h5 class="mb-2 title-box"><a href="#">Opus #2 Digital Audio Player</a></h5>
<span class="h6">$195</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival2.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.2</small></div>
<h5 class="mb-2 title-box"><a href="#">HIFIMAN HE-35X Headphones</a></h5>
<span class="h6">$195</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival3.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.1</small></div>
<h5 class="mb-2 title-box"><a href="#">JVC HA-FW01 Wood Series</a></h5>
<span class="h6">$240</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival4.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 3.1</small></div>
<h5 class="mb-2 title-box"><a href="#">OLKB Planck Keyboard</a></h5>
<span class="h6">$100</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival1.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.8</small></div>
<h5 class="mb-2 title-box"><a href="#">Opus #2 Digital Audio Player</a></h5>
<span class="h6">$195</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival2.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.2</small></div>
<h5 class="mb-2 title-box"><a href="#">HIFIMAN HE-35X Headphones</a></h5>
<span class="h6">$195</span>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card border-0 transition-3d-hover">
<div class="rounded-6 bg-light-100 px-4 pt-4 pb-5 position-relative">
<a href="#" class="py-2 muse-animation has-height"><img src="../assets/img/templates/new-arrival3.jpg" alt="img"></a>
<a href="#" class="add-cart">
<svg data-name="icons/tabler/cart" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Cart background" width="16" height="16" fill="none"></rect>
<path d="M8.753,13.995A2.006,2.006,0,1,1,10.759,16,2.008,2.008,0,0,1,8.753,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,9.847,13.995Zm-6.929,0A2.006,2.006,0,1,1,4.924,16,2.008,2.008,0,0,1,2.918,13.995Zm1.094,0a.912.912,0,1,0,.912-.912A.913.913,0,0,0,4.012,13.995ZM10.9,11.309l-.142,0H5.684c-.052,0-.1,0-.157,0A2.723,2.723,0,0,1,3,9.616l-.052-.136-.023-.092L2.1,4.434l-.013-.028a.5.5,0,0,1-.038-.139l-.005-.074a.512.512,0,0,1,.005-.075L1.542,1.094H.547A.548.548,0,0,1,.005.621L0,.547A.548.548,0,0,1,.473.005L.547,0H2.006a.544.544,0,0,1,.52.38l.019.077.531,3.19h10.6a.547.547,0,0,1,.547.549l-.006.076-.729,5.1-.025.1a2.721,2.721,0,0,1-2.554,1.829Zm-.111-1.1.095,0a1.64,1.64,0,0,0,1.5-.977l.03-.077.632-4.419H3.259l.735,4.412.033.085a1.643,1.643,0,0,0,1.491.977l.133,0Z" transform="translate(1)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<figcaption class="pt-3">
<div class="mb-2"><small class="star-icon big d-inline-flex align-items-center"><span class="rounded-pill mr-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.416 15.6">
<path d="M17.076,19.2,12,16.14,6.924,19.2l1.344-5.772L3.792,9.546l5.9-.5L12,3.6l2.3,5.442,5.9.5-4.476,3.882Z" transform="translate(-3.792 -3.6)" fill="#ffffff"/>
</svg></span> 4.1</small></div>
<h5 class="mb-2 title-box"><a href="#">JVC HA-FW01 Wood Series</a></h5>
<span class="h6">$240</span>
</figcaption>
</figure>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</section>
</div>
</div>
<script src="../assets/vendor/swiper/swiper-bundle.min.js"></script>
<script>
//Muse Swiper Product Listing Slider JavaScript
var swiper = new Swiper('.swiper-list2', {
slidesPerView: 4,
spaceBetween: 28,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
0: {
slidesPerView: 1,
},
640: {
slidesPerView: 2,
},
768: {
slidesPerView: 2,
},
992: {
slidesPerView: 4,
},
}
});
</script>
Component 10
Courses
Grow your personal skills with 500+ courses
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
Vladěna Klímková
An introduction to
photography
Su Hua
Unity game development
Sergio Pliego
Fashion design basics
Matilda Evans
Learn Japanese in 14 days
Jeremías del Pozo
Simple illustrations on your iPad
Hironaka Hiroe
Learn UI design and prototyping in Figma
<div class="bg-gray-100 education-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section pt-4">
<div class="row">
<div class="col-xl-8">
<h2>Courses</h2>
<h3 class="display-4">Grow your personal skills with 500+ courses</h3>
</div>
</div>
<div class="nav nav-tabs mb-4 mt-4 mt-md-5" id="nav-tab" role="tablist">
<a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Latest</a>
<a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">User Interface</a>
<a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Photography</a>
<a class="nav-link" id="nav-programing-tab" data-toggle="tab" href="#nav-programing" role="tab" aria-controls="nav-programing" aria-selected="false">Coding</a>
<a class="nav-link" id="nav-languages-tab" data-toggle="tab" href="#nav-languages" role="tab" aria-controls="nav-languages" aria-selected="false">Languages</a>
<a class="nav-link" id="nav-illustration-tab" data-toggle="tab" href="#nav-illustration" role="tab" aria-controls="nav-illustration" aria-selected="false">Illustration</a>
</div>
<div class="tab-content mt-3" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-programing" role="tabpanel" aria-labelledby="nav-programing-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-languages" role="tabpanel" aria-labelledby="nav-languages-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="tab-pane fade" id="nav-illustration" role="tabpanel" aria-labelledby="nav-illustration-tab">
<div class="row">
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar25.png" alt="Image Description">
</span>
<span>Vladěna Klímková</span>
</p>
<h5><a href="#">An introduction to <br>photography</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$34.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar26.png" alt="Image Description">
</span>
<span>Su Hua</span>
</p>
<h5><a href="#">Unity game development</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$67.00</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar27.png" alt="Image Description">
</span>
<span>Sergio Pliego</span>
</p>
<h5><a href="#">Fashion design basics</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$29.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar28.png" alt="Image Description">
</span>
<span>Matilda Evans</span>
</p>
<h5><a href="#">Learn Japanese in 14 days</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$24.99</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course5.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar29.png" alt="Image Description">
</span>
<span>Jeremías del Pozo</span>
</p>
<h5><a href="#">Simple illustrations on your iPad</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$16.66</small>
</span>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-4 mb-md-5">
<figure class="card muse-card muse-card-footer transition-3d-hover h-100 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/course6.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="px-4 pt-4 pb-1 mx-sm-2">
<p class="small text-gray-600 mb-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar30.png" alt="Image Description">
</span>
<span>Hironaka Hiroe</span>
</p>
<h5><a href="#">Learn UI design and prototyping in Figma</a></h5>
<span class="bg-blue-50 text-primary badge mt-4 card-footerbox">
<small class="small font-weight-bold">$40.50</small>
</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
<div class="text-center pt-2">
<a href="#" class="btn btn-xl btn-dark">Browse all courses</a>
</div>
</section>
</div>
</div>
Component 11
Brainy Team
Exeptional teachers and learning methods
Edward Lindgren
Photography Instructor
In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.
456 hrs
Guru
Lawrence Santos
Photography Instructor
In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.
456 hrs
Guru
Sarah Jordan
Photography Instructor
In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.
456 hrs
Guru
Edward Hoffman
Photography Instructor
In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.
456 hrs
Guru
<div class="bg-gray-100 education-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-xl-8">
<h6 class="h2 mb-3">Brainy Team</h6>
<h3 class="display-4">Exeptional teachers and learning methods</h3>
</div>
</div>
<hr class="mb-md-5 mt-4 has-border" style="height: 5px;">
<div class="row pt-3">
<div class="col-md-6 mb-4">
<figure class="card muse-card transition-3d-hover mb-md-4 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/teacher1.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="p-4 mx-lg-3 mb-lg-3 position-relative">
<a href="#" class="circle circle-xl has-cricle">
<span class="avatar-initials">
<svg data-name="icons/tabler/twitter" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Twitter background" width="16" height="16" fill="none"></rect>
<path d="M14.355,3.239c.01.142.01.284.01.426a9.266,9.266,0,0,1-9.33,9.33A9.267,9.267,0,0,1,0,11.523a6.784,6.784,0,0,0,.792.041,6.567,6.567,0,0,0,4.071-1.4A3.285,3.285,0,0,1,1.8,7.888a4.135,4.135,0,0,0,.619.051,3.468,3.468,0,0,0,.863-.112A3.28,3.28,0,0,1,.65,4.609V4.569a3.3,3.3,0,0,0,1.482.416A3.284,3.284,0,0,1,1.117.6,9.321,9.321,0,0,0,7.878,4.03,3.7,3.7,0,0,1,7.8,3.279a3.282,3.282,0,0,1,5.675-2.244A6.456,6.456,0,0,0,15.553.244a3.27,3.27,0,0,1-1.442,1.807A6.574,6.574,0,0,0,16,1.543,7.049,7.049,0,0,1,14.355,3.239Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
</a>
<h3 class="mb-md-0"><a href="#">Edward Lindgren</a></h3>
<p class="mb-2 mb-lg-3">Photography Instructor</p>
<p class="lh-lg">In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.</p>
<div class="mt-lg-4 pt-lg-3">
<span class="badge bg-blue-50 text-primary mr-2">456 hrs</span>
<span class="badge bg-blue-50 text-primary">Guru</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-6 mb-4">
<figure class="card muse-card transition-3d-hover mb-md-4 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/teacher2.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="p-4 mx-lg-3 mb-lg-3 position-relative">
<a href="#" class="circle circle-xl has-cricle">
<span class="avatar-initials">
<svg data-name="icons/tabler/twitter" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Twitter background" width="16" height="16" fill="none"></rect>
<path d="M14.355,3.239c.01.142.01.284.01.426a9.266,9.266,0,0,1-9.33,9.33A9.267,9.267,0,0,1,0,11.523a6.784,6.784,0,0,0,.792.041,6.567,6.567,0,0,0,4.071-1.4A3.285,3.285,0,0,1,1.8,7.888a4.135,4.135,0,0,0,.619.051,3.468,3.468,0,0,0,.863-.112A3.28,3.28,0,0,1,.65,4.609V4.569a3.3,3.3,0,0,0,1.482.416A3.284,3.284,0,0,1,1.117.6,9.321,9.321,0,0,0,7.878,4.03,3.7,3.7,0,0,1,7.8,3.279a3.282,3.282,0,0,1,5.675-2.244A6.456,6.456,0,0,0,15.553.244a3.27,3.27,0,0,1-1.442,1.807A6.574,6.574,0,0,0,16,1.543,7.049,7.049,0,0,1,14.355,3.239Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
</a>
<h3 class="mb-md-0"><a href="#">Lawrence Santos</a></h3>
<p class="mb-2 mb-lg-3">Photography Instructor</p>
<p class="lh-lg">In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.</p>
<div class="mt-lg-4 pt-lg-3">
<span class="badge bg-blue-50 text-primary mr-2">456 hrs</span>
<span class="badge bg-blue-50 text-primary">Guru</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-6 mb-4">
<figure class="card muse-card transition-3d-hover mb-md-4 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/teacher3.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="p-4 mx-lg-3 mb-lg-3 position-relative">
<a href="#" class="circle circle-xl has-cricle">
<span class="avatar-initials">
<svg data-name="icons/tabler/twitter" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Twitter background" width="16" height="16" fill="none"></rect>
<path d="M14.355,3.239c.01.142.01.284.01.426a9.266,9.266,0,0,1-9.33,9.33A9.267,9.267,0,0,1,0,11.523a6.784,6.784,0,0,0,.792.041,6.567,6.567,0,0,0,4.071-1.4A3.285,3.285,0,0,1,1.8,7.888a4.135,4.135,0,0,0,.619.051,3.468,3.468,0,0,0,.863-.112A3.28,3.28,0,0,1,.65,4.609V4.569a3.3,3.3,0,0,0,1.482.416A3.284,3.284,0,0,1,1.117.6,9.321,9.321,0,0,0,7.878,4.03,3.7,3.7,0,0,1,7.8,3.279a3.282,3.282,0,0,1,5.675-2.244A6.456,6.456,0,0,0,15.553.244a3.27,3.27,0,0,1-1.442,1.807A6.574,6.574,0,0,0,16,1.543,7.049,7.049,0,0,1,14.355,3.239Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
</a>
<h3 class="mb-md-0"><a href="#">Sarah Jordan</a></h3>
<p class="mb-2 mb-lg-3">Photography Instructor</p>
<p class="lh-lg">In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.</p>
<div class="mt-lg-4 pt-lg-3">
<span class="badge bg-blue-50 text-primary mr-2">456 hrs</span>
<span class="badge bg-blue-50 text-primary">Guru</span>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-6 mb-4">
<figure class="card muse-card transition-3d-hover mb-md-4 mb-0">
<a href="#" class="muse-animation"><img src="../assets/img/templates/teacher4.jpg" alt="img" class="w-100 rounded-top-6"></a>
<figcaption class="p-4 mx-lg-3 mb-lg-3 position-relative">
<a href="#" class="circle circle-xl has-cricle">
<span class="avatar-initials">
<svg data-name="icons/tabler/twitter" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Twitter background" width="16" height="16" fill="none"></rect>
<path d="M14.355,3.239c.01.142.01.284.01.426a9.266,9.266,0,0,1-9.33,9.33A9.267,9.267,0,0,1,0,11.523a6.784,6.784,0,0,0,.792.041,6.567,6.567,0,0,0,4.071-1.4A3.285,3.285,0,0,1,1.8,7.888a4.135,4.135,0,0,0,.619.051,3.468,3.468,0,0,0,.863-.112A3.28,3.28,0,0,1,.65,4.609V4.569a3.3,3.3,0,0,0,1.482.416A3.284,3.284,0,0,1,1.117.6,9.321,9.321,0,0,0,7.878,4.03,3.7,3.7,0,0,1,7.8,3.279a3.282,3.282,0,0,1,5.675-2.244A6.456,6.456,0,0,0,15.553.244a3.27,3.27,0,0,1-1.442,1.807A6.574,6.574,0,0,0,16,1.543,7.049,7.049,0,0,1,14.355,3.239Z" transform="translate(0 2)" fill="#ffffff"></path>
</svg>
</span>
</a>
<h3 class="mb-md-0"><a href="#">Edward Hoffman</a></h3>
<p class="mb-2 mb-lg-3">Photography Instructor</p>
<p class="lh-lg">In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do.</p>
<div class="mt-lg-4 pt-lg-3">
<span class="badge bg-blue-50 text-primary mr-2">456 hrs</span>
<span class="badge bg-blue-50 text-primary">Guru</span>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="text-center mt-md-3 aos-init">
<a href="#" class="btn btn-xl btn-dark">See all instructors</a>
</div>
</section>
</div>
</div>
Component 12
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row">
<div class="col-lg-10">
<h6>We power brands like yours</h6>
<h2>We help businesses bring ideas to life in the digital world, by designing and implementing the technology tools that they need to win.</h2>
</div>
</div>
<div class="row pt-5">
<div class="col-md-6 col-lg-4 mb-md-4 mb-lg-0">
<figure class="card branding-card border-0 bg-primary px-4 pt-4 pb-3 rounded-12 transition-3d-hover h-100">
<div class="p-5 text-center mt-5 mb-4">
<img src="../assets/img/templates/graphic.svg" alt="img">
</div>
<figcaption class="px-lg-2">
<small class="branding-tag">BRANDING</small>
<div class="brand-data mt-1">
<h5 class="font-weight-semibold text-white">Branding Stategy & Corporate Identity</h5>
<a href="#" class="avatar avatar-xs avatar-circle ml-auto stretched-link">
<svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0d6efd"></path>
</svg>
</a>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4 mb-md-4 mb-lg-0">
<figure class="card branding-card border-0 bg-danger px-4 pt-4 pb-3 rounded-12 transition-3d-hover h-100">
<div class="p-5 text-center mt-5 mb-4">
<img src="../assets/img/templates/design.svg" alt="img">
</div>
<figcaption class="px-lg-2">
<small class="branding-tag">UI DESIGN</small>
<div class="brand-data mt-1">
<h5 class="font-weight-semibold text-white">Web and mobile Strategy & Design</h5>
<a href="#" class="avatar avatar-xs avatar-circle ml-auto stretched-link">
<svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0d6efd"></path>
</svg>
</a>
</div>
</figcaption>
</figure>
</div>
<div class="col-md-6 col-lg-4">
<figure class="card branding-card border-0 bg-teal-400 px-4 pt-4 pb-3 rounded-12 transition-3d-hover h-100">
<div class="p-5 text-center mt-5 mb-4">
<img src="../assets/img/templates/chat.svg" alt="img">
</div>
<figcaption class="px-lg-2">
<small class="branding-tag">Services</small>
<div class="brand-data mt-1">
<h5 class="font-weight-semibold text-white">Web and mobile Consultany</h5>
<a href="#" class="avatar avatar-xs avatar-circle ml-auto stretched-link">
<svg data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"></rect>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#0d6efd"></path>
</svg>
</a>
</div>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
Component 13
Robots will rule the world, experts say
Farok Rastegar
. 1 hour ago
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…
LEGO just announced a vintage kit!
Jelena Denisova
. 2 hours ago
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…
Find out which laptop is best for productivity
Jana Strasman
. Yesterday
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section pt-4 pt-md-5">
<div class="row">
<div class="col-lg-7">
<div class="card border-0 rounded-6 p-3 transition-3d-hover mb-3">
<figure class="row align-items-center mb-0">
<div class="col-md-5">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine2.jpg" alt="img" class="w-100 rounded-6">
</a>
</div>
<figcaption class="col-md-7">
<div class="p-md-2 pt-3">
<h4 class="title-box"><a href="#">Robots will rule the world, experts say</a></h4>
<p class="small text-gray-600">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar24.png" alt="Image Description">
</span>
<span>Farok Rastegar</span>
<span> . 1 hour ago</span>
</p>
<p>The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…</p>
</div>
</figcaption>
</figure>
</div>
<div class="card border-0 rounded-6 p-3 transition-3d-hover mb-3 mb-lg-0">
<figure class="row align-items-center mb-0">
<div class="col-md-5">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine3.jpg" alt="img" class="w-100 rounded-6">
</a>
</div>
<figcaption class="col-md-7">
<div class="p-md-2 pt-3">
<h4 class="title-box"><a href="#">LEGO just announced a vintage kit! </a></h4>
<p class="small text-gray-600">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar17.png" alt="Image Description">
</span>
<span>Jelena Denisova</span>
<span> . 2 hours ago</span>
</p>
<p>The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…</p>
</div>
</figcaption>
</figure>
</div>
</div>
<div class="col-lg-5">
<div class="card border-0 rounded-6 p-3 transition-3d-hover h-100">
<figure class="mb-0">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine4.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h4 class="title-box"><a href="#">Find out which laptop is best for productivity</a></h4>
<p class="small text-gray-600">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar18.png" alt="Image Description">
</span>
<span>Jana Strasman</span>
<span> . Yesterday</span>
</p>
<p>The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboard with trackpad and…</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
</div>
</div>
Component 14
Honest Opnions
Nintendo switch is coming to an end
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…
Which phone is better for everyday use
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…
iPhone 12 performance benchmarks
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…
Flip tablets are a thing nowadays
The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="mb-4">Honest Opnions</h3>
<div class="row">
<div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card border-0 rounded-6 p-3 transition-3d-hover h-100 mb-0">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine6.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h6 class="title-box mb-2 lh-base"><a href="#">Nintendo switch is coming to an end</a></h6>
<p class="small mb-0 text-gray-600">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…</p>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card border-0 rounded-6 p-3 transition-3d-hover h-100 mb-0">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine7.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h6 class="title-box mb-2 lh-base"><a href="#">Which phone is better for everyday use</a></h6>
<p class="small mb-0 text-gray-600">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…</p>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card border-0 rounded-6 p-3 transition-3d-hover h-100 mb-0">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine8.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h6 class="title-box mb-2 lh-base"><a href="#">iPhone 12 performance benchmarks</a></h6>
<p class="small mb-0 text-gray-600">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…</p>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
<div class="card border-0 rounded-6 p-3 transition-3d-hover h-100 mb-0">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine9.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h6 class="title-box mb-2 lh-base"><a href="#">Flip tablets are a thing nowadays</a></h6>
<p class="small mb-0 text-gray-600">The new Pro gets a bunch of impressive upgrades including an awesome new backlit keyboa…</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
</div>
</div>
Component 15
Featured Gaming
The barebone gameboy
Jana Strasman
. Yesterday
PS5 controller is awesome!
Jana Strasman
. Yesterday
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="mb-4">Featured Gaming</h3>
<div class="row">
<div class="col-md-6">
<div class="card border-0 rounded-6 transition-3d-hover bg-transparent mb-3">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/gaming1.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h4 class="title-box mb-2"><a href="#">The barebone gameboy</a></h4>
<p class="small text-gray-600 mb-0">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar18.png" alt="Image Description">
</span>
<span>Jana Strasman</span>
<span> . Yesterday</span>
</p>
</figcaption>
</figure>
</div>
</div>
<div class="col-md-6">
<div class="card border-0 rounded-6 transition-3d-hover bg-transparent mb-3">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/gaming2.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="pt-3">
<h4 class="title-box mb-2"><a href="#">PS5 controller is awesome!</a></h4>
<p class="small text-gray-600 mb-0">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar18.png" alt="Image Description">
</span>
<span>Jana Strasman</span>
<span> . Yesterday</span>
</p>
</figcaption>
</figure>
</div>
</div>
</div>
</section>
</div>
</div>
Component 16
Apple and beyond
The future of macbook pro
Mahnaz Farzin
Apple isslowly rolling out a new secret phone feature, we can’t wait!
Bonginkosi Mdladlana
<div class="bg-gray-100 magazine-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<h3 class="mb-4">Apple and beyond</h3>
<div class="row">
<div class="col-lg-7">
<div class="card border-0 rounded-6 transition-3d-hover position-relative overflow-hidden mb-4">
<figure>
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine10.jpg" alt="img" class="w-100 rounded-6">
</a>
<figcaption class="card-img-overlay bg-white p-4">
<h4 class="title-box mb-2"><a href="#">The future of macbook pro</a></h4>
<p class="small text-gray-600 mb-0">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar20.png" alt="Image Description">
</span>
<span>Mahnaz Farzin</span>
</p>
</figcaption>
</figure>
</div>
<div class="card border-0 bg-transparent">
<div class="row mb-4">
<div class="col-md-4">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine14.jpg" alt="img" class="w-100 rounded-6">
</a>
</div>
<div class="col-md-8">
<div class="pt-3">
<h6 class="lh-base title-box"><a href="#">3 months using the Apple Watch daily, here is what we learned</a></h6>
<p class="small text-gray-600 mb-0 mt-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar21.png" alt="Image Description">
</span>
<span>Lu Zhou</span>
</p>
</div>
</div>
</div>
</div>
<div class="card border-0 bg-transparent">
<div class="row mb-4">
<div class="col-md-4">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine15.jpg" alt="img" class="w-100 rounded-6">
</a>
</div>
<div class="col-md-8">
<div class="pt-3">
<h6 class="lh-base title-box"><a href="#">Top Stories: Apple's 'Time Flies' Event, iPhone 12 Rumors, A14X Mac Chip</a></h6>
<p class="small text-gray-600 mb-0 mt-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar22.png" alt="Image Description">
</span>
<span>Emilee Simchenko</span>
</p>
</div>
</div>
</div>
</div>
<div class="card border-0 bg-transparent">
<div class="row mb-4">
<div class="col-md-4">
<a href="#" class="muse-animation rounded-6">
<img src="../assets/img/templates/magazine16.jpg" alt="img" class="w-100 rounded-6">
</a>
</div>
<div class="col-md-8">
<div class="pt-3">
<h6 class="lh-base title-box"><a href="#">Apple isslowly rolling out a new secret phone feature, we can’t wait!</a></h6>
<p class="small text-gray-600 mb-0 mt-2">
<span class="avatar avatar-xs avatar-circle mr-1">
<img class="avatar-img" src="../assets/img/templates/avatar23.png" alt="Image Description">
</span>
<span>Bonginkosi Mdladlana</span>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="pl-lg-3">
<div class="overlay-center mb-4 mb-lg-5">
<img src="../assets/img/templates/magazine11.jpg" class="img-fluid w-100 rounded-6" alt="Banner">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn circle circle-lg magazine-play-btn">
<svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
<path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<div class="overlay-center mb-4 mb-lg-5">
<img src="../assets/img/templates/magazine12.jpg" class="img-fluid w-100 rounded-6" alt="Banner">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn circle circle-lg magazine-play-btn">
<svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
<path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
<div class="overlay-center">
<img src="../assets/img/templates/magazine13.jpg" class="img-fluid w-100 rounded-6" alt="Banner">
<a href="#" data-toggle="modal" data-target="#staticBackdrop" class="btn circle circle-lg magazine-play-btn">
<svg data-name="icons/tabler/play-fill" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Play Fill background" width="16" height="16" fill="none"></rect>
<path d="M0,.687V15.313a.672.672,0,0,0,1.025.584L12.68,8.584a.693.693,0,0,0,0-1.168L1.025.1A.672.672,0,0,0,0,.687Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 17
From our blog
Latest articles
Selling UI Kits
Zombies reversus ab inferno, nam malum
cerebro. De carne animata corpora quaeritis.
Summus sit.
New
Harnessing Krate powers
De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella.
Mice are evil!
Qui offenderit rapto, terribilem incessu.
The voodoo sacerdos suscitat mortuos comedere carnem.
Selling UI Kits
Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit.
<div class="bg-gray-100 saas3-template">
<div class="container">
<!-- Muse Section -->
<section class="muse-section">
<div class="row align-items-end mb-5">
<div class="col-md-8">
<h5>From our blog</h5>
<h2 class="h1 mb-md-0">Latest articles</h2>
</div>
<div class="col-md-4 text-md-right">
<a href="#" class="btn btn-lg btn-link link-dark">See all articles <svg class="ml-2" data-name="icons/tabler/chevron right" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Chevron Right background" width="16" height="16" fill="none"/>
<path d="M.26.26A.889.889,0,0,1,1.418.174l.1.086L8.629,7.371a.889.889,0,0,1,.086,1.157l-.086.1L1.517,15.74A.889.889,0,0,1,.174,14.582l.086-.1L6.743,8,.26,1.517A.889.889,0,0,1,.174.36Z" transform="translate(4)" fill="#1e1e1e"/>
</svg>
</a>
</div>
</div>
<div class="swiper-slider-box">
<div class="swiper-container swiper-clients">
<div class="swiper-wrapper">
<div class="swiper-slide h-100">
<figure class="card muse-card rounded-12 h-100">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/articel1.svg" alt="img" class="w-100">
</a>
<figcaption class="py-3 px-4">
<h5 class="title-box"><a href="#">Selling UI Kits</a></h5>
<p class="caption lh-lg text-gray-600">Zombies reversus ab inferno, nam malum <br class="d-none d-xl-block">cerebro. De carne animata corpora quaeritis. <br class="d-none d-lg-block">Summus sit.</p>
</figcaption>
</figure>
</div>
<div class="swiper-slide h-100">
<figure class="card muse-card rounded-12 h-100">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/article2.svg" alt="img" class="w-100">
<span class="badge badge-sm badge-info text-uppercase rounded-pill py-1">New</span>
</a>
<figcaption class="py-3 px-4">
<h5 class="title-box"><a href="#">Harnessing Krate powers</a></h5>
<p class="caption lh-lg text-gray-600">De Apocalypsi undead dictum mauris. Hi mortuis soulless creaturas, imo monstra adventus vultus comedat cerebella.</p>
</figcaption>
</figure>
</div>
<div class="swiper-slide h-100">
<figure class="card muse-card rounded-12 h-100">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/article3.svg" alt="img" style="margin-top: -5px;" class="w-100">
</a>
<figcaption class="py-3 px-4">
<h5 class="title-box"><a href="#">Mice are evil!</a></h5>
<p class="caption lh-lg text-gray-600">Qui offenderit rapto, terribilem incessu. <br>The voodoo sacerdos suscitat mortuos comedere carnem.</p>
</figcaption>
</figure>
</div>
<div class="swiper-slide">
<figure class="card muse-card rounded-12">
<a href="#" class="muse-animation">
<img src="../assets/img/templates/articel1.svg" alt="img" class="w-100">
</a>
<figcaption class="py-3 px-4">
<h5 class="font-weight-semibold title-box"><a href="#">Selling UI Kits</a></h5>
<p class="caption lh-lg text-gray-600">Zombies reversus ab inferno, nam malum cerebro. De carne animata corpora quaeritis. Summus sit.</p>
</figcaption>
</figure>
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</section>
</div>
</div>
Component 18
Search helpful articles
and get support
<div class="bg-gray-100 help-center-template">
<div class="bg-blue-500 pb-5">
<div class="container text-center pt-5 mt-md-5">
<h1 class="display-3 text-white">Search helpful articles <br class="d-none d-md-block">and get support</h1>
</div>
<br>
<br>
</div>
<div class="container">
<!-- Muse Section, Py 0, Search Less -->
<section class="muse-section py-0 search-less">
<div class="shadow-dark-80 rounded bg-white py-3 px-4">
<form class="d-md-flex align-items-center">
<div class="d-flex align-items-center search-left">
<span><img src="../assets/img/pages/search.svg" alt="Search"></span>
<input type="text" class="form-control border-0" placeholder="Search topics...">
</div>
<button type="button" class="btn btn-lg btn-primary mt-3 mt-md-0">Search</button>
</form>
</div>
</section>
<!-- Muse Section, Py 5, Mt Md 2 -->
<section class="muse-section py-5 mt-md-2">
<div class="row">
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/power-outline.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">General</a></h5>
<p class="lh-lg">Lorem Ipsum is simply dummy text of the printing</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">14 articles</span></div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/money.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">Payments</a></h5>
<p class="lh-lg">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">12 articles</span></div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/plug.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">Plugins</a></h5>
<p class="lh-lg">At vero eos et accusamus et iusto odio dignissimos ducimus</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">4 articles</span></div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/box-outline.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">Packages</a></h5>
<p class="lh-lg">Contrary to popular belief, Lorem Ipsum is not simply random</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">6 articles</span></div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/code.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">Coding</a></h5>
<p class="lh-lg">It is a long established fact that a reader will be distracted</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">12 articles</span></div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="mb-4 mb-md-5 bg-white rounded-12 shadow-dark-80 text-center py-5 px-4 px-lg-5">
<span class="bg-gray-100 circle circle-lg mb-3 m-auto"><img src="../assets/img/pages/user.svg" alt="Power Outline"></span>
<h5 class="mt-4"><a href="#" class="text-black-600">Account</a></h5>
<p class="lh-lg">There are many variations of passages of Lorem Ipsum</p>
<div class="mt-4"><span class="badge text-primary bg-blue-50">14 articles</span></div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 19
The Gorgeous Statues of Thailand
Farok Rastegar . 1 hour ago
10 beaches you must visit
Yasaman Foroutan . Just nowOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
The gorgeous statues of Thailand
Jeremías Romero . TodayOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
How I roamed Italy in a Beetle
Daisy Murphy . YesterdayOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
Hello, I’m Amy
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure
Tags
<div class="blog-template bg-gray-100">
<div class="container">
<section class="muse-section py-5 mt-0 mt-md-0">
<div class="row">
<div class="col-lg-8">
<figure class="card muse-card overlay-remove rounded-12 mb-4 mb-md-5 position-relative transition-3d-hover">
<a href="#" class="muse-animation"><img src="../assets/img/blog/blog1.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="position-absolute bottom-0 py-3 py-md-4 px-3 px-md-5 bg-white-90 right-0 left-0">
<h4><a href="#" class="stretched-link">The Gorgeous Statues of Thailand</a></h4>
<div class="d-flex align-items-center small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar11.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Farok Rastegar . </span><span>1 hour ago</span></div>
</figcaption>
</figure>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-5">
<div class="rounded-12 shadow-dark-80 muse-animation">
<img src="../assets/img/blog/blog2.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-7">
<div class="pr-0 pr-lg-5 my-md-4 my-3">
<h5><a href="#" class="text-black-600">10 beaches you must visit</a></h5>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar2.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Yasaman Foroutan . </span><span>Just now</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-5">
<div class="rounded-12 shadow-dark-80 muse-animation">
<img src="../assets/img/blog/blog3.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-7">
<div class="pr-0 pr-lg-5 my-md-4 my-3">
<h5><a href="#" class="text-black-600">The gorgeous statues of Thailand</a></h5>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar3.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Jeremías Romero . </span><span>Today</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-5">
<div class="rounded-12 shadow-dark-80 muse-animation">
<img src="../assets/img/blog/blog4.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-7">
<div class="pr-0 pr-lg-5 my-md-4 my-3">
<h5><a href="#" class="text-black-600">How I roamed Italy in a Beetle</a></h5>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar4.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Daisy Murphy . </span><span>Yesterday</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card muse-card rounded-12 mb-4 mb-md-5 text-center px-3 py-sm-4 py-3 py-sm-5">
<span class="avatar avatar-xl m-auto"><img src="../assets/img/blog/avatar1.png" class="rounded-circle" alt="Avatar"></span>
<h4 class="mt-3">Hello, I’m Amy</h4>
<p class="lh-lg">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure</p>
<div class="social-icons text-center">
<a href="javascript:void(0);"><svg data-name="icons/tabler/facebook" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Facebook background" width="16" height="16" fill="none"></rect>
<path d="M6.359,16H3.077a.618.618,0,0,1-.61-.532l-.005-.084V10.256H.616a.618.618,0,0,1-.61-.532L0,9.641V6.359a.617.617,0,0,1,.532-.61l.084-.005H2.462V4.718A4.7,4.7,0,0,1,7,0l.181,0H9.641a.618.618,0,0,1,.61.532l.005.084V3.9a.617.617,0,0,1-.532.61l-.084.005H7.179a.2.2,0,0,0-.2.158l-.005.047V5.744H9.641a.615.615,0,0,1,.611.687l-.013.077L9.418,9.79a.614.614,0,0,1-.5.459l-.092.007H6.974v5.128a.618.618,0,0,1-.532.61ZM1.231,6.974V9.025H3.077a.617.617,0,0,1,.609.532l.006.084v5.128H5.744V9.641a.616.616,0,0,1,.532-.609l.084-.006h1.98l.513-2.051H6.359a.617.617,0,0,1-.61-.532l-.005-.083V4.718A1.443,1.443,0,0,1,7.061,3.287l.118,0H9.025V1.231H7.179A3.481,3.481,0,0,0,3.7,4.549l0,.169V6.359a.617.617,0,0,1-.532.609l-.084.005Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
<a href="javascript:void(0);"><svg data-name="icons/tabler/dribbble" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dribbble background" width="16" height="16" fill="none"></rect>
<path d="M0,8a8,8,0,1,1,12.071,6.885.613.613,0,0,1-.148.086A8,8,0,0,1,0,8Zm8,6.769a6.729,6.729,0,0,0,3.04-.722A18.964,18.964,0,0,0,10.085,9.7a11.826,11.826,0,0,0-4.847,3.087l-.385.379-.522.524A6.728,6.728,0,0,0,8,14.769Zm4.193-1.458a6.774,6.774,0,0,0,2.486-4.2,18.649,18.649,0,0,0-3.393.293A19.879,19.879,0,0,1,12.193,13.311ZM1.231,8a6.751,6.751,0,0,0,2.126,4.921l.814-.815A13.357,13.357,0,0,1,9.638,8.547a20.668,20.668,0,0,0-1.049-2.1,20.8,20.8,0,0,1-7.345,1.14Q1.231,7.792,1.231,8Zm9.611.234a19.647,19.647,0,0,1,3.926-.359A6.737,6.737,0,0,0,13.224,3.7a18.084,18.084,0,0,1-3.5,2.258A21.639,21.639,0,0,1,10.842,8.234ZM1.434,6.354A19.65,19.65,0,0,0,7.94,5.372,37.065,37.065,0,0,0,5.305,1.791,6.8,6.8,0,0,0,1.434,6.354ZM9.093,4.893a16.545,16.545,0,0,0,3.261-2.073A6.767,6.767,0,0,0,6.562,1.385,36.568,36.568,0,0,1,9.093,4.893Z" fill="#1e1e1e"></path>
</svg>
</a>
<a href="javascript:void(0);"><svg data-name="icons/tabler/instagram" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Instagram background" width="16" height="16" fill="none"></rect>
<path d="M4.343,16A4.348,4.348,0,0,1,0,11.657V4.343A4.347,4.347,0,0,1,4.343,0h7.314A4.348,4.348,0,0,1,16,4.343v7.314A4.348,4.348,0,0,1,11.657,16ZM1.372,4.343v7.314a2.975,2.975,0,0,0,2.971,2.972h7.314a2.975,2.975,0,0,0,2.972-2.972V4.343a2.975,2.975,0,0,0-2.972-2.971H4.343A2.974,2.974,0,0,0,1.372,4.343ZM4.571,8A3.429,3.429,0,1,1,8,11.428,3.434,3.434,0,0,1,4.571,8ZM5.943,8A2.057,2.057,0,1,0,8,5.943,2.06,2.06,0,0,0,5.943,8Zm5.492-4.02-.006-.094a.686.686,0,0,1,1.365-.094l.006.093a.686.686,0,0,1-1.365.094Z" fill="#1e1e1e"></path>
</svg>
</a>
</div>
</div>
<div class="bg-blue-50 rounded-12 py-4 py-md-5 px-4 mb-4 mb-md-5">
<div class="text-center mb-sm-4 mb-3">
<h4 class="mb-0">Join our mailing list</h4>
<small class="text-gray-600">Best deals directly to your inbox</small>
</div>
<div class="mb-3 px-md-2">
<input type="text" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="text-center px-md-2">
<button type="button" class="btn btn-lg btn-block btn-primary mb-3">Subscribe</button>
<small class="tiny text-gray-600 d-block">By joining you agree to our <strong><a href="#0" class="text-gray-600">Privacy Policy</a></strong></small>
</div>
</div>
<div class="bg-white rounded-12 shadow-dark-80 p-md-4 p-3">
<h4 class="mb-2">Tags</h4>
<div class="tag-list">
<a href="#" class="btn btn-sm btn-outline-dark">Affordable</a>
<a href="#" class="btn btn-sm btn-outline-dark">Europe</a>
<a href="#" class="btn btn-sm btn-outline-dark">Most visited</a>
<a href="#" class="btn btn-sm btn-outline-dark">Luxury</a>
<a href="#" class="btn btn-sm btn-outline-dark">Activity</a>
<a href="#" class="btn btn-sm btn-outline-dark">Swimming</a>
<a href="#" class="btn btn-sm btn-outline-dark">Best food</a>
<a href="#" class="btn btn-sm btn-outline-dark">Trending</a>
<a href="#" class="btn btn-sm btn-outline-dark">Asia</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Component 20
Latest posts
Pathway to the Mediterranean
Alexander LjungOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
My awesome safari in Lahbab Desert, United Arab Emirates
Graham GriffithsOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
10 amazing things to do in Cuba
Sofietje BoksemOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
The best street food in the world. Ranked!
Sung Jin-ShilOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
Travel Packing guide for beginners
Farok Rastegar . 1 hour agoOn the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…
<div class="blog-template bg-gray-100">
<div class="container">
<section class="muse-section py-5 mt-md-4">
<h3 class="mb-4 mb-lg-5">Latest posts</h3>
<div class="row">
<div class="col-xl-10">
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-6">
<div class="rounded-12 muse-animation">
<img src="../assets/img/blog/blog6.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-6">
<div class="my-md-4 my-3">
<h3><a href="#" class="text-black-600">Pathway to the Mediterranean</a></h3>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar6.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Alexander Ljung</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-6">
<div class="rounded-12 muse-animation">
<img src="../assets/img/blog/blog7.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-6">
<div class="my-md-4 my-3">
<h3><a href="#" class="text-black-600">My awesome safari in Lahbab Desert, United Arab Emirates</a></h3>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar7.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Graham Griffiths</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-6">
<div class="rounded-12 muse-animation">
<img src="../assets/img/blog/blog8.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-6">
<div class="my-md-4 my-3">
<h3><a href="#" class="text-black-600">10 amazing things to do in Cuba</a></h3>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar8.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Sofietje Boksem</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-4 mb-md-5">
<div class="col-md-6">
<div class="rounded-12 muse-animation">
<img src="../assets/img/blog/blog9.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-6">
<div class="my-md-4 my-3">
<h3><a href="#" class="text-black-600">The best street food in the world. Ranked!</a></h3>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar9.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Sung Jin-Shil</span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
<div class="row align-items-center mb-2 mb-md-5">
<div class="col-md-6">
<div class="rounded-12 muse-animation">
<img src="../assets/img/blog/blog10.jpg" class="rounded-12 w-100" alt="Blog">
</div>
</div>
<div class="col-md-6">
<div class="my-md-4 my-3">
<h3><a href="#" class="text-black-600">Travel Packing guide for beginners</a></h3>
<div class="d-flex align-items-center mb-2 small text-gray-600"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar10.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Farok Rastegar . </span>1 hour ago<span></span></div>
<p class="small lh-lg text-gray-600">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain a…</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-md-3">
<a href="#" class="btn btn-xl btn-primary">Load more</a>
</div>
</section>
</div>
</div>
Component 21
1
Phuket, Thailand
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
2
Tokyo, Japan
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
3
Taghazout, Morocco
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
4
Paris, France
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
5
Venice, Italy
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.
<div class="blog-post-template bg-gray-100 py-5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<figure class="mb-4 mb-md-5 pt-md-3">
<div class="d-flex align-items-center mb-md-4 mb-3">
<span><small class="bg-primary circle circle-lg">1</small></span>
<strong class="h2 mb-0 ml-3">Phuket, Thailand</strong>
</div>
<img src="../assets/img/blog/blog12.jpg" class="rounded-12 w-100" alt="Blog">
<figcaption class="mt-4">
<p class="lh-lg">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5 pt-md-3 aos-init">
<div class="d-flex align-items-center mb-md-4 mb-3">
<span><small class="bg-primary circle circle-lg">2</small></span>
<strong class="h2 mb-0 ml-3">Tokyo, Japan</strong>
</div>
<img src="../assets/img/blog/blog13.jpg" class="rounded-12 w-100" alt="Blog">
<figcaption class="mt-4">
<p class="lh-lg">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5 pt-md-3 aos-init">
<div class="d-flex align-items-center mb-md-4 mb-3">
<span><small class="bg-primary circle circle-lg">3</small></span>
<strong class="h2 mb-0 ml-3">Taghazout, Morocco</strong>
</div>
<img src="../assets/img/blog/blog14.jpg" class="rounded-12 w-100" alt="Blog">
<figcaption class="mt-4">
<p class="lh-lg">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5 pt-md-3 aos-init">
<div class="d-flex align-items-center mb-md-4 mb-3">
<span><small class="bg-primary circle circle-lg">4</small></span>
<strong class="h2 mb-0 ml-3">Paris, France</strong>
</div>
<img src="../assets/img/blog/blog15.jpg" class="rounded-12 w-100" alt="Blog">
<figcaption class="mt-4">
<p class="lh-lg">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
</figcaption>
</figure>
<figure class="mb-4 pt-md-3 aos-init">
<div class="d-flex align-items-center mb-md-4 mb-3">
<span><small class="bg-primary circle circle-lg">5</small></span>
<strong class="h2 mb-0 ml-3">Venice, Italy</strong>
</div>
<img src="../assets/img/blog/blog16.jpg" class="rounded-12 w-100" alt="Blog">
<figcaption class="mt-4">
<p class="lh-lg">But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, z master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.</p>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
Component 22
You may also like
10 beaches you must visit
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 4…
New
The Gorgeous Statues of Thailand
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form…
How I roamed Italy in a Beetle
It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lo…
<div class="blog-post-template bg-gray-100 py-5">
<div class="container">
<section class="muse-section py-4 py-md-5 mt-md-4">
<h2 class="mb-4">You may also like</h2>
<div class="row">
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4 mb-0 mb-md-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog20.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">10 beaches you must visit</a></h5>
<p class="mb-0 small lh-lg">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 4…</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4 mb-0 mb-md-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog21.jpg" class="img-fluid w-100" alt="Blog">
</a>
<span class="badge badge-sm badge-primary rounded badge-absolute py-1 text-uppercase">New</span>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">The Gorgeous Statues of Thailand</a></h5>
<p class="mb-0 small lh-lg">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form…</p>
</figcaption>
</figure>
</div>
<div class="col-sm-6 col-lg-4 mt-0 mt-md-4 mb-md-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog22.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<h5><a href="javascript:void(0);" class="stretched-link">How I roamed Italy in a Beetle</a></h5>
<p class="mb-0 small lh-lg">It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lo…</p>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 23
Latest posts
Aryn JacobssenHealthy lentil soup with goat cheese
Mahnaz FarzinStraweberry pancakes
Roelof BekkenenksGourmet blueberry and carrot cake
Jeremías RomeroFulffy donuts with a twist
Martijn Dragonjer3 ingredient homemade cake
Uesugi SuzukiPerfect cheescake that melts in your mouth
<div class="blog-home2-template bg-gray-100 py-4">
<div class="container">
<section class="muse-section">
<h3 class="mb-sm-4 mb-3">Latest posts</h3>
<div class="row">
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog24.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar13.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Aryn Jacobssen</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">Healthy lentil soup with goat cheese</a></h5>
</figcaption>
</figure>
</div>
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog25.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar14.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Mahnaz Farzin</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">Straweberry pancakes</a></h5>
</figcaption>
</figure>
</div>
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog26.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar15.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Roelof Bekkenenks</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">Gourmet blueberry and carrot cake</a></h5>
</figcaption>
</figure>
</div>
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog27.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar16.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Jeremías Romero</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">Fulffy donuts with a twist</a></h5>
</figcaption>
</figure>
</div>
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog28.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar17.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Martijn Dragonjer</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">3 ingredient homemade cake</a></h5>
</figcaption>
</figure>
</div>
<div class="col-lg-4 mt-0 mt-md-4 mb-4">
<figure class="card muse-card h-100 transition-3d-hover rounded-12 m-0">
<a href="javascript:void(0);" class="muse-animation">
<img src="../assets/img/blog/blog29.jpg" class="img-fluid w-100" alt="Blog">
</a>
<figcaption class="p-4">
<div class="d-flex align-items-center small text-gray-600 mb-2"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar18.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Uesugi Suzuki</span></div>
<h5><a href="javascript:void(0);" class="stretched-link">Perfect cheescake that melts in your mouth</a></h5>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 24
<div class="blog-home2-template bg-gray-100 py-4">
<div class="container">
<section class="muse-section py-4">
<div class="row">
<div class="col-md-6">
<figure class="card muse-card overlay-remove rounded-12 mb-4 mb-md-5 position-relative transition-3d-hover">
<a href="#" class="muse-animation"><img src="../assets/img/blog/blog30.jpg" class="rounded-12 w-100" alt="Blog"></a>
<span class="badge badge-primary rounded badge-absolute text-uppercase">New</span>
<figcaption class="position-absolute bottom-0 p-3 p-md-4 bg-white right-0 left-0">
<h4 class="mb-0"><a href="#" class="stretched-link">10 mind blowing destinations to visit this summer</a></h4>
</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure class="card muse-card overlay-remove rounded-12 mb-4 mb-md-5 position-relative transition-3d-hover">
<a href="#" class="muse-animation"><img src="../assets/img/blog/blog31.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="position-absolute bottom-0 p-3 p-md-4 bg-white right-0 left-0">
<h4 class="mb-0"><a href="#" class="stretched-link">505 pizza recipes to make at home with no experience!</a></h4>
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</div>
Component 25
Latest posts
Mighty double cheeseburger
Azah Anyeni
Strawberry and fruit milkshake
Gibby Radki
The healthiest breakfast meals
Henry Itondo
Healthy lentil soup with goat cheese
Katayama Fumiki
Homemade carrot and vanilla cake
Tô Anh Ðức
Hello, I’m Amy
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure
Tags
<div class="blog-home2-template bg-gray-100 py-4">
<div class="container">
<section class="muse-section">
<div class="row pt-md-3">
<div class="col-md-12">
<h3 class="mb-sm-4 mb-3">Latest posts</h3>
</div>
<div class="col-lg-8">
<figure class="mb-4 mb-md-5">
<a href="#" class="muse-animation rounded-12"><img src="../assets/img/blog/blog32.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="mt-2 pt-1">
<h4><a href="#" class="text-black-600">Mighty double cheeseburger</a></h4>
<div class="d-flex align-items-center small text-gray-600 my-2 pb-md-4"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar19.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Azah Anyeni</span></div>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5">
<a href="#" class="muse-animation rounded-12"><img src="../assets/img/blog/blog33.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="mt-2 pt-1">
<h4><a href="#" class="text-black-600">Strawberry and fruit milkshake</a></h4>
<div class="d-flex align-items-center small text-gray-600 my-2 pb-md-4"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar20.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Gibby Radki</span></div>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5">
<a href="#" class="muse-animation rounded-12"><img src="../assets/img/blog/blog34.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="mt-2 pt-1">
<h4><a href="#" class="text-black-600">The healthiest breakfast meals</a></h4>
<div class="d-flex align-items-center small text-gray-600 my-2 pb-md-4"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar21.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Henry Itondo</span></div>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5">
<a href="#" class="muse-animation rounded-12"><img src="../assets/img/blog/blog35.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="mt-2 pt-1">
<h4><a href="#" class="text-black-600">Healthy lentil soup with goat cheese</a></h4>
<div class="d-flex align-items-center small text-gray-600 my-2 pb-md-4"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar22.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Katayama Fumiki</span></div>
</figcaption>
</figure>
<figure class="mb-4 mb-md-5">
<a href="#" class="muse-animation rounded-12"><img src="../assets/img/blog/blog36.jpg" class="rounded-12 w-100" alt="Blog"></a>
<figcaption class="mt-2 pt-1">
<h4><a href="#" class="text-black-600">Homemade carrot and vanilla cake</a></h4>
<div class="d-flex align-items-center small text-gray-600 my-2 pb-md-4"><span class="avatar avatar-xs border-0"><img src="../assets/img/blog/avatar11.png" class="rounded-circle" alt="Avatar"></span><span class="ml-2">Tô Anh Ðức</span></div>
</figcaption>
</figure>
<div class="mb-5 mb-lg-0">
<button type="button" class="btn btn-xl btn-block btn-primary">Load more</button>
</div>
</div>
<div class="col-lg-4">
<div class="card muse-card rounded-12 mb-4 mb-md-5 text-center px-3 py-sm-4 py-3 py-sm-5">
<span class="avatar avatar-xl m-auto"><img src="../assets/img/blog/avatar1.png" class="rounded-circle" alt="Avatar"></span>
<h4 class="mt-3">Hello, I’m Amy</h4>
<p class="lh-lg">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure</p>
<div class="social-icons text-center">
<a href="javascript:void(0);"><svg data-name="icons/tabler/facebook" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Facebook background" width="16" height="16" fill="none"></rect>
<path d="M6.359,16H3.077a.618.618,0,0,1-.61-.532l-.005-.084V10.256H.616a.618.618,0,0,1-.61-.532L0,9.641V6.359a.617.617,0,0,1,.532-.61l.084-.005H2.462V4.718A4.7,4.7,0,0,1,7,0l.181,0H9.641a.618.618,0,0,1,.61.532l.005.084V3.9a.617.617,0,0,1-.532.61l-.084.005H7.179a.2.2,0,0,0-.2.158l-.005.047V5.744H9.641a.615.615,0,0,1,.611.687l-.013.077L9.418,9.79a.614.614,0,0,1-.5.459l-.092.007H6.974v5.128a.618.618,0,0,1-.532.61ZM1.231,6.974V9.025H3.077a.617.617,0,0,1,.609.532l.006.084v5.128H5.744V9.641a.616.616,0,0,1,.532-.609l.084-.006h1.98l.513-2.051H6.359a.617.617,0,0,1-.61-.532l-.005-.083V4.718A1.443,1.443,0,0,1,7.061,3.287l.118,0H9.025V1.231H7.179A3.481,3.481,0,0,0,3.7,4.549l0,.169V6.359a.617.617,0,0,1-.532.609l-.084.005Z" transform="translate(3)" fill="#1e1e1e"></path>
</svg>
</a>
<a href="javascript:void(0);"><svg data-name="icons/tabler/dribbble" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Dribbble background" width="16" height="16" fill="none"></rect>
<path d="M0,8a8,8,0,1,1,12.071,6.885.613.613,0,0,1-.148.086A8,8,0,0,1,0,8Zm8,6.769a6.729,6.729,0,0,0,3.04-.722A18.964,18.964,0,0,0,10.085,9.7a11.826,11.826,0,0,0-4.847,3.087l-.385.379-.522.524A6.728,6.728,0,0,0,8,14.769Zm4.193-1.458a6.774,6.774,0,0,0,2.486-4.2,18.649,18.649,0,0,0-3.393.293A19.879,19.879,0,0,1,12.193,13.311ZM1.231,8a6.751,6.751,0,0,0,2.126,4.921l.814-.815A13.357,13.357,0,0,1,9.638,8.547a20.668,20.668,0,0,0-1.049-2.1,20.8,20.8,0,0,1-7.345,1.14Q1.231,7.792,1.231,8Zm9.611.234a19.647,19.647,0,0,1,3.926-.359A6.737,6.737,0,0,0,13.224,3.7a18.084,18.084,0,0,1-3.5,2.258A21.639,21.639,0,0,1,10.842,8.234ZM1.434,6.354A19.65,19.65,0,0,0,7.94,5.372,37.065,37.065,0,0,0,5.305,1.791,6.8,6.8,0,0,0,1.434,6.354ZM9.093,4.893a16.545,16.545,0,0,0,3.261-2.073A6.767,6.767,0,0,0,6.562,1.385,36.568,36.568,0,0,1,9.093,4.893Z" fill="#1e1e1e"></path>
</svg>
</a>
<a href="javascript:void(0);"><svg data-name="icons/tabler/instagram" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16">
<rect data-name="Icons/Tabler/Instagram background" width="16" height="16" fill="none"></rect>
<path d="M4.343,16A4.348,4.348,0,0,1,0,11.657V4.343A4.347,4.347,0,0,1,4.343,0h7.314A4.348,4.348,0,0,1,16,4.343v7.314A4.348,4.348,0,0,1,11.657,16ZM1.372,4.343v7.314a2.975,2.975,0,0,0,2.971,2.972h7.314a2.975,2.975,0,0,0,2.972-2.972V4.343a2.975,2.975,0,0,0-2.972-2.971H4.343A2.974,2.974,0,0,0,1.372,4.343ZM4.571,8A3.429,3.429,0,1,1,8,11.428,3.434,3.434,0,0,1,4.571,8ZM5.943,8A2.057,2.057,0,1,0,8,5.943,2.06,2.06,0,0,0,5.943,8Zm5.492-4.02-.006-.094a.686.686,0,0,1,1.365-.094l.006.093a.686.686,0,0,1-1.365.094Z" fill="#1e1e1e"></path>
</svg>
</a>
</div>
</div>
<div class="bg-blue-50 rounded-12 py-4 py-md-5 px-4 mb-4 mb-md-5">
<div class="text-center mb-sm-4 mb-3">
<h4 class="mb-0">Join our mailing list</h4>
<small class="text-gray-600">Best deals directly to your inbox</small>
</div>
<div class="mb-3 px-md-2">
<input type="text" class="form-control form-control-lg" placeholder="Email">
</div>
<div class="text-center px-md-2">
<button type="button" class="btn btn-lg btn-block btn-primary mb-3">Subscribe</button>
<small class="tiny text-gray-600 d-block">By joining you agree to our <strong><a href="#0" class="text-gray-600">Privacy Policy</a></strong></small>
</div>
</div>
<div class="bg-white rounded-12 shadow-dark-80 p-4 mb-4 mb-md-5">
<div class="p-md-2">
<h4 class="mb-3 pb-1">Latest posts</h4>
<figure class="border-bottom border-gray-200 mb-4">
<a href="#" class="muse-animation rounded-6"><img src="../assets/img/blog/blog17.jpg" class="rounded-6 w-100" alt="Blog"></a>
<figcaption class="mt-2">
<h6 class="lh-base mb-3"><a href="#" class="text-black-600">My awesome safari in Lahbab Desert, United Arab Emirates</a></h6>
</figcaption>
</figure>
<figure class="border-bottom border-gray-200 mb-4 pt-1">
<a href="#" class="muse-animation rounded-6"><img src="../assets/img/blog/blog18.jpg" class="rounded-6 w-100" alt="Blog"></a>
<figcaption class="mt-2">
<h6 class="lh-base mb-3"><a href="#" class="text-black-600">10 amazing things to do in Cuba</a></h6>
</figcaption>
</figure>
<figure class="pt-1 mb-0">
<a href="#" class="muse-animation rounded-6"><img src="../assets/img/blog/blog19.jpg" class="rounded-6 w-100" alt="Blog"></a>
<figcaption class="mt-2">
<h6 class="lh-base mb-0"><a href="#" class="text-black-600">Pathway to the Mediterranean</a></h6>
</figcaption>
</figure>
</div>
</div>
<div class="bg-white rounded-12 shadow-dark-80 p-md-4 p-3">
<h4 class="mb-2">Tags</h4>
<div class="tag-list">
<a href="#" class="btn btn-sm btn-outline-dark">Affordable</a>
<a href="#" class="btn btn-sm btn-outline-dark">Europe</a>
<a href="#" class="btn btn-sm btn-outline-dark">Most visited</a>
<a href="#" class="btn btn-sm btn-outline-dark">Luxury</a>
<a href="#" class="btn btn-sm btn-outline-dark">Activity</a>
<a href="#" class="btn btn-sm btn-outline-dark">Swimming</a>
<a href="#" class="btn btn-sm btn-outline-dark">Best food</a>
<a href="#" class="btn btn-sm btn-outline-dark">Trending</a>
<a href="#" class="btn btn-sm btn-outline-dark">Asia</a>
</div>
</div>
</div>
</div>
</section>
</div>
</div>