1562 lines
81 KiB
HTML
1562 lines
81 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html class="no-js" lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<meta name="author" content="ThemeZaa">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|||
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|||
|
|
|
|||
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|||
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|||
|
|
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|||
|
|
</head>
|
|||
|
|
<body class="overflow-x-hidden" data-mobile-nav-style="classic">
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
|
|||
|
|
<nav class="navbar navbar-expand-lg header-light header-reverse header-demo" data-header-hover="light">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|||
|
|
<a class="navbar-brand" href="index.html">
|
|||
|
|
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="default-logo">
|
|||
|
|
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="alt-logo">
|
|||
|
|
<img src="images/logo-black.png" data-at2x="images/logo-black@2x.png" alt class="mobile-logo">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-lg-8 menu-order position-static">
|
|||
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
<span class="navbar-toggler-line"></span>
|
|||
|
|
</button>
|
|||
|
|
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
|||
|
|
<ul class="navbar-nav">
|
|||
|
|
<li class="nav-item dropdown submenu">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Pre-Built Sites</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink1" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<div class="dropdown-menu submenu-content background-position-center cover-background" aria-labelledby="navbarDropdownMenuLink1" style="background-image: url('images/pre-built-sites-bg.jpg')">
|
|||
|
|
<div class="d-lg-flex mega-menu m-auto">
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="demo-corporate.html" target="_blank">Corporate<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
|
|||
|
|
<li><a href="demo-marketing.html" target="_blank">Marketing</a></li>
|
|||
|
|
<li><a href="demo-accounting.html" target="_blank">Accounting<span class="label bg-light-red text-red border-radius-26px">Classic</span></a></li>
|
|||
|
|
<li><a href="demo-beauty-salon.html" target="_blank">Beauty Salon</a></li>
|
|||
|
|
<li><a href="demo-architecture.html" target="_blank">Architecture</a></li>
|
|||
|
|
<li><a href="demo-ebook.html" target="_blank">eBook</a></li>
|
|||
|
|
<li><a href="demo-seo-agency.html" target="_blank">SEO Agency</a></li>
|
|||
|
|
<li><a href="demo-hosting.html" target="_blank">Hosting</a></li>
|
|||
|
|
<li><a href="demo-consulting.html" target="_blank">Consulting</a></li>
|
|||
|
|
<li><a href="demo-green-energy.html" target="_blank">Green Energy</a></li>
|
|||
|
|
<li><a href="demo-business.html" target="_blank">Business</a></li>
|
|||
|
|
<li><a href="demo-interactive-portfolio.html" target="_blank">Interactive Portfolio</a></li>
|
|||
|
|
<li><a href="demo-spa-salon.html" target="_blank">Spa Salon<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="demo-branding-agency.html" target="_blank">Branding Agency<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-elearning.html" target="_blank">eLearning</a></li>
|
|||
|
|
<li><a href="demo-it-business.html" target="_blank">IT Business<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Modern</span></a></li>
|
|||
|
|
<li><a href="demo-barber.html" target="_blank">Barber</a></li>
|
|||
|
|
<li><a href="demo-hotel-and-resort.html" target="_blank">Hotel & Resort</a></li>
|
|||
|
|
<li><a href="demo-real-estate.html" target="_blank">Real Estate</a></li>
|
|||
|
|
<li><a href="demo-jewellery-store.html" target="_blank">Jewellery Store</a></li>
|
|||
|
|
<li><a href="demo-travel-agency.html" target="_blank">Travel Agency</a></li>
|
|||
|
|
<li><a href="demo-gym-and-fitness.html" target="_blank">Gym & Fitness</a></li>
|
|||
|
|
<li><a href="demo-logistics.html" target="_blank">Logistics</a></li>
|
|||
|
|
<li><a href="demo-design-agency.html" target="_blank">Design Agency<span class="label bg-light-red text-red border-radius-26px">Creative</span></a></li>
|
|||
|
|
<li><a href="demo-photography.html" target="_blank">Photography</a></li>
|
|||
|
|
<li><a href="demo-pizza-parlor.html" target="_blank">Pizza Parlor</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="demo-restaurant.html" target="_blank">Restaurant<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-scattered-portfolio.html" target="_blank">Scattered Portfolio</a></li>
|
|||
|
|
<li><a href="demo-data-analysis.html" target="_blank">Data Analysis</a></li>
|
|||
|
|
<li><a href="demo-medical.html" target="_blank">Medical</a></li>
|
|||
|
|
<li><a href="demo-horizontal-portfolio.html" target="_blank">Horizontal Portfolio</a></li>
|
|||
|
|
<li><a href="demo-product-showcase.html" target="_blank">Product Showcase<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">Trendy</span></a></li>
|
|||
|
|
<li><a href="demo-finance.html" target="_blank">Finance</a></li>
|
|||
|
|
<li><a href="demo-elder-care.html" target="_blank">Elder Care</a></li>
|
|||
|
|
<li><a href="demo-fashion-store.html" target="_blank">Fashion Store</a></li>
|
|||
|
|
<li><a href="demo-music-onepage.html" target="_blank">Music</a></li>
|
|||
|
|
<li><a href="demo-vertical-portfolio.html" target="_blank">Vertical Portfolio</a></li>
|
|||
|
|
<li><a href="demo-freelancer.html" target="_blank">Freelancer<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">Clean</span></a></li>
|
|||
|
|
<li><a href="demo-charity.html" target="_blank">Charity</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="demo-digital-agency.html" target="_blank">Digital Agency</a></li>
|
|||
|
|
<li><a href="demo-web-agency.html" target="_blank">Web Agency<span class="label bg-white-ice text-jade border-radius-26px">Creative</span></a></li>
|
|||
|
|
<li><a href="demo-yoga-and-meditation.html" target="_blank">Yoga & Meditation</a></li>
|
|||
|
|
<li><a href="demo-startup.html" target="_blank">Startup</a></li>
|
|||
|
|
<li><a href="demo-application.html" target="_blank">Application<span class="label bg-light-majorelle-blue text-majorelle-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-lawyer.html" target="_blank">Lawyer</a></li>
|
|||
|
|
<li><a href="demo-cryptocurrency.html" target="_blank">Cryptocurrency</a></li>
|
|||
|
|
<li><a href="demo-conference.html" target="_blank">Conference</a></li>
|
|||
|
|
<li><a href="demo-minimal-portfolio.html" target="_blank">Minimal Portfolio<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-decor-store.html" target="_blank">Decor Store</a></li>
|
|||
|
|
<li><a href="demo-magazine.html" target="_blank">Magazine</a></li>
|
|||
|
|
<li><a href="demo-blogger.html" target="_blank">Blogger</a></li>
|
|||
|
|
<li><a href="demo-wedding-invitation.html" target="_blank">Wedding Invitation</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown submenu">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Pages</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink2" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink2">
|
|||
|
|
<div class="d-lg-flex mega-menu m-auto">
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">About Pages</li>
|
|||
|
|
<li><a href="demo-branding-agency-about.html" target="_blank">About - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-restaurant-about.html" target="_blank">About - Restaurant</a></li>
|
|||
|
|
<li><a href="demo-minimal-portfolio-about.html" target="_blank">About - Minimal</a></li>
|
|||
|
|
<li><a href="demo-accounting-company.html" target="_blank">About - Accounting</a></li>
|
|||
|
|
<li><a href="demo-architecture-about.html" target="_blank">About - Architecture</a></li>
|
|||
|
|
<li><a href="demo-digital-agency-about.html" target="_blank">About - Digital</a></li>
|
|||
|
|
<li><a href="demo-photography-about.html" target="_blank">About - Photography</a></li>
|
|||
|
|
<li><a href="demo-design-agency-about.html" target="_blank">About - Agency</a></li>
|
|||
|
|
<li><a href="demo-marketing-about.html" target="_blank">About - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-scattered-portfolio-about.html" target="_blank">About - Scattered</a></li>
|
|||
|
|
<li><a href="demo-medical-about.html" target="_blank">About - Medical</a></li>
|
|||
|
|
<li><a href="demo-web-agency-about.html" target="_blank">About - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-startup-who-we-are.html" target="_blank">About - Startup</a></li>
|
|||
|
|
<li><a href="demo-hotel-and-resort-about-us.html" target="_blank">About - Hotel</a></li>
|
|||
|
|
<li><a href="demo-elearning-about.html" target="_blank">About - eLearning<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Services Pages</li>
|
|||
|
|
<li><a href="demo-accounting-services.html" target="_blank">Services - Accounting</a></li>
|
|||
|
|
<li><a href="demo-marketing-services.html" target="_blank">Services - Marketing</a></li>
|
|||
|
|
<li><a href="demo-branding-agency-services.html" target="_blank">Services - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-minimal-portfolio-expertise.html" target="_blank">Services - Minimal</a></li>
|
|||
|
|
<li><a href="demo-web-agency-expertise.html" target="_blank">Services - Web</a></li>
|
|||
|
|
<li><a href="demo-architecture-services.html" target="_blank">Services - Architecture</a></li>
|
|||
|
|
<li><a href="demo-digital-agency-expertise.html" target="_blank">Services - Digital</a></li>
|
|||
|
|
<li><a href="demo-startup-services.html" target="_blank">Services - Startup</a></li>
|
|||
|
|
<li><a href="demo-scattered-portfolio-expertise.html" target="_blank">Services - Scattered</a></li>
|
|||
|
|
<li><a href="demo-lawyer-practice-areas.html" target="_blank">Services - Lawyer</a></li>
|
|||
|
|
<li><a href="demo-corporate-services.html" target="_blank">Services - Corporate<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-data-analysis-what-we-do.html" target="_blank">Services - Data Analysis</a></li>
|
|||
|
|
<li><a href="demo-marketing-services-details.html" target="_blank">Single – Marketing</a></li>
|
|||
|
|
<li><a href="demo-accounting-services-details.html" target="_blank">Single – Accounting</a></li>
|
|||
|
|
<li><a href="demo-branding-agency-services-detail.html" target="_blank">Single - Branding<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Contact Pages</li>
|
|||
|
|
<li><a href="demo-scattered-portfolio-contact.html" target="_blank">Contact - Scattered</a></li>
|
|||
|
|
<li><a href="demo-branding-agency-contact.html" target="_blank">Contact - Branding<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-photography-contact.html" target="_blank">Contact - Photography</a></li>
|
|||
|
|
<li><a href="demo-hotel-and-resort-contact.html" target="_blank">Contact - Hotel</a></li>
|
|||
|
|
<li><a href="demo-spa-salon-contact.html" target="_blank">Contact - Spa</a></li>
|
|||
|
|
<li><a href="demo-it-business-contact.html" target="_blank">Contact - IT Business<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-architecture-contact.html" target="_blank">Contact - Architecture</a></li>
|
|||
|
|
<li><a href="demo-design-agency-contact.html" target="_blank">Contact - Agency</a></li>
|
|||
|
|
<li><a href="demo-marketing-contact.html" target="_blank">Contact - Marketing</a></li>
|
|||
|
|
<li><a href="demo-horizontal-portfolio-contact.html" target="_blank">Contact - Portfolio</a></li>
|
|||
|
|
<li><a href="demo-accounting-contact.html" target="_blank">Contact - Accounting</a></li>
|
|||
|
|
<li><a href="demo-elearning-contact.html" target="_blank">Contact - eLearning</a></li>
|
|||
|
|
<li><a href="demo-corporate-contact.html" target="_blank">Contact - Corporate</a></li>
|
|||
|
|
<li><a href="demo-real-estate-contact.html" target="_blank">Contact - Real Estate</a></li>
|
|||
|
|
<li><a href="demo-web-agency-contact.html" target="_blank">Contact - Web</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Other Pages</li>
|
|||
|
|
<li><a href="demo-corporate-pricing.html" target="_blank">Pricing - Corporate</a></li>
|
|||
|
|
<li><a href="demo-hosting-pricing.html" target="_blank">Pricing - Hosting</a></li>
|
|||
|
|
<li><a href="demo-data-analysis-pricing.html" target="_blank">Pricing - Data Analysis</a></li>
|
|||
|
|
<li><a href="demo-marketing-pricing.html" target="_blank">Pricing - Marketing<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-consulting-process.html" target="_blank">Process - Consulting</a></li>
|
|||
|
|
<li><a href="demo-accounting-process.html" target="_blank">Process - Accounting</a></li>
|
|||
|
|
<li><a href="demo-startup-clients.html" target="_blank">Clients - Startup</a></li>
|
|||
|
|
<li><a href="demo-business-clients.html" target="_blank">Clients - Business</a></li>
|
|||
|
|
<li><a href="demo-corporate-customer-stories.html" target="_blank">Testimonials - Corporate</a></li>
|
|||
|
|
<li><a href="demo-data-analysis-testimonials.html" target="_blank">Reviews - Data Analysis</a></li>
|
|||
|
|
<li><a href="demo-finance-team.html" target="_blank">Team - Finance</a></li>
|
|||
|
|
<li><a href="demo-marketing-team.html" target="_blank">Team - Marketing</a></li>
|
|||
|
|
<li><a href="demo-web-agency-people.html" target="_blank">Team - Web<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="demo-restaurant-chefs.html" target="_blank">Chefs - Restaurant</a></li>
|
|||
|
|
<li><a href="demo-pizza-parlor-chefs.html" target="_blank">Chefs - Pizza Parlor</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Other Pages</li>
|
|||
|
|
<li><a href="demo-real-estate-agents.html" target="_blank">Agents - Real Estate</a></li>
|
|||
|
|
<li><a href="demo-elearning-instructors.html" target="_blank">Instructors - eLearning</a></li>
|
|||
|
|
<li><a href="demo-hotel-and-resort-amenities.html" target="_blank">Amenities - Hotel</a></li>
|
|||
|
|
<li><a href="demo-medical-timetable.html" target="_blank">Timetable - Medical</a></li>
|
|||
|
|
<li><a href="demo-photography-award.html" target="_blank">Award - Photography</a></li>
|
|||
|
|
<li><a href="demo-decor-store-faq.html" target="_blank">FAQ - Decor Store</a></li>
|
|||
|
|
<li><a href="demo-charity-causes.html" target="_blank">Causes - Charity</a></li>
|
|||
|
|
<li><a href="demo-restaurant-menu.html" target="_blank">Menu - Restaurant</a></li>
|
|||
|
|
<li><a href="demo-hotel-and-resort-bistro.html" target="_blank">Menu - Hotel<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="demo-pizza-parlor-menu.html" target="_blank">Menu - Pizza</a></li>
|
|||
|
|
<li><a href="demo-application-features.html" target="_blank">Features - Application</a></li>
|
|||
|
|
<li><a href="404.html">Error 404</a></li>
|
|||
|
|
<li><a href="search-result.html">Search Results</a></li>
|
|||
|
|
<li><a href="maintenance.html">Maintenance</a></li>
|
|||
|
|
<li><a href="coming-soon.html">Coming Soon</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown simple-dropdown">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Portfolio</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink3" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3">
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Classic<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-classic-two-column.html">Classic 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-classic-three-column.html">Classic 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-classic-four-column.html">Classic 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-classic-masonry.html">Classic Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-classic-metro.html">Classic Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Boxed<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-boxed-two-column.html">Boxed 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-boxed-three-column.html">Boxed 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-boxed-four-column.html">Boxed 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-boxed-masonry.html">Boxed Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-boxed-metro.html">Boxed Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Transform<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-transform-two-column.html">Transform 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-transform-three-column.html">Transform 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-transform-four-column.html">Transform 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-transform-masonry.html">Transform Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-transform-metro.html">Transform Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Creative<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-creative-two-column.html">Creative 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-creative-three-column.html">Creative 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-creative-four-column.html">Creative 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-creative-masonry.html">Creative Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-creative-metro.html">Creative Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Attractive<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-attractive-two-column.html">Attractive 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-attractive-three-column.html">Attractive 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-attractive-four-column.html">Attractive 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-attractive-masonry.html">Attractive Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-attractive-metro.html">Attractive Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Clean<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-clean-two-column.html">Clean 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-clean-three-column.html">Clean 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-clean-four-column.html">Clean 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-clean-masonry.html">Clean Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-clean-metro.html">Clean Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Simple<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-simple-two-column.html">Simple 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-simple-three-column.html">Simple 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-simple-four-column.html">Simple 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-simple-masonry.html">Simple Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-simple-metro.html">Simple Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Modern<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-modern-two-column.html">Modern 2 Column</a></li>
|
|||
|
|
<li><a href="portfolio-modern-three-column.html">Modern 3 Column</a></li>
|
|||
|
|
<li><a href="portfolio-modern-four-column.html">Modern 4 Column</a></li>
|
|||
|
|
<li><a href="portfolio-modern-masonry.html">Modern Masonry</a></li>
|
|||
|
|
<li><a href="portfolio-modern-metro.html">Modern Metro</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Portfolio Other<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="portfolio-slider.html">Portfolio Slider</a></li>
|
|||
|
|
<li><a href="portfolio-parallax.html">Portfolio Parallax</a></li>
|
|||
|
|
<li><a href="portfolio-justified-gallery.html">Justified Gallery</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Single Project<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-digital-agency-single-project-minimal.html" target="_blank">Single - Minimal</a></li>
|
|||
|
|
<li><a href="demo-branding-agency-single-project-slider.html" target="_blank">Single - Slider</a></li>
|
|||
|
|
<li><a href="demo-architecture-single-project-gallery.html" target="_blank">Single - Gallery</a></li>
|
|||
|
|
<li><a href="demo-interactive-portfolio-single-project-modern.html" target="_blank">Single - Modern</a></li>
|
|||
|
|
<li><a href="demo-design-agency-single-project-simple.html" target="_blank">Single - Simple</a></li>
|
|||
|
|
<li><a href="demo-web-agency-single-project-creative.html" target="_blank">Single - Creative</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown submenu">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Elements</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink4" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink4">
|
|||
|
|
<div class="d-lg-flex mega-menu m-auto">
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="element-accordion.html">Accordion</a></li>
|
|||
|
|
<li><a href="element-buttons.html">Button</a></li>
|
|||
|
|
<li><a href="element-team.html">Team</a></li>
|
|||
|
|
<li><a href="element-testimonials.html">Testimonials<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="element-clients.html">Clients</a></li>
|
|||
|
|
<li><a href="element-review.html">Review</a></li>
|
|||
|
|
<li><a href="element-subscribe.html">Subscribe</a></li>
|
|||
|
|
<li><a href="element-call-to-action.html">Call to Action</a></li>
|
|||
|
|
<li><a href="element-tab.html">Tab<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="element-google-map.html">Google Map<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="element-contact-form.html">Contact Form</a></li>
|
|||
|
|
<li><a href="element-columns.html">Columns</a></li>
|
|||
|
|
<li><a href="element-alert-boxes.html">Alert Boxes</a></li>
|
|||
|
|
<li><a href="element-image-gallery.html">Image Gallery</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="element-progress-bar.html">Progress Bar</a></li>
|
|||
|
|
<li><a href="element-process-step.html">Process Step<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="element-icon-with-text.html">Icon with Text<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
<li><a href="element-shape-dividers.html">Shape Dividers</a></li>
|
|||
|
|
<li><a href="element-counters.html">Counters</a></li>
|
|||
|
|
<li><a href="element-countdown.html">Countdown</a></li>
|
|||
|
|
<li><a href="element-fancy-text-box.html">Fancy Text Box</a></li>
|
|||
|
|
<li><a href="element-heading.html">Heading</a></li>
|
|||
|
|
<li><a href="element-dropcaps.html">Dropcaps</a></li>
|
|||
|
|
<li><a href="element-blockquote.html">Blockquote</a></li>
|
|||
|
|
<li><a href="element-highlights.html">Highlights</a></li>
|
|||
|
|
<li><a href="element-lists.html">Lists</a></li>
|
|||
|
|
<li><a href="element-social-icons.html">Social Icons</a></li>
|
|||
|
|
<li><a href="element-pricing-table.html">Pricing Table</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li><a href="element-interactive-banners.html">Interactive Banners</a></li>
|
|||
|
|
<li><a href="element-services-box.html">Services Box</a></li>
|
|||
|
|
<li><a href="element-rotate-box.html">Rotate Box<span class="label bg-solitude-blue text-cornflower-blue border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="element-instagram.html">Instagram</a></li>
|
|||
|
|
<li><a href="element-parallax-scrolling.html">Parallax Scrolling</a></li>
|
|||
|
|
<li><a href="element-sliding-box.html">Sliding Box<span class="label bg-white-ice text-jade border-radius-26px">New</span></a></li>
|
|||
|
|
<li><a href="element-content-carousel.html">Content Carousel</a></li>
|
|||
|
|
<li><a href="element-media.html">Media</a></li>
|
|||
|
|
<li><a href="element-event.html">Event</a></li>
|
|||
|
|
<li><a href="element-dividers.html">Dividers</a></li>
|
|||
|
|
<li><a href="element-horizontal-list-item.html">Horizontal List Item</a></li>
|
|||
|
|
<li><a href="element-banners.html">Banners</a></li>
|
|||
|
|
<li><a href="element-carousel.html">Carousel</a></li>
|
|||
|
|
<li><a href="element-tilt-effect.html">Tilt Effect<span class="label bg-light-red text-red border-radius-26px">Hot</span></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col premium-element cover-background" style="background-image: url('images/premium-elements-bg.jpg')">
|
|||
|
|
<li class="sub-title">Premium Elements</li>
|
|||
|
|
<li><a href="element-adaptive-backgrounds.html">Adaptive Backgrounds</a></li>
|
|||
|
|
<li><a href="element-sticky-column.html">Sticky Column</a></li>
|
|||
|
|
<li><a href="element-3d-parallax-hover.html">3D Parallax Hover</a></li>
|
|||
|
|
<li><a href="demo-restaurant.html" target="_blank">Custom Cursor</a></li>
|
|||
|
|
<li><a href="element-animated-particles.html">Animated Particles</a></li>
|
|||
|
|
<li><a href="element-marquee.html">Marquee</a></li>
|
|||
|
|
<li><a href="element-fancy-heading.html">Fancy Heading</a></li>
|
|||
|
|
<li><a href="element-fancy-images.html">Fancy Images</a></li>
|
|||
|
|
<li><a href="element-scrolling-effects.html">Scrolling Effects</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown simple-dropdown">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Features</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink5" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink5">
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Header<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-business.html" target="_blank">Transparent Header</a></li>
|
|||
|
|
<li><a href="demo-corporate.html" target="_blank">White Header</a></li>
|
|||
|
|
<li><a href="header-dark.html" target="_blank">Dark Header</a></li>
|
|||
|
|
<li><a href="demo-digital-agency.html" target="_blank">Left Navigation</a></li>
|
|||
|
|
<li><a href="demo-branding-agency.html" target="_blank">Right Navigation</a></li>
|
|||
|
|
<li><a href="demo-restaurant.html" target="_blank">Center Navigation</a></li>
|
|||
|
|
<li><a href="demo-data-analysis.html" target="_blank">Header with Top Bar</a></li>
|
|||
|
|
<li><a href="demo-startup.html" target="_blank">Header with Push</a></li>
|
|||
|
|
<li><a href="demo-pizza-parlor.html" target="_blank">Center Logo</a></li>
|
|||
|
|
<li><a href="header-top-logo.html" target="_blank">Top Logo</a></li>
|
|||
|
|
<li><a href="demo-ebook.html" target="_blank">One Page Navigation</a></li>
|
|||
|
|
<li><a href="header-mini.html" target="_blank">Mini Header</a></li>
|
|||
|
|
<li><a href="demo-seo-agency.html" target="_blank">Header with Button</a></li>
|
|||
|
|
<li><a href="demo-marketing.html" target="_blank">Header with Social</a></li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Left Menu<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="header-left-menu-simple.html" target="_blank">Left Menu Simple</a></li>
|
|||
|
|
<li><a href="demo-minimal-portfolio.html" target="_blank">Left Menu Modern</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Hamburger Menu<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-photography.html" target="_blank">Hamburger Simple</a></li>
|
|||
|
|
<li><a href="demo-architecture.html" target="_blank">Hamburger Creative</a></li>
|
|||
|
|
<li><a href="demo-freelancer.html" target="_blank">Hamburger Clean</a></li>
|
|||
|
|
<li><a href="demo-gym-and-fitness.html" target="_blank">Hamburger Modern</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Header Type<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="header-always-fixed.html" target="_blank">Always Fixed</a></li>
|
|||
|
|
<li><a href="demo-application.html" target="_blank">Disable Fixed</a></li>
|
|||
|
|
<li><a href="demo-seo-agency.html" target="_blank">Reverse Auto</a></li>
|
|||
|
|
<li><a href="demo-elder-care.html" target="_blank">Reverse Back Scroll</a></li>
|
|||
|
|
<li><a href="demo-accounting.html" target="_blank">Responsive Sticky</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Mobile Menu<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-startup.html" target="_blank">Classic</a></li>
|
|||
|
|
<li><a href="demo-yoga-and-meditation.html" target="_blank">Modern</a></li>
|
|||
|
|
<li><a href="demo-scattered-portfolio.html" target="_blank">Full Screen</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Lightbox & Modal<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="modal-simple.html">Simple Modal</a></li>
|
|||
|
|
<li><a href="modal-subscription.html">Subscription</a></li>
|
|||
|
|
<li><a href="modal-contact-form.html">Contact Form</a></li>
|
|||
|
|
<li><a href="modal-youtube-video.html">Youtube Video</a></li>
|
|||
|
|
<li><a href="modal-vimeo-video.html">Vimeo Video</a></li>
|
|||
|
|
<li><a href="modal-google-map.html">Google Map</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Icon Packs<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="icon-packs-icons-mind-line.html">Icons Mind Line</a></li>
|
|||
|
|
<li><a href="icon-packs-feather.html">Feather</a></li>
|
|||
|
|
<li><a href="icon-packs-font-awesome.html">Font Awesome</a></li>
|
|||
|
|
<li><a href="icon-packs-themify.html">Themify</a></li>
|
|||
|
|
<li><a href="icon-packs-bootstrap.html">Bootstrap</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Sliders<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-architecture.html" target="_blank">Revolution</a></li>
|
|||
|
|
<li><a href="demo-startup.html" target="_blank">Swiper</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="animations.html">Animations</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="demo-minimal-portfolio.html" target="_blank">Page Preloader</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="demo-jewellery-store.html" target="_blank">Cookie Notify</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="demo-startup.html" target="_blank">Back to Top</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="demo-design-agency.html" target="_blank">Sticky Footer</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown simple-dropdown">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Blog</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink6" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink6">
|
|||
|
|
<li class="dropdown"><a href="blog-grid.html">Blog Grid</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-classic.html">Blog Classic</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-metro.html">Blog Metro</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-masonry.html">Blog Masonry</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-simple.html">Blog Simple</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-date.html">Blog Date</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-only-text.html">Blog Only Text</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-side-image.html">Blog Side Image</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-modern.html">Blog Modern</a></li>
|
|||
|
|
<li class="dropdown"><a href="blog-standard.html">Blog Standard</a></li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Single Post<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="demo-business-blog-single-modern.html" target="_blank">Single - Modern</a></li>
|
|||
|
|
<li><a href="demo-elearning-blog-single-simple.html" target="_blank">Single - Simple</a></li>
|
|||
|
|
<li><a href="demo-web-agency-blog-single-creative.html" target="_blank">Single - Creative</a></li>
|
|||
|
|
<li><a href="demo-blogger-blog-single-classic.html" target="_blank">Single - Classic</a></li>
|
|||
|
|
<li><a href="demo-architecture-blog-single-clean.html" target="_blank">Single - Clean</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="dropdown">
|
|||
|
|
<a href="javascript:void(0);">Post Type<i class="fa-solid fa-angle-right"></i></a>
|
|||
|
|
<ul class="dropdown-menu">
|
|||
|
|
<li><a href="blog-post-type-standard.html">Post - Standard</a></li>
|
|||
|
|
<li><a href="blog-post-type-gallery.html">Post - Gallery</a></li>
|
|||
|
|
<li><a href="blog-post-type-slider.html">Post - Slider</a></li>
|
|||
|
|
<li><a href="blog-post-type-audio.html">Post - Audio</a></li>
|
|||
|
|
<li><a href="blog-post-type-video.html">Post - Video</a></li>
|
|||
|
|
<li><a href="blog-post-type-blockquote.html">Post - Blockquote</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item dropdown submenu">
|
|||
|
|
<a href="javascript:void(0);" class="nav-link">Shop</a>
|
|||
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink7" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|||
|
|
<div class="dropdown-menu submenu-content" aria-labelledby="navbarDropdownMenuLink7">
|
|||
|
|
<div class="d-lg-flex mega-menu m-auto">
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Shop Layout</li>
|
|||
|
|
<li><a href="demo-fashion-store-shop.html" target="_blank">Left Sidebar</a></li>
|
|||
|
|
<li><a href="demo-fashion-store-right-sidebar.html" target="_blank">Right Sidebar</a></li>
|
|||
|
|
<li><a href="demo-fashion-store-no-sidebar.html" target="_blank">No Sidebar</a></li>
|
|||
|
|
<li><a href="demo-decor-store-collections.html" target="_blank">Collections - Style 01</a></li>
|
|||
|
|
<li><a href="demo-jewellery-store-categories.html" target="_blank">Collections - Style 02</a></li>
|
|||
|
|
<li><a href="demo-fashion-store-collection.html" target="_blank">Collections - Style 03</a></li>
|
|||
|
|
<li><a href="demo-fashion-store-single-product.html" target="_blank">Single Product - Thumb Left</a></li>
|
|||
|
|
<li><a href="demo-decor-store-single-product.html" target="_blank">Single Product - Thumb Bottom</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title">Utility Pages</li>
|
|||
|
|
<li><a href="demo-decor-store-cart.html" target="_blank">Shopping Cart</a></li>
|
|||
|
|
<li><a href="demo-decor-store-checkout.html" target="_blank">Checkout</a></li>
|
|||
|
|
<li><a href="demo-decor-store-account.html" target="_blank">Login / Register</a></li>
|
|||
|
|
<li><a href="demo-decor-store-faq.html" target="_blank">Help Center</a></li>
|
|||
|
|
<li><a href="demo-fashion-store-wishlist.html" target="_blank">Wishlist</a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-02.jpg" alt /></a></li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="col">
|
|||
|
|
<li class="sub-title"><a href="index.html" target="_blank" class="p-0"><img src="images/banner-01.jpg" alt /></a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-lg-2 text-end xs-pe-0">
|
|||
|
|
<div class="header-icon">
|
|||
|
|
<div class="header-button">
|
|||
|
|
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray btn-small btn-switch-text btn-rounded text-transform-none btn-box-shadow purchase-envato">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="ipad-top-space-margin md-pt-0">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row align-items-center justify-content-center">
|
|||
|
|
<div class="col-12 col-xl-6 col-lg-8 text-center position-relative page-title-double-large">
|
|||
|
|
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
|
|||
|
|
<h1 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Carousel</h1>
|
|||
|
|
<h2 class="text-dark-gray d-inline-block fw-400 ls-0px mb-0">With carousel element display images or content in a rotating slideshow, enhancing visual appeal and engagement on websites.</h2>
|
|||
|
|
</div>
|
|||
|
|
<div class="mt-auto justify-content-center breadcrumb breadcrumb-style-01 fs-14 text-dark-gray">
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="index.html" class="text-dark-gray text-dark-gray-hover">Home</a></li>
|
|||
|
|
<li><a href="element-carousel.html#" class="text-dark-gray text-dark-gray-hover">Elements</a></li>
|
|||
|
|
<li>Carousel</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="pt-0 overflow-hidden">
|
|||
|
|
<div class="container-fluid p-0">
|
|||
|
|
<div class="row align-items-center g-0">
|
|||
|
|
<div class="col-12 position-relative swiper-dark-pagination magic-cursor drag-cursor" data-anime="{ "translateX": [150, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="swiper overflow-visible" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 40, "centeredSlides": "true", "loop": true, "pagination": { "el": ".swiper-pagination-bullets-01", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1.8 }, "768": { "slidesPerView": 1.8 }, "320": { "slidesPerView": 1.3 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="border-radius-6px w-100" src="images/demo-vertical-portfolio-slider-img-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="border-radius-6px w-100" src="images/demo-vertical-portfolio-slider-img-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="border-radius-6px w-100" src="images/demo-vertical-portfolio-slider-img-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="border-radius-6px w-100" src="images/demo-vertical-portfolio-slider-img-04.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="border-radius-6px w-100" src="images/demo-vertical-portfolio-slider-img-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-01 swiper-pagination-bullets-01 position-static mt-40px"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="overflow-hidden big-section bg-gradient-very-light-gray">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row mb-5">
|
|||
|
|
<div class="col-xxl-6 col-lg-7" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div>
|
|||
|
|
<h2 class="fw-600 text-dark-gray ls-minus-2px">We are committed to deliver unique digital media solutions.</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-5 offset-xxl-1" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="sm-mb-30px last-paragraph-no-margin">
|
|||
|
|
<span class="d-inline-block fs-15 text-uppercase fw-700 text-black mb-5px">We drive positive change.</span>
|
|||
|
|
<p>Create impactful experience story. We are excited for our work and how it positively impacts clients. With over 12 years of experience we have been constantly providing excellent web solutions services.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12 position-relative">
|
|||
|
|
<div class="outside-box-right-25 xs-outside-box-right-0">
|
|||
|
|
<div class="swiper swiper-width-auto magic-cursor drag-cursor" data-slider-options="{ "slidesPerView": "auto", "spaceBetween": 30, "loop": true, "autoplay": { "delay": 2000, "disableOnInteraction": false }, "pagination": { "el": ".swiper-pagination-bullets-02", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-01", "prevEl": ".slider-one-slide-prev-01" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "spaceBetween": 80 }, "992": { "spaceBetween": 50 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-02.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide mt-60px sm-mt-0">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-03.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-04.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide mt-60px sm-mt-0">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-05.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-02.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide mt-60px sm-mt-0">
|
|||
|
|
<img src="images/demo-scattered-portfolio-about-03.jpg" class="md-h-400px sm-h-250px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="big-section bg-dark-gray">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-2">
|
|||
|
|
<div class="col-xxl-5 col-xl-6 col-lg-8 col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-white ls-minus-1px md-ls-0px">Carousel loop</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center">
|
|||
|
|
<div class="col-12 position-relative swiper-light-pagination">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 1600, "disableOnInteraction": false }, "pagination": { "el": ".swiper-pagination-bullets-03", "clickable": true, "dynamicBullets": false }, "navigation": { "nextEl": ".slider-one-slide-next-02", "prevEl": ".slider-one-slide-prev-02" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "480": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img class="w-100" src="images/demo-architecture-about-08.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-02 bg-transparent border border-2 border-color-transparent-white-very-light h-50px w-50px swiper-button-prev slider-navigation-style-03"><i class="fa-solid fa-arrow-left text-white"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-02 bg-transparent border border-2 border-color-transparent-white-very-light h-50px w-50px swiper-button-next slider-navigation-style-03"><i class="fa-solid fa-arrow-right text-white"></i></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-bullets-03 swiper-pagination-style-01 swiper-pagination-clickable swiper-pagination-bullets position-static mt-40px sm-mt-25px"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row justify-content-center mb-2">
|
|||
|
|
<div class="col-xxl-5 col-xl-6 col-lg-8 col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Carousel auto width</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row position-relative">
|
|||
|
|
<div class="col-md-12 p-sm-0" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="swiper swiper-width-auto magic-cursor" data-slider-options="{ "slidesPerView": "auto", "spaceBetween": 30, "loop": true, "pagination": { "el": ".swiper-pagination-bullets-09", "clickable": true }, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper image-gallery-style-01">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-02.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-02.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-03.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-03.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-04.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-04.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-05.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-05.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-06.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-06.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-07.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-07.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-03.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-03.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-yoga-and-meditation-gallery-04.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-yoga-and-meditation-gallery-04.jpg" class="md-h-350px sm-h-250px" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-75px h-75px rounded-circle bg-white">
|
|||
|
|
<i class="feather icon-feather-search text-dark-gray icon-extra-medium"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row text-center mb-3">
|
|||
|
|
<h3 class="fw-600 text-dark-gray">Navigation arrows</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-03", "prevEl": ".slider-one-slide-prev-03" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-08.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-03 swiper-button-prev w-150px sm-w-100px text-white slider-navigation-style-02"><i class="line-icon-Arrow-OutLeft icon-large"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-03 swiper-button-next w-150px sm-w-100px text-white slider-navigation-style-02"><i class="line-icon-Arrow-OutRight icon-large"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-04", "prevEl": ".slider-one-slide-prev-04" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-04 text-white w-100px sm-w-70px swiper-button-prev slider-navigation-style-02"><i class="fa-solid fa-arrow-left icon-small"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-04 text-white w-100px sm-w-70px swiper-button-next slider-navigation-style-02"><i class="fa-solid fa-arrow-right icon-small"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-05", "prevEl": ".slider-one-slide-prev-05" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-05 swiper-button-prev w-100px text-white slider-navigation-style-02"><i class="bi bi-caret-left-fill icon-very-medium"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-05 swiper-button-next w-100px text-white slider-navigation-style-02"><i class="bi bi-caret-right-fill icon-very-medium"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-06", "prevEl": ".slider-one-slide-prev-06" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-06 text-white w-100px swiper-button-prev slider-navigation-style-02"><i class="fa-solid fa-angle-left icon-extra-medium"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-06 text-white w-100px swiper-button-next slider-navigation-style-02"><i class="fa-solid fa-angle-right icon-extra-medium"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-3">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Navigation shapes, sizes and filling</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-08", "prevEl": ".slider-one-slide-prev-08" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-08.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-08 swiper-button-prev bg-white-transparent-very-light text-white h-50px w-50px slider-navigation-style-01"><i class="fa-solid fa-angle-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-08 swiper-button-next bg-white-transparent-very-light text-white h-50px w-50px slider-navigation-style-01"><i class="fa-solid fa-angle-right"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-07", "prevEl": ".slider-one-slide-prev-07" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-07 swiper-button-prev bg-white h-60px w-60px slider-navigation-style-02"><i class="fa-solid fa-arrow-left icon-small"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-07 swiper-button-next bg-white h-60px w-60px slider-navigation-style-02"><i class="fa-solid fa-arrow-right icon-small"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-06", "prevEl": ".slider-one-slide-prev-06" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-06 swiper-button-prev bg-transparent border border-2 border-color-transparent-white-very-light text-white h-60px w-60px slider-navigation-style-01"><i class="fa-solid fa-angle-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-06 swiper-button-next bg-transparent border border-2 border-color-transparent-white-very-light text-white h-60px w-60px slider-navigation-style-01"><i class="fa-solid fa-angle-right"></i></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-3">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Navigation positioning</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-50px sm-mb-40px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "navigation": { "nextEl": ".slider-one-slide-next-10", "prevEl": ".slider-one-slide-prev-10" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex mt-20px">
|
|||
|
|
<div class="slider-one-slide-prev-10 swiper-button-prev bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-10 swiper-button-next bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-right"></i></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-50px sm-mb-40px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "navigation": { "nextEl": ".slider-one-slide-next-11", "prevEl": ".slider-one-slide-prev-11" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-08.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex justify-content-center mt-20px">
|
|||
|
|
<div class="slider-one-slide-prev-11 swiper-button-prev bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-11 swiper-button-next bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-right"></i></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-50px sm-mb-40px">
|
|||
|
|
<div class="swiper" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "navigation": { "nextEl": ".slider-one-slide-next-12", "prevEl": ".slider-one-slide-prev-12" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-05.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex justify-content-between mt-20px">
|
|||
|
|
<div class="slider-one-slide-prev-12 swiper-button-prev bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-12 swiper-button-next bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-right"></i></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper magic-cursor drag-cursor" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "navigation": { "nextEl": ".slider-one-slide-next-13", "prevEl": ".slider-one-slide-prev-13" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-07.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-interactive-portfolio-slider-06.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex justify-content-end mt-20px">
|
|||
|
|
<div class="slider-one-slide-prev-13 swiper-button-prev bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-left"></i></div>
|
|||
|
|
<div class="slider-one-slide-next-13 swiper-button-next bg-extra-medium-gray slider-navigation-style-04"><i class="fa-solid fa-arrow-right"></i></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-3">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Dots styles</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "pagination": { "el": ".swiper-pagination-bullets-04", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-1 swiper-pagination-bullets-04"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "pagination": { "el": ".swiper-pagination-bullets-05", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-2 swiper-pagination-bullets-05"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "pagination": { "el": ".swiper-pagination-bullets-06", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-3 swiper-pagination-bullets-06"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-3">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Dots positioning</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "pagination": { "el": ".swiper-pagination-bullets-07", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-1 swiper-pagination-bullets-07"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": false, "pagination": { "el": ".swiper-pagination-bullets-08", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-spa-salon-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-style-1 swiper-pagination-bullets-right swiper-pagination-vertical swiper-pagination-bullets-08"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-3">
|
|||
|
|
<div class="col-md-10 text-center">
|
|||
|
|
<h3 class="fw-600 text-dark-gray ls-minus-1px md-ls-0px">Numbers Indicator</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-number-pagination-style-02 light" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "pagination": { "el": ".swiper-number", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }" data-number-pagination="1">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination container swiper-pagination-clickable swiper-pagination-bullets-right swiper-number"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-number-pagination-style-01" data-slider-options="{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-number", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 5000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "fade" }" data-number-pagination="1" data-anime-text="{ "translateY": [50,0], "opacity": [0,1], "easing": "easeOutQuad", "duration": 500, "delay": { "staggervalue": 20 } }">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination container right-0px text-center swiper-pagination-clickable swiper-number fs-14 xs-w-100"></div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12 mb-40px sm-mb-30px">
|
|||
|
|
<div class="swiper swiper-number-pagination-progress" data-slider-options="{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-number-line-pagination", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "stopOnLastSlide": true, "disableOnInteraction": false },"keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "fade" }" data-swiper-number-pagination-progress="true">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets d-block d-sm-none"></div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination-wrapper d-flex align-items-center justify-content-center mt-25px">
|
|||
|
|
<div class="number-prev fs-14 fw-600 text-dark-gray"></div>
|
|||
|
|
<div class="swiper-pagination-progress bg-extra-medium-gray">
|
|||
|
|
<span class="swiper-progress"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="number-next fs-14 fw-600 text-dark-gray"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="swiper swiper-number-navigation-style" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "pagination": { "el": ".swiper-pagination", "clickable": true }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next", "prevEl": ".slider-four-slide-prev" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }" data-swiper-number-navigation="true" data-swiper-show-progress="true">
|
|||
|
|
<div class="swiper-wrapper align-items-center">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-02.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-01.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide border-radius-6px overflow-hidden">
|
|||
|
|
<img src="images/demo-architecture-rev-slider-03.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-navigation-wrapper d-flex align-items-center justify-content-center mt-25px">
|
|||
|
|
<div class="swiper-button-previous-nav swiper-button-prev slider-four-slide-prev"><i class="feather icon-feather-arrow-left icon-small text-dark-gray"></i><div class="number-prev fs-14 fw-500"></div></div>
|
|||
|
|
<div class="swiper-pagination-progress w-200px xs-w-150px bg-medium-gray-transparent"><span class="swiper-progress"></span></div>
|
|||
|
|
<div class="swiper-button-next-nav swiper-button-next slider-four-slide-next"><div class="number-next fs-14 fw-500"></div><i class="feather icon-feather-arrow-right icon-small text-dark-gray"></i></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer class="footer-demo bg-dark-slate-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-footer-pattern.svg')">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row mb-6 md-mb-30px">
|
|||
|
|
<div class="col-xl-5 col-lg-6 md-mb-30px text-center text-lg-start">
|
|||
|
|
<h3 class="text-white fw-600 alt-font mb-40px ls-minus-1px md-mb-30px md-w-60 sm-w-70 xs-w-100 md-mx-auto">Craft a standout website with crafto.</h3>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-5 col-sm-6 xs-mb-20px">
|
|||
|
|
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Presale questions</span>
|
|||
|
|
<a href="cdn-cgi/l/email-protection.html#5f363139301f2b373a323a253e3e713c3032"><span class="__cf_email__" data-cfemail="e0898e868fa09488858d859a8181ce838f8d">[email protected]</span></a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-5 col-sm-6">
|
|||
|
|
<span class="alt-font fs-14 fw-600 text-uppercase d-block text-white ls-1px lh-18">Getting started</span>
|
|||
|
|
<a href="https://1.envato.market/R53mL2" target="_blank">Purchase on Envato</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-2 col-6 offset-xl-1 text-center text-lg-start">
|
|||
|
|
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Useful links</span>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="documentation/index.html" target="_blank">Documentation</a></li>
|
|||
|
|
<li><a href="https://www.themezaa.com/support/" target="_blank">Support center</a></li>
|
|||
|
|
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Video tutorials</a></li>
|
|||
|
|
<li><a href="https://themeforest.net/user/themezaa/portfolio" target="_blank">Envato portfolio</a></li>
|
|||
|
|
<li><a href="https://www.themezaa.com/theme-customization/" target="_blank">Customization</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-2 col-6 text-center text-lg-start">
|
|||
|
|
<span class="alt-font fs-14 fw-600 text-uppercase text-white ls-1px d-block mb-5px">Follow Us</span>
|
|||
|
|
<ul>
|
|||
|
|
<li><a href="https://www.facebook.com/themezaastudio/" target="_blank">Facebook</a></li>
|
|||
|
|
<li><a href="https://www.twitter.com/themezaa" target="_blank">Twitter</a></li>
|
|||
|
|
<li><a href="https://www.dribbble.com/linksture" target="_blank">Dribbble</a></li>
|
|||
|
|
<li><a href="https://www.youtube.com/channel/UCxIgqIkSGVVqEsm-HE-tadQ/" target="_blank">Youtube</a></li>
|
|||
|
|
<li><a href="https://www.linkedin.com/company/themezaa/" target="_blank">Linkedin</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-2 order-first order-lg-4 text-center text-lg-start md-mb-20px">
|
|||
|
|
<a href="index.html" class="footer-logo"><img src="images/logo-white-demo.png" data-at2x="images/logo-white-demo@2x.png" alt></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-7 last-paragraph-no-margin text-center text-lg-start">
|
|||
|
|
<p class="fs-13 lh-22 w-90 md-w-100">ThemeZaa - The best WordPress, Shopify and Magento themes and plugins provider. We design and develop quality themes and plugins to create your awesome website.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-5 text-center text-lg-end md-mt-15px last-paragraph-no-margin">
|
|||
|
|
<p class="fs-13 lh-22">© 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|