<!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>