826 lines
69 KiB
PHP
826 lines
69 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="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/'; ?>" rel="home">
|
|
<span class="navbar-brand-inner">
|
|
<img class="logo-default" src="./assets/images/demo/start-hub-8/tokslaw-logo-.svg" alt="Tokslaw">
|
|
</span>
|
|
Home
|
|
</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/tokslaw.png" 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 Toks! I am a self-taught software engineer with diverse experience in enterprise architecture, application development and full-stack engineering. I build products so that it is functional and user-friendly but at the same time attractive. My aim is to bring across your message and identity . I also have major skills in Cybersecurity.
|
|
</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>info@tokslaw.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="https://www.facebook.com/tokunbo.lawal.1485" target="_blank"> Facebook</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="https://blog.tokslaw.com/" target="_blank"> Blog</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="https://x.com/Tokslaw1" target="_blank"> Twitter</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="https://www.instagram.com/tokslawdev/" target="_blank"> Instagram</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="https://www.youtube.com/@tokslawdev" target="_blank"> Youtube</a>
|
|
</li>
|
|
<li class="w-auto inline-flex justify-end mx-20">
|
|
<a class="text-white" href="https://www.linkedin.com/in/toks-lawal/" target="_blank"> LinkedIn</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</footer>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<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> |