821 lines
73 KiB
PHP
821 lines
73 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="keywords" content="HTML Template, site template, seo, marketing, creative, corporate, modern, multipurpose, one page, business, responsive, minimal, saas, startup">
|
|
<meta name="author" content="LiquidThemes">
|
|
<meta name="description" content="Hub is a HTML template with high performance, and award-winning design collection.">
|
|
<meta property="og:title" content="Hub HTML template">
|
|
<meta property="og:description" content="Hub is a HTML template with high performance, and award-winning design collection.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:image" content="./assets/images/common/og-image.jpg">
|
|
|
|
<link rel="stylesheet" href="./assets/vendors/liquid-icon/lqd-essentials/lqd-essentials.min.css">
|
|
<link rel="stylesheet" href="./assets/css/theme.min.css">
|
|
<link rel="stylesheet" href="./assets/css/utility.min.css">
|
|
<link rel="stylesheet" href="./assets/css/demo/dark-portfolio/base.css">
|
|
<link rel="stylesheet" href="./assets/css/demo/dark-portfolio/dark-portfolio.css">
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
|
<title>Dark Portfolio Pro</title>
|
|
<script>
|
|
window.liquidParams = {
|
|
currentZIndex: 10
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="lqd-pf-single lqd-pf-single-style-1 lqd-preloader-activated lqd-preloader-style-curtain site-wide-layout" data-mobile-nav-breakpoint="1199" data-mobile-nav-style="minimal" data-mobile-nav-scheme="custom" data-mobile-nav-trigger-alignment="right" data-mobile-header-scheme="custom" data-mobile-logo-alignment="default" data-lqd-cc="true">
|
|
|
|
<section>
|
|
<h2 class="screen-reader-text">Skip links</h2>
|
|
<ul class="liquid-skip-link screen-reader-text">
|
|
<li>
|
|
<a href="#primary" class="screen-reader-shortcut"> Skip to primary navigation</a>
|
|
</li>
|
|
<li>
|
|
<a href="#content" class="screen-reader-shortcut"> Skip to content</a>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<div class="lqd-preloader-wrap lqd-preloader-curtain" data-preloader-options='{ "animationType" : "slide", "animationTargets" : ".lqd-preloader-curtain-el", "stagger" : 215 }'>
|
|
<div class="lqd-preloader-inner">
|
|
<div class="lqd-preloader-curtain-el absolute top-0 start-0 lqd-preloader-curtain-front"></div>
|
|
<div class="lqd-preloader-curtain-el absolute top-0 start-0 lqd-preloader-curtain-back"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="wrap">
|
|
|
|
<div class="lqd-sticky-placeholder hidden"></div>
|
|
<header class="main-header main-header-overlay sticky-header-noshadow main-header-dynamiccolors lqd-active-row-dark bg-transparent pointer-events-none" data-sticky-header="true" data-sticky-values-measured="false" data-sticky-options='{ "disableOnMobile" :true, "dynamicColors" :true }' style="background-image: linear-gradient(180deg, rgba(0,0,0,0.73) 2.2293%, rgba(0,0,0,0.65) 19%, rgba(0,0,0,0.54) 34%, rgba(0,0,0,0.38) 48.5924%, rgba(0,0,0,0.19) 65.3185%, rgba(0,0,0,0.13) 73%, rgba(0,0,0,0.07) 80.9554%, rgba(0,0,0,0.04) 86.3185%, rgba(0,0,0,0.02) 88.4522%, rgba(17,17,17,0.01) 96.5924%, rgba(0,0,0,0) 96.8153%, rgba(0,0,0,0) 100%);">
|
|
<section class="lqd-section lqd-head-sec-wrap px-40 md:hidden">
|
|
<div class="lqd-head-sec container-fluid flex items-stretch justify-between p-0">
|
|
<div class="col lqd-head-col">
|
|
<div class="header-module module-logo no-rotate navbar-brand-plain py-55">
|
|
<a class="navbar-brand pointer-events-auto" href="./index-dark-portfolio.html" rel="home">
|
|
<span class="navbar-brand-inner">
|
|
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
|
|
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col lqd-head-col justify-end">
|
|
<div class="header-module module-primary-nav flex-col items-end">
|
|
<div class="collapse navbar-collapse lqd-submenu-default-style navbar-visible-ontoggle flex-col items-stretch px-5" id="main-header-collapse" aria-expanded="false" role="navigation">
|
|
<ul class="main-nav lqd-menu-counter-right main-nav-hover-fade-inactive nav reset-ul h-full flex items-stretch justify-end link-14 link-white-80 pointer-events-auto" data-submenu-options='{ "toggleType" : "fade" , "handler" : "mouse-in-out" }' data-localscroll="true" data-localscroll-options='{ "itemsSelector" : "> li > a", "trackWindowScroll" : true }'>
|
|
<li class="is-active">
|
|
<a href="#portfolio" aria-current="page">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#about">About</a>
|
|
</li>
|
|
<li class="menu-item-has-children">
|
|
<a href="#case-studies">
|
|
Case Studies
|
|
<span class="submenu-expander"></span>
|
|
</a>
|
|
<ul class="nav-item-children">
|
|
<li>
|
|
<a href="./page-dark-portfolio-nexa-mobile.html">Nexa Mobile</a>
|
|
</li>
|
|
<li>
|
|
<a href="./page-dark-portfolio-the-portraits.html">The Portraits</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Before – After</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Minimal</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Sticky</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Slider</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Classic Stack</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Video</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">User Interface</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="header-module flex-col items-end py-10 ml-25">
|
|
<button class="nav-trigger main-nav-trigger collapsed style-2 solid rounded-full txt-left relative flex items-center justify-center pointer-events-auto text-white hover:text-white module-trigger" type="button" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#main-header-collapse" aria-expanded="false" aria-controls="main-header-collapse">
|
|
<span class="bars relative ml-10">
|
|
<span class="bars-inner w-full h-full flex flex-col">
|
|
<span class="bar relative"></span>
|
|
<span class="bar relative"></span>
|
|
<span class="bar relative"></span>
|
|
</span>
|
|
</span>
|
|
<span class="txt">Menu</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="lqd-section lqd-mobile-sec">
|
|
<div class="lqd-mobile-sec-inner navbar-header flex items-stretch justify-between bg-gray-800">
|
|
<div class="lqd-mobile-modules-container"></div>
|
|
<button type="button" class="navbar-toggle collapsed nav-trigger style-mobile flex items-center text-white" data-ld-toggle="true" data-bs-toggle="collapse" data-bs-target="#lqd-mobile-sec-nav" aria-expanded="false" data-toggle-options='{ "changeClassnames" : { "html" : "mobile-nav-activated" } }'>
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="bars">
|
|
<span class="bars-inner w-full h-full flex flex-col">
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
<span class="bar"></span>
|
|
</span>
|
|
</span>
|
|
</button>
|
|
<a class="navbar-brand flex justify-start" href="./index-dark-portfolio.html">
|
|
<span class="navbar-brand-inner">
|
|
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="lqd-mobile-sec-nav">
|
|
<div class="mobile-navbar-collapse navbar-collapse collapse bg-gray-800 text-white" id="lqd-mobile-sec-nav" aria-expanded="false" role="navigation">
|
|
<ul class="main-nav lqd-menu-counter-right main-nav-hover-fade-inactive nav reset-ul items-stretch justify-end p-15 text-16 link-white" data-submenu-options='{ "toggleType" : "fade" , "handler" : "mouse-in-out" }' data-localscroll="true" data-localscroll-options='{ "itemsSelector" : "> li > a", "trackWindowScroll" : true }'>
|
|
<li class="is-active">
|
|
<a href="#portfolio" aria-current="page">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="#about">About</a></li>
|
|
<li class="menu-item-has-children">
|
|
<a href="#services">
|
|
Case Studies
|
|
<span class="submenu-expander absolute"></span>
|
|
</a>
|
|
<ul class="nav-item-children link-14">
|
|
<li>
|
|
<a href="./page-dark-portfolio-nexa-mobile.html">Nexa Mobile</a>
|
|
</li>
|
|
<li>
|
|
<a href="./page-dark-portfolio-the-portraits.html">The Portraits</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Before – After</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Minimal</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Sticky</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Slider</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Classic Stack</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Video</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">User Interface</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<a href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</header>
|
|
|
|
<main class="content bg-repeat bg-gray-900" id="lqd-site-content" style="background-image: url(./assets/images/demo/dark-portfolio/bg-dark-lines.svg);">
|
|
<div id="lqd-contents-wrap">
|
|
|
|
<!-- Start Portfolio -->
|
|
<section class="lqd-section portfolio pt-250 pb-90" id="portfolio" data-section-luminosity="dark">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-12" data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : "all-childs" , "duration" : "1800" , "delay" : "180" , "ease" : "power4.out" , "direction" : "forward" , "initValues" : {"y" :70, "rotationX" :-6, "transformOriginX" :50, "transformOriginY" :50, "transformOriginZ" : "0px" , "opacity" :0}, "animations" : {"y" :0, "rotationX" :0, "transformOriginX" :50, "transformOriginY" :50, "transformOriginZ" : "0px" , "opacity" :1} }'>
|
|
<h1 class="ld-fh-element relative mb-0 text-52 leading-1/1em text-gray-300 module-title" data-text-rotator="true">
|
|
I'm a passionate
|
|
<span class="txt-rotate-keywords text-white">
|
|
<span class="txt-rotate-keyword active">
|
|
<span>Enterprise Architect</span>
|
|
</span>
|
|
<span class="txt-rotate-keyword">
|
|
<span>Software Engineer</span>
|
|
</span>
|
|
<span class="txt-rotate-keyword">
|
|
<span>Cybersecurity Engineer</span>
|
|
</span>
|
|
</span>
|
|
</h1>
|
|
<h2 class="ld-fh-element relative mb-0/5em text-52 text-gray-300 module-title"> looking for collaboration.</h2>
|
|
<div class="w-full relative h-30"></div>
|
|
<div class="lqd-pf-grid">
|
|
<div class="row">
|
|
<div class="col col-12">
|
|
<div class="liquid-filter-items items-center justify-between">
|
|
<div class="liquid-filter-items-inner">
|
|
<ul class="filter-list filter-list-inline size-custom text-14 md:hidden" id="lqd-portfolio">
|
|
<li class="active" data-filter="*">
|
|
<span>All</span>
|
|
</li>
|
|
<li data-filter=".branding">
|
|
<span>Enterprise Software Product</span>
|
|
</li>
|
|
<li data-filter=".custom-print">
|
|
<span>Product Design</span>
|
|
</li>
|
|
<li data-filter=".digital-design">
|
|
<span>Product Branding</span>
|
|
</li>
|
|
</ul>
|
|
<div class="lqd-filter-dropdown hidden md:block" data-form-options='{ "dropdownAppendTo" : "self" }'>
|
|
<select name="lqd-filter-dropdown-lqd-portfolio" id="lqd-filter-dropdown-lqd-portfolio">
|
|
<option selected data-filter="*" value="*">All</option>
|
|
<option data-filter=".branding" value="branding">Branding</option>
|
|
<option data-filter=".custom-print" value="custom-print">Custom Print</option>
|
|
<option data-filter=".digital-design" value="digital-design">Digital Design</option>
|
|
</select>
|
|
</div>
|
|
<a href="#portfolio" class="btn btn-naked btn-has-label font-family-inherit flex items-center text-15 text-gray-300 hover:text-white" data-localscroll="true">
|
|
<span class="btn-txt" data-text="See more">See more</span>
|
|
<span class="btn-icon justify-end w-auto">
|
|
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lqd-pf-row row flex flex-wrap" data-liquid-masonry="true" data-masonry-options='{ "filtersID" : "#lqd-portfolio" }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".lqd-pf-item" , "duration" : "1800" , "startDelay" : "500" , "delay" : "180" , "ease" : "power4.out" , "initValues" : {"y" :60, "opacity" :0}, "animations" : {"y" :0, "opacity" :1} }'>
|
|
<div class="lqd-pf-column col col-md-6 col-12 masonry-item branded-ecommerce digital-design">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-digital-design mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="1120" height="1120" src="./assets/images/demo/dark-portfolio/dark-portfolio-1.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Nexa Mobile</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branded Ecommerce</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./page-dark-portfolio-nexa-mobile.html" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-md-6 col-12 masonry-item branded-ecommerce branding branding-strategy digital-design">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-branding liquid-portfolio-category-branding-strategy mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="1140" height="520" src="./assets/images/demo/dark-portfolio/dark-portfolio-2.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Beer</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branded Ecommerce</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-2.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branded-ecommerce branding digital-experiences digital-design">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branded-ecommerce liquid-portfolio-category-branding liquid-portfolio-category-custom-print liquid-portfolio-category-digital-experiences mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="540" height="520" src="./assets/images/demo/dark-portfolio/dark-portfolio-3.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Photo Retouching</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branded Ecommerce</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-3.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branding digital-experiences digital-design">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding liquid-portfolio-category-digital-experiences mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="540" height="520" src="./assets/images/demo/dark-portfolio/dark-portfolio-4.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Frank 661</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branding</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-4.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-lg-9 col-md-6 col-12 masonry-item custom-print ecommerce masonry portfolio-single">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-custom-print liquid-portfolio-category-ecommerce liquid-portfolio-category-masonry liquid-portfolio-category-portfolio-single mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="1720" height="1160" src="./assets/images/demo/dark-portfolio/dark-portfolio-5.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Inspiration Board</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">custom Print</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-5.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item custom-print ecommerce">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding liquid-portfolio-category-custom-print liquid-portfolio-category-ecommerce mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="520" height="520" src="./assets/images/demo/dark-portfolio/dark-portfolio-6.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">The Portraits</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branding</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./page-dark-portfolio-the-portraits.html" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="lqd-pf-column col col-lg-3 col-md-6 col-12 masonry-item branding-strategy custom-print">
|
|
<article class="lqd-pf-item lqd-pf-item-style-1 lqd-pf-light pf-details-h-end relative overflow-hidden liquid-portfolio type-liquid-portfolio status-publish format-standard has-post-thumbnail hentry liquid-portfolio-category-branding-strategy liquid-portfolio-category-custom-print liquid-portfolio-category-digital-design mb-50">
|
|
<div class="lqd-pf-item-inner">
|
|
<div class="lqd-pf-img">
|
|
<figure>
|
|
<img width="518" height="518" src="./assets/images/demo/dark-portfolio/dark-portfolio-7.jpg" alt="Dark Portfolio">
|
|
</figure>
|
|
</div>
|
|
<div class="lqd-pf-details flex flex-wrap items-stretch relative rounded-4">
|
|
<span class="lqd-pf-overlay-bg lqd-overlay bg-gray-900"></span>
|
|
<div class="lqd-pf-info flex w-full flex-wrap items-center justify-between p-1/5rem">
|
|
<h2 class="relative my-0 h5">Artboard Studio</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Branding Strategy</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/dark-portfolio-7.jpg" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Portfolio -->
|
|
|
|
<!-- Start About -->
|
|
<section class="lqd-section about py-80 md:pt-0" id="about" data-section-luminosity="dark">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-lg-3 col-12 mb-30">
|
|
<h5 class="ld-fh-element relative mb-1em"> About me</h5>
|
|
</div>
|
|
<div class="col col-lg-9 col-12">
|
|
<div class="lqd-imggrp-single">
|
|
<div class="lqd-imggrp-img-container" data-reveal="true" data-reveal-options='{ "direction" : "lr" , "bgcolor" : "rgb(116, 116, 116)" , "delay" : "" }' data-parallax="true" data-parallax-from='{ "y" :55 }' data-parallax-to='{ "y" :-100 }' data-parallax-options='{ "overflowHidden" :false, "ease" : "linear" , "start" : "top bottom" }'>
|
|
<figure>
|
|
<img width="1720" height="876" src="./assets/images/demo/dark-portfolio/about.jpg" alt="about">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="container p-0">
|
|
<div class="row justify-end md:justify-start">
|
|
<div class="col col-lg-3 col-md-5 col-6">
|
|
<div class="w-full relative flex flex-col -mt-170">
|
|
<div class="lqd-counter lqd-counter-default relative z-1 mb-20 text-orange-300">
|
|
<div class="lqd-counter-element relative mb-0/3em font-bold text-300 leading-1em xs:mb-0" data-enable-counter="true" data-counter-options='{ "targetNumber" : "9" }'>
|
|
<span>9</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-md-3 col-6">
|
|
<p class="ld-fh-element relative mb-0/5em text-20 leading-1/25em text-white-70 module-text">
|
|
Years of
|
|
<br>
|
|
<br>
|
|
experience
|
|
</p>
|
|
</div>
|
|
<div class="col col-12 -mt-4/5em md:mt-0">
|
|
<div class="ld-fancy-heading mask-text">
|
|
<p class="ld-fh-element mb-0/5em lqd-split-lines text-18 leading-28" data-split-text="true" data-split-options='{ "type" : "lines" }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".lqd-lines > .split-inner" , "duration" : "1800" , "delay" : "250" , "ease" : "power4.out" , "direction" : "forward" , "initValues" : {"y" :80}, "animations" : {"y" :0} }'>
|
|
Hi, my name is Jason! Aim is to build your website so that it is functional and user friendly but at the same time attractive. My aim is to bring across your message and identity in the also have major skills in motion graphics.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End About -->
|
|
|
|
<!-- Start Services -->
|
|
<section class="lqd-section services pt-80 pb-50 md:pt-0" id="services" data-section-luminosity="dark">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-lg-3 col-12 mb-30">
|
|
<h5 class="ld-fh-element relative mb-1em"> Services</h5>
|
|
</div>
|
|
<div class="col col-lg-9 col-12">
|
|
<div class="container p-0">
|
|
<div class="row">
|
|
<div class="col col-lg-4 col-6 mb-50 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="45.375" height="48" viewbox="0 0 45.375 48"><path d="M36-45a3.836,3.836,0,0,1,2.813,1.172,3.836,3.836,0,0,1,1.172,2.813V-.984a3.836,3.836,0,0,1-1.172,2.813A3.836,3.836,0,0,1,36,3H12A3.836,3.836,0,0,1,9.188,1.828,3.836,3.836,0,0,1,8.016-.984V-41.016a3.836,3.836,0,0,1,1.172-2.812A3.836,3.836,0,0,1,12-45Zm2.016,3.984a1.889,1.889,0,0,0-.562-1.43A2.013,2.013,0,0,0,36-42.984H12a2.013,2.013,0,0,0-1.453.539,1.889,1.889,0,0,0-.562,1.43V-.984a1.889,1.889,0,0,0,.563,1.43A2.013,2.013,0,0,0,12,.984H36A2.013,2.013,0,0,0,37.453.445a1.889,1.889,0,0,0,.563-1.43ZM24-30.984a10,10,0,0,1,3.938.773A9.848,9.848,0,0,1,31.1-28.1a9.848,9.848,0,0,1,2.109,3.164A10,10,0,0,1,33.984-21a10,10,0,0,1-.773,3.938A9.848,9.848,0,0,1,31.1-13.9a9.848,9.848,0,0,1-3.164,2.109A10,10,0,0,1,24-11.016a10,10,0,0,1-3.937-.773A9.848,9.848,0,0,1,16.9-13.9a9.848,9.848,0,0,1-2.109-3.164A10,10,0,0,1,14.016-21a10,10,0,0,1,.773-3.937A9.848,9.848,0,0,1,16.9-28.1a9.848,9.848,0,0,1,3.164-2.109A10,10,0,0,1,24-30.984Zm0,18a7.827,7.827,0,0,0,5.672-2.344A7.97,7.97,0,0,0,32.2-20.812a5.887,5.887,0,0,0-.281-1.781,16.769,16.769,0,0,0-.7-1.828l-7.031,7.031-4.781-4.828,1.406-1.359L24-20.391l6-6a9.573,9.573,0,0,0-2.719-1.922,7.634,7.634,0,0,0-3.281-.7,7.711,7.711,0,0,0-5.648,2.367A7.711,7.711,0,0,0,15.984-21a7.711,7.711,0,0,0,2.367,5.648A7.711,7.711,0,0,0,24-12.984ZM20.016-39h7.969v2.016H20.016Zm6,33.984a1.945,1.945,0,0,1-.586,1.43A1.945,1.945,0,0,1,24-3a1.945,1.945,0,0,1-1.43-.586,1.945,1.945,0,0,1-.586-1.43A1.891,1.891,0,0,1,22.57-6.4,1.945,1.945,0,0,1,24-6.984a1.945,1.945,0,0,1,1.43.586A1.891,1.891,0,0,1,26.016-5.016ZM41.3-31.734l3.984-3.937,1.406,1.406L42.75-30.328ZM42-21h3.984v2.016H42Zm-.7,10.734,1.453-1.406,3.938,3.938L45.281-6.328Zm-39.984-24,1.406-1.406L6.7-31.734,5.25-30.328ZM2.016-21H6v2.016H2.016Zm-.7,13.266L5.25-11.672,6.7-10.266,2.719-6.328Z" transform="translate(-1.313 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">Application Design</h3>
|
|
<p>I enjoy turning complex problems into simple solutions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M23.2-21.8l1.406,1.406,6.984-7.031a9,9,0,0,1,1.8,3A10.1,10.1,0,0,1,33.984-21a10,10,0,0,1-.773,3.938A9.848,9.848,0,0,1,31.1-13.9a9.848,9.848,0,0,1-3.164,2.109A10,10,0,0,1,24-11.016a10,10,0,0,1-3.937-.773A9.848,9.848,0,0,1,16.9-13.9a9.848,9.848,0,0,1-2.109-3.164A10,10,0,0,1,14.016-21a10,10,0,0,1,.773-3.937A9.848,9.848,0,0,1,16.9-28.1a9.848,9.848,0,0,1,3.164-2.109A10,10,0,0,1,24-30.984a11.4,11.4,0,0,1,1.781.141,8.394,8.394,0,0,1,1.641.422l1.594-1.594a23.831,23.831,0,0,0-2.437-.7A11.438,11.438,0,0,0,24-33a11.678,11.678,0,0,0-4.664.938,12.12,12.12,0,0,0-3.82,2.578,12.12,12.12,0,0,0-2.578,3.82A11.678,11.678,0,0,0,12-21a11.678,11.678,0,0,0,.938,4.664,12.12,12.12,0,0,0,2.578,3.82,12.12,12.12,0,0,0,3.82,2.578A11.678,11.678,0,0,0,24-9a11.678,11.678,0,0,0,4.664-.937,12.12,12.12,0,0,0,3.82-2.578,12.12,12.12,0,0,0,2.578-3.82A11.678,11.678,0,0,0,36-21a11.9,11.9,0,0,0-.727-4.2,12.376,12.376,0,0,0-2.086-3.586l2.2-2.2H42l.984-1.031a18.151,18.151,0,0,1,1.266,2.438q.516,1.219.938,2.578H47.2a20.216,20.216,0,0,0-1.2-3.352,33.862,33.862,0,0,0-1.617-3.07L48-36.984l-3.187-3.234,1.969-1.969-1.359-1.406-2.016,2.016L39.984-45l-6,6v6.609ZM36-38.2l3.984-3.984,5.2,5.2L41.2-33H36Zm9.8,15.188a5.9,5.9,0,0,0,.094,1.008A5.9,5.9,0,0,1,45.984-21q0,.469-.023,1.008a4.119,4.119,0,0,1-.164,1.008h2.016a5.9,5.9,0,0,1,.094-1.008A5.9,5.9,0,0,0,48-21v-2.016ZM24,.984A21.676,21.676,0,0,1,15.4-.727,21.964,21.964,0,0,1,8.414-5.414,21.964,21.964,0,0,1,3.727-12.4,21.676,21.676,0,0,1,2.016-21a21.676,21.676,0,0,1,1.711-8.6,21.964,21.964,0,0,1,4.688-6.984A21.964,21.964,0,0,1,15.4-41.273,21.676,21.676,0,0,1,24-42.984a22.178,22.178,0,0,1,4.359.422,24.027,24.027,0,0,1,4.031,1.172l1.594-1.594a32.337,32.337,0,0,0-4.828-1.477A23.829,23.829,0,0,0,24-45a23.107,23.107,0,0,0-9.328,1.9,24.484,24.484,0,0,0-7.617,5.156A24.484,24.484,0,0,0,1.9-30.328,23.107,23.107,0,0,0,0-21a23.107,23.107,0,0,0,1.9,9.328A24.484,24.484,0,0,0,7.055-4.055,24.484,24.484,0,0,0,14.672,1.1,23.107,23.107,0,0,0,24,3a23.4,23.4,0,0,0,7.992-1.359,24.314,24.314,0,0,0,6.82-3.75,23.926,23.926,0,0,0,5.227-5.7A23.392,23.392,0,0,0,47.2-15H45.188a21.624,21.624,0,0,1-3,6.4,22.09,22.09,0,0,1-4.8,5.063A22.2,22.2,0,0,1,31.172-.211,21.59,21.59,0,0,1,24,.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">Search Engine Opt.</h3>
|
|
<p>Creating brand identities, digital experiences, that communicate</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M33.984-11.016v-7.969L8.016-45,0-36.984,26.016-11.016Zm-1.969-1.969h-5.2L7.219-32.812l5.2-5.2L32.2-18.187v5.2Zm-24-29.2,2.766,2.766-4.969,5.2-3-2.766Zm13.969,35.2L20.016-5.016H39.984V-24.984l-1.969,1.969V-6.984H21.984Zm9-21L32.2-26.812,45.984-40.594v3.609H48V-45Zm15-1.031H48V-33H45.984Zm0,30H4.781l12.8-12.8-1.359-1.406L0,3H48V-24.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">User Interface</h3>
|
|
<p>Beautiful and intuitive interface designs for clients.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="46.781" viewbox="0 0 48 46.781"><path d="M13.406.188l1.172,1.594L24-3.8l9.422,5.578L34.594.188,24-6.187Zm2.578-17.2V-33H8.016v15.984Zm-6-13.969h4.031v12H9.984Zm18,13.969v-12H20.016v12Zm-6-9.984h4.031v8.016H21.984Zm18,9.984V-36.984H32.016v19.969Zm-6-18h4.031v16.031H33.984Zm12,22.031a1.933,1.933,0,0,1-.539,1.43,1.933,1.933,0,0,1-1.43.539H3.984a1.933,1.933,0,0,1-1.43-.539,1.933,1.933,0,0,1-.539-1.43V-41.016a1.933,1.933,0,0,1,.539-1.43,1.933,1.933,0,0,1,1.43-.539H44.016a1.933,1.933,0,0,1,1.43.539,1.933,1.933,0,0,1,.539,1.43H48a3.836,3.836,0,0,0-1.172-2.812A3.836,3.836,0,0,0,44.016-45H3.984a3.836,3.836,0,0,0-2.812,1.172A3.836,3.836,0,0,0,0-41.016v28.031a3.836,3.836,0,0,0,1.172,2.813A3.836,3.836,0,0,0,3.984-9H44.016a3.836,3.836,0,0,0,2.813-1.172A3.836,3.836,0,0,0,48-12.984V-29.016H45.984Zm0-20.016H48v-3.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">Social Media</h3>
|
|
<p>Creating brand identities, digital experiences, that communicate</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M32.016-21a7.711,7.711,0,0,0-2.367-5.648A7.711,7.711,0,0,0,24-29.016a7.711,7.711,0,0,0-5.648,2.367A7.711,7.711,0,0,0,15.984-21a7.711,7.711,0,0,0,2.367,5.648A7.711,7.711,0,0,0,24-12.984a7.711,7.711,0,0,0,5.648-2.367A7.711,7.711,0,0,0,32.016-21ZM24-15a5.8,5.8,0,0,1-4.266-1.734A5.8,5.8,0,0,1,18-21a5.8,5.8,0,0,1,1.734-4.266A5.8,5.8,0,0,1,24-27a5.8,5.8,0,0,1,4.266,1.734A5.8,5.8,0,0,1,30-21a5.8,5.8,0,0,1-1.734,4.266A5.8,5.8,0,0,1,24-15ZM27.984,3H30V-.984H27.984ZM42-21a12.082,12.082,0,0,0-.094-1.5,12.082,12.082,0,0,1-.094-1.5L48-27.422,42.188-38.016,36-34.406a21.548,21.548,0,0,0-2.859-2.086A18.2,18.2,0,0,0,30-38.016V-45H18v6.984a18.2,18.2,0,0,0-3.141,1.523A21.548,21.548,0,0,0,12-34.406L5.813-37.781,0-27.422,6.188-24a12.082,12.082,0,0,1-.094,1.5A12.082,12.082,0,0,0,6-21a12.082,12.082,0,0,0,.094,1.5A12.082,12.082,0,0,1,6.188-18L0-14.578,5.813-3.984,12-7.594a21.548,21.548,0,0,0,2.859,2.086A18.2,18.2,0,0,0,18-3.984V3h6V.984H20.016V-5.391a20.953,20.953,0,0,1-4.1-1.852,17.848,17.848,0,0,1-3.492-2.742L6.8-6.8,3-13.781l5.391-3.234q-.141-1.031-.258-1.992A16.452,16.452,0,0,1,8.016-21a16.452,16.452,0,0,1,.117-1.992q.117-.961.258-1.992L2.813-28.219l3.8-6.984q1.359.75,2.789,1.523t2.789,1.664a29.991,29.991,0,0,1,3.68-2.6,34.03,34.03,0,0,1,3.914-1.992v-6.375H27.8v6.375q1.359.469,2.672,1.055A21.712,21.712,0,0,1,33-34.219a15.956,15.956,0,0,0,1.289,1.2,6.315,6.315,0,0,0,1.289,1.008q1.359-.75,2.813-1.523T41.2-35.2L45-28.219q-.469.188-3.117,1.547t-2.461,1.688q.141,1.031.258,1.992A16.452,16.452,0,0,1,39.8-21a16.452,16.452,0,0,1-.117,1.992q-.117.961-.258,1.992L45-13.781,41.2-6.8,38.391-8.391,35.578-9.984a15.843,15.843,0,0,1-2.625,2.109A31.111,31.111,0,0,1,30-6.187v2.2a18.2,18.2,0,0,0,3.141-1.523A21.548,21.548,0,0,0,36-7.594l6.188,3.375L48-14.812l-6.187-3.375a10.5,10.5,0,0,1,.094-1.336A11.527,11.527,0,0,0,42-21Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">App Development</h3>
|
|
<p>My aim is to bring across your digital message and identity.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col col-lg-4 col-6 mb-90 md:mb-0">
|
|
<div class="iconbox text-left iconbox-heading-xs flex-col mb-2em">
|
|
<div class="iconbox-icon-wrap">
|
|
<span class="iconbox-icon-container mb-35 text-40 leading-1em">
|
|
<svg class="w-40" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewbox="0 0 48 48"><path d="M27.984-18.984a7.687,7.687,0,0,0,5.672-2.367A7.749,7.749,0,0,0,36-27V-40.781l5.391,4.594L42.8-37.781,35.2-44.391l-7.594,6.609,1.406,1.594,4.969-4.594V-27a5.839,5.839,0,0,1-1.711,4.266A5.777,5.777,0,0,1,27.984-21H18a5.609,5.609,0,0,0-3.094.938,9.831,9.831,0,0,0-2.555,2.414,12.4,12.4,0,0,0-1.734,3.234,10.011,10.011,0,0,0-.633,3.4v6H12v-6a9.784,9.784,0,0,1,1.734-5.25A5.017,5.017,0,0,1,18-18.984Zm-24-24h24V-45h-24a3.836,3.836,0,0,0-2.812,1.172A3.836,3.836,0,0,0,0-41.016V-.984A3.836,3.836,0,0,0,1.172,1.828,3.836,3.836,0,0,0,3.984,3V.984A1.933,1.933,0,0,1,2.555.445a1.933,1.933,0,0,1-.539-1.43V-41.016a1.933,1.933,0,0,1,.539-1.43A1.933,1.933,0,0,1,3.984-42.984ZM9.984,3H12V-.984H9.984Zm.8-31.219,3.234-3.375L17.2-28.219,18.8-29.812,15.422-33,18.8-36.187,17.2-37.781l-3.187,3.375-3.234-3.375L9.188-36.187,12.609-33,9.188-29.812ZM39.188-13.781,36-10.406l-3.187-3.375-1.594,1.594L34.594-9,31.219-5.812l1.594,1.594L36-7.594l3.188,3.375,1.594-1.594L37.406-9l3.375-3.187Zm6.8-27.234H48a3.836,3.836,0,0,0-1.172-2.812A3.836,3.836,0,0,0,44.016-45H42v2.016h2.016a1.933,1.933,0,0,1,1.43.539A1.933,1.933,0,0,1,45.984-41.016Zm0,40.031a1.933,1.933,0,0,1-.539,1.43,1.933,1.933,0,0,1-1.43.539H18V3H44.016a3.836,3.836,0,0,0,2.813-1.172A3.836,3.836,0,0,0,48-.984V-29.016H45.984Zm0-32.016H48v-3.984H45.984Z" transform="translate(0 45)" fill="#d3aa85"></path></svg>
|
|
</span>
|
|
</div>
|
|
<div class="contents relative z-2">
|
|
<h3 class="mb-15 text-18 text-white">Branding Strategy</h3>
|
|
<p>Great work for clients with meaningful missions.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Services -->
|
|
|
|
<!-- Start Clients -->
|
|
<section class="lqd-section clients pt-50 pb-220 md:pt-0" id="clients" data-section-luminosity="dark">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col col-lg-3 col-12 module-col">
|
|
<h5 class="ld-fh-element relative mb-1em"> Clients</h5>
|
|
</div>
|
|
<div class="col col-lg-9 col-12 self-center">
|
|
<div class="carousel-container carousel-nav-left carousel-nav-mobile-center carousel-nav-md carousel-dots-mobile-center carousel-dots-style1 carousel-dots-mobile-outside">
|
|
<div class="carousel-items -mr-50 -ml-50" data-lqd-flickity='{ "wrapAround" : true, "equalHeightCells" : true, "middleAlignContent" : true, "cellAlign" : "center", "draggable" : true }' data-custom-animations="true" data-ca-options='{ "triggerHandler" : "inview" , "animationTarget" : ".carousel-items figure" , "duration" :700, "delay" :100, "ease" : "power4.out" , "initValues" : {"opacity" :0}, "animations" : {"opacity" :1} }'>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="82" height="19" src="./assets/images/demo/dark-portfolio/client-1.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="83" height="25" src="./assets/images/demo/dark-portfolio/client-2.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="61" height="22" src="./assets/images/demo/dark-portfolio/client-3.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="61" height="15" src="./assets/images/demo/dark-portfolio/client-4.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="61" height="16" src="./assets/images/demo/dark-portfolio/client-5.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="carousel-item has-width w-20percent flex flex-col items-stretch justify-center px-50 md:w-25percent sm:w-33percent">
|
|
<div class="carousel-item-inner w-full relative">
|
|
<div class="carousel-item-content w-full relative">
|
|
<div class="ld-img-hover-opacity flex items-center flex-grow-1 opacity-60 transition-opacity">
|
|
<figure class="max-w-full inline-flex flex-grow-1 vertical-top">
|
|
<img width="77" height="20" src="./assets/images/demo/dark-portfolio/client-6.svg" alt="client">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- End Clients -->
|
|
|
|
<!-- Contact -->
|
|
<section class="lqd-section contact" id="contact"></section>
|
|
<!-- Contact -->
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="main-footer bg-orange-500 text-white-70" data-sticky-footer="true" data-sticky-footer-options='{ "shadow" : "3" }'>
|
|
<section class="lqd-section pt-120 pb-90 footer-content">
|
|
<div class="container">
|
|
<div class="row justify-between items-center">
|
|
<div class="col col-xl-5 col-lg-6 col-12 mb-35">
|
|
<h2 class="ld-fh-element relative mb-1em text-30 leading-1/6em text-white-60">
|
|
Collaboration, work enquires or just say hello
|
|
<a class="text-white" href="#">
|
|
<span>williams@liquid.com</span>
|
|
</a>
|
|
</h2>
|
|
<a href="#contact" class="btn btn-solid uppercase btn-xlg border-thin btn-hover-swp btn-has-label font-family-inherit bg-white text-11 uppercase font-bold text-black hover:bg-black hover:text-white" data-localscroll="true">
|
|
<span class="btn-txt" data-text="Send a message">Send a message</span>
|
|
<span class="btn-icon">
|
|
<i class="lqd-icn-ess icon-lqd-pen"></i>
|
|
</span>
|
|
<span class="btn-icon">
|
|
<i class="lqd-icn-ess icon-lqd-pen"></i>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
<div class="col col-xl-5 col-lg-6 col-12">
|
|
<div class="lqd-fancy-menu lqd-menu-td-none mb-35">
|
|
<ul class="reset-ul inline-nav flex items-center justify-end -mx-20 md:justify-start">
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="#" target="_blank"> Facebook</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="#" target="_blank"> Behance</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="#" target="_blank"> Instagram</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Hub wordpress -->
|
|
<a class="fixed z-100" href="https://themeforest.net/item/hub-responsive-multipurpose-wordpress-theme/31569152" title="Get Adaptive Colors" style="bottom: 2rem; left: 2rem;" target="_blank" rel="nofollow">
|
|
<svg width="62" height="62" viewBox="0 0 62 62" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_4_2)"> <path d="M61.07 30.5719C61.07 31.7719 59.17 32.8429 59.03 34.0039C58.887 35.1899 60.476 36.6829 60.197 37.8219C59.913 38.9789 57.81 39.5649 57.397 40.6639C56.984 41.7629 58.158 43.6079 57.61 44.6499C57.062 45.6919 54.877 45.7639 54.21 46.7339C53.543 47.7039 54.246 49.7709 53.462 50.6549C52.678 51.5389 50.544 51.0819 49.662 51.8669C48.78 52.6519 48.977 54.8239 48.002 55.4969C47.027 56.1699 45.07 55.2149 44.019 55.7679C42.968 56.3209 42.65 58.4739 41.538 58.8959C40.426 59.3179 38.764 57.9169 37.607 58.1959C36.468 58.4759 35.633 60.4959 34.446 60.6339C33.285 60.7739 31.994 59.0159 30.796 59.0159C29.598 59.0159 28.307 60.7729 27.146 60.6339C25.959 60.4909 25.123 58.4759 23.985 58.1959C22.828 57.9119 21.153 59.3079 20.054 58.8909C18.955 58.4739 18.616 56.3119 17.573 55.7629C16.53 55.2139 14.561 56.1629 13.59 55.4919C12.619 54.8209 12.814 52.6449 11.93 51.8609C11.046 51.0769 8.91197 51.5339 8.12997 50.6489C7.34797 49.7639 8.05599 47.7019 7.38199 46.7279C6.70799 45.7539 4.52999 45.6939 3.98199 44.6439C3.43399 43.5939 4.61698 41.7689 4.19498 40.6579C3.77298 39.5469 1.67599 38.9739 1.39499 37.8159C1.11499 36.6769 2.70398 35.1849 2.56198 33.9979C2.42298 32.8369 0.521973 31.7649 0.521973 30.5669C0.521973 29.3689 2.42198 28.2959 2.56198 27.1359C2.70498 25.9499 1.11599 24.4559 1.39499 23.3179C1.67899 22.1609 3.78098 21.5749 4.19498 20.4759C4.60898 19.3769 3.43399 17.5319 3.98199 16.4899C4.52999 15.4479 6.71599 15.3759 7.38199 14.4049C8.04799 13.4339 7.34597 11.3679 8.12997 10.4839C8.91397 9.59991 11.048 10.0569 11.93 9.2719C12.812 8.4869 12.615 6.31489 13.59 5.64089C14.565 4.96689 16.522 5.9229 17.573 5.3709C18.624 4.8189 18.942 2.66491 20.054 2.24291C21.166 1.82091 22.828 3.22189 23.985 2.94289C25.124 2.66289 25.96 0.642903 27.146 0.504903C28.307 0.365903 29.598 2.12291 30.796 2.12291C31.994 2.12291 33.286 0.365903 34.447 0.504903C35.633 0.647903 36.469 2.66289 37.608 2.94289C38.765 3.22789 40.44 1.83091 41.539 2.24791C42.638 2.66491 42.977 4.82691 44.02 5.37591C45.063 5.92491 47.032 4.97589 48.002 5.64589C48.972 6.31589 48.778 8.49291 49.662 9.27691C50.546 10.0609 52.681 9.60391 53.462 10.4889C54.243 11.3739 53.536 13.4359 54.209 14.4099C54.882 15.3839 57.061 15.4439 57.609 16.4949C58.157 17.5459 56.974 19.3689 57.396 20.4809C57.818 21.5929 59.915 22.1659 60.196 23.3229C60.476 24.4619 58.887 25.9549 59.029 27.1409C59.169 28.3009 61.07 29.3729 61.07 30.5719Z" fill="#E1E6EA"/> <path d="M16.827 31.128C16.8266 33.7663 17.569 36.3515 18.9693 38.5876C20.3696 40.8237 22.3712 42.6204 24.745 43.772L18.045 25.411C17.2419 27.2098 16.8276 29.158 16.829 31.128H16.827ZM40.36 30.419C40.3402 29.0449 39.9382 27.7034 39.199 26.545C38.4448 25.5953 37.9679 24.4557 37.821 23.252C37.8029 22.6078 38.0412 21.9828 38.4835 21.5141C38.9257 21.0454 39.5359 20.7713 40.18 20.752C40.242 20.752 40.301 20.76 40.362 20.763C38.8617 19.3896 37.0811 18.3584 35.1432 17.7408C33.2054 17.1231 31.1564 16.9337 29.1382 17.1856C27.1199 17.4375 25.1804 18.1247 23.4538 19.1998C21.7272 20.2748 20.2546 21.712 19.138 23.412C19.468 23.422 19.778 23.429 20.038 23.429C21.507 23.429 23.782 23.251 23.782 23.251C23.9354 23.239 24.0873 23.2885 24.2042 23.3886C24.3212 23.4886 24.3935 23.631 24.4055 23.7845C24.4174 23.9379 24.3679 24.0898 24.2679 24.2067C24.1678 24.3236 24.0254 24.396 23.872 24.408C23.872 24.408 23.111 24.498 22.264 24.542L27.38 39.759L30.454 30.538L28.265 24.538C27.508 24.494 26.792 24.404 26.792 24.404C26.6487 24.3799 26.5197 24.303 26.4305 24.1885C26.3412 24.0739 26.2981 23.93 26.3098 23.7853C26.3215 23.6405 26.3871 23.5054 26.4936 23.4066C26.6001 23.3079 26.7397 23.2527 26.885 23.252C26.885 23.252 29.205 23.43 30.585 23.43C32.054 23.43 34.329 23.252 34.329 23.252C34.4824 23.24 34.6343 23.2895 34.7512 23.3896C34.8682 23.4896 34.9405 23.632 34.9525 23.7855C34.9644 23.9389 34.9149 24.0908 34.8149 24.2077C34.7148 24.3246 34.5724 24.397 34.419 24.409C34.419 24.409 33.656 24.499 32.811 24.543L37.888 39.643L39.288 34.96C39.852 33.5028 40.2121 31.9747 40.358 30.419H40.36ZM31.122 32.352L26.907 44.605C29.7372 45.4383 32.7578 45.36 35.541 44.381C35.502 44.3194 35.4685 44.2544 35.441 44.187L31.122 32.352ZM43.199 24.388C43.2646 24.8665 43.298 25.3489 43.299 25.832C43.2751 27.5629 42.9122 29.2725 42.231 30.864L37.938 43.272C41.1024 41.4302 43.423 38.426 44.4056 34.899C45.3882 31.3719 44.9553 27.6006 43.199 24.388ZM30.876 14.752C27.6372 14.7522 24.4711 15.7128 21.7782 17.5123C19.0854 19.3118 16.9866 21.8695 15.7472 24.8618C14.5079 27.8542 14.1838 31.1468 14.8158 34.3234C15.4478 37.4999 17.0075 40.4178 19.2978 42.7079C21.588 44.998 24.5059 46.5576 27.6826 47.1894C30.8592 47.8212 34.1518 47.4968 37.144 46.2573C40.1363 45.0178 42.6938 42.9189 44.4932 40.2259C46.2926 37.5329 47.253 34.3668 47.253 31.128C47.248 26.7861 45.5209 22.6236 42.4507 19.5536C39.3804 16.4835 35.2178 14.7567 30.876 14.752ZM30.876 46.752C27.7852 46.7525 24.7637 45.8366 22.1936 44.1198C19.6235 42.4031 17.6202 39.9627 16.4371 37.1074C15.254 34.252 14.9443 31.11 15.547 28.0786C16.1498 25.0472 17.638 22.2626 19.8234 20.0771C22.0088 17.8915 24.7933 16.4031 27.8246 15.8002C30.856 15.1972 33.9981 15.5068 36.8535 16.6897C39.7089 17.8726 42.1494 19.8757 43.8663 22.4458C45.5832 25.0158 46.4994 28.0372 46.499 31.128C46.4937 35.2699 44.846 39.2407 41.9173 42.1696C38.9886 45.0985 35.0179 46.7464 30.876 46.752Z" fill="#317296"/> </g> <defs> <clipPath id="clip0_4_2"> <rect width="61.57" height="61.144" fill="white"/> </clipPath> </defs> </svg>
|
|
</a>
|
|
|
|
<script src="./assets/vendors/jquery.min.js"></script>
|
|
<script src="./assets/vendors/jquery-ui/jquery-ui.min.js"></script>
|
|
<script src="./assets/vendors/bootstrap/js/bootstrap.min.js"></script>
|
|
<script src="./assets/vendors/fastdom/fastdom.min.js"></script>
|
|
<script src="./assets/vendors/gsap/utils/SplitText.min.js"></script>
|
|
<script src="./assets/vendors/flickity/flickity.pkgd.min.js"></script>
|
|
<script src="./assets/vendors/flickity/flickity-fade.min.js"></script>
|
|
<script src="./assets/vendors/isotope/isotope.pkgd.min.js"></script>
|
|
<script src="./assets/vendors/isotope/packery-mode.pkgd.min.js"></script>
|
|
<script src="./assets/vendors/gsap/minified/gsap.min.js"></script>
|
|
<script src="./assets/vendors/gsap/minified/ScrollTrigger.min.js"></script>
|
|
<script src="./assets/vendors/fontfaceobserver.js"></script>
|
|
<script src="./assets/vendors/tinycolor-min.js"></script>
|
|
<script src="./assets/vendors/fresco/js/fresco.js"></script>
|
|
<script src="./assets/js/theme.min.js"></script>
|
|
<script src="./assets/js/liquid-ajax-contact-form.min.js"></script>
|
|
|
|
<!-- Start custom cursor -->
|
|
<div class="lqd-cc lqd-cc--inner fixed pointer-events-none"></div>
|
|
<div class="lqd-cc--el lqd-cc-solid lqd-cc-explore flex items-center justify-center rounded-full fixed pointer-events-none">
|
|
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
|
|
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
|
|
<div class="lqd-cc-solid-txt-inner">Explide</div>
|
|
</div>
|
|
</div>
|
|
<div class="lqd-cc--el lqd-cc-solid lqd-cc-drag flex items-center justify-center rounded-full fixed pointer-events-none">
|
|
<div class="lqd-cc-solid-bg flex absolute lqd-overlay"></div>
|
|
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-left inline-flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
|
|
<path fill="currentColor" d="M19.943 6.07L9.837 14.73a1.486 1.486 0 0 0 0 2.25l10.106 8.661c.96.826 2.457.145 2.447-1.125V7.195c0-1.27-1.487-1.951-2.447-1.125z"></path>
|
|
</svg>
|
|
</div>
|
|
<div class="lqd-cc-solid-txt flex justify-center text-center relative">
|
|
<div class="lqd-cc-solid-txt-inner">Drag</div>
|
|
</div>
|
|
<div class="lqd-cc-solid-ext lqd-cc-solid-ext-right inline-flex items-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
|
|
<path fill="currentColor" d="M11.768 25.641l10.106-8.66a1.486 1.486 0 0 0 0-2.25L11.768 6.07c-.96-.826-2.457-.145-2.447 1.125v17.321c0 1.27 1.487 1.951 2.447 1.125z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="lqd-cc--el lqd-cc-arrow inline-flex items-center fixed top-0 left-0 pointer-events-none">
|
|
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M60.4993 0V4.77005H8.87285L80 75.9207L75.7886 79.1419L4.98796 8.35478V60.4993H0V0H60.4993Z" />
|
|
</svg>
|
|
</div>
|
|
<div class="lqd-cc--el lqd-cc-custom-icon rounded-full fixed pointer-events-none">
|
|
<div class="lqd-cc-ci inline-flex items-center justify-center rounded-full relative">
|
|
<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" style="width: 1em; height: 1em;">
|
|
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M16.03 6a1 1 0 0 1 1 1v8.02h8.02a1 1 0 1 1 0 2.01h-8.02v8.02a1 1 0 1 1-2.01 0v-8.02h-8.02a1 1 0 1 1 0-2.01h8.02v-8.01a1 1 0 0 1 1.01-1.01z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="lqd-cc lqd-cc--outer fixed top-0 left-0 pointer-events-none"></div>
|
|
<!-- End custom cursor -->
|
|
|
|
<template id="lqd-temp-snickersbar">
|
|
<div class="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
|
|
<div class="lqd-snickersbar-inner flex flex-wrap items-center">
|
|
<div class="lqd-snickersbar-detail">
|
|
<p class="hidden lqd-snickersbar-addding-temp my-0">Adding {{itemName}} to cart</p>
|
|
<p class="hidden lqd-snickersbar-added-temp my-0">Added {{itemName}} to cart</p>
|
|
<p class="my-0 lqd-snickersbar-msg flex items-center my-0"></p>
|
|
<p class="my-0 lqd-snickersbar-msg-done flex items-center my-0"></p>
|
|
</div>
|
|
<div class="lqd-snickersbar-ext ml-4"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template id="lqd-temp-sticky-header-sentinel">
|
|
<div class="lqd-sticky-sentinel invisible absolute pointer-events-none"></div>
|
|
</template>
|
|
<template id="lqd-snickersbar">
|
|
<div class="lqd-snickersbar flex flex-wrap lqd-snickersbar-in" data-item-id>
|
|
<div class="lqd-snickersbar-inner flex flex-wrap items-center">
|
|
<div class="lqd-snickersbar-detail">
|
|
<p class="hidden lqd-snickersbar-addding-temp my-0">Adding {{itemName}} to cart</p>
|
|
<p class="hidden lqd-snickersbar-added-temp my-0">Added {{itemName}} to cart</p>
|
|
<p class="lqd-snickersbar-msg flex items-center my-0"></p>
|
|
<p class="lqd-snickersbar-msg-done flex items-center my-0"></p>
|
|
</div>
|
|
<div class="lqd-snickersbar-ext ml-4"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1" data-modal-type="default" style="display: none;">
|
|
<div class="lity-backdrop"></div>
|
|
<div class="lity-wrap" data-lity-close role="document">
|
|
<div class="lity-loader" aria-hidden="true">Loading...</div>
|
|
<div class="lity-container">
|
|
<div class="lity-content"></div>
|
|
</div>
|
|
<button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>×</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |