363 lines
19 KiB
HTML
363 lines
19 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/it-business/it-business.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#252840">
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse glass-effect" data-header-hover="light">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
|
|
<a class="navbar-brand" href="demo-it-business.html">
|
|
<img src="images/demo-it-business-logo-white.png" data-at2x="images/demo-it-business-logo-white@2x.png" alt class="default-logo">
|
|
<img src="images/demo-it-business-logo-black.png" data-at2x="images/demo-it-business-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-it-business-logo-black.png" data-at2x="images/demo-it-business-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto col-xxl-6 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"><a href="demo-it-business.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-it-business-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon-style02">
|
|
<a href="demo-it-business-services.html" class="nav-link">Services</a>
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-briefcase"></i>Data analytics</a></li>
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-clipboard-data"></i>Finance consulting</a></li>
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-peace"></i>Technology innovation</a></li>
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-bar-chart-line"></i>Digital commerce</a></li>
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-send-check"></i>Artificial intelligence</a></li>
|
|
<li><a href="demo-it-business-services-details.html"><i class="bi bi-globe2"></i>Cloud computing</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-it-business-case-studies.html" class="nav-link">Case studies</a></li>
|
|
<li class="nav-item"><a href="demo-it-business-blog.html" class="nav-link">Blog</a></li>
|
|
<li class="nav-item"><a href="demo-it-business-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto col-xxl-3 col-lg-2 text-end d-none d-sm-flex">
|
|
<div class="header-icon">
|
|
<div class="header-button"><a href="demo-it-business-contact.html" class="btn btn-large btn-transparent-white-light btn-rounded text-transform-none border-1">Start a project<i class="fa-solid fa-arrow-right"></i></a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="ipad-top-space-margin p-0 full-screen sm-h-450px" data-parallax-background-ratio="0.5" style="background-image: url('images/portfolio-single-gallery-01-a.jpg')">
|
|
<div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
|
|
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
|
|
<animate attributeName="d" dur="5s" values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250" repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="overlap-height overflow-visible">
|
|
<div class="container">
|
|
<div class="row overlap-gap-section">
|
|
<div class="col-lg-4 col-md-6 sm-mb-30px text-center text-md-start">
|
|
<span class="alt-font text-dark-gray fs-24 fw-500 d-inline-block mb-15px ls-minus-05px">Project description</span>
|
|
<ul class="list-style-01 ps-0 pe-50px mb-0 sm-pe-0">
|
|
<li class="border-color-extra-medium-gray pt-15px pb-15px"><span class="text-dark-gray w-35 sm-w-auto sm-me-20px d-inline-block fw-500 alt-font fs-16">Published</span>20 Jan 2021</li>
|
|
<li class="border-color-extra-medium-gray pt-15px pb-15px"><span class="text-dark-gray w-35 sm-w-auto sm-me-20px d-inline-block fw-500 alt-font fs-16">Services</span>Branding</li>
|
|
<li class="pt-15px pb-15px fs-16"><span class="text-dark-gray w-35 sm-w-auto sm-me-20px d-inline-block fw-500 alt-font">Industry</span>Restaurant</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-6 offset-lg-1 col-md-6 text-center text-md-start">
|
|
<h6 class="alt-font fw-500 text-dark-gray mb-20px">Cottura - Your timeless identity</h6>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris aliquipcommodo consequat.</p>
|
|
<a href="demo-it-business-single-project-gallery.html#" class="btn btn-medium btn-transparent-light-gray">Yourdomain.com</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section style="background-image: url('images/portfolio-single-gallery-07.jpg')">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 overlap-section">
|
|
<div class="overlap-section-inner box-shadow-large border-10 border-solid border-color-white">
|
|
<div class="swiper magic-cursor light" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 0, "effect": "fade", "speed": 1200, "loop": true, "autoplay": { "delay": 1500, "disableOnInteraction": false }, "pagination": { "el": ".slider-three-slide-pagination", "clickable": true, "dynamicBullets": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } } }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-gallery-02.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-gallery-03.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-gallery-04.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 mt-8 text-center">
|
|
<img src="images/portfolio-single-gallery-06.png" alt>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-md-2 align-items-center">
|
|
<div class="col sm-mb-30px text-center text-md-start">
|
|
<h5 class="alt-font mb-0 text-dark-gray fw-500 w-90 md-w-100 ls-minus-1px">Food is as much about the moment as it is about the taste.</h5>
|
|
</div>
|
|
<div class="col last-paragraph-no-margin text-center text-md-start">
|
|
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry has been the industry's standard dummy text ever since when an unknown printer took a galley of type and scrambled.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="cover-background background-size-100 py-0 lg-background-image-none" style="background-image: url('images/portfolio-single-gallery-11.jpg')">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col px-0 sm-ps-15px sm-pe-15px">
|
|
<ul class="image-gallery-style-01 gallery-wrapper grid grid-3col xl-grid-3col lg-grid-3col md-grid-1col sm-grid-1col xs-grid-1col gutter-extra-large">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-double transition-inner-all">
|
|
<div class="gallery-box">
|
|
<a href="images/portfolio-single-gallery-08.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
|
<img src="images/portfolio-single-gallery-08.jpg" alt />
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item transition-inner-all">
|
|
<div class="gallery-box overflow-hidden">
|
|
<a href="images/portfolio-single-gallery-09.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
|
<img src="images/portfolio-single-gallery-09.jpg" alt />
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item transition-inner-all">
|
|
<div class="gallery-box overflow-hidden">
|
|
<a href="images/portfolio-single-gallery-10.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
|
<img src="images/portfolio-single-gallery-10.jpg" alt />
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="gallery-box">
|
|
<a href="images/portfolio-single-gallery-02.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title...">
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
|
<img src="images/portfolio-single-gallery-02.jpg" alt />
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="half-section bg-gradient-top-very-light-gray pb-10 sm-pb-5 position-relative">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center mb-15px">
|
|
<div class="col-12 col-lg-4 col-md-5 alt-font text-dark-gray text-center text-md-end fw-500 text-uppercase">Share this project</div>
|
|
<div class="col-12 col-lg-2 col-md-2"><div class="w-100 h-1px bg-extra-medium-gray sm-mt-15px sm-mb-15px"></div></div>
|
|
<div class="col-12 col-lg-4 col-md-5 text-center text-md-start elements-social social-icon-style-02">
|
|
<ul class="medium-icon dark mb-0">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li><a class="linkedin" href="https://www.linkedin.com/" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
|
<li><a class="pinterest" href="https://www.pinterest.com/" target="_blank"><i class="fa-brands fa-pinterest-p"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="shape-image-animation p-0 w-100 bottom-minus-40px xl-bottom-0px d-none d-md-block">
|
|
<svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
|
|
<path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
|
|
<animate attributeName="d" dur="5s" values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
|
|
M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250" repeatCount="indefinite" />
|
|
</path>
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="p-0 footer-light position-relative">
|
|
<div class="container position-relative">
|
|
<div class="row justify-content-center pt-5 sm-pt-40px">
|
|
|
|
<div class="col-6 col-xl-3 col-lg-12 col-sm-6 last-paragraph-no-margin text-xl-start text-lg-center order-sm-1 lg-mb-50px sm-mb-30px">
|
|
<a href="demo-it-business.html" class="footer-logo mb-15px d-inline-block">
|
|
<img src="images/demo-it-business-logo-black.png" data-at2x="images/demo-it-business-logo-black@2x.png" alt>
|
|
</a>
|
|
<p class="lh-28 w-90 xl-w-100 mx-lg-auto mx-xl-0">Gearing your company through an innovative strategy.</p>
|
|
<div class="elements-social social-icon-style-02 mt-15px">
|
|
<ul class="medium-icon dark">
|
|
<li class="my-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
|
<li class="my-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
|
<li class="my-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
|
<li class="my-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-2 col-lg-3 col-sm-4 xs-mb-30px order-sm-3 order-lg-2">
|
|
<span class="fw-600 d-block text-dark-gray mb-5px">Company</span>
|
|
<ul>
|
|
<li><a href="demo-it-business-about.html">Who we are</a></li>
|
|
<li><a href="demo-it-business-services.html">Our services</a><div class="bg-dark-gray fw-600 text-white lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-10 ms-10px d-inline-block align-middle">Hot</div></li>
|
|
<li><a href="demo-it-business-case-studies.html">Our clients</a></li>
|
|
<li><a href="demo-it-business-contact.html">Contact us</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-2 col-lg-3 col-md-5 col-sm-4 xs-mb-30px order-sm-4 order-lg-3">
|
|
<span class="fw-600 d-block text-dark-gray mb-5px">Services</span>
|
|
<ul>
|
|
<li><a href="demo-it-business-single-project-gallery.html#">Planning</a></li>
|
|
<li><a href="demo-it-business-single-project-gallery.html#">Research</a></li>
|
|
<li><a href="demo-it-business-single-project-gallery.html#">Consulting</a></li>
|
|
<li><a href="demo-it-business-single-project-gallery.html#">Analysis</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-6 col-xl-2 col-lg-3 col-md-3 col-sm-4 xs-mb-30px order-sm-5 order-lg-4">
|
|
<span class="fw-600 d-block text-dark-gray mb-5px">Need help?</span>
|
|
<span>Call us directly?</span>
|
|
<span class="d-block mb-10px"><a class="text-dark-gray fw-600" href="tel:1235678901">(123) 567 8901</a></span>
|
|
<span>Need support?</span>
|
|
<a href="cdn-cgi/l/email-protection.html#e58d808995a5818a88848c8bcb868a88" class="text-dark-gray fw-600"><span class="__cf_email__" data-cfemail="93fbf6ffe3d3f7fcfef2fafdbdf0fcfe">[email protected]</span></a>
|
|
</div>
|
|
|
|
|
|
<div class="col-xl-3 col-lg-3 col-sm-6 md-mb-50px sm-mb-30px xs-mb-0 order-sm-2 order-lg-5">
|
|
<span class="fw-600 d-block text-dark-gray mb-5px">Subscribe newsletter</span>
|
|
<p class="lh-28 w-95 mb-10px xs-mb-10px">Subscribe our newsletter to get the latest news and updates!</p>
|
|
<div class="d-inline-block w-100 newsletter-style-04 position-relative">
|
|
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
|
<input class="fs-15 bg-white w-100 border-0 border-bottom border-1 border-color-dark-gray form-control required" type="email" name="email" placeholder="Enter your email address" />
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small"></i></button>
|
|
<div class="form-results border-radius-0px p-15px fs-16 lh-24 w-100 text-center position-absolute d-none"></div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row justify-content-center align-items-center pt-7">
|
|
|
|
<div class="col-12">
|
|
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray"></div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-5 pt-20px pb-20px md-pt-0 order-2 order-lg-1 text-center text-lg-start last-paragraph-no-margin fs-14"><p>© 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-dark-gray fw-600 text-decoration-line-bottom">ThemeZaa</a></p></div>
|
|
|
|
|
|
<div class="col-lg-7 pt-20px pb-20px md-pt-25px md-pb-5px order-1 order-lg-2 text-center text-lg-end fs-14">
|
|
<ul class="footer-navbar sm-lh-normal">
|
|
<li><a href="demo-it-business-single-project-gallery.html#" class="nav-link">Privacy policy</a></li>
|
|
<li><a href="demo-it-business-single-project-gallery.html#" class="nav-link">Terms and conditions</a></li>
|
|
<li><a href="demo-it-business-single-project-gallery.html#" class="nav-link">Copyright</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-it-business-single-project-gallery.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |