338 lines
15 KiB
HTML
338 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/vertical-portfolio/vertical-portfolio.css" />
|
||
|
|
</head>
|
||
|
|
<body data-mobile-nav-style="classic" class="background-position-center-top" style="background-image: url('images/demo-vertical-portfolio-dotted-pattern.svg')">
|
||
|
|
|
||
|
|
<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-vertical-portfolio.html">
|
||
|
|
<img src="images/demo-vertical-portfolio-logo-white.png" data-at2x="images/demo-vertical-portfolio-logo-white@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-vertical-portfolio-logo-white.png" data-at2x="images/demo-vertical-portfolio-logo-white@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-vertical-portfolio-logo-white.png" data-at2x="images/demo-vertical-portfolio-logo-white@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 hamburger-menu-simple header-dark bg-base-color background-position-center-top" style="background-image: url('images/demo-vertical-portfolio-bg-03.jpg');">
|
||
|
|
<span class="close-menu text-dark-gray bg-white"><i class="fa-solid fa-xmark"></i></span>
|
||
|
|
<div class="container h-100">
|
||
|
|
<div class="row align-items-center justify-content-center h-100">
|
||
|
|
<div class="col-xl-8 col-lg-7 col-md-6 d-none d-lg-inline-block">
|
||
|
|
<span class="fs-200 lh-165 lg-fs-150 text-light-green alt-font">UK based branding agency.</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-3 col-lg-4 offset-xl-1 col-md-5 text-center text-md-start">
|
||
|
|
<div class="hamburger-menu menu-list-wrapper" data-scroll-options="{ "theme": "light" }">
|
||
|
|
<ul class="menu-item-list alt-font p-0 text-center text-lg-start">
|
||
|
|
<li class="menu-item"><a href="demo-vertical-portfolio.html" class="nav-link">Home</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-vertical-portfolio-about.html" class="nav-link">About</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-vertical-portfolio-services.html" class="nav-link">Services</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-vertical-portfolio-projects.html" class="nav-link">Projects</a></li>
|
||
|
|
<li class="menu-item"><a href="demo-vertical-portfolio-contact.html" class="nav-link">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 menu-text text-center pt-2 pb-2 order-3 d-none d-lg-inline-block">
|
||
|
|
<div class="divider-style-03 divider-style-03-03 border-color-transparent-white-light mb-2"></div>
|
||
|
|
<span class="fs-22 d-inline-block align-middle mb-0 text-white">Let's build something great together</span>
|
||
|
|
<div class="separator-line-1px d-inline-block align-middle ms-20px me-20px mt-5px w-70px bg-white"></div>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#254d4049494a6546574443514a0b464a48" class="text-white fs-22 d-inline-block align-middle"><span class="__cf_email__" data-cfemail="bcd4d9d0d0d3fcdfcedddac8d392dfd3d1">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</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-white">Brand identity and web development</span>
|
||
|
|
<h1 class="fw-600 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-22 fs-18 text-white fw-500">Published</span>
|
||
|
|
<span>26 july 2023</span>
|
||
|
|
</div>
|
||
|
|
<div class="col sm-mb-30px">
|
||
|
|
<span class="d-block lh-22 fs-18 text-white fw-500">Country</span>
|
||
|
|
<span>United kingdom</span>
|
||
|
|
</div>
|
||
|
|
<div class="col xs-mb-30px">
|
||
|
|
<span class="d-block lh-22 fs-18 text-white fw-500">Industry</span>
|
||
|
|
<span>Travel agency</span>
|
||
|
|
</div>
|
||
|
|
<div class="col">
|
||
|
|
<span class="d-block lh-22 fs-18 text-white fw-500">Website</span>
|
||
|
|
<a href="demo-vertical-portfolio-single-project-creative.html#" class="text-white-hover">rehlattravel.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-white fw-600 ls-minus-2px">Brand overview</h2>
|
||
|
|
<div class="mt-auto">
|
||
|
|
<img src="images/demo-horizontal-portfolio-about-awwwards.svg" alt>
|
||
|
|
<div class="fs-14 text-uppercase fw-500 mt-5px"><span class="fw-700 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 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-350 xl-fs-250 lg-fs-200 md-fs-150 text-white opacity-1 fw-600 ls-minus-10px 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-white">About travel agency</span>
|
||
|
|
<p class="w-80 lg-w-100">Lorem ipsum is text the printing and typesetting industry been the industry's standard dummy text ever since.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-7 justify-content-center">
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<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-xl-6 col-lg-8 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 exercitation ullamco laboris aliquip dummy text.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-lg-10">
|
||
|
|
<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-350 xl-fs-250 lg-fs-200 md-fs-150 text-white opacity-1 fw-600 ls-minus-10px 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-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>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="pt-2">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-center align-items-center mb-7">
|
||
|
|
<div class="col-lg-7 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-lg-3 col-md-4 text-center">
|
||
|
|
<img src="images/demo-web-agency-project-detail-09.jpg" class="border-radius-6px box-shadow-double-large" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-lg-10 text-centert">
|
||
|
|
<img src="images/demo-web-agency-project-detail-10.jpg" class="border-radius-6px" alt />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
|
||
|
|
<footer class="pb-3 bg-black-transparent-light">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row mb-5 md-mb-30px text-md-start text-center justify-content-md-start justify-content-center">
|
||
|
|
<div class="col-lg-2 md-mb-30px">
|
||
|
|
<a href="demo-vertical-portfolio.html" class="footer-logo"><img src="images/demo-vertical-portfolio-logo-white.png" data-at2x="images/demo-vertical-portfolio-logo-white@2x.png" alt></a>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-5 col-lg-6 col-md-8 ">
|
||
|
|
<h3 class="text-white fw-500 mb-50px sm-mb-30px">Let's make something great work together.</h3>
|
||
|
|
<div class="row sm-mb-30px justify-content-md-start justify-content-center">
|
||
|
|
<div class="col-md-5 col-sm-4 xs-mb-15px">
|
||
|
|
<span class="text-white d-block lh-20">Call our office</span>
|
||
|
|
<a href="tel:12345678910">+1 234 567 8910</a>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-5 col-sm-4">
|
||
|
|
<span class="text-white d-block lh-20">Send a message</span>
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#acc5c2cac3ecc8c3c1cdc5c282cfc3c1"><span class="__cf_email__" data-cfemail="b7ded9d1d8f7d3d8dad6ded999d4d8da">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 col-sm-4 col-5 offset-xl-1">
|
||
|
|
<span class="d-block text-white">Company</span>
|
||
|
|
<ul>
|
||
|
|
<li><a href="demo-vertical-portfolio.html">Home</a></li>
|
||
|
|
<li><a href="demo-vertical-portfolio-about.html">About</a></li>
|
||
|
|
<li><a href="demo-vertical-portfolio-services.html">Services</a></li>
|
||
|
|
<li><a href="demo-vertical-portfolio-projects.html">Projects</a></li>
|
||
|
|
<li><a href="demo-vertical-portfolio-contact.html">Contact</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-2 col-sm-4 col-5">
|
||
|
|
<span class="d-block text-white">Follow Us</span>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.pinterest.com/" target="_blank">Pinterest</a></li>
|
||
|
|
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
|
||
|
|
<li><a href="http://www.dribbble.com" target="_blank">Dribbble</a></li>
|
||
|
|
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
|
||
|
|
<li><a href="http://www.behance.com" target="_blank">Behance</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row text-md-start text-center">
|
||
|
|
<div class="col-lg-6 col-md-8 offset-lg-2 sm-mb-30px last-paragraph-no-margin">
|
||
|
|
<p class="fs-14 lh-24 w-85 lg-w-100">This site is protected by reCAPTCHA and the Google privacy policy and terms of service apply. You must not use this website if you disagree.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-xxl-3 col-md-4 last-paragraph-no-margin">
|
||
|
|
<p class="fs-14 lh-24">© 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
|
||
|
|
</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>
|