<!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#e8808d848487a88c8785898186c68b8785" class="text-dark-gray-hover fw-600 align-middle"><span class="__cf_email__" data-cfemail="4b232e2727240b2f24262a222565282426">[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">About</h1>
</div>
<div class="col-xl-10 offset-xl-2 col-lg-12">
<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">Mark.</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">A passionate and innovative creative designer who thrives on transforming ideas into captivating visual experiences. With 20 years of experience in the industry, Moore possesses a remarkable talent for pushing the boundaries of design and delivering exceptional results. </p>
</div>
</div>
<div class="row mb-35px">
<div class="col-12">
<span class="mb-10px d-block fs-18 fw-600">Design skills</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 mb-13 xl-mb-50px">
<div class="col-xxl-5 col-lg-6 col-sm-4 xs-mb-15px">
<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>Brand strategy</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Video production</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Research and testing</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>Usability consulting</li>
</ul>
</div>
<div class="col-xxl-5 col">
<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>Art direction</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Graphic design</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Content creation</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Illustrations</li>
<li><i class="fa-solid fa-plus fs-12 me-10px"></i>Web development</li>
</ul>
</div>
</div>
<div class="row mb-35px">
<div class="col-12">
<span class="mb-10px d-block fs-18 fw-600">Work experience</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 mb-13 xl-mb-50px">
<div class="col-lg-12" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
<div class="row align-items-start mb-25px">
<div class="col-xxl-2 col-auto xl-mb-10px">
<div class="fw-600">Apple</div>
</div>
<div class="col-xxl-8 last-paragraph-no-margin">
<p>Apple is a multinational technology company. Apple is widely recognized for its innovative products.</p>
</div>
</div>
<div class="row align-items-start mb-25px">
<div class="col-xxl-2 col-auto xl-mb-10px">
<div class="fw-600">Google</div>
</div>
<div class="col-xxl-8 last-paragraph-no-margin">
<p>Designers create wireframes to outline the layout, structure, and functionality of the design.</p>
</div>
</div>
<div class="row align-items-start">
<div class="col-xxl-2 col-auto xl-mb-10px">
<div class="fw-600">Adidas</div>
</div>
<div class="col-xxl-8 last-paragraph-no-margin">
<p>Adidas is a multinational sportswear and lifestyle brand known for its athletic footwear and apparel.</p>
</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#bcd5d2dad3fcd8d3d1ddd5d292dfd3d1" 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="cca5a2aaa38ca8a3a1ada5a2e2afa3a1">[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>