371 lines
15 KiB
HTML
371 lines
15 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/horizontal-portfolio/horizontal-portfolio.css" />
|
||
|
|
</head>
|
||
|
|
<body data-mobile-nav-style="classic" class="bg-dark-gray custom-cursor" style="background-image: url('images/vertical-line-bg-small-light-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-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 d-none d-lg-flex">
|
||
|
|
<div class="header-icon">
|
||
|
|
<div class="header-social-icon icon">
|
||
|
|
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
|
||
|
|
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
|
||
|
|
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto">
|
||
|
|
<a class="navbar-brand" href="demo-horizontal-portfolio.html">
|
||
|
|
<img src="images/demo-horizontal-portfolio-logo.png" data-at2x="images/demo-horizontal-portfolio-logo@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-horizontal-portfolio-logo.png" data-at2x="images/demo-horizontal-portfolio-logo@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-horizontal-portfolio-logo.png" data-at2x="images/demo-horizontal-portfolio-logo@2x.png" alt class="mobile-logo">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-auto col-lg-2 text-end">
|
||
|
|
<div class="header-icon header-push-button hamburger-push-button icon">
|
||
|
|
<div class="push-button">
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
<span></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="push-menu hamburger-nav header-dark hamburger-menu-simple bg-black" style="background-image: url('images/vertical-line-bg-small-light-gray.svg')">
|
||
|
|
<span class="close-menu text-dark-gray bg-white fs-18"><i class="fa-solid fa-xmark"></i></span>
|
||
|
|
<div class="d-flex flex-column align-items-center justify-content-center h-100 p-5 lg-p-7 sm-px-0">
|
||
|
|
<a class="hamburger-logo" href="demo-horizontal-portfolio.html">
|
||
|
|
<img src="images/demo-horizontal-portfolio-logo.png" data-at2x="images/demo-horizontal-portfolio-logo@2x.png" alt>
|
||
|
|
</a>
|
||
|
|
<div class="row align-items-center justify-content-center">
|
||
|
|
<div class="hamburger-menu menu-list-wrapper col-lg-5 lg-no-margin offset-lg-1" data-scroll-options="{ "theme": "light" }">
|
||
|
|
<ul class="menu-item-list fw-500 alt-font text-center text-lg-start">
|
||
|
|
<li class="menu-item"><a href="demo-horizontal-portfolio.html" class="nav-link">home</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-horizontal-portfolio-about.html" class="nav-link">about</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-horizontal-portfolio-services.html" class="nav-link">services</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-horizontal-portfolio-work.html" class="nav-link">work</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-horizontal-portfolio-contact.html" class="nav-link">contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-lg-4 d-none d-lg-inline-block offset-xl-3 offset-lg-2">
|
||
|
|
<div class="row menu-address">
|
||
|
|
<div class="col-12 mb-40px">
|
||
|
|
<span class="text-white fw-500 mb-5px d-block">Quick contact</span>
|
||
|
|
<div class="d-block">
|
||
|
|
<span>Phone:</span> <a href="tel:12345678910">+1 234 567 8910</a>
|
||
|
|
</div>
|
||
|
|
<div class="d-block">
|
||
|
|
<span>Email:</span> <a href="cdn-cgi/l/email-protection.html#c6afa8a0a986a2a9aba7afa8e8a5a9ab"><span class="__cf_email__" data-cfemail="c4adaaa2ab84a0aba9a5adaaeaa7aba9">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 last-paragraph-no-margin mb-40px">
|
||
|
|
<span class="text-white fw-500 mb-5px d-block">Contact address</span>
|
||
|
|
<p>701 Sondanella, 18th floor,<br>
|
||
|
|
Gunsberg, Switzerland</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 elements-social social-icon-style-10">
|
||
|
|
<ul class="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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="top-space-margin pb-0 ipad-top-space-margin">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center justify-content-center small-screen md-h-auto md-mb-8">
|
||
|
|
<div class="col-xl-9 text-center">
|
||
|
|
<span class="mb-15px fs-19 d-block text-white">Brand identity and web development</span>
|
||
|
|
<h1 class="alt-font text-white 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-24 fs-17 text-white fw-500">Published</span>
|
||
|
|
<span>11 December 2023</span>
|
||
|
|
</div>
|
||
|
|
<div class="col sm-mb-30px">
|
||
|
|
<span class="d-block lh-24 fs-17 text-white fw-500">Country</span>
|
||
|
|
<span>United kingdom</span>
|
||
|
|
</div>
|
||
|
|
<div class="col xs-mb-30px">
|
||
|
|
<span class="d-block lh-24 fs-17 text-white fw-500">Industry</span>
|
||
|
|
<span>Travel agency</span>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="d-block lh-24 fs-17 text-white fw-500">Website</span>
|
||
|
|
<a href="demo-horizontal-portfolio-single-project-creative.html#" class="text-white-hover">Craftodesign.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-12 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-white fw-500 ls-minus-2px alt-font">Brand overview</h2>
|
||
|
|
<div class="mt-auto">
|
||
|
|
<img src="images/demo-horizontal-portfolio-about-awwwards.svg" class="h-30px" alt>
|
||
|
|
<div class="fs-14 text-uppercase fw-500 mt-5px"><span class="fw-600 text-white">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-transparent-white-light pt-10px pb-10px text-white fw-500">Branding and identity</li>
|
||
|
|
<li class="border-color-transparent-white-light pt-10px pb-10px text-white fw-500">Websites and digital platforms</li>
|
||
|
|
<li class="border-color-transparent-white-light pt-10px pb-10px text-white 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-20 d-none d-md-inline-block">
|
||
|
|
<div class="fs-250 xl-fs-200 lg-fs-150 alt-font text-white opacity-1 ls-minus-10px word-break-normal" 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-white">About travel agency</span>
|
||
|
|
<p class="w-75 lg-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt and ut labore et dolore.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-7">
|
||
|
|
<div class="col-12">
|
||
|
|
<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-white">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.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12">
|
||
|
|
<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-6">
|
||
|
|
<div class="outside-box-left-30 d-none d-md-inline-block">
|
||
|
|
<div class="fs-250 xl-fs-200 lg-fs-150 alt-font text-white opacity-1 ls-minus-10px word-break-normal" 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-xl-4 col-lg-5 offset-xl-1 col-md-6 last-paragraph-no-margin">
|
||
|
|
<span class="fs-20 fw-500 mb-5px d-block text-white">Design for any device</span>
|
||
|
|
<p class="w-90 lg-w-100">Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt and ut labore et dolore.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="pt-4 pb-0">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row align-items-center mb-10">
|
||
|
|
<div class="col-md-8 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 offset-md-1 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">
|
||
|
|
<img src="images/demo-web-agency-project-detail-10.jpg" class="border-radius-6px" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="bg-gradient-dark-transparent">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row mb-8 sm-mb-50px">
|
||
|
|
|
||
|
|
<div class="col-lg-4 col-md-3 sm-mb-40px">
|
||
|
|
<img src="images/demo-horizontal-portfolio-logo.png" data-at2x="images/demo-horizontal-portfolio-logo@2x.png" alt class="default-logo">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="col-xl-7 col-lg-8 col-md-9 offset-xl-1">
|
||
|
|
<h2 class="alt-font fw-400 text-white mb-15px">Let's make something work great together.</h2>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#fe97908f8b978c979b8dbe9a91939f9790d09d9193" class="fs-22 ls-minus-05px text-base-color text-base-color-hover btn btn-link-gradient expand text-transform-none"><span class="__cf_email__" data-cfemail="21484f5054485348445261454e4c40484f0f424e4c">[email protected]</span><span class="bg-base-color"></span></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="container">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-xl-4 col-lg-4 md-mb-30px sm-mb-20px elements-social social-text-style-01">
|
||
|
|
<ul class="medium-icon light">
|
||
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
|
||
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
|
||
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
|
||
|
|
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-7 col-lg-8 offset-xl-1">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-lg-3 col-md-4 sm-mb-20px">
|
||
|
|
<span class="d-block text-white mb-10px">Company info</span>
|
||
|
|
<ul>
|
||
|
|
<li><a href="demo-horizontal-portfolio-about.html">About us</a></li>
|
||
|
|
<li><a href="demo-horizontal-portfolio-services.html">Our service</a></li>
|
||
|
|
<li><a href="demo-horizontal-portfolio-work.html">Latest work</a></li>
|
||
|
|
<li><a href="demo-horizontal-portfolio-contact.html">Contact us</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-3 col-md-3 offset-lg-1">
|
||
|
|
<span class="d-block text-white mb-10px">Studio</span>
|
||
|
|
<p class="lh-28">701 Sondanella, 18th floor, Gunsberg, Switzerland</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-4 col-md-4 offset-md-1">
|
||
|
|
<span class="d-block text-white mb-10px">Start a conversation</span>
|
||
|
|
<a href="tel:12345678910" class="text-medium-gray d-block">+1 234 567 8910</a>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#a8c1c6cec7e8ccc7c5c9c1c686cbc7c5" class="text-medium-gray"><span class="__cf_email__" data-cfemail="177e7971785773787a767e793974787a">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</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>
|
||
|
|
</body>
|
||
|
|
</html>
|