949 lines
80 KiB
PHP
949 lines
80 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="Enterprise Architect, Full-Stack Software Engineer, DevSecOps Engineer, Cloud Solutions Architect, Software Architecture Consultant, Digital Transformation Architect">
|
|
<meta name="author" content="Toks Lawal, Tokslaw, Tokunbo Lawal">
|
|
<meta name="google-site-verification" content="qC-NzYstxEbgViItWRCXWmWohJDBplsD-mc8M8IMatQ" />
|
|
<meta name="description" content="secure application development,microservices architecture, API development,technical strategy, system design.">
|
|
<meta property="og:title" content="Tokunbo Lawal | Enterprise Architect, Full-Stack Software Engineer & DevSecOps Strategist">
|
|
<meta property="og:description" content="Toks Lawal helps businesses design secure, scalable, and cloud-ready digital platforms through enterprise architecture, full-stack development, DevSecOps, and technology strategy.">
|
|
<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>Few Portfolio</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 width="50" height="50" style="object-fit: contain;" src="./assets/images/demo/start-hub-8/tokslaw_logo_main.png" 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="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/'; ?>" aria-current="page">Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/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">Donezo</a>
|
|
</li>
|
|
<li>
|
|
<a href="./page-dark-portfolio-the-portraits.html">PrismaDB</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">ADL Skills Adventure</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">EcoBridge</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Volunteer App</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Slider</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Classic Stack</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Video</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">UI/UX Design & Development</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_main.png" 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="/" 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">Donezo</a>
|
|
</li>
|
|
<li>
|
|
<a href="./page-dark-portfolio-the-portraits.html">EcoBridge</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">Volunteer App</a>
|
|
</li>
|
|
<li>
|
|
<a href="#">PrismaDB</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="https://tokslaw7.github.io/portfolio/" target="_blank" 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/community_app.png" 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">Time Well Served</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Connect Volunteers</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="http://localhost:5055" 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/ecobridge.png" 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">Game Glitch Investigator</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="https://github.com/tokslaw7/gameglitchinvestigator-starter">AI Guessing Game</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/card_profile.png" 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">Card Profile</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">Setup Database</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/card_profile.png" 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/ByteBites.png" 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">Ordering App</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">FastAPI</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/ByteBites.png" 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/mermsai.png" 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">Mermsemr</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="https://www.mermsemr.com">AI Agent for Your Practice </a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/mermsai.png" 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/healthcare_dash.png" 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">Healthcare Dashboard</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="#">API</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="https://tokslaw7.github.io/health_care_dashboard/" class="lqd-overlay lqd-pf-overlay-link lqd-cc-icon-trigger" target="_blank"></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/google_auth.png" alt="Google Auth">
|
|
</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">Google Auth</h2>
|
|
<ul class="reset-ul inline-nav lqd-pf-cat inline-flex relative z-2">
|
|
<li>
|
|
<a href="https://authentication-nu-murex.vercel.app/">Authentication</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<a href="./assets/images/demo/dark-portfolio/google_auth.png" 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" style="color: #F4A2AE;"> 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>10+</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" style="color: #F4A2AE;"> 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">Custom Software Development</h3>
|
|
<p>I provide custom software development services that deliver tailored solutions to meet your unique business needs.
|
|
I build scalable, secure, and high-performance software that optimizes workflows, enhances efficiency, and supports growth,
|
|
ensuring a seamless experience across all platforms.
|
|
</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">API Development</h3>
|
|
<p>I specialize in creating secure, scalable, and high-performance APIs that enable seamless integration across systems.
|
|
Bespoke custom APIs enhance functionality, improve data exchange, and streamline workflows, driving efficiency and innovation for your business.</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">UI/UX Design & Development</h3>
|
|
<p>My focus of UI/UX design and development services is on creating intuitive, engaging experiences that prioritize user needs.
|
|
From wireframing to final design, I craft visually appealing and highly functional interfaces that enhance usability, increase user satisfaction, and drive business success.</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">SEO & Social Media Marketing</h3>
|
|
<p>Build SEO to drive Revenue. Turn organic search into a reliable engine for qualified leads. My SEO services help your brand reach the right audience across Google, AI-powered search, and emerging discovery platforms with a strategy tailored to your business goals.</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="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">Web & Mobile App Development</h3>
|
|
<p>I specialize in web and mobile app development, creating custom solutions that align with your business needs.
|
|
From responsive websites to easy-to-use mobile apps, I create seamless experiences that engage users and help your business grow..</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">Cloud & DevOps</h3>
|
|
<p>Streamline your infrastructure and deployment processes, enabling faster development and seamless scalability.
|
|
From cloud migration to CI/CD pipelines, we help optimize operations, enhance reliability, and ensure your systems are ready for future growth
|
|
</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" style="color: #F4A2AE;"> 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/start-hub-8/Taborg.jpg" alt="Taborg">
|
|
</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/start-hub-8/Coregrade logo.png" 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/start-hub-8/chiefsoft-lg.png" 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/start-hub-8/float-travel-app-logo.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/start-hub-8/automedsys.ai logo.png" 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/start-hub-8/WrenchBoard.webp" alt="WrenchBoard">
|
|
</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" style="background: linear-gradient(135deg, rgba(244, 162, 174, 0.45), rgba(59, 130, 246, 0.25) ); color: #1a1a1a;" 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="" style="display: flex; font-size: 18px;">
|
|
|
|
<div class="w-20percent mb-30 sm:w-50percent">
|
|
<div class="ld-fancy-heading relative">
|
|
<h6 class="ld-fh-element relative mb-3em text-15 font-bold tracking-1 text-black-60 uppercase">COMPANY</h6>
|
|
</div>
|
|
<nav class="link-black-80 lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
|
|
<ul class="reset-ul">
|
|
<li class="mb-15">
|
|
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/'; ?>">Home</a>
|
|
</li>
|
|
<li class="mb-15">
|
|
<a href="#">
|
|
FAQ
|
|
</a>
|
|
</li>
|
|
|
|
<li class="mb-15">
|
|
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/about'; ?>">About</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="<?= $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['HTTP_HOST'] . '/services'; ?>">Services</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="w-20percent mb-30 sm:w-50percent">
|
|
<div class="ld-fancy-heading relative">
|
|
<h6 class="ld-fh-element relative mb-3em text-15 font-bold tracking-1 text-black-60 uppercase">SUPPORT</h6>
|
|
</div>
|
|
<nav class="link-black-80 lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
|
|
<ul class="reset-ul">
|
|
<li class="mb-15">
|
|
<a href="#">
|
|
Privacy Policy
|
|
</a>
|
|
</li>
|
|
<li class="mb-15">
|
|
<a href="#">
|
|
Collaborations
|
|
</a>
|
|
</li>
|
|
<li class="mb-15">
|
|
<a href="https://www.linkedin.com/in/toks-lawal/" target="_blank">
|
|
LinkedIn
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://blog.tokslaw.com" target="_blank">
|
|
Community
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="w-20percent mb-30 sm:w-full">
|
|
<div class="ld-fancy-heading relative">
|
|
<h6 class="ld-fh-element relative mb-3em text-15 font-bold tracking-1 text-black-60 uppercase">CONNECT</h6>
|
|
</div>
|
|
<div class="ld-fancy-heading relative">
|
|
<h6 class="ld-fh-element inline-block relative mb-0/5em text-18 uppercase tracking-1 text-black-30">REACH ME DIRECTLY</h6>
|
|
</div>
|
|
<div class="ld-fancy-heading relative">
|
|
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-black"><a href="tel:+14042038915">(404) 203 8915</a></p>
|
|
</div>
|
|
<div class="ld-fancy-heading relative">
|
|
<h6 class="ld-fh-element inline-block relative mb-0/5em text-18 uppercase tracking-1 text-black-30">Send a Message</h6>
|
|
</div>
|
|
<div class="ld-fancy-heading relative">
|
|
<p class="ld-fh-element relative mb-1/65em text-18 font-medium text-white"><a href="mailto:tokslawdev@gmail.com">contact@tokslaw.com</a></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row justify-between items-center">
|
|
<div class="w-50percent mt-55 flex items-center sm:w-full sm:flex-col module-copyright">
|
|
<div class="mr-20 lqd-imggrp-single block relative">
|
|
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
|
<figure class="w-full relative">
|
|
<img width="40" height="40" style="object-fit: contain;" src="./assets/images/demo/start-hub-8/tokslaw_logo_main.png" alt="Tokslaw">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="ld-fancy-heading relative">
|
|
<p class="ld-fh-element relative m-0 text-14 text-black-60">© 2026 Tokslaw. Developed by Tokslaw.</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="w-50percent mt-55 text-end sm:text-start sm:w-full module-social">
|
|
<div class="social-icons-wrapper shape-circle flex-wrap gap-30 gap-y-0">
|
|
<span class="grid-item">
|
|
<a href="https://www.github.com/tokslaw7" class="icon social-icon hover:svg-black" target="_blank">
|
|
<span class="sr-only">GitHub</span>
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M105.2 24.9c-3.1-8.9-15.7-8.9-18.9 0L29.8 199.7h132c-.1 0-56.6-174.8-56.6-174.8zM.9 287.7c-2.6 8 .3 16.9 7.1 22l247.9 184-226.2-294zm160.8-88l94.3 294 94.3-294zm349.4 88l-28.8-88-226.3 294 247.9-184c6.9-5.1 9.7-14 7.2-22zM425.7 24.9c-3.1-8.9-15.7-8.9-18.9 0l-56.6 174.8h132z" fill="#FC6D26"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://www.instagram.com/tokslawdev/" class="icon social-icon social-icon-instagram" target="_blank">
|
|
<span class="sr-only">Instagram</span>
|
|
<svg viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" fill="#E1306C"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://www.linkedin.com/in/toks-lawal/" class="icon social-icon social-icon-spotify" target="_blank">
|
|
<span class="sr-only">LinkedIn</span>
|
|
<svg viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#0073b6;}</style></defs><title/><path class="cls-1" d="M454.26,23.47H57.74A34.21,34.21,0,0,0,23.63,57.58V454.1a34.21,34.21,0,0,0,34.11,34.11H454.26a34.21,34.21,0,0,0,34.11-34.11V57.58A34.21,34.21,0,0,0,454.26,23.47Zm-290.4,396H95.39V198.13h68.47ZM129.63,167.09a40.55,40.55,0,1,1,40.55-40.55A40.54,40.54,0,0,1,129.63,167.09ZM422.92,419.52H354V298.1s1.61-24.34-11.41-37c-11.84-11.49-28.3-8.68-28.3-8.68s-18.31.46-28.3,16c-6,9.33-7.76,22.05-8.21,30.7V419.52H209.3V198.13h68.47v26.66c6.2-8.81,17.07-20.54,32.86-26.66,24-9.28,44.61-7.92,62.32-2.58,22.21,6.69,34.88,25.36,39.47,34.54,6.17,12.32,10.5,28.75,10.5,49.3Z"/></svg>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://www.facebook.com/tokunbo.lawal.1485" class="icon social-icon social-icon-facebook" target="_blank">
|
|
<span class="sr-only">Facebook</span>
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" fill="#4267B2"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://x.com/Tokslaw1" class="icon social-icon social-icon-twitter" target="_blank">
|
|
<span class="sr-only">Twitter</span>
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z" fill="#1DA1F2"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://blog.tokslaw.com" class="icon social-icon social-icon-LinkedIn" target="_blank">
|
|
<span class="sr-only">Blog</span>
|
|
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm0 36c103.9 0 188 84.1 188 188s-84.1 188-188 188S68 359.9 68 256 152.1 68 256 68zm-86.5 92 50.8 147.4 35.7-105.2-13.3-42.2h35.4l50.6 146.7 32.4-102.1c5.6-16.8 8.4-29.7 8.4-38.7 0-4.4-.3-8.7-1-12.7 19.5 24.8 31.1 56.1 31.1 90.1 0 50.9-26 95.7-65.4 122l55.2-160.2h-31.8l-52 152-40-115.3-39.4 115.1L137 185.4h32.5z" fill="#00749C"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
<span class="grid-item">
|
|
<a href="https://www.youtube.com/@tokslawdev" target="_blank" class="icon social-icon social-icon-youtube" target="_blank">
|
|
<span class="sr-only">Youtube</span>
|
|
<svg viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M549.7 124.1c-6.3-23.7-24.8-42.2-48.5-48.5C458.5 64 288 64 288 64S117.5 64 74.8 75.6c-23.7 6.3-42.2 24.8-48.5 48.5C14.7 166.8 14.7 256 14.7 256s0 89.2 11.6 131.9c6.3 23.7 24.8 42.2 48.5 48.5C117.5 448 288 448 288 448s170.5 0 213.2-11.6c23.7-6.3 42.2-24.8 48.5-48.5C561.3 345.2 561.3 256 561.3 256s0-89.2-11.6-131.9zM232 338.5v-165l142.7 82.5L232 338.5z" fill="#FF0000"></path>
|
|
</svg>
|
|
</a>
|
|
</span>
|
|
</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>
|