212 lines
10 KiB
HTML
212 lines
10 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/interactive-portfolio/interactive-portfolio.css" />
|
||
|
|
</head>
|
||
|
|
<body data-mobile-nav-style="classic">
|
||
|
|
|
||
|
|
<header>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed" 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="demo-interactive-portfolio.html">
|
||
|
|
<img src="images/demo-interactive-portfolio-logo-white.png" data-at2x="images/demo-interactive-portfolio-logo-white@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-interactive-portfolio-logo-white.png" data-at2x="images/demo-interactive-portfolio-logo-white@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-interactive-portfolio-logo-white.png" data-at2x="images/demo-interactive-portfolio-logo-white@2x.png" alt class="mobile-logo">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto col-lg-2 text-end">
|
||
|
|
<div class="header-icon">
|
||
|
|
<div class="header-push-button hamburger-push-button icon">
|
||
|
|
<div class="push-button">
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<b class="push-button-text text-uppercase text-white position-absolute top-3px left-minus-50px fs-13 fw-600">Menu</b>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="push-menu hamburger-nav header-dark hamburger-menu-simple bg-dark-gray" style="background-image: url('images/vertical-line-bg-small.svg')">
|
||
|
|
<span class="close-menu bg-white fs-18"><i class="fa-solid fa-xmark text-dark-gray"></i></span>
|
||
|
|
<div class="container d-flex flex-column justify-content-center h-100">
|
||
|
|
<div class="row align-items-center justify-content-center">
|
||
|
|
<div class="col-lg-8 hamburger-menu menu-list-wrapper no-margin" data-scroll-options="{ "theme": "light" }">
|
||
|
|
<ul class="menu-item-list fw-500 alt-font p-0 text-center text-lg-start">
|
||
|
|
<li class="menu-item"><a href="demo-interactive-portfolio.html" class="nav-link">home</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-interactive-portfolio-about.html" class="nav-link">about</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-interactive-portfolio-work.html" class="nav-link">work</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-interactive-portfolio-expertise.html" class="nav-link">expertise</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-interactive-portfolio-contact.html" class="nav-link">contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 d-none d-lg-inline-block">
|
||
|
|
<div class="row menu-address">
|
||
|
|
<div class="col-12 mb-50px">
|
||
|
|
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
|
||
|
|
<div class="feature-box-icon me-30px">
|
||
|
|
<i class="bi bi-envelope icon-large text-white"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-white fw-500 fs-18 mb-5px d-block">Quick contact</span>
|
||
|
|
<div class="d-block">
|
||
|
|
<span>Phone:</span> <a href="tel:12345678910" class="text-white-hover">+1 234 567 8910</a>
|
||
|
|
</div>
|
||
|
|
<div class="d-block">
|
||
|
|
<span>Email:</span> <a href="cdn-cgi/l/email-protection.html#a1c8cfc7cee1c5ceccc0c8cf8fc2cecc" class="text-white-hover"><span class="__cf_email__" data-cfemail="c5acaba3aa85a1aaa8a4acabeba6aaa8">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 last-paragraph-no-margin">
|
||
|
|
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
|
||
|
|
<div class="feature-box-icon me-30px">
|
||
|
|
<i class="bi bi-geo-alt icon-large text-white"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="text-white fw-500 fs-18 mb-5px d-block">Contact address</span>
|
||
|
|
<p>701 Sondanella, 18th floor,<br>Gunsberg, Switzerland</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-12 d-none d-lg-inline-block">
|
||
|
|
<div class="separator-line-1px w-100 d-block bg-extra-medium-gray opacity-1 mt-30px mb-30px"></div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 elements-social social-icon-style-10 d-none d-lg-inline-block">
|
||
|
|
<ul class="fs-18 fw-500 light">
|
||
|
|
<li class="me-15px">
|
||
|
|
<a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-15px">
|
||
|
|
<a class="instagram" href="https://www.instagram.com/" target="_blank">Ig.</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-15px">
|
||
|
|
<a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="behance" href="https://www.behance.net/" target="_blank">Be.</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6 menu-text text-end d-none d-lg-inline-block">
|
||
|
|
<span class="text-white fs-18">Let's make something great <a href="cdn-cgi/l/email-protection.html#c5acaba3aa85a1aaa8a4acabeba6aaa8" class="text-decoration-line-bottom-medium fw-500 text-white text-white-hover">work together?</a></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<section id="stickyImgContainer" class="stickyImageContainer">
|
||
|
|
<div class="bg-overlay" style="background-image: url('images/demo-interactive-portfolio-slider-01.jpg')"></div>
|
||
|
|
<div class="slides magic-cursor view-cursor">
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-01.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Orange</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Branding and identity</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-02.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Burgero</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Web and application</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-03.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Hiphop</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Graphics and identity</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-05.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Relaxing</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Packaging and web</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-06.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Cropos</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Design and identity</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-07.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Harddot</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Digital and marketing</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="slide" data-bg="images/demo-interactive-portfolio-slider-08.jpg">
|
||
|
|
<div class="slide-title alt-font fs-230 ls-minus-5px sm-ls-minus-2px xs-ls-0px">Visionen</div>
|
||
|
|
<div class="slide-meta">
|
||
|
|
<div class="separator-line-1px w-30px bg-white d-inline-block align-middle me-5px"></div>
|
||
|
|
<span class="d-inline-block text-white align-middle fw-500 fs-14 text-uppercase ls-1px">Branding and identity</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="home-page-footer">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-auto me-auto xs-ps-0 xs-pe-0">
|
||
|
|
<div class="fs-14 text-white">© 2024 Crafto</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto icon-with-text-style-08 xs-ps-0 xs-pe-0">
|
||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
||
|
|
<div class="feature-box-icon feature-box-icon-rounded w-35px h-35px rounded-circle bg-white me-10px">
|
||
|
|
<i class="fa-solid fa-arrows-left-right separator-line-vertical icon-very-small text-dark-gray"></i>
|
||
|
|
</div>
|
||
|
|
<div class="feature-box-content">
|
||
|
|
<span class="d-inline-block fs-14 text-white">Click and drag</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="sticky-wrap-right z-index-1 d-none d-md-inline-block text-center">
|
||
|
|
<span class="fs-14 fw-500 text-white"><i class="bi bi-envelope icon-small me-10px align-middle"></i>Get our service — <a href="cdn-cgi/l/email-protection.html#a5cccbc3cae5c1cac8c4cccb8bc6cac8" class="text-white">Send a message</a></span>
|
||
|
|
</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>
|