330 lines
17 KiB
HTML
330 lines
17 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/scattered-portfolio/scattered-portfolio.css" />
|
||
|
|
</head>
|
||
|
|
<body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#232323" class="background-position-center-top custom-cursor" style="background-image: url('images/vertical-line-bg-small-medium-gray.svg')">
|
||
|
|
|
||
|
|
<div class="cursor-page-inner">
|
||
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
||
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<header>
|
||
|
|
|
||
|
|
<nav class="navbar navbar-expand-lg header-light bg-transparent disable-fixed">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
||
|
|
<a class="navbar-brand" href="demo-scattered-portfolio.html">
|
||
|
|
<img src="images/demo-scattered-portfolio-logo-black.png" data-at2x="images/demo-scattered-portfolio-logo-black@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-scattered-portfolio-logo-black.png" data-at2x="images/demo-scattered-portfolio-logo-black@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-scattered-portfolio-logo-black.png" data-at2x="images/demo-scattered-portfolio-logo-black@2x.png" alt class="mobile-logo">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto menu-order position-static">
|
||
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" 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-scattered-portfolio.html" class="nav-link">home</a></li>
|
||
|
|
<li class="nav-item"><a href="demo-scattered-portfolio-about.html" class="nav-link">about</a></li>
|
||
|
|
<li class="nav-item"><a href="demo-scattered-portfolio-expertise.html" class="nav-link">expertise</a></li>
|
||
|
|
<li class="nav-item"><a href="demo-scattered-portfolio-work.html" class="nav-link">work</a></li>
|
||
|
|
<li class="nav-item"><a href="demo-scattered-portfolio-contact.html" class="nav-link">contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="p-0 top-space-margin">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center justify-content-center small-screen">
|
||
|
|
<div class="col-12 col-xl-8 col-lg-10 text-center">
|
||
|
|
<span class="fw-500 mb-15px fs-19 d-block text-dark-gray">Brand identity and web development</span>
|
||
|
|
<h1 class="fw-600 text-dark-gray mb-0 ls-minus-2px">Unique visual identity to bring in digital market</h1>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="pt-2 sm-pt-35px">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 justify-content-center align-items-center text-center">
|
||
|
|
<div class="col sm-mb-30px">
|
||
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-500">Published</span>
|
||
|
|
<span>26 December 2023</span>
|
||
|
|
</div>
|
||
|
|
<div class="col sm-mb-30px">
|
||
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-500">Country</span>
|
||
|
|
<span>United kingdom</span>
|
||
|
|
</div>
|
||
|
|
<div class="col xs-mb-30px">
|
||
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-500">Industry</span>
|
||
|
|
<span>Travel agency</span>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-500">Website</span>
|
||
|
|
<a href="demo-scattered-portfolio-single-project-creative.html#" class="text-dark-gray-hover">Craftotravel.com</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="p-0">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row align-items-center justify-content-center">
|
||
|
|
<div class="col-11 h-700px md-h-500px sm-h-350px position-relative border-radius-6px border border-color-transparent" data-parallax-background-ratio="0.5" style="background-image: url('images/demo-web-agency-project-detail-01.jpg');"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row mb-5 md-mb-7">
|
||
|
|
<div class="col-md-5 d-flex flex-column sm-mb-20px">
|
||
|
|
<h2 class="text-dark-gray fw-600 ls-minus-2px">Brand overview</h2>
|
||
|
|
<div class="mt-auto">
|
||
|
|
<img src="images/demo-web-agency-awards-logo-01.png" alt>
|
||
|
|
<div class="fs-14 text-uppercase fw-500 mt-5px"><span class="fw-700 text-dark-gray">Awards</span> - site of the day 2020</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-5 col-md-7 offset-lg-2">
|
||
|
|
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris aliquip ex commodo consequat.</p>
|
||
|
|
<ul class="p-0 m-0 list-style-01">
|
||
|
|
<li class="border-color-dark-gray pt-10px pb-10px text-dark-gray fw-500">Branding and identity</li>
|
||
|
|
<li class="border-color-dark-gray pt-10px pb-10px text-dark-gray fw-500">Websites and digital platforms</li>
|
||
|
|
<li class="border-color-dark-gray pt-10px pb-10px text-dark-gray fw-500">Content strategy for social media</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row align-items-center mb-10">
|
||
|
|
<div class="col-lg-6 col-md-5">
|
||
|
|
<div class="outside-box-left-25 lg-outside-box-left-30 d-none d-md-inline-block">
|
||
|
|
<div class="fs-350 xl-fs-250 lg-fs-200 md-fs-150 xs-fs-120 text-light-gray fw-600 ls-minus-20px text-nowrap" data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-100px, 0px, 0px);">identity</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-5 offset-lg-1 col-md-7 last-paragraph-no-margin">
|
||
|
|
<span class="fs-20 fw-500 mb-5px d-block text-dark-gray">About travel agency</span>
|
||
|
|
<p class="w-80 lg-w-100">Lorem ipsum is simply dummy text the printing and typesetting industry been the industry's standard dummy text ever since the when unknown.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-7">
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<img src="images/demo-web-agency-project-detail-02.jpg" class="border-radius-6px" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center mb-7">
|
||
|
|
<div class="col-lg-6 col-md-10 last-paragraph-no-margin">
|
||
|
|
<span class="fs-20 fw-500 mb-5px d-block text-dark-gray">Logotype - Strength in simplicity</span>
|
||
|
|
<p>Lorem ipsum is simply dummy text the printing and typesetting industry been the industry's standard dummy text ever since the when unknown printer took a galley of type and scrambled exercitation ullamco laboris aliquip dummy text.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<img src="images/demo-web-agency-project-detail-03.jpg" class="border-radius-6px" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="overflow-hidden position-relative p-0">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-md-12 position-relative">
|
||
|
|
<div class="outside-box-left-25 outside-box-right-25">
|
||
|
|
<div class="swiper magic-cursor base-color swiper-width-auto" data-slider-options="{ "slidesPerView": "auto", "spaceBetween": 30, "loop": true, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "pagination": { "el": ".slider-four-slide-pagination-1", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "spaceBetween": 90 }, "768": { "spaceBetween": 50 } }, "effect": "slide" }">
|
||
|
|
<div class="swiper-wrapper align-items-center">
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-04.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-05.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-06.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-07.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-04.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-05.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-06.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="swiper-slide">
|
||
|
|
<img src="images/demo-web-agency-project-detail-07.jpg" class="md-h-300px sm-h-200px" alt />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="pb-0 half-section">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center mb-4">
|
||
|
|
<div class="col-lg-7 col-md-5">
|
||
|
|
<div class="outside-box-left-40 lg-outside-box-left-50 d-none d-md-inline-block">
|
||
|
|
<div class="fs-350 xl-fs-250 lg-fs-200 md-fs-150 xs-fs-100 text-light-gray fw-600 ls-minus-20px text-nowrap" data-bottom-top="transform:scale(1, 1) translate3d(0px, 0px, 0px);" data-top-bottom="transform:scale(1, 1) translate3d(-100px, 0px, 0px);">challenge</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 offset-lg-1 col-md-7 last-paragraph-no-margin">
|
||
|
|
<span class="fs-20 fw-500 mb-5px d-block text-dark-gray">Design for any device</span>
|
||
|
|
<p>Lorem ipsum is simply dummy text the printing and typesetting industry been the industry's standard dummy text ever since the when unknown.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="pb-2 pt-4 xl-pb-20px">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center justify-content-center mb-10">
|
||
|
|
<div class="col-md-7 sm-mb-30px">
|
||
|
|
<img src="images/demo-web-agency-project-detail-08.jpg" class="border-radius-6px box-shadow-double-large" alt />
|
||
|
|
</div>
|
||
|
|
<div class="col-md-3 justify-content-center d-flex">
|
||
|
|
<img src="images/demo-web-agency-project-detail-09.jpg" class="border-radius-6px box-shadow-double-large" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row align-items-center">
|
||
|
|
<div class="col-12 text-center">
|
||
|
|
<img src="images/demo-web-agency-project-detail-10.jpg" class="border-radius-6px" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="position-relative">
|
||
|
|
<div id="particles-style-02" class="position-absolute h-100 top-0 left-0 w-100 z-index-minus-2" data-particle="true" data-particle-options="{"particles":{"number":{"value":5,"density":{"enable":true,"value_area":800}},"color":{"value":"#000000"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":4,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}"></div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row mb-8">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="fs-90 md-fs-70 xs-fs-50 fw-700 text-black lh-100 md-lh-80 xs-lh-60 ls-minus-4px" data-anime="{"translateX": [-50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">Got a project in mind?</div>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#cfa6a1a9a08faba0a2aea6a1e1aca0a2" class="alt-font font-style-italic text-black fs-100 md-fs-70 xs-fs-50 fw-700 lh-120 md-lh-95 xs-lh-60 float-end ls-minus-3px" data-anime="{"translateX": [50, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }"><span class="__cf_email__" data-cfemail="8fe6e1e9e0cfebe0e2eee6e1a1ece0e2">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 col-xl-3 col-sm-6 ms-auto order-1 xs-mb-10px text-center text-sm-start overflow-hidden">
|
||
|
|
<span class="fs-16 fw-600 text-black fancy-text-style-4">
|
||
|
|
<span data-fancy-text="{ "effect": "rotate", "string": ["Thanks for visiting.", "Customer oriented agency.", "Providing excellent solutions."], "speed": 50 }"></span>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-6 text-center last-paragraph-no-margin order-3 order-xl-2 lg-mt-10px xs-mt-0"><p class="fs-16">© 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-black text-black-hover text-decoration-line-bottom fw-700">ThemeZaa</a></p></div>
|
||
|
|
<div class="col-12 col-xl-3 col-sm-6 text-end order-2 xs-mb-10px text-center text-sm-end">
|
||
|
|
<div class="elements-social social-text-style-01">
|
||
|
|
<ul class="small-icon dark fw-700 icon-with-animation">
|
||
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
|
||
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
|
||
|
|
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank">In.</a></li>
|
||
|
|
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="sticky-wrap z-index-1 d-none d-xl-inline-block" data-animation-delay="100" data-shadow-animation="true">
|
||
|
|
<div class="elements-social social-icon-style-10">
|
||
|
|
<ul class="fs-14">
|
||
|
|
<li class="me-30px"><a class="facebook" href="https://www.facebook.com/" target="_blank">
|
||
|
|
<i class="fa-brands fa-facebook-f me-10px"></i>
|
||
|
|
<span class="fw-600">Facebook</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-30px">
|
||
|
|
<a class="dribbble" href="http://www.dribbble.com" target="_blank">
|
||
|
|
<i class="fa-brands fa-dribbble me-10px"></i>
|
||
|
|
<span class="fw-600">Dribbble</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="me-30px">
|
||
|
|
<a class="twitter" href="https://www.twitter.com" target="_blank">
|
||
|
|
<i class="fa-brands fa-twitter me-10px"></i>
|
||
|
|
<span class="fw-600">Twitter</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<a class="instagram" href="https://www.instagram.com" target="_blank">
|
||
|
|
<i class="fa-brands fa-instagram me-10px"></i>
|
||
|
|
<span class="fw-600">Instagram</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="scroll-progress d-none d-xxl-block">
|
||
|
|
<a href="demo-scattered-portfolio-single-project-creative.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>
|