390 lines
17 KiB
HTML
390 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/web-agency/web-agency.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="classic" class="background-position-center-top" style="background-image: url('images/vertical-line-bg-small-medium-gray.svg')">
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-light header-transparent 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-web-agency.html">
|
|
<img src="images/demo-web-agency-logo-black.png" data-at2x="images/demo-web-agency-logo-black@2x.png" alt class="default-logo">
|
|
<img src="images/demo-web-agency-logo-black.png" data-at2x="images/demo-web-agency-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-web-agency-logo-black.png" data-at2x="images/demo-web-agency-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto 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-web-agency.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-about.html" class="nav-link">Agency</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon">
|
|
<a href="demo-web-agency-expertise.html" class="nav-link">Expertise</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-web-agency-services-details.html">
|
|
<img src="images/demo-web-agency-expertise-06.png" class="w-40px" alt />
|
|
<div class="submenu-icon-content">
|
|
<span>Web design</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-web-agency-services-details.html">
|
|
<img src="images/demo-web-agency-expertise-07.png" class="w-40px" alt />
|
|
<div class="submenu-icon-content">
|
|
<span>Web development</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-web-agency-services-details.html">
|
|
<img src="images/demo-web-agency-expertise-08.png" class="w-40px" alt />
|
|
<div class="submenu-icon-content">
|
|
<span>eCommerce solution</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-web-agency-services-details.html">
|
|
<img src="images/demo-web-agency-expertise-09.png" class="w-40px" alt />
|
|
<div class="submenu-icon-content">
|
|
<span>Content writing</span>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-web-agency-projects.html" class="nav-link">Projects</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-people.html" class="nav-link">People</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-blog.html" class="nav-link">Blog</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto col-lg-2 text-end">
|
|
<div class="header-icon">
|
|
<div class="header-button">
|
|
<a href="demo-web-agency-about.html" class="btn btn-rounded btn-dark-gray btn-medium btn-switch-text btn-box-shadow text-transform-none">
|
|
<span>
|
|
<span class="btn-double-text" data-text="Hire agency">Hire agency</span>
|
|
<span><i class="fa-solid fa-arrow-right"></i></span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="p-0 top-space-margin sm-pb-30px">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center small-screen sm-h-auto">
|
|
<div class="col-xl-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-600">Published</span>
|
|
<span>11 December 2023</span>
|
|
</div>
|
|
<div class="col sm-mb-30px">
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-600">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-600">Industry</span>
|
|
<span>Health care</span>
|
|
</div>
|
|
<div class="col">
|
|
<span class="d-block lh-22 fs-18 text-dark-gray fw-600">Website</span>
|
|
<a href="demo-web-agency-single-project-creative.html#" class="text-dark-gray-hover">Craftohealth.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 class="pb-0">
|
|
<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-600">Branding and identity</li>
|
|
<li class="border-color-dark-gray pt-10px pb-10px text-dark-gray fw-600">Websites and digital platforms</li>
|
|
<li class="border-color-dark-gray pt-10px pb-10px text-dark-gray fw-600">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-300 lg-fs-250 md-fs-180 text-base-color fw-600 ls-minus-20px 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 position-relative">
|
|
<span class="fs-20 fw-600 mb-5px d-block text-dark-gray">About travel agency</span>
|
|
<p class="w-80 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-600 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.</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">
|
|
<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="p-0">
|
|
<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-300 lg-fs-250 md-fs-180 text-base-color fw-600 ls-minus-20px 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-lg-4 offset-lg-1 col-md-7 position-relative last-paragraph-no-margin">
|
|
<span class="fs-20 fw-600 mb-5px d-block text-dark-gray">Design for any device</span>
|
|
<p>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="pb-2 pt-4 md-pb-5">
|
|
<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>
|
|
|
|
|
|
<section class="pb-4 sm-pt-30px sm-pb-40px overflow-hidden position-relative">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-sm-5 text-center text-sm-start">
|
|
<div class="outside-box-left-25 xl-outside-box-left-10 sm-outside-box-left-0">
|
|
<div class="fs-350 xl-fs-250 lg-fs-200 md-fs-170 sm-fs-100 text-dark-gray fw-600 ls-minus-20px word-break-normal">work</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-7 text-center text-sm-end">
|
|
<div class="outside-box-right-5 sm-outside-box-right-0">
|
|
<div class="fs-350 xl-fs-250 lg-fs-200 md-fs-170 sm-fs-100 text-base-color fw-600 ls-minus-20px position-relative d-inline-block word-break-normal">together
|
|
<div class="position-absolute left-minus-140px top-minus-140px z-index-9 xl-left-minus-110px top-minus-140px xl-top-minus-100px md-top-minus-90px z-index-9 xl-w-230px md-w-200px d-none d-md-block">
|
|
<img src="images/demo-web-agency-05.png" class="animation-rotation" alt>
|
|
<div class="absolute-middle-center w-100 z-index-minus-1"><img src="images/demo-web-agency-04.png" alt></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="p-0">
|
|
<div class="container">
|
|
<div class="row align-items-center mb-4 sm-mb-6">
|
|
<div class="col-md-10 col-sm-8 text-center text-sm-start xs-mb-25px">
|
|
<h5 class="mb-0 text-dark-gray fw-400 ls-minus-1px">Let's make something great <a href="demo-web-agency-contact.html" class="text-decoration-line-bottom-medium fw-600 text-dark-gray text-dark-gray-hover">work together?</a></h5>
|
|
</div>
|
|
<div class="col-md-2 col-sm-4 text-center text-sm-end">
|
|
<a href="demo-web-agency.html" class="footer-logo d-inline-block"><img src="images/demo-web-agency-logo-black.png" data-at2x="images/demo-web-agency-logo-black@2x.png" alt></a>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-end mb-6 sm-mb-40px">
|
|
|
|
<div class="col-lg-3 col-sm-4 text-center text-sm-start xs-mb-25px last-paragraph-no-margin">
|
|
<span class="d-block text-dark-gray ls-minus-05px mb-5px fw-600">Crafto - London</span>
|
|
<p class="w-80 lg-w-100 text-medium-gray fs-15 lh-28">401 Broadway, 24th Floor, Orchard View, London, UK</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-sm-4 text-center text-sm-start xs-mb-25px last-paragraph-no-margin">
|
|
<span class="d-block text-dark-gray ls-minus-05px mb-5px fw-600">Crafto - France</span>
|
|
<p class="w-80 lg-w-100 text-medium-gray fs-15 lh-28">27 Eden Walk Eden Centre, Orchard View, Paris, France</p>
|
|
</div>
|
|
|
|
|
|
<div class="col-md-3 col-sm-4 last-paragraph-no-margin ms-auto text-center text-sm-end">
|
|
<a href="tel:1235678901" class="text-dark-gray d-block lh-18 text-dark-gray-hover">+ 123 567 8901</a>
|
|
<a href="cdn-cgi/l/email-protection.html#bed7d0d8d1fedad1d3dfd7d090ddd1d3" class="text-dark-gray text-dark-gray-hover fw-600 text-decoration-line-bottom"><span class="__cf_email__" data-cfemail="f990979f96b99d9694989097d79a9694">[email protected]</span></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom pt-25px pb-25px border-top border-color-charcoal-grey">
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-7 text-center text-lg-start md-mb-10px">
|
|
<ul class="footer-navbar fw-600 fs-16">
|
|
<li class="nav-item active"><a href="demo-web-agency.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-about.html" class="nav-link">Agency</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-expertise.html" class="nav-link">Expertise</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-projects.html" class="nav-link">Projects</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-people.html" class="nav-link">People</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-blog.html" class="nav-link">Blog</a></li>
|
|
<li class="nav-item"><a href="demo-web-agency-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-lg-5 text-center text-lg-end">
|
|
<span class="fs-15">© 2024 Crafto is Proudly Powered by <a href="https://www.themezaa.com/" class="text-decoration-line-bottom text-dark-gray text-dark-gray-hover fw-500" target="_blank">ThemeZaa</a></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-web-agency-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> |