267 lines
13 KiB
HTML
267 lines
13 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/minimal-portfolio/minimal-portfolio.css" />
|
|
</head>
|
|
<body class="left-modern-menu custom-cursor">
|
|
|
|
<div class="cursor-page-inner">
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|
</div>
|
|
|
|
|
|
<header class="left-modern-header" id="navbar-menu">
|
|
<div class="left-modern-sidebar header-light bg-white">
|
|
<a class="navbar-brand section-link" href="demo-minimal-portfolio.html">
|
|
<img src="images/demo-minimal-portfolio-logo-black.png" data-at2x="images/demo-minimal-portfolio-logo-black@2x.png" alt class="default-logo">
|
|
<img src="images/demo-minimal-portfolio-logo-black.png" data-at2x="images/demo-minimal-portfolio-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-minimal-portfolio-mobile-logo-black@2x.png" data-at2x="images/demo-minimal-portfolio-mobile-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
<div class="toggle-icon">
|
|
<div class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</div>
|
|
</div>
|
|
<div class="vertical-title">
|
|
<div class="title elements-social social-icon-style-10">
|
|
<ul class="extra-small-icon dark fw-600">
|
|
<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>
|
|
</div>
|
|
|
|
<nav class="modern-sidebar-nav header-light bg-white">
|
|
<div class="h-100">
|
|
<div class="modern-side-menu" data-scroll-options="{ "theme": "light" }">
|
|
<ul class="menu-item-list alt-font fw-600 ls-minus-1px">
|
|
<li class="menu-item">
|
|
<a href="demo-minimal-portfolio.html" class="nav-link">Home</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="demo-minimal-portfolio-about.html" class="nav-link">About</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="demo-minimal-portfolio-expertise.html" class="nav-link">Expertise</a>
|
|
</li>
|
|
<li class="menu-item">
|
|
<a href="demo-minimal-portfolio-contact.html" class="nav-link">Contact</a>
|
|
</li>
|
|
</ul>
|
|
<div class="mt-30">
|
|
<span class="d-block lh-24 fs-15 w-95">Looking for collaboration for your next creative project?</span>
|
|
<div class="mt-5px">
|
|
<i class="bi bi-envelope me-5px align-middle"></i><a href="cdn-cgi/l/email-protection.html#f79f929b9b98b793989a969e99d994989a" class="text-dark-gray-hover fw-600 align-middle"><span class="__cf_email__" data-cfemail="224a474e4e4d62464d4f434b4c0c414d4f">[email protected]</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
|
|
<section class="bg-light-gray py-0 overflow-hidden position-relative ipad-top-space" style="background-image: url('images/demo-minimal-portfolio-pattern.svg')">
|
|
<div class="container-fluid h-100 p-0">
|
|
<div class="row g-0 h-100 flex-column-reverse">
|
|
<div class="col-lg-6 pt-6 pb-6 ps-8 pe-8 xxl-ps-4 xxl-pe-6 lg-ps-4 lg-pe-8 md-ps-15px md-pe-15px">
|
|
<div class="h-100">
|
|
<div class="row mb-13 xl-mb-70px sm-mb-50px">
|
|
<div class="col-12">
|
|
<h1 class="fs-130 xxl-fs-110 lg-fs-80 ls-minus-7px md-ls-minus-2px mb-20px d-block">Moore</h1>
|
|
</div>
|
|
<div class="col-xl-10 offset-xl-2">
|
|
<span class="fs-150 xxl-fs-110 lg-fs-80 lh-100 lg-lh-60 fw-700 ls-minus-5px md-ls-minus-2px mb-8 md-mb-30px d-block">Skills.</span>
|
|
</div>
|
|
<div class="col-xxl-9 offset-xxl-2 last-paragraph-no-margin">
|
|
<p class="md-w-65 sm-w-80 xs-w-100">Our expertise in digital media enables us to deliver tailored solutions that drive engagement, enhance brand visibility, and generate measurable results.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-35px">
|
|
<div class="col-12">
|
|
<span class="mb-10px d-block fs-18 fw-600">Design services</span>
|
|
<div class="position-relative">
|
|
<h6 class="fw-600 mb-0 me-25px absolute-middle-right ls-minus-2px">01</h6>
|
|
<div class="separator-line-1px w-100 d-block bg-black"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center mb-13 xl-mb-50px">
|
|
<div class="col-xxl-6 col-lg-12 col-md-8 last-paragraph-no-margin xl-mb-20px">
|
|
<p>Our design process is collaborative, involving regular communication and feedback to ensure that the final result meets and exceeds your expectations.</p>
|
|
</div>
|
|
<div class="col-xxl-5 col-xl-6 col-lg-12 col-md-4 offset-xxl-1">
|
|
<ul class="p-0 m-0 list-style-02" data-anime="{ "el": "childs", "translateY": [30, 0], "rotateY":[100, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Website design</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Landing page design</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Motion graphics</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Responsive design</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-35px">
|
|
<div class="col-12">
|
|
<span class="mb-10px d-block fs-18 fw-600">Web development</span>
|
|
<div class="position-relative">
|
|
<h6 class="fw-600 mb-0 me-25px absolute-middle-right ls-minus-2px">02</h6>
|
|
<div class="separator-line-1px w-100 d-block bg-black"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row align-items-center mb-13 xl-mb-50px">
|
|
<div class="col-xxl-6 col-lg-12 col-md-8 last-paragraph-no-margin xl-mb-20px">
|
|
<p>Our web development services are tailored to create powerful and engaging online experiences that captivate audiences and drive business growth.</p>
|
|
</div>
|
|
<div class="col-xxl-5 col-xl-6 col-lg-12 col-md-4 offset-xxl-1">
|
|
<ul class="p-0 m-0 list-style-02" data-anime="{ "el": "childs", "translateY": [30, 0], "rotateY":[100, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Web development</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Website maintenance</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Mobile app development</li>
|
|
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Theme development</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="row mb-13 xl-mb-50px">
|
|
<div class="col-12">
|
|
<h4 class="ls-minus-1px mb-30px d-block">Honorable <span class="fw-700">awards</span></h4>
|
|
</div>
|
|
<div class="col-12" data-anime="{ "el": "childs", "translateY": [-15, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|
<div class="row border-top border-color-dark-gray g-0">
|
|
<div class="col-1 text-center align-self-center">
|
|
<span class="fs-14 fw-600">9X</span>
|
|
</div>
|
|
<div class="col-xl-10 col-9 last-paragraph-no-margin ps-30px pe-30px pt-20px pb-20px xs-ps-15px xs-pe-15px">
|
|
<p>Site of the day - <span class="fw-600">Awwwards</span></p>
|
|
</div>
|
|
<div class="col-xl-1 col-2 align-self-center text-center">
|
|
<span class="fs-14 fw-600">2021</span>
|
|
</div>
|
|
</div>
|
|
<div class="row border-top border-color-dark-gray g-0">
|
|
<div class="col-1 text-center align-self-center">
|
|
<span class="fs-14 fw-600">2X</span>
|
|
</div>
|
|
<div class="col-xl-10 col-9 last-paragraph-no-margin ps-30px pe-30px pt-20px pb-20px xs-ps-15px xs-pe-15px">
|
|
<p>Site of the year - <span class="fw-600">CSS Design Awards</span></p>
|
|
</div>
|
|
<div class="col-xl-1 col-2 align-self-center text-center">
|
|
<span class="fs-14 fw-600">2020</span>
|
|
</div>
|
|
</div>
|
|
<div class="row border-top border-color-dark-gray g-0">
|
|
<div class="col-1 text-center align-self-center">
|
|
<span class="fs-14 fw-600">4X</span>
|
|
</div>
|
|
<div class="col-xl-10 col-9 last-paragraph-no-margin ps-30px pe-30px pt-20px pb-20px xs-ps-15px xs-pe-15px">
|
|
<p>Site of the month - <span class="fw-600">Awwwards</span></p>
|
|
</div>
|
|
<div class="col-xl-1 col-2 align-self-center text-center">
|
|
<span class="text-dark-gray fs-14 fw-600">2019</span>
|
|
</div>
|
|
</div>
|
|
<div class="row border-top border-bottom border-color-dark-gray g-0">
|
|
<div class="col-1 text-center align-self-center">
|
|
<span class="fs-14 fw-600">3X</span>
|
|
</div>
|
|
<div class="col-xl-10 col-9 last-paragraph-no-margin ps-30px pe-30px pt-20px pb-20px xs-ps-15px xs-pe-15px">
|
|
<p>Site of the day - <span class="fw-600">The portfolio</span></p>
|
|
</div>
|
|
<div class="col-xl-1 col-2 align-self-center text-center">
|
|
<span class="fs-14 fw-600">2018</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row text-lg-start text-center">
|
|
<div class="col-12">
|
|
<span class="fs-50 lg-fs-40 ls-minus-3px lg-ls-minus-2px mb-10px md-outside-box-left-8 xs-outside-box-left-0 d-block">New project in mind?</span>
|
|
</div>
|
|
<div class="col-12 text-lg-end text-center">
|
|
<a href="cdn-cgi/l/email-protection.html#94fdfaf2fbd4f0fbf9f5fdfabaf7fbf9" class="alt-font fs-60 xl-fs-50 lg-fs-40 fw-700 ls-minus-3px xl-ls-minus-1px xs-ls-minus-2px md-outside-box-right-7 xs-outside-box-right-0"><span class="__cf_email__" data-cfemail="6e070008012e0a01030f0700400d0103">[email protected]</span></a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12 mb-45px mt-45px xl-mb-30px xl-mt-30px">
|
|
<div class="separator-line-1px w-100 d-block bg-black"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col elements-social social-icon-style-06 d-flex justify-content-center">
|
|
<ul class="medium-icon fw-600">
|
|
<li><a class="facebook" href="https://www.facebook.com" target="_blank"><span class="brand-label">Fb</span><span class="brand-icon fa-brands fa-facebook-f"></span></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><span class="brand-label">Db</span><span class="brand-icon fa-brands fa-dribbble"></span></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><span class="brand-label">Tw</span><span class="brand-icon fa-brands fa-twitter"></span></a></li>
|
|
<li><a class="behance" href="http://www.behance.com" target="_blank"><span class="brand-label">Be</span><span class="brand-icon fa-brands fa-behance"></span></a></li>
|
|
<li><a class="pinterest" href="https://in.pinterest.com" target="_blank"><span class="brand-label">Pt</span><span class="brand-icon fa-brands fa-pinterest-p"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 cover-background h-100 position-fixed position-md-relative top-0px right-0px bg-black">
|
|
<div class="swiper h-100 banner-slider md-h-850px sm-h-450px swiper-light-pagination" data-slider-options="{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-pagination-bullets", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "stopOnLastSlide": true, "disableOnInteraction": false },"keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "fade" }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-minimal-portfolio-about-title-bg.jpg');"></div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-minimal-portfolio-about-title-bg-02.jpg');"></div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-minimal-portfolio-about-title-bg-03.jpg');"></div>
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<div class="position-absolute left-0px top-0px w-100 h-100 cover-background" style="background-image:url('images/demo-minimal-portfolio-about-title-bg-04.jpg');"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets d-none"></div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<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> |