1971 lines
178 KiB
HTML
1971 lines
178 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="viewport" content="width=device-width,initial-scale=1.0" />
|
||
<meta name="author" content="ThemeZaa">
|
||
<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.">
|
||
<meta name="keywords" content="creative, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, agency, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, personal, masonry, grid, coming soon, faq">
|
||
<meta name="google-site-verification" content="2dSTuIw2NMm1q1Fz3adQgC-8BJVYon-SWejmJK5KbEQ" />
|
||
<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" />
|
||
<link rel="stylesheet" href="demos/landing-page/landing-page.css" />
|
||
</head>
|
||
<body class="landing-page" data-mobile-nav-style="classic">
|
||
<header>
|
||
<nav class="navbar navbar-expand-lg header-dark header-transparent disable-fixed header-demo" data-header-hover="dark">
|
||
<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-white.png" data-at2x="images/logo-white@2x.png" alt class="default-logo"> <img src="images/logo-white.png" data-at2x="images/logo-white@2x.png" alt class="alt-logo"> <img src="images/logo-white.png" data-at2x="images/logo-white@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 (52+)</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-dark-landing.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 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#" class="p-0"><img src="images/banner-02-dark-landing.jpg" alt /></a></li>
|
||
</ul>
|
||
<ul class="col">
|
||
<li class="sub-title"><a href="index.html#" class="p-0"><img src="images/banner-01-dark-landing.jpg" alt /></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</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-dark.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="index.html#features" class="nav-link section-link">Features</a> </li>
|
||
<li class="nav-item dropdown simple-dropdown"> <a href="javascript:void(0);" class="nav-link">Help</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="documentation/index.html" target="_blank">Documentation</a></li>
|
||
<li class="dropdown"><a href="https://www.themezaa.com/support/" target="_blank">Submit a Ticket</a></li>
|
||
<li class="dropdown"><a href="https://www.themezaa.com/theme-customization/" target="_blank">Customization</a></li>
|
||
<li class="dropdown"><a href="cdn-cgi/l/email-protection.html#0861666e67487c606d656d726969266b6765">Pre-sale Question</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end lg-ps-0 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 fw-500 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><i class="feather icon-feather-shopping-cart"></i></span> </span> </a> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
<section class="full-screen ipad-top-space-margin md-h-850px" data-parallax-background-ratio="0.8" style="background-image: url('images/crafto-landing-page-hero-section-img.png');">
|
||
<div class="container h-100 position-relative">
|
||
<div class="row align-items-start justify-content-center h-100 text-center">
|
||
<div class="col-xl-10 col-lg-12 position-relative z-index-2">
|
||
<div class="mb-minus-100px lg-mb-minus-80px position-relative z-index-minus-1 text-gradient-dark-blue-dark-black alt-font top-0px fs-250 lg-fs-200 sm-fs-180 xs-fs-140 fw-800 ls-minus-5px w-80 mx-auto sm-w-100">500<span class="vertical-align-text-top">+</span>
|
||
<div class="position-absolute top-minus-40px right-150px me-5"> <img src="images/crafto-landing-page-img-01.png" data-bottom-top="transform: rotate(0) translateY(40px)" data-top-bottom="transform:rotate(0) translateY(-40px)" alt /> </div>
|
||
</div>
|
||
<h2 class="fw-500 ls-minus-1px mb-20px text-white w-80 xl-w-90 md-w-100 mx-auto">Powering your business with ready-made templates.</h2>
|
||
<div class="fs-21 lh-32 w-65 lg-w-90 mx-auto">You can create your website in minutes with the help of countless amazing powerful features of Crafto.</div>
|
||
<div class="mt-35px position-relative z-index-9"> <a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="btn btn-white fw-700 btn-extra-large btn-rounded btn-switch-text ls-0px popup-youtube btn-box-shadow mb-0 xs-mb-20px me-15px"> <span> <span class="btn-double-text" data-text="Explore Crafto">Explore Crafto</span> <span><i class="bi bi-play-circle-fill"></i></span> </span> </a> <a href="index.html#demo" class="btn btn-transparent-light-gray border-1 btn-extra-large btn-rounded fw-500 ls-0px btn-switch-text mb-0 xs-mb-20px section-link"> <span> <span class="btn-double-text" data-text="Pre-built websites">Pre-built websites</span> </span> </a> </div>
|
||
<div class="position-absolute bottom-0px z-index-2"><img src="images/crafto-landing-page-img-02.png" data-bottom-top="transform: rotate(0) translateY(50px)" data-top-bottom="transform:rotate(0) translateY(-50px)" alt /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="images/crafto-landing-page-hero-section-seal.png" class="position-absolute top-45 left-100px lg-left-0px z-index-1 animation-float d-lg-block d-none" alt data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
|
||
<div class="position-absolute bottom-0 h-100 left-0px w-100 full-screen z-index-minus-1 cover-background bg-dark-gray" style="background-image: url('images/crafto-landing-page-hero-section-bg.jpg')"> </div>
|
||
</section>
|
||
<section class="position-relative bg-very-light-gray overflow-hidden pb-0">
|
||
<div class="p-0 position-absolute right-minus-50px text-end"> <img src="images/crafto-landing-page-bg-01.png" class="lg-w-80" alt> </div>
|
||
<div class="position-absolute left-minus-50px bottom-minus-50px"> <img src="images/crafto-landing-page-bg-02.png" class="lg-w-80" alt> </div>
|
||
<div class="container position-relative">
|
||
<div class="row align-items-center justify-content-center text-center mb-6 sm-mb-30px">
|
||
<div class="col-xl-10" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }"> <span class="alt-font d-inline-flex align-items-center bg-gradient-dark-green-light-green fs-14 sm-fs-12 sm-lh-12 fw-600 pt-10px pb-10px ps-30px pe-30px sm-ps-15px sm-pe-15px mb-20px text-white border-radius-100px text-uppercase">
|
||
<svg class="me-5px" width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g clip-path="url(#clip0_44_3)">
|
||
<path d="M14.9485 0.449157C14.3812 0.133854 12.7565 0.32937 10.8041 0.933816C7.38806 3.26899 4.50351 6.70979 4.30249 12.2352C4.26669 12.3674 3.92935 12.2159 3.86189 12.176C2.93938 10.4081 2.57313 8.54654 3.34418 5.86026C3.48738 5.62068 3.01786 5.32603 2.93387 5.41002C2.7659 5.578 2.06094 6.32977 1.59142 7.14075C-0.729987 11.1653 0.788705 16.3245 4.84911 18.5825C5.81455 19.12 6.87642 19.4621 7.97407 19.5892C9.07172 19.7163 10.1837 19.626 11.2464 19.3233C12.3091 19.0207 13.3018 18.5117 14.1679 17.8254C15.0339 17.1391 15.7562 16.289 16.2937 15.3235C18.9097 10.6394 16.4809 1.30557 14.9485 0.449157Z" fill="white" />
|
||
</g>
|
||
<defs>
|
||
<clipPath id="clip0_44_3">
|
||
<rect width="18" height="20" fill="white" />
|
||
</clipPath>
|
||
</defs>
|
||
</svg>
|
||
Created by Envato power elite author</span>
|
||
<h2 class="alt-font fw-700 text-dark-gray ls-minus-2px mb-0">Crafted with exclusive features</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center mb-6 md-mb-50px" data-anime="{ "el": "childs", "translateY": [0, 0], "perspective": [1000,1200], "scale": [1.1, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col md-mb-30px">
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover border border-2 border-color-white border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-exclusive components.jpg" class="w-100" alt>
|
||
<div class="pb-50px ps-15px pe-15px bg-very-light-gray last-paragraph-no-margin text-center"> <span class="d-inline-block text-dark-gray fs-20 fw-600 mb-10px">Exclusive components</span>
|
||
<p class="mx-auto w-80 xl-w-90 lg-w-90 md-w-100">Crafto includes well designed components which always gives you best results as you wanted.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col md-mb-30px">
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover border border-2 border-color-white border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-bootstrap-5-x-framework.jpg" class="w-100" alt>
|
||
<div class="pb-50px ps-15px pe-15px bg-very-light-gray last-paragraph-no-margin text-center"> <span class="d-inline-block text-dark-gray fs-20 fw-600 mb-10px">Bootstrap 5.x framework</span>
|
||
<p class="mx-auto w-80 xl-w-90 lg-w-80 md-w-100">The world's favored front-end open-source toolkit for crafting responsive websites.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col">
|
||
<div class="box-shadow-quadruple-large box-shadow-quadruple-large-hover border border-2 border-color-white border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-crafting-code-excellence.jpg" class="w-100" alt>
|
||
<div class="pb-50px ps-15px pe-15px bg-very-light-gray last-paragraph-no-margin text-center"> <span class="d-inline-block text-dark-gray fs-20 fw-600 mb-10px">Crafting code excellence</span>
|
||
<p class="mx-auto w-90 xl-w-100 lg-w-90 md-w-100">Featuring optimized, well-structured, and easily to use and customize code, setting industry standards.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row counter-style-04 justify-content-center mb-5 md-mb-50px" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
||
<div class="col-lg-3 col-sm-4 col-6 text-center md-mb-30px">
|
||
<div class="feature-box-content">
|
||
<h3 class="vertical-counter d-inline-flex text-dark-gray ls-minus-1px fw-600 mb-0" data-text="+" data-to="51500"></h3>
|
||
<span class="d-block text-dark-gray fs-17 lh-26 fw-500">Happy users</span> </div>
|
||
</div>
|
||
<div class="col-lg-2 col-sm-4 col-6 text-center md-mb-30px">
|
||
<div class="feature-box-content">
|
||
<h3 class="vertical-counter d-inline-flex text-dark-gray ls-minus-1px fw-600 mb-0" data-text="+" data-to="52"></h3>
|
||
<span class="d-block text-dark-gray fs-17 lh-26 fw-500">Websites</span> </div>
|
||
</div>
|
||
<div class="col-lg-2 col-sm-4 col-6 text-center md-mb-30px">
|
||
<div class="feature-box-content">
|
||
<h3 class="vertical-counter d-inline-flex text-dark-gray ls-minus-1px fw-600 mb-0" data-text="+" data-to="540"></h3>
|
||
<span class="d-block text-dark-gray fs-17 lh-26 fw-500">Templates</span> </div>
|
||
</div>
|
||
<div class="col-lg-2 col-sm-4 col-6 text-center">
|
||
<div class="feature-box-content">
|
||
<h3 class="vertical-counter d-inline-flex text-dark-gray ls-minus-1px fw-600 mb-0" data-text="+" data-to="300"></h3>
|
||
<span class="d-block text-dark-gray fs-17 lh-26 fw-500">Elements</span> </div>
|
||
</div>
|
||
<div class="col-lg-3 col-sm-4 col-6 text-center">
|
||
<div class="feature-box-content">
|
||
<h3 class="vertical-counter d-inline-flex text-dark-gray ls-minus-1px fw-600 mb-0" data-text="+" data-to="1450"></h3>
|
||
<span class="d-block text-dark-gray fs-17 lh-26 fw-500">Sections</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center text-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-01.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-02.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-03.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-04.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-05.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3 md-mb-30px"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-06.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-07.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-08.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-09.png" alt></a></div>
|
||
<div class="col-lg-auto col-sm-2 col-3"><a href="index.html#" target="_blank"><img src="images/crafto-landing-page-features-ico-10.png" alt></a></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="demo" class="bg-gradient-top-very-light-gray half-section pb-0">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center h-100 text-center mb-7" data-anime="{"translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-xl-10 position-relative">
|
||
<div class="position-absolute top-50px xxl-top-20px left-40px d-none d-lg-block"><img src="images/crafto-landing-page-img-03.png" class="animation-float" alt /></div>
|
||
<div class="position-absolute top-90px xxl-top-20px right-10px d-none d-lg-block"><img src="images/crafto-landing-page-img-04.png" alt /></div>
|
||
<div class="mb-minus-100px md-mb-minus-50px text-gradient-light-gray-white alt-font fs-400 xxl-fs-300 md-fs-200 sm-fs-150 fw-800 ls-minus-8px">50+</div>
|
||
<h2 class="alt-font fw-700 text-dark-gray mb-0 ls-minus-2px">Pre-built website demos</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container-fluid demo">
|
||
<div class="row ps-3 pe-3 xxl-ps-3 xxl-pe-3 md-pe-0 md-ps-0">
|
||
<div class="col-12 sm-p-0">
|
||
<ul class="portfolio-wrapper grid-loading grid grid-3col xxl-grid-3col xl-grid-2col lg-grid-2col md-grid-2col sm-grid-1col xs-grid-1col gutter-double-extra-large">
|
||
<li class="grid-sizer"></li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-corporate.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-corporate.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Corporate</span>
|
||
<p class="fs-15 lh-26 mb-0">Company, Business, Consulting</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-restaurant.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-restaurant.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Restaurant</span>
|
||
<p class="fs-15 lh-26 mb-0">Food, Dining, Cafe, Meals</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-branding-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-branding-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Branding agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Design studio, Identity, Agency</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-elearning.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-elearning.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">eLearning</span>
|
||
<p class="fs-15 lh-26 mb-0">Tutoring, Education, Online course</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-it-business.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-it-business.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">IT Business</span>
|
||
<p class="fs-15 lh-26 mb-0">Business, Agency, IT solutions</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-data-analysis.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-data-analysis.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Data analysis</span>
|
||
<p class="fs-15 lh-26 mb-0">Data security, IT solutions, Software</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-hotel-and-resort.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-hotel-and-resort.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Hotel resort</span>
|
||
<p class="fs-15 lh-26 mb-0">Holiday homes, Accommodation</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-scattered-portfolio.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-scattered-portfolio.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Scattered portfolio</span>
|
||
<p class="fs-15 lh-26 mb-0">Photography, Personal, Freelancers</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-beauty-salon.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-beauty-salon.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Beauty salon</span>
|
||
<p class="fs-15 lh-26 mb-0">Spa center, Skin care, Nail salon</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-product-showcase.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-product.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Product showcase</span>
|
||
<p class="fs-15 lh-26 mb-0">Single product, One page, Promotion</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-medical.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-medical.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Medical</span>
|
||
<p class="fs-15 lh-26 mb-0">Clinic, Healthcare, Wellness</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-marketing.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-marketing.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Marketing</span>
|
||
<p class="fs-15 lh-26 mb-0">Digital, Advertising, Publishing</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-gym-and-fitness.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-gym-and-fitness.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Gym & fitness</span>
|
||
<p class="fs-15 lh-26 mb-0"> Body building, Yoga, Sports</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-design-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-design-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Design agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Creative studio, Web, Portfolio</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-accounting.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-accounting.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Accounting</span>
|
||
<p class="fs-15 lh-26 mb-0">Consulting, Financial, Insurance</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-fashion-store.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-fashion-store.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Fashion store</span>
|
||
<p class="fs-15 lh-26 mb-0">Clothing, Accessories, Cosmetic</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-interactive-portfolio.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-interactive-portfolio.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Interactive portfolio</span>
|
||
<p class="fs-15 lh-26 mb-0">Morden portfolio, CV, Resume</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-yoga-and-meditation.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-yoga-and-meditation.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Yoga & meditation</span>
|
||
<p class="fs-15 lh-26 mb-0">Gymnastic, Fitness, Relaxation</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-travel-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-travel-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Travel agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Tour, Holidays, Adventure</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-photography.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-photography.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Photography</span>
|
||
<p class="fs-15 lh-26 mb-0">Studio, Photo agency, Photographer</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-ebook.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-ebook.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">eBook</span>
|
||
<p class="fs-15 lh-26 mb-0">Publishing house, Book store, Library</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-conference.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-conference.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Conference</span>
|
||
<p class="fs-15 lh-26 mb-0"> Event, Workshop, Seminar</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-lawyer.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-lawyer.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Lawyer</span>
|
||
<p class="fs-15 lh-26 mb-0">Law firm, Attorney, Legal, Advisor</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-freelancer.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-freelancer.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Freelancer</span>
|
||
<p class="fs-15 lh-26 mb-0">Contractor, Independent, Self-employed</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-blogger.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-blogger.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Blogger</span>
|
||
<p class="fs-15 lh-26 mb-0">News, Articles, Magazine</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-horizontal-portfolio.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-horizontal-portfolio.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Horizontal portfolio</span>
|
||
<p class="fs-15 lh-26 mb-0">Minimal, Creative, Graphics</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-business.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-business.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Business</span>
|
||
<p class="fs-15 lh-26 mb-0">Company, Consulting, Corporate</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-finance.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-finance.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Finance</span>
|
||
<p class="fs-15 lh-26 mb-0">Consulting, Legal advisor, Banking</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-wedding-invitation.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-wedding-invitation.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Wedding invitation</span>
|
||
<p class="fs-15 lh-26 mb-0">Marriage, Invitation, Ceremony</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-decor-store.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-decor-store.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Decor store</span>
|
||
<p class="fs-15 lh-26 mb-0">Handicraft, Living, Furniture</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-vertical-portfolio.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-vertical-portfolio.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Vertical portfolio</span>
|
||
<p class="fs-15 lh-26 mb-0">Freelancer, Personal, Portfolio</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-music-onepage.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-music.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Music</span>
|
||
<p class="fs-15 lh-26 mb-0">Artist, Band, Singer, Live performance</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-pizza-parlor.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-pizza-parlor.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Pizza parlor</span>
|
||
<p class="fs-15 lh-26 mb-0">Food delivery, Cafes, Fast food</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-magazine.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-magazine.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Magazine</span>
|
||
<p class="fs-15 lh-26 mb-0">Blog, Stories, Articles, News</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-hosting.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-hosting.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Hosting</span>
|
||
<p class="fs-15 lh-26 mb-0">Domains, Emails, Data, Cloud</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-charity.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-charity.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Charity</span>
|
||
<p class="fs-15 lh-26 mb-0">Donation, Organization, NGOs</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-jewellery-store.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-jewellery-store.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Jewellery</span>
|
||
<p class="fs-15 lh-26 mb-0">Lifestyle, eCommerce, Shoping</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-minimal-portfolio.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-minimal-portfolio.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Minimal portfolio</span>
|
||
<p class="fs-15 lh-26 mb-0">Creative professional, Digital agencies</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-architecture.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-architecture.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Architecture</span>
|
||
<p class="fs-15 lh-26 mb-0">Interior, Planning, Landscaping</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-application.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-application.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Application</span>
|
||
<p class="fs-15 lh-26 mb-0">Web application, Mobile application</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-digital-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-digital-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Digital agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Marketing agency, Media, SEO agency</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-consulting.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-consulting.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Consulting</span>
|
||
<p class="fs-15 lh-26 mb-0">Professional services, Startup</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-spa-salon.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-spa-salon.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Spa salon</span>
|
||
<p class="fs-15 lh-26 mb-0">Massage therapy, Wellness, Beauty</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-real-estate.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-real-estate.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Real estate</span>
|
||
<p class="fs-15 lh-26 mb-0">Broker, Property, Directory</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Stylish</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-seo-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-seo-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">SEO agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Digital marketing, Advertising</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-elder-care.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-elder-care.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Elder care</span>
|
||
<p class="fs-15 lh-26 mb-0">Caretaker, Nursing, Home Care</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-white bg-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">New</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-green-energy.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-green-energy.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Green energy</span>
|
||
<p class="fs-15 lh-26 mb-0">Renewable, Energy, Solar</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-white bg-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">New</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-logistics.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-logistics.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Logistics</span>
|
||
<p class="fs-15 lh-26 mb-0">Transportation, Shifting, Relocation</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-white bg-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">New</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-barber.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-barber.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Barber</span>
|
||
<p class="fs-15 lh-26 mb-0">Salons, Tattoo, Beauty parlour</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Popular</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-cryptocurrency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-cryptocurrency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Cryptocurrency</span>
|
||
<p class="fs-15 lh-26 mb-0">Digital Currency, Money, Bitcoin</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-white bg-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">New</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-web-agency.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-web-agency.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Web agency</span>
|
||
<p class="fs-15 lh-26 mb-0">Marketing, Branding, Development</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Trendy</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item"> </li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <a href="demo-startup.html" target="_blank" class="position-absolute left-0px top-0px w-100 h-100 z-index-9"></a> <img class="border-radius-5px w-100" src="images/demo-startup.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">Startup</span>
|
||
<p class="fs-15 lh-26 mb-0">Entrepreneur, Business, Marketing</p>
|
||
</div>
|
||
<div class="col-lg-auto col-12"> <span class="d-inline-flex text-red bg-light-red text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px">Hot</span> <span class="d-inline-flex text-green bg-crusoe-green text-uppercase alt-font fs-11 lh-26 fw-700 border-radius-40px ps-15px pe-15px ms-5px">Free</span> </div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li class="grid-item">
|
||
<div class="p-14px border-radius-10px box-shadow-medium box-shadow-quadruple-large-hover bg-white position-relative"> <img class="border-radius-5px w-100" src="images/coming-soon-demo.jpg" alt>
|
||
<div class="row align-items-center pt-20px pb-10px ps-20px pe-20px">
|
||
<div class="col md-mb-15px"> <span class="text-dark-gray fw-600 fs-18">More demos coming soon...</span>
|
||
<p class="fs-15 lh-26 mb-0">We are working hard...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="overflow-hidden">
|
||
<div class="container-fluid">
|
||
<div class="row position-relative">
|
||
<div class="col swiper swiper-width-auto text-center overflow-visible" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":50, "centeredSlides": true, "speed": 50000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":1, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide">
|
||
<div class="fs-250 lg-fs-200 md-fs-150 ls-minus-8px md-ls-minus-4px text-light-blue alt-font fw-700">create anything that you can imagine.</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="fs-250 lg-fs-200 md-fs-150 ls-minus-8px md-ls-minus-4px text-light-blue alt-font fw-700">hand crafted designs created by world class creative people.</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="fs-250 lg-fs-200 md-fs-150 ls-minus-8px md-ls-minus-4px text-light-blue alt-font fw-700">pre built website demos.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="position-absolute z-index-1 top-minus-40px left-0px text-center d-md-block d-none"> <img src="images/crafto-landing-page-img-09.png" class="md-w-50" data-bottom-top="transform: translateY(50px) translateX(220px)" data-top-bottom="transform:translateY(-50px) translateX(220px)" alt /> </div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="md-pt-0 pt-0">
|
||
<div class="container">
|
||
<div class="row align-items-center mb-6 sm-mb-50px text-center text-lg-start" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-xxl-7 col-xl-8 col-lg-7 md-mb-30px">
|
||
<h2 class="alt-font text-dark-gray fw-700 mb-0 ls-minus-2px">Premium and exclusive features for free.</h2>
|
||
</div>
|
||
<div class="col-xxl-4 col-xl-4 col-lg-5"> <span class="fs-18 fw-600 text-dark-gray d-inline-block mb-5px">Fresh new features, even more power.</span>
|
||
<p class="w-90 mb-0 xxl-w-100 md-w-80 md-mx-auto sm-w-100">Strengthen your website's flexibility and robustness with these powerful features. Access high-quality features at no cost.</p>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-2 row-cols-xl-5 row-cols-lg-4 justify-content-center mb-7" data-anime="{ "el": "childs", "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }">
|
||
<div class="col icon-with-text-style-03 mb-50px md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-bootstrap-5-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Bootstrap 5</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">CSS Framework</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 mb-50px md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-google-font-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Google Font</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Exclusive Fonts</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 mb-50px md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-slider-revolution-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17"> Slider Revolution</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Premium Slider</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 mb-50px md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-tnstagram-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Instagram</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Photo and Video</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 mb-50px md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-mailchimp-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Mailchimp</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Email Platform</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-w3c-validation-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">W3C Validation</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Markup Validity</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-isotope-filtering-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Isotope Filtering</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Images Loaded</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-swiper-slider-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Swiper Slider</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Touch Slider</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-contact-form-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Contact Form</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Dynamic Form</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-03 md-mb-30px">
|
||
<div class="feature-box">
|
||
<div class="feature-box-icon"> <img class="mb-15px" src="images/crafto-landing-page-magnific-popup-icon.jpg" alt> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="alt-font d-inline-block fw-700 text-dark-gray mb-15px fs-17">Magnific Popup</span>
|
||
<p class="fs-14 lh-24 fw-500 bg-very-light-gray pt-5px pb-5px ps-30px pe-30px xs-ps-15px xs-pe-15px border-radius-40px">Lightbox & Dialog</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center align-items-center">
|
||
<div class="col-12 text-center align-items-center" data-anime="{"translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 300, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="alt-font bg-dark-red fw-700 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-11 me-10px sm-m-5px d-inline-flex justify-content-center">Popular</div>
|
||
<div class="alt-font fs-15 fw-700 ls-05px text-dark-gray d-inline-flex align-items-baseline text-uppercase position-relative">Loaded with all the exclusive features you demand<i class="feather icon-feather-arrow-right text-dark-gray fw-700 fs-15 ms-5px d-sm-inline-block d-none"></i>
|
||
<div class="position-absolute top-minus-2px right-120px lg-right-120px z-index-minus-1 d-sm-inline-block d-none"> <img src="images/crafto-landing-page-stroke.png" class="w-90" alt /> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="stack-box full-screen z-index-99 bg-light-medium-gray position-relative p-0">
|
||
<div class="stack-box-contain">
|
||
<div class="stack-item stack-item-01 bg-light-medium-gray lg-pt-8 lg-pb-8 sm-pt-20px sm-pb-50px">
|
||
<div class="stack-item-wrapper">
|
||
<div class="container h-100">
|
||
<div class="position-absolute right-0px text-end top-0px z-index-minus-1 d-none d-lg-block"> <img src="images/crafto-landing-page-bg-03.png" alt> </div>
|
||
<div class="row h-100 lg-h-auto align-items-center justify-content-center">
|
||
<div class="col-lg-6 sm-mb-20px">
|
||
<div class="outside-box-left-25 md-ms-0"><img src="images/crafto-landing-page-portfolio.jpg" class="w-100" alt></div>
|
||
</div>
|
||
<div class="col-xl-5 col-lg-6 offset-xl-1"> <span class="alt-font fs-12 fw-700 ps-25px pe-25px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-very-light-gray-transparent border-radius-100px d-inline-flex">Showcase your work</span>
|
||
<h1 class="alt-font text-dark-gray fw-700 ls-minus-2px">The fantastic portfolio.</h1>
|
||
<p class="fs-17 lh-28 w-90 lg-w-100 mb-30px sm-mb-25px"><span class="fw-600 text-dark-gray">Highly customizable</span> unique portfolio types and options that lead to fantastic portfolios with unlimited styles to showcase your work.</p>
|
||
<div class="row row-cols-1 row-cols-lg-2 row-cols-sm-2 justify-content-center mb-20px">
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-briefcase icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">25+ Unique portfolio styles</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-grid icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Adjustable column</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-box-seam icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Attractive hover styles</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-layout-text-sidebar-reverse icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">06+ Advanced single project</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="demo-scattered-portfolio.html" target="_blank" class="btn btn-extra-large btn-dark-gray fw-500 btn-hover-animation-switch btn-box-shadow btn-rounded ls-0px"> <span> <span class="btn-text">Create your portfolio</span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> </span> </a> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-item stack-item-02 bg-light-pink lg-pt-8 lg-pb-8 sm-pt-30px sm-pb-50px">
|
||
<div class="stack-item-wrapper">
|
||
<div class="container h-100">
|
||
<div class="position-absolute left-0px text-end top-0px z-index-minus-1 d-none d-lg-block"> <img src="images/crafto-landing-page-bg-04.png" alt> </div>
|
||
<div class="row h-100 lg-h-auto align-items-center justify-content-center">
|
||
<div class="col-lg-6 order-lg-2 order-1 sm-mb-20px">
|
||
<div class="outside-box-right-25 md-me-0"><img src="images/crafto-landing-page-blog.jpg" class="w-100" alt></div>
|
||
</div>
|
||
<div class="col-xl-5 col-lg-6 offset-xl-1 order-lg-1 order-2"> <span class="alt-font fs-12 fw-700 ps-25px pe-25px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-light-pink-transparent border-radius-100px d-inline-flex">Blogging experience</span>
|
||
<h1 class="alt-font text-dark-gray fw-700 ls-minus-2px">The ultimate for bloggers.</h1>
|
||
<p class="fs-17 lh-28 w-85 lg-w-100 mb-30px sm-mb-25px"><span class="fw-600 text-dark-gray">Present your content in a unique way.</span> Design your own single post template from scratch, piece by piece.</p>
|
||
<div class="row row-cols-1 row-cols-lg-2 row-cols-sm-2 justify-content-center mb-20px">
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-layers icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">10+ Unique blog styles</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-grid icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Adjustable column</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-box-seam icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Attractive hover styles</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-layout-text-sidebar-reverse icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">05+ Pre-made single post</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="demo-blogger.html" target="_blank" class="btn btn-extra-large btn-dark-gray fw-500 btn-hover-animation-switch btn-box-shadow btn-rounded ls-0px"> <span> <span class="btn-text">Power your words</span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> </span> </a> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="stack-item stack-item-03 bg-light-medium-gray lg-pt-8 lg-pb-8 sm-pt-30px sm-pb-50px">
|
||
<div class="stack-item-wrapper">
|
||
<div class="container h-100">
|
||
<div class="position-absolute right-0px text-end top-0px z-index-minus-1 d-none d-lg-block"> <img src="images/crafto-landing-page-bg-03.png" alt> </div>
|
||
<div class="row h-100 lg-h-auto align-items-center justify-content-center">
|
||
<div class="col-lg-6 sm-mb-20px">
|
||
<div class="outside-box-left-25 md-ms-0"><img src="images/crafto-landing-page-ecommerce.jpg" class="w-100" alt></div>
|
||
</div>
|
||
<div class="col-xl-5 col-lg-6 offset-xl-1"> <span class="alt-font fs-12 fw-700 ps-25px pe-25px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-very-light-gray-transparent border-radius-100px d-inline-flex">Skyrocket your sales</span>
|
||
<h1 class="alt-font text-dark-gray fw-700 ls-minus-2px">Empower your online sales.</h1>
|
||
<p class="fs-17 lh-28 w-90 lg-w-100 mb-30px sm-mb-25px"><span class="fw-600 text-dark-gray">Showcase your products online and skyrocket sales</span> with Crafto. Start your eCommerce journey with cutting-edge modern designs.</p>
|
||
<div class="row row-cols-1 row-cols-lg-2 row-cols-sm-2 justify-content-center mb-20px">
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-collection icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Appealing card hover style</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-funnel icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Detailed product filtering</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-bag-plus icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Modernized mini basket</span> </div>
|
||
</div>
|
||
</div>
|
||
<div class="col icon-with-text-style-08 mb-25px">
|
||
<div class="feature-box feature-box-left-icon-middle">
|
||
<div class="feature-box-icon feature-box-icon-rounded box-shadow-medium-bottom w-70px h-70px md-w-60px md-h-60px me-15px rounded-circle bg-white"> <i class="bi bi-layout-text-sidebar-reverse icon-extra-medium text-dark-gray"></i> </div>
|
||
<div class="feature-box-content last-paragraph-no-margin"> <span class="lh-22 d-inline-block text-dark-gray fw-500">Cutting-edge single product</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a href="demo-decor-store.html" target="_blank" class="btn btn-extra-large btn-dark-gray fw-500 btn-hover-animation-switch btn-box-shadow btn-rounded ls-0px"> <span> <span class="btn-text">Build your online store</span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> <span class="btn-icon"><i class="feather icon-feather-arrow-right"></i></span> </span> </a> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="position-relative">
|
||
<div class="bg-overlay-slider-bottom"></div>
|
||
<img src="images/crafto-landing-page-img-10.png" class="bottom-60px position-absolute z-index-9 left-0px right-0px mx-auto" alt>
|
||
<div class="container">
|
||
<div class="row mb-4 justify-content-center" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-xl-7 col-lg-9 position-relative lg-mb-8 md-mb-30px text-center text-xl-start">
|
||
<div class="text-dark-gray alt-font fs-200 lg-fs-170 sm-fs-150 fw-800 ls-minus-10px sm-ls-minus-5px position-relative top-minus-30px xl-top-0px">1450<span class="d-inline-block vertical-align-text-top">+</span></div>
|
||
<div class="position-absolute bottom-50px lg-bottom-minus-50px left-90px z-index-minus-1 d-none d-lg-block"><img src="images/crafto-landing-page-img-06.png" alt /></div>
|
||
<div class="position-absolute top-minus-30px lg-top-0px right-50px z-index-2 d-none d-lg-block animation-float"><img src="images/crafto-landing-page-img-05.png" alt /></div>
|
||
</div>
|
||
<div class="col-xl-5 col-lg-8 text-center text-xl-start"> <span class="alt-font fs-12 lh-30px fw-700 ps-25px pe-25px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-extra-very-light-gray-transparent border-radius-100px d-inline-block">ultimate sections collection</span>
|
||
<h2 class="alt-font text-dark-gray fw-700 ls-minus-2px mb-20px">Perfect template for your website.</h2>
|
||
<p class="fs-17 lh-28">A unique collection of <span class="text-dark-gray fw-600">over 1450+ pre-made section</span> that make building a beautiful site easy. Crafto elements brings the latest web trends to your fingertips.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-12 p-0 position-relative">
|
||
<div class="swiper" data-slider-options="{ "slidesPerView": "1", "spaceBetween":3.5, "centeredSlides": true, "speed": 8000, "loop": true, "allowTouchMove": false, "autoplay": { "delay":1, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView":4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "575": { "slidesPerView": 2 } }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-01.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-02.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-03.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-04.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-05.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-06.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-07.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-08.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-09.jpg" alt> </div>
|
||
<div class="swiper-slide"> <img class="w-100" src="images/crafto-landing-page-templates-slider-10.jpg" alt> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="features" class="pt-2 bg-dark-gray half-section overflow-hidden">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center text-center mb-5">
|
||
<div class="col-xl-12 position-relative">
|
||
<div class="mb-minus-100px lg-mb-minus-40px text-gradient-light-blue-dark-black alt-font fs-320 sm-fs-140 fw-800 ls-minus-8px xs-ls-minus-5px" data-anime="{ "scale": [1.5, 1], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">power</div>
|
||
<div class="position-absolute right-5px md-right-minus-20px top-60px z-index-9 d-md-block d-none" data-anime="{ "translateY": [0, 0], "scale": [0.8, 1], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }"> <img src="images/crafto-landing-page-themezaa-seal-02.png" class="w-100 md-w-80" alt>
|
||
<div class="absolute-middle-center w-100 z-index-minus-1"><img src="images/crafto-landing-page-themezaa-seal-01.png" class="animation-rotation w-100 md-w-80" alt></div>
|
||
</div>
|
||
<div class="text-white">
|
||
<h2 class="alt-font fw-600 ls-minus-1px mb-25px w-65 md-w-100 mx-auto z-index-2" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 250, "staggervalue": 300, "easing": "easeOutQuad" }">Limitless features and endless possibilities.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 row-cols-xl-3 row-cols-lg-2 row-cols-md-2 justify-content-center mb-6" data-anime="{"el": "childs", "translateY": [0, 0], "perspective": [1200,1200], "scale": [1.1, 1], "rotateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 150, "easing": "easeOutQuad" }">
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-sass-css-with-superpowers.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Sass - CSS with superpowers </span>
|
||
<p>Handle CSS with Sass. The most stable and powerful professional grade CSS extension language.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-perfect-pre-built-inner-pages.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Perfect pre-built inner pages</span>
|
||
<p>325+ premium in-built inner pages. Create your website in minutes by using readymade inner pages.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-unique-animations.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Unique animations</span>
|
||
<p>Stand out from the crowd with impressive effects and animations that leave a mark on your visitors.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-powerful-marketing-popup.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Powerful marketing popup</span>
|
||
<p>Launch the journey to convert your website visitors into enthusiastic subscribers and valued customers.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-beautiful-text-animations.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Beautiful text animations</span>
|
||
<p>Discover impressive handpicked text animations that exemplify the artistic expression of a website.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-unique-header-and-mega-menucrafto-landing-page-unique-header-and-mega-menu.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Unique header and mega menu</span>
|
||
<p>Add a touch of uniqueness and style to your webiste with our exclusive header and mega menu designs.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col lg-mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-fully-responsive-layouts.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Fully responsive layouts</span>
|
||
<p>Responsive with a sharp and pixel perfect design that makes it look perfect in every device.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col lg-mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-animated-particles.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Animated particles</span>
|
||
<p>Level up your designs with stunning lightweight particle animations that enhance your pages.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col lg-mb-30px">
|
||
<div class="box-shadow-extra-large box-shadow-extra-large-hover border-radius-8px overflow-hidden"> <img src="images/crafto-landing-page-outstanding-performance.jpg" class="w-100" alt>
|
||
<div class="ps-12 pe-12 xl-ps-10 xl-pe-10 md-ps-7 md-pe-7 pt-0 pb-45px bg-dark-slate-blue last-paragraph-no-margin text-start"> <span class="d-inline-block text-white fs-17 mb-5px">Outstanding performance</span>
|
||
<p>Lightning site speed is our motto. Crafto is built for fast and efficient website delivery to your visitors.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center align-items-center mb-3" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-12 text-center align-items-center">
|
||
<div class="alt-font bg-jade fw-700 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-11 me-5px sm-mb-5px d-inline-block align-middle">Power</div>
|
||
<div class="alt-font fs-14 fw-600 text-white d-inline-block align-middle text-uppercase ls-05px sm-mb-5px">Fresh and improved features, elevated power<i class="feather icon-feather-arrow-right text-white ms-5px d-none d-md-inline-block"></i> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="position-relative overflow-hidden">
|
||
<div class="bg-overlay-light"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center mb-8 lg-mb-6" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-xxl-5 col-lg-6 position-relative mb-0 lg-mb-5 md-mb-20px">
|
||
<div class="text-dark-gray alt-font fs-190 lg-fs-150 fw-800 ls-minus-10px text-center text-xxl-start position-relative top-minus-25px lg-top-0px">300<span class="d-inline-block vertical-align-text-top ">+</span></div>
|
||
<div class="position-absolute bottom-minus-25px left-140px xl-left-150px z-index-minus-1 d-lg-block d-none"><img src="images/crafto-landing-page-img-08.png" alt /></div>
|
||
<div class="position-absolute top-minus-20px lg-top-minus-30px right-80px xl-right-100px lg-right-50px z-index-2 d-lg-block d-none"><img src="images/crafto-landing-page-img-07.png" alt /></div>
|
||
</div>
|
||
<div class="col-xl-6 offset-xxl-1 col-lg-8 last-paragraph-no-margin text-center text-xl-start">
|
||
<h2 class="alt-font text-dark-gray fw-700 ls-minus-2px mb-20px">Premium elements.</h2>
|
||
<p class="fs-17 lh-28 w-85 xl-w-90 md-w-70 sm-w-100 ms-xl-0 mx-auto"><span class="text-dark-gray fw-600">New and improved elements, elevated power.</span><br>
|
||
Crafto's extensive element library empowers you to design websites without the necessity of deep coding skills.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container-fluid p-0" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 300, "delay": 100, "staggervalue": 200, "easing": "easeOutQuad" }">
|
||
<div class="row g-0">
|
||
<div class="col-12 feature-box-slider">
|
||
<div class="swiper" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":30, "speed": 4500, "loop": true, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-view-list"></i> <span>Accordion</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-mouse"></i> <span>Button</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-people"></i> <span>Team</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-chat-text"></i> <span>Testimonials</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-person"></i> <span>Clients</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-star-half"></i> <span>Review</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-bell"></i> <span>Subscribe</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrow-right-circle"></i> <span>Call to action</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-window"></i> <span>Tab</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-geo-alt"></i> <span>Google map</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea-resize"></i> <span>Contact form</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-columns"></i> <span>Columns</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-info-square"></i> <span>Alert boxes</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-images"></i> <span>Image gallery</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-view-list"></i> <span>Accordion</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-mouse"></i> <span>Button</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-people"></i> <span>Team</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-chat-text"></i> <span>Testimonials</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-person"></i> <span>Clients</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-star-half"></i> <span>Review</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-bell"></i> <span>Subscribe</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrow-right-circle"></i> <span>Call to action</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-window"></i> <span>Tab</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-geo-alt"></i> <span>Google map</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea-resize"></i> <span>Contact form</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-columns"></i> <span>Columns</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-info-square"></i> <span>Alert boxes</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-images"></i> <span>Image gallery</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row g-0">
|
||
<div class="col-12 feature-box-slider">
|
||
<div class="swiper" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":30, "speed": 5000, "loop": true, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false, "reverseDirection": true }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-hourglass-split"></i> <span>Progress bar</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-ol"></i> <span>Process step</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-stars"></i> <span>Icon with text</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-hr"></i> <span>Shape dividers</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-sort-numeric-up"></i> <span>Counters</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-alarm"></i> <span>Countdown</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-heading"></i> <span>Fancy text box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-border-width"></i> <span>Heading</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-fonts"></i> <span>Dropcaps</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-chat-quote"></i> <span>Blockquote</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-highlighter"></i> <span>Highlights</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-ul"></i> <span>Lists</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-share-fill"></i> <span>Social icons</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-file-text"></i> <span>Pricing table</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-hourglass-split"></i> <span>Progress bar</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-ol"></i> <span>Process step</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-stars"></i> <span>Icon with text</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-hr"></i> <span>Shape dividers</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-sort-numeric-up"></i> <span>Counters</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-alarm"></i> <span>Countdown</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-heading"></i> <span>Fancy text box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-border-width"></i> <span>Heading</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-fonts"></i> <span>Dropcaps</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-chat-quote"></i> <span>Blockquote</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-highlighter"></i> <span>Highlights</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-ul"></i> <span>Lists</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-share-fill"></i> <span>Social icons</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-file-text"></i> <span>Pricing table</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row g-0">
|
||
<div class="col-12 feature-box-slider">
|
||
<div class="swiper" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":30, "speed": 5500, "loop": true, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-image"></i> <span>Interactive banners</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-gear"></i> <span>Services box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-box-seam"></i> <span>Rotate box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-instagram"></i> <span>Instagram</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrow-down-up"></i> <span>Parallax scrolling</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-layout-sidebar-inset"></i> <span>Sliding box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea"></i> <span>Content carousel</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-megaphone"></i> <span>Media</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-calendar2-check"></i> <span>Event</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-nested"></i> <span>Dividers</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-view-list"></i> <span>Horizontal list item</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-heading"></i> <span>Banners</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrows-expand-vertical"></i> <span>Carousel</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-phone-flip"></i> <span>Tilt effect</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-image"></i> <span>Interactive banners</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-gear"></i> <span>Services box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-box-seam"></i> <span>Rotate box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-instagram"></i> <span>Instagram</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrow-down-up"></i> <span>Parallax scrolling</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-layout-sidebar-inset"></i> <span>Sliding box</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea"></i> <span>Content carousel</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-megaphone"></i> <span>Media</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-calendar2-check"></i> <span>Event</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-list-nested"></i> <span>Dividers</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-view-list"></i> <span>Horizontal list item</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-heading"></i> <span>Banners</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrows-expand-vertical"></i> <span>Carousel</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-phone-flip"></i> <span>Tilt effect</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row g-0">
|
||
<div class="col-12 feature-box-slider">
|
||
<div class="swiper" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":30, "speed": 6000, "loop": true, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false, "reverseDirection": true }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }">
|
||
<div class="swiper-wrapper marquee-slide">
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-subtract"></i> <span>Adaptive backgrounds</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-nintendo-switch"></i> <span>Sticky column</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-badge-3d"></i> <span>3D parallax hover</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrows-move"></i> <span>Custom cursor</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-noise-reduction"></i> <span>Animated particles</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-text"></i> <span>Marquee</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea-t"></i> <span>Fancy heading</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-image-fill"></i> <span>Fancy images</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-mouse"></i> <span>Scrolling effects</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-subtract"></i> <span>Adaptive backgrounds</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-nintendo-switch"></i> <span>Sticky column</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-badge-3d"></i> <span>3D parallax hover</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-arrows-move"></i> <span>Custom cursor</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-noise-reduction"></i> <span>Animated particles</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-card-text"></i> <span>Marquee</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-textarea-t"></i> <span>Fancy heading</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-image-fill"></i> <span>Fancy images</span> </div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-box"> <i class="bi bi-mouse"></i> <span>Scrolling effects</span> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="position-relative overflow-hidden lg-pt-0">
|
||
<div class="position-absolute left-0px top-0px z-index-minus-1" data-bottom-top="transform: translateY(-225px) rotate(0)" data-top-bottom="transform:translateY(225px) rotate(0)"> <img src="images/crafto-landing-page-bg-06.png" class="w-80" alt /> </div>
|
||
<div class="position-absolute right-0px top-0px z-index-minus-1 text-end" data-bottom-top="transform: translateY(-50px) rotate(0)" data-top-bottom="transform:translateY(50px) rotate(0)"> <img src="images/crafto-landing-page-bg-05.png" class="w-80" alt> </div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center pt-5 pb-5 xl-pb-0 xl-pt-0">
|
||
<div class="col-lg-5 col-md-12 mb-0 md-mb-10 sm-mb-15 text-lg-start text-center" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }"> <span class="alt-font fs-12 lh-30px fw-700 ps-25px pe-25px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-extra-very-light-gray-transparent border-radius-100px d-inline-block">Specialized Features</span>
|
||
<h3 class="fs-50 alt-font fw-700 mb-25px ls-minus-2px text-gradient-fast-blue-purple-light-orange">Differentiate your website with good visual effects and animations that impress visitors.</h3>
|
||
<p class="w-80 xl-w-90 lg-w-100 md-w-80 sm-w-100 mx-auto ms-lg-0 mb-35px text-dark-gray fs-18 lh-28 fw-500">Incorporating animations is a highly effective technique for enhancing visitors engagement for your website.</p>
|
||
<a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-dark-gray left-icon btn-extra-large fw-500 btn-rounded btn-switch-text btn-box-shadow"> <span> <span><i class="bi bi-megaphone"></i></span> <span class="btn-double-text" data-text="Standout effortlessly">Standout effortlessly</span> </span> </a> </div>
|
||
<div class="col-lg-7 position-relative">
|
||
<div class="outside-box-right-5 xxl-me-0 atropos" data-atropos>
|
||
<div class="atropos-scale">
|
||
<div class="atropos-rotate">
|
||
<div class="atropos-inner text-center overflow-visible">
|
||
<div data-atropos-offset="-1" class="position-absolute top-minus-150px xl-top-minus-80px lg-top-minus-40px xl-right-minus-50px right-minus-150px xs-right-0px xs-top-minus-20px"> <img src="images/crafto-landing-page-specialized-features-bg.svg" alt> </div>
|
||
<img data-atropos-offset="1" class="position-relative z-index-9" src="images/crafto-landing-page-specialized-features.png" alt> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-black-transparent blur-box d-inline-block position-absolute right-minus-50px lg-right-minus-0px bottom-50px lg-bottom-0px xs-bottom-minus-10px ps-50px pe-50px pt-25px pb-25px xs-ps-25px xs-pe-25px xs-pt-5px xs-pb-5px z-index-9 border-radius-8px">
|
||
<ul class="alt-font fw-300 p-0 list-style-01 text-white mb-0 sm-fs-14" data-anime="{ "el": "childs", "translateY": [20, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }">
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">Custom cursor</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">On scroll animations</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">3D parallax hover</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">Adaptive background</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">Marquee carousel</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">Fancy heading / images</li>
|
||
<li class="border-color-transparent-white-very-light pt-10px pb-10px pe-20px xs-pe-10px">Motion effects</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="bg-gradient-top-very-light-gray bg-trusted-customers">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center text-center mb-6" data-anime="{ "el": "childs", "translateY": [0, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-xl-10"> <span class="alt-font fs-12 lh-30px fw-700 ps-25px pe-25px xs-ps-15px xs-pe-15px pt-5px pb-5px mb-20px text-uppercase text-dark-gray bg-gradient-very-light-gray-transparent border-radius-100px d-inline-block">Trusted and experienced power elite author</span>
|
||
<h2 class="alt-font fw-700 text-dark-gray ls-minus-2px mb-0">51,500+ Trusted customers</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row trusted-customers">
|
||
<div class="col-lg-4 col-md-12" data-anime="{ "el": "childs", "translateY": [20, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I have <span class="text-dark-gray text-decoration-line-bottom fw-500">purchased more than a couple themes through themeforest</span> and by far, the support that I received from the themezaa team has been the best I have ever gotten.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Dcappe</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I love this theme, not only did it have the customisation and layouts I needed, but the variety and options available for customisation are outstanding and absolutely worth every cent it costs. <span class="text-dark-gray text-decoration-line-bottom fw-500">Highly recommend it to anyone wanting an excellent WordPress website.</span></p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Afcreativeaustralia</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I've been working with the Litho WordPress theme by <span class="text-dark-gray text-decoration-line-bottom fw-500">Themezaa for many years now on several client websites.</span> Their theme templates have a modern and spacious design aesthetic whilst integrating perfectly with Elementor and therefore are fully customisable.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Guyadamson</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I've purchased several themes over the years and this theme, by far, is absolutely amazing. It's built extremely well, the back end was well thought out, the design options are endless. <span class="text-dark-gray text-decoration-line-bottom fw-500">I am really impressed and all themes should be held to this standard.</span></p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Bluuuu72</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-12" data-anime="{ "el": "childs", "translateY": [20, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">ThemeZaa theme is full of features and design options that are modern, setting the look and feel of this theme apart from many of the older & more established themes. <span class="text-dark-gray text-decoration-line-bottom fw-500">The design has a fresh and professional look.</span></p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Bestjimmy</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I would say customizability is really great as <span class="text-dark-gray text-decoration-line-bottom fw-500">I mixed up different sections from different demos easily without any issues,</span> their documentation helped and their support is great.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Jackydesigner</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">Overall, this is an amazing product with more amazing customer service. They are good with communication, addressing the need and attentively making sure the customer is fully supported wherever they need the assistance. <span class="text-dark-gray text-decoration-line-bottom fw-500">overall I'm very happy with this purchase.</span></p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Webassist</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">I purchased this template as I was looking for a fast-loading and simple to adapt html design. This has to be one of the best-dessigned templates I have purchased. I was able to get a <span class="text-dark-gray text-decoration-line-bottom fw-500">google insights page speed of 98 for mobile and 100 for desktop.</span> Highly recommended.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Discoverlondon</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-12" data-anime="{ "el": "childs", "translateY": [20, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26"><span class="text-dark-gray text-decoration-line-bottom fw-500">Wow, I gotta say, this website template blew me away!</span> The design is sleek and modern, making it super attractive, and navigating through it is a breeze. Plus, you can customize it to match your brand, and their customer support is top-notch.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Brainsindia</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26"><span class="text-dark-gray text-decoration-line-bottom fw-500">We bought 3 licences of this theme. I am not a developer,</span> but I have managed to create a professional and unique website. We receive a lot of great feedback from our customers. Without the Themezaa support.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Nesem</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">ThemeZaa are absolutely fantastic. Their support always goes above and beyond, nothing is never too much trouble and the theme itself is top quality. The finished product is always fantastic and <span class="text-dark-gray text-decoration-line-bottom fw-500">I would 100% recommend.</span> Thank you again for the brilliant theme.</p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">RewindRWC</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-white box-shadow-extra-large p-40px lg-p-30px md-p-50px sm-p-30px border-radius-6px mb-30px">
|
||
<p class="mb-15px lh-26">While everything is great about this theme, from design quality to flexibility. <span class="text-dark-gray text-decoration-line-bottom fw-500">The main reason why I'm using this theme for 5 websites, is the customer support.</span> This is absolutely perfect. </p>
|
||
<div> <span class="fs-17 text-dark-gray fw-600">Studiojas</span>
|
||
<div class="review-star-icon lh-26 fs-18"> <i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bg-more-trusted text-center"> <a href="index.html#" class="btn btn-dark-gray left-icon btn-extra-large fw-500 btn-rounded btn-switch-text btn-box-shadow ls-0px"> <span> <span><i class="fa-solid fa-circle-arrow-down fs-18"></i></span> <span class="btn-double-text" data-text="More trusted customers">More trusted customers</span> </span> </a> </div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<footer class="cover-background" style="background-image: url('images/crafto-landing-page-bg-img.jpg')">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center text-center">
|
||
<div class="col-xl-9 col-lg-10 col-md-12" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }"> <span class="alt-font fs-14 lh-30 sm-fs-12 fw-600 ls-1px ps-30px pe-30px xs-ps-15px xs-pe-15px pt-5px pb-5px mb-30px text-uppercase text-white border border-color-transparent-white-very-light border-radius-100px d-inline-flex">Pay once and get lifetime updates</span>
|
||
<h1 class="fw-500 text-white ls-minus-2px">Craft a standout website with Crafto template.</h1>
|
||
<span class="fs-20 d-inline-block mb-40px ls-minus-05px">Elevate your powerful design with Crafto, the template of the future.</span> <a href="https://1.envato.market/R53mL2" target="_blank" class="btn btn-big fw-500 btn-switch-text btn-rounded ls-0px"> <span> <span class="btn-double-text" data-text="Purchase Crafto">Purchase Crafto</span> <span><i class="fa-solid fa-circle-arrow-right"></i></span> </span> </a>
|
||
<div class="mt-9"> <a href="https://www.themezaa.com/" target="_blank"><img src="images/themezaa.png" alt></a> </div>
|
||
</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>
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DND93RJKBT"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
gtag('js', new Date());
|
||
|
||
gtag('config', 'G-DND93RJKBT');
|
||
</script>
|
||
</body>
|
||
</html> |