Access_New/pages/demo-minimal-portfolio-expertise.html

267 lines
13 KiB
HTML
Raw Normal View History

2024-09-05 05:48:27 +00:00
<!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="{ &quot;theme&quot;: &quot;light&quot; }">
<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&#160;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="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;rotateY&quot;:[100, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<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="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;rotateY&quot;:[100, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<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="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [-15, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 200, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<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&#160;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="{ &quot;slidesPerView&quot;: 1, &quot;loop&quot;: true, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-bullets&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;autoplay&quot;: { &quot;delay&quot;: 4000, &quot;stopOnLastSlide&quot;: true, &quot;disableOnInteraction&quot;: false },&quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;effect&quot;: &quot;fade&quot; }">
<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>