CHIEFSOFT\ameye
1973 lines
115 KiB
PHP
1973 lines
115 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="Olusesan Ameyte">
|
||
<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/asymmetric-9.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&family=Playfair+Display&family=IBM+Plex+Sans:wght@500;600;700&family=Space+Grotesk:wght@400;700&display=swap" rel="stylesheet">
|
||
|
||
<title>Asymmetric Nine</title>
|
||
</head>
|
||
|
||
<body class="lqd-cc-outer-hidden" data-lqd-cc="true" data-mobile-nav-breakpoint="1199" data-mobile-nav-style="modern" data-mobile-nav-scheme="dark" data-mobile-nav-trigger-alignment="right" data-mobile-header-scheme="gray" data-mobile-logo-alignment="default" data-mobile-header-builder="true" data-overlay-onmobile="false" data-disable-animations-onmobile="true">
|
||
<div class="bg-white" id="wrap">
|
||
|
||
<div class="lqd-sticky-placeholder hidden"></div>
|
||
<header id="site-header" class="main-header sticky-header-noshadow" data-sticky-header="true" data-sticky-values-measured="false" data-sticky-options='{"disableOnMobile": true, "dynamicColors": true}'>
|
||
<div class="lqd-head-sec-wrap w-full pt-20 px-75 module-header">
|
||
<div class="flex items-center justify-between rounded-4 shadow-black-15 px-25 bg-white m-0">
|
||
<div class="w-30percent flex items-center p-0 sm:w-50percent">
|
||
<div class="module-logo flex navbar-brand-plain py-15">
|
||
<a class="navbar-brand flex p-0 relative" href="#" rel="home">
|
||
<span class="navbar-brand-inner post-rel">
|
||
<img class="logo-default" src="./assets/images/demo/asymmetric-9/logo/logo.svg" alt="Asymmetric nine">
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-center lg:hidden p-0">
|
||
<div class="module-primary-nav flex">
|
||
<nav class="navbar-collapse lqd-submenu-default-style inline-flex p-0 text-14 font-medium" aria-expanded="false">
|
||
<ul class="main-nav main-nav-hover-fade-inactive link-black flex reset-ul justify-center" itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" data-submenu-options='{"toggleType": "fade", "handler": "mouse-in-out"}' data-localscroll="true" data-localscroll-options='{"itemsSelector":">li > a", "offset": 85}'>
|
||
<li>
|
||
<a href="#banner">
|
||
Home
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#our-services">
|
||
About Me
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#case-studies">
|
||
Projects
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#testimonials">
|
||
Testimonials
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#contact">
|
||
Contact
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<div class="w-30percent flex items-center justify-end p-0 sm:w-50percent" data-custom-animations="true" data-ca-options='{" animationTarget": ".animation-element", "duration" :600, "ease": "back.out", "initValues": {"x": "100px", "opacity" : 0} , "animations": {"x": "0px", "opacity" : 1}}'>
|
||
<div class="flex justify-end items-center sm:hidden">
|
||
<a href="#contact-modal" class="button btn text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 whitespace-nowrap py-0/6em px-1em mr-10 z-1 text-14 hover:bg-black hover:text-white animation-element" data-lity="#contact-modal">
|
||
<span class="btn-txt" data-text="Send a message">Send a message</span>
|
||
</a>
|
||
<a href="#contact-modal" class="button btn btn-solid btn-custom-size btn-icon-block btn-icon-top tracking-1 text-black rounded-full whitespace-nowrap z-1 bg-accent border-none p-0 w-30 h-30 sm:hidden animation-element" data-lity="#contact-modal">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="hidden ml-15 lg:block">
|
||
<div class="ld-module-sd ld-module-sd-hover ld-module-sd-left module-mobile-nav">
|
||
<button class="nav-trigger style-6 txt-left collapsed text-13 font-normal tracking-0 capitalize bg-transparent p-0 border-none flex relative items-center justify-center" type="button" data-ld-toggle="true" data-bs-toggle-options='{"cloneTriggerInTarget": false, "type": "click"}' data-bs-toggle="collapse" data-bs-target="#lqd-drawer-main-navigation" aria-expanded="false" aria-controls="lqd-drawer-main-navigation">
|
||
<span class="bars inline-block relative z-1">
|
||
<span class="bars-inner flex flex-col w-full h-full">
|
||
<span class="bar inline-block relative"></span>
|
||
<span class="bar inline-block relative"></span>
|
||
<span class="bar inline-block relative"></span>
|
||
</span>
|
||
</span>
|
||
<span class="text-black text-capital txt inline-block">Menu</span>
|
||
</button>
|
||
<div class="ld-module-dropdown collapse absolute" id="lqd-drawer-main-navigation">
|
||
<div class="ld-sd-wrap padding-unset">
|
||
<div class="ld-sd-inner">
|
||
<div class="flex flex-row pt-100 pb-50 px-50 sm:flex-col sm:justify-between module-col-inner">
|
||
<div class="w-30percent relative flex flex-col justify-between sm:w-full">
|
||
<div class="relative flex flex-col module-social">
|
||
<div class="pb-35 ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 m-0 text-black-30 inline-block relative">Social</h2>
|
||
</div>
|
||
<div class="lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none lqd-magnetic-items">
|
||
<ul class="reset-ul">
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Facebook
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Behance
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Dribble
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Instagram
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Youtube
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="relative flex flex-col">
|
||
<div class="w-full ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 m-0 text-black-30 inline-block relative">Get in touch</h2>
|
||
</div>
|
||
<div class="max-w-full ld-fancy-heading relative">
|
||
<div class="ld-fh-element mb-0/5em inline-block relative text-20 leading-1em sm:text-16">
|
||
<span class="text-black">info@liquid.com</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col sm:order-first">
|
||
<div class="pb-30 ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 text-black-30 inline-block relative">Menu</h2>
|
||
</div>
|
||
<div class="module-primary-nav flex">
|
||
<div class="navbar-collapse inline-flex p-0 lqd-submenu-default-style lqd-magnetic-items" aria-expanded="false" role="navigation">
|
||
<ul class="link-black main-nav flex reset-ul lqd-menu-counter-right lqd-menu-items-block main-nav-hover-fade-inactive" data-submenu-options='{"toggleType": "slide", "handler": "click"}'>
|
||
<li>
|
||
<a class="text-38" href="#banner">Home</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#our-services">
|
||
<span>About Me</span>
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#case-studies">
|
||
<span>Projects</span>
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#testimonials">
|
||
<span>Testimonials</span>
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#contact">
|
||
<span>Contact</span>
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-module-backdrop"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-stickybar-wrap lqd-stickybar-left flex-col items-center justify-between">
|
||
<div class="flex items-center">
|
||
<div class="ld-module-sd ld-module-sd-hover ld-module-sd-left flex-grow-1 items-start">
|
||
<button class="nav-trigger style-6 txt-left collapsed text-13 font-normal p-0 flex relative items-center justify-center" type="button" data-lqd-interactive-color="true" data-ld-toggle="true" data-bs-toggle-options='{"cloneTriggerInTarget": false, "type": "click"}' data-bs-toggle="collapse" data-bs-target="#lqd-drawer-stickybar-left" aria-expanded="false" aria-controls="lqd-drawer-stickybar-left">
|
||
<span class="bars inline-block relative z-1">
|
||
<span class="bars-inner flex flex-col w-full h-full">
|
||
<span class="bar inline-block relative"></span>
|
||
<span class="bar inline-block relative"></span>
|
||
<span class="bar inline-block relative"></span>
|
||
</span>
|
||
</span>
|
||
<span class="txt inline-block">Menu</span>
|
||
</button>
|
||
<div class="ld-module-dropdown collapse absolute lqd-drawer-stickybar-left w-880" id="lqd-drawer-stickybar-left">
|
||
<div class="ld-sd-wrap">
|
||
<div class="w-full min-h-100vh flex flex-row justify-start items-stretch py-100 px-135 module-left-side">
|
||
<div class="w-30percent flex flex-col justify-between">
|
||
<div class="flex flex-col">
|
||
<div class="pb-35 ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 m-0 text-black-30 inline-block relative">Social</h2>
|
||
</div>
|
||
<div class="lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none lqd-magnetic-items">
|
||
<ul class="reset-ul">
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
<span>Facebook</span>
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
<span>Behance</span>
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
<span>Dribble</span>
|
||
</a>
|
||
</li>
|
||
<li class="mb-25">
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
<span>Instagram</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-16 text-black" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
<span>Youtube</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col">
|
||
<div class="ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 m-0 text-black-30 inline-block relative">Get in touch</h2>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<div class="ld-fh-element mb-0/5em inline-block relative text-20 leading-1em">
|
||
<span class="text-black">info@liquid.com</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-col sm:order-first">
|
||
<div class="pb-30 ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element text-16 text-black-30 inline-block relative">Menu</h2>
|
||
</div>
|
||
<div class="module-primary-nav flex">
|
||
<div class="navbar-collapse inline-flex p-0 lqd-submenu-default-style lqd-magnetic-items" aria-expanded="false" role="navigation">
|
||
<ul class="link-black main-nav flex reset-ul lqd-menu-counter-right lqd-menu-items-block main-nav-hover-fade-inactive" data-submenu-options='{"toggleType": "slide", "handler": "click"}' data-localscroll="true" data-localscroll-options='{"itemsSelector":">li > a", "offset": 85}'>
|
||
<li>
|
||
<a class="text-38" href="#banner">
|
||
Home
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#our-services">
|
||
About Me
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#case-studies">
|
||
Case Studies
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#testimonials">
|
||
Testimonials
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-38" href="#contact">
|
||
Contact
|
||
<span class="link-icon inline-flex hide-if-empty right-icon">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-down"></i>
|
||
</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-module-backdrop"></div>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center pt-40">
|
||
<div class="flex items-center -rotate-180 z-100 vertical-lr">
|
||
<p class="text-14 text-black" data-lqd-interactive-color="true">contact@hub.com</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="-rotate-180 z-100 flex-grow-1">
|
||
<div class="lqd-scrl-indc lqd-scrl-indc-style-dot mx-auto flex whitespace-nowrap align-self-end" data-lqd-scroll-indicator="true">
|
||
<a href="#wrap" class="text-black" data-localscroll="true" data-lqd-interactive-color="true">
|
||
<span class="lqd-scrl-indc-inner flex items-center">
|
||
<span class="lqd-scrl-indc-txt">Scroll to top</span>
|
||
<span class="lqd-scrl-indc-line flex-grow-1 relative">
|
||
<span class="lqd-scrl-indc-el inline-block absolute rounded-4"></span>
|
||
</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-stickybar-wrap lqd-stickybar-right items-center justify-center">
|
||
<div class="-rotate-180 vertical-lr">
|
||
<a href="#contact-modal" class="button text-black text-14" data-lity="#contact-modal" data-lqd-interactive-color="true">
|
||
Send a message
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="content bg-white" id="lqd-site-content">
|
||
<div id="lqd-contents-wrap">
|
||
|
||
<!-- Start Banner -->
|
||
<section class="lqd-section banner pt-20 px-75" id="banner">
|
||
<div class="container-fluid">
|
||
<div class="lqd-vslider">
|
||
<div class="rounded-6 lqd-vslider-scrn w-full relative overflow-hidden" data-lqd-slideshow="true" data-inview="true">
|
||
<span class="lqd-vslider-loader inline-flex items-center justify-center absolute z-3">
|
||
<span class="inline-flex rounded-full"></span>
|
||
</span>
|
||
<div class="lqd-vslider-scrn-inner relative overflow-hidden h-full">
|
||
<div class="lqd-vslider-ext lqd-overlay flex relative z-2 h-auto">
|
||
<ul class="w-full link-18 link-font-normal link-white reset-ul">
|
||
<li class="pt-1rem pr-1rem pl-1rem m-0 absolute is-active">
|
||
<div class="flex flex-col pr-40percent items-start sm:pr-0">
|
||
<h2 class="mb-0/5em leading-1em text-white">Watch the creative process behind our digital marketing.</h2>
|
||
<a href="https://www.youtube.com/watch?v=WaSvMAl4zPw" class="fresco btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered btn-icon-border-thicker text-14 font-normal uppercase leading-1em tracking-0 text-black leading-20 tracking-0 capitalize hover:text-white hover:inner-text-black hover:inner-bg-white">
|
||
<span class="btn-txt">
|
||
<small>Click to Watch</small> See how it works </span>
|
||
<span class="btn-icon w-60 h-60 text-white border-1 border-white-40 rounded-full mr-20 inner-text-black inner-bg-white">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-play"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="pt-1rem pr-1rem pl-1rem m-0 absolute">
|
||
<div class="flex flex-col pr-40percent items-start sm:pr-0">
|
||
<h2 class="mb-0/5em leading-1em text-white">Watch the creative process behind our digital marketing.</h2>
|
||
<a href="https://www.youtube.com/watch?v=WaSvMAl4zPw" class="fresco btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered btn-icon-border-thicker text-14 font-normal uppercase leading-1em tracking-0 text-black leading-20 tracking-0 capitalize hover:text-white hover:inner-text-black hover:inner-bg-white">
|
||
<span class="btn-txt">
|
||
<small>Click to Watch</small> See how it works </span>
|
||
<span class="btn-icon w-60 h-60 text-white border-1 border-white-40 rounded-full mr-20 inner-text-black inner-bg-white">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-play"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="pt-1rem pr-1rem pl-1rem m-0 absolute">
|
||
<div class="flex flex-col pr-40percent items-start sm:pr-0">
|
||
<h2 class="mb-0/5em leading-1em text-white">Watch the creative process behind our digital marketing.</h2>
|
||
<a href="https://www.youtube.com/watch?v=WaSvMAl4zPw" class="fresco btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered btn-icon-border-thicker text-14 font-normal uppercase leading-1em tracking-0 text-black leading-20 tracking-0 capitalize hover:text-white hover:inner-text-black hover:inner-bg-white">
|
||
<span class="btn-txt">
|
||
<small>Click to Watch</small> See how it works </span>
|
||
<span class="btn-icon w-60 h-60 text-white border-1 border-white-40 rounded-full mr-20 inner-text-black inner-bg-white">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-play"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
<li class="pt-1rem pr-1rem pl-1rem m-0 absolute">
|
||
<div class="flex flex-col pr-40percent items-start sm:pr-0">
|
||
<h2 class="mb-0/5em leading-1em text-white">Watch the creative process behind our digital marketing.</h2>
|
||
<a href="https://www.youtube.com/watch?v=WaSvMAl4zPw" class="fresco btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered btn-icon-border-thicker text-14 font-normal uppercase leading-1em tracking-0 text-black leading-20 tracking-0 capitalize hover:text-white hover:inner-text-black hover:inner-bg-white">
|
||
<span class="btn-txt">
|
||
<small>Click to Watch</small> See how it works </span>
|
||
<span class="btn-icon w-60 h-60 text-white border-1 border-white-40 rounded-full mr-20 inner-text-black inner-bg-white">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-play"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="lqd-vslider-images lqd-overlay flex z-0">
|
||
<figure class="absolute overflow-hidden is-active">
|
||
<img class="w-full h-full lqd-overlay flex objfit-cover objfit-center" src="./assets/images/demo/asymmetric-9/banner/blog-cover-1@2x.jpeg" alt="banner">
|
||
</figure>
|
||
<figure class="absolute overflow-hidden">
|
||
<img class="w-full h-full lqd-overlay flex objfit-cover objfit-center" src="./assets/images/demo/asymmetric-9/banner/bg-1.jpg" alt="banner">
|
||
</figure>
|
||
<figure class="absolute overflow-hidden">
|
||
<img class="w-full h-full lqd-overlay flex objfit-cover objfit-center" src="./assets/images/demo/asymmetric-9/banner/bg.jpg" alt="banner">
|
||
</figure>
|
||
<figure class="absolute overflow-hidden">
|
||
<img class="w-full h-full lqd-overlay flex objfit-cover objfit-center" src="./assets/images/demo/asymmetric-9/banner/bg-1.jpg" alt="banner">
|
||
</figure>
|
||
</div>
|
||
<div class="lqd-vslider-menu lqd-overlay flex z-1">
|
||
<ul class="reset-ul flex flex-col lqd-overlay flex text-vertical">
|
||
<li class="flex items-end p-1/5rem m-0 relative is-active">
|
||
<a class="lqd-webgl-slideshow-link p-1/5rem" href="#">
|
||
<span class="inline-flex">Digital Design</span>
|
||
</a>
|
||
</li>
|
||
<li class="flex items-end p-1/5rem m-0 relative">
|
||
<a class="lqd-webgl-slideshow-link p-1/5rem" href="#">
|
||
<span class="inline-flex">Branding Strategy</span>
|
||
</a>
|
||
</li>
|
||
<li class="flex items-end p-1/5rem m-0 relative">
|
||
<a class="lqd-webgl-slideshow-link p-1/5rem" href="#">
|
||
<span class="inline-flex">Mobile App Design</span>
|
||
</a>
|
||
</li>
|
||
<li class="flex items-end p-1/5rem m-0 relative">
|
||
<a class="lqd-webgl-slideshow-link p-1/5rem" href="#">
|
||
<span class="inline-flex">Website</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<span class="lqd-extra-cursor fixed pointer-events-none"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Banner -->
|
||
|
||
<!-- Start Clients -->
|
||
<section class="lqd-section clients bg-white py-60" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.inOut", "direction": "random", "initValues": {"opacity" : 0} , "animations": {"opacity" : 1}}'>
|
||
<div class="container">
|
||
<div class="row items-center">
|
||
<div class="col col-12">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element mb-2em inline-block relative">These world-class teams are already using Hub</h6>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-start lg:text-center sm:text-start module-img">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="111" height="33" src="./assets/images/demo/asymmetric-9/clients/spotify-1.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-center module-img">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="65" height="23" src="./assets/images/demo/asymmetric-9/clients/nike.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-center sm:text-end module-img">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="75" height="17" src="./assets/images/demo/asymmetric-9/clients/amd-logo-1.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-center sm:text-start">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="111" height="33" src="./assets/images/demo/asymmetric-9/clients/spotify-1.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-center">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="66" height="21" src="./assets/images/demo/asymmetric-9/clients/hulu-2.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-4 col-md-2 text-end lg:text-center sm:text-end">
|
||
<div class="lqd-imggrp-single block relative animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="93" height="27" src="./assets/images/demo/asymmetric-9/clients/4.svg" alt="client">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Clients -->
|
||
|
||
<!-- Start Our Services -->
|
||
<section class="lqd-section our-services py-10" id="our-services">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="w-45percent relative flex justify-between sm:w-full module-col">
|
||
<div class="relative w-190 module-img-1">
|
||
<div class="mt-55 lqd-imggrp-single block relative" data-shadow-style="2" data-animate-shadow="true" data-inview="true" data-inview-options='{"delayTime" :200}'>
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative rounded-2">
|
||
<img class="rounded-2" width="281" height="297" src="./assets/images/demo/asymmetric-9/what-we-do/1.jpg" alt="what we do">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="relative w-230 module-img-2">
|
||
<div class="lqd-imggrp-single block relative" data-shadow-style="4" data-animate-shadow="true" data-inview="true" data-inview-options='{"delayTime" :300}'>
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative rounded-2">
|
||
<img class="rounded-2" width="347" height="446" src="./assets/images/demo/asymmetric-9/what-we-do/3.jpg" alt="what we do">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="absolute top-45percent max-w-full z-1 module-img-3">
|
||
<div class="lqd-imggrp-single block relative" data-shadow-style="1" data-animate-shadow="true" data-inview="true">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative rounded-2">
|
||
<img class="rounded-2" width="222" height="426" src="./assets/images/demo/asymmetric-9/what-we-do/2.jpg" alt="what we do">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-55percent pl-10percent sm:w-full sm:p-0" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "initValues": {"x": "30px", "rotationY" :30, "opacity" : 0} , "animations": {"x": "0px", "rotationY" :0, "opacity" : 1}}'>
|
||
<div class="flex justify-start items-center">
|
||
<a href="#contact-modal" class="button btn text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 whitespace-nowrap py-0/6em px-1em mr-10 hover:bg-black hover:text-white animation-element" data-lity="#contact-modal">
|
||
<span class="btn-txt" data-text="Send a message">Send a message</span>
|
||
</a>
|
||
<a href="#contact-modal" class="button btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent mr-10 text-black rounded-full animation-element" data-lity="#contact-modal">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h3 class="ld-fh-element text-30 leading-1/2em mt-0/75em mb-1em inline-block relative">We help you to go online and increase your conversion rate.</h3>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">01 <u class="ml-15">Art Direction</u></h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">02 <u class="ml-15">Marketing Strategy</u></h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">03 <u class="ml-15">Mobile App Design</u></h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">04 <u class="ml-15">Content Management</u></h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">05 <u class="ml-15">System & Guides</u></h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-16 mb-1em inline-block relative">06 <u class="ml-15">Graphic Design</u></h6>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Our Services -->
|
||
|
||
<!-- Start Solutions -->
|
||
<section class="lqd-section solutions pt-160 pb-80" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "initValues": {"y": "50px", "z": "50px", "rotationY" :20, "opacity" : 0} , "animations": {"y": "0px", "z": "0px", "rotationY" :0, "opacity" : 1}}'>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-12 col-xl-3">
|
||
<div class="flex flex-col items-start module-title">
|
||
<div class="w-auto py-5 px-10 rounded-4 bg-gray text-center ld-fancy-heading relative animation-element">
|
||
<h6 class="ld-fh-element text-10 font-bold uppercase tracking-1 m-0 inline-block relative">The process</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative module-title animation-element">
|
||
<h2 class="ld-fh-element text-32 mt-1em mb-0/5em inline-block relative">Magical digital solutions.</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 col-xl-9">
|
||
<div class="flex gap-60 sm:flex-wrap module-box">
|
||
<div class="w-full flex flex-col">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h2 class="ld-fh-element text-15 tracking-0 mb-1/25em inline-block relative">
|
||
<span class="text-24 pr-10">01</span>
|
||
<span class="font-normal pr-5">/</span>
|
||
<span>Project Offer</span>
|
||
</h2>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-13 leading-16">Our design services starts and ends with a best-in-class experience strategy that builds brands. Open an online store and become an international seller. Your customers will enjoy shopping online!</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-full flex flex-col">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h2 class="ld-fh-element text-15 tracking-0 mb-1/25em inline-block relative">
|
||
<span class="text-24 pr-10">02</span>
|
||
<span class="font-normal pr-5">/</span>
|
||
<span>Art Direction</span>
|
||
</h2>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-13 leading-16">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do. </p>
|
||
</div>
|
||
</div>
|
||
<div class="w-full flex flex-col">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h2 class="ld-fh-element text-15 tracking-0 mb-1/25em inline-block relative">
|
||
<span class="text-24 pr-10">03</span>
|
||
<span class="font-normal pr-5">/</span>
|
||
<span>Development</span>
|
||
</h2>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-13 leading-16">We marry creative insight with data to deliver successful user experiences. Through a process of iteration and prototyping, we design interfaces that bring joy to people while allowing them to get things done.</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-full flex flex-col">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h2 class="ld-fh-element text-15 tracking-0 mb-1/25em inline-block relative">
|
||
<span class="text-24 pr-10">04</span>
|
||
<span class="font-normal pr-5">/</span>
|
||
<span>Launch</span>
|
||
</h2>
|
||
</div>
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-13 leading-16">Hub embraces holistic development and support for employees the aim of being a first-choice employer our sectors. Since the 1980s, as the complexity of buildings</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Solutions -->
|
||
|
||
<!-- Start Section Dark -->
|
||
<section class="lqd-section section-dark max-w-full bg-dark px-75 pb-80">
|
||
|
||
<!-- Start Our Vision -->
|
||
<section class="lqd-section our-vision pt-80 min-h-70vh">
|
||
<div class="absolute w-full max-w-full bottom-0 pointer-events-none">
|
||
<div class="lqd-throwable-scene relative pointer-events-none overflow-hidden" data-lqd-throwable-scene="true" data-throwable-options='{"roundness": "7em"}'>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-1" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Elementor Support</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-2" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Mobile Builder</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-3" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Next-gen Technologies</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-4" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">WooCommerce Builder</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-5" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Adaptive Colors</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-6" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Liquid Events</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-7" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Smart Assets Manager</span>
|
||
</p>
|
||
<p class="lqd-throwable-element inline-block absolute top-0 left-0 whitespace-nowrap m-0 pointer-events-auto user-select-none module-float-8" data-lqd-throwable-el>
|
||
<span class="text-black py-0/25em px-1/5em text-22 leading-1/5em rounded-100 lqd-throwable-element-rot inline-block sm:text-16">Performance</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-12 mb-220">
|
||
<div class="mb-30 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="48" height="10" src="./assets/images/demo/asymmetric-9/shape/shape.svg" alt="shape">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
<h3 class="lqd-text-reveal-el mb-40 text-74 font-semibold leading-0/9em -tracking-3 text-white" data-split-text="true" data-split-options='{"type": "words, chars"}' data-parallax="true" data-parallax-options='{"parallaxTargets": ".lqd-chars, figure", "start": "top bottom", "end": "center 75%", "scrub" : 3}' data-parallax-from='{"opacity" :0.2}' data-parallax-to='{"opacity" :1, "stagger": {"from": "start", "each" : 1}}'>
|
||
<span class="lqd-adv-txt-item">
|
||
<span>We build and activate brands through cultural insight, strategic vision, and the</span>
|
||
<span class="vertical-align-top mx-5 lqd-adv-txt-fig relative inline-flex">
|
||
<img class="h-auto max-w-full border-none rounded-0" width="62" height="62" src="./assets/images/demo/asymmetric-9/shape/Img-2.png" alt="shape">
|
||
</span>
|
||
</span>
|
||
<span class="lqd-adv-txt-item">
|
||
<span>power of emotion across ever element of its expression. Developing</span>
|
||
<span class="vertical-align-top mx-5 lqd-adv-txt-fig relative inline-flex">
|
||
<img class="h-auto max-w-full border-none rounded-0" width="62" height="62" src="./assets/images/demo/asymmetric-9/shape/Img-1.png" alt="shape">
|
||
</span>
|
||
</span>
|
||
<span class="lqd-adv-txt-item">the best digital experience in the field.</span>
|
||
</h3>
|
||
<div class="flex justify-start items-center">
|
||
<div class="w-auto mr-10 py-5 border-2 border-white rounded-100 px-15 ld-fancy-heading relative">
|
||
<h5 class="ld-fh-element text-14 uppercase tracking-1 m-0 text-white inline-block relative">Our vision</h5>
|
||
</div>
|
||
<span href="#" class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-30 h-30 bg-accent mr-10 border-none p-0" target="_blank" rel="nofollow">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Our Vision -->
|
||
|
||
<!-- Start Case Studies -->
|
||
<section class="lqd-section case-studies bg-white rounded-10 mb-90" id="case-studies">
|
||
<div class="container-fluid border-bottom border-lightgray py-30">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-12 text-start">
|
||
<div class="ld-fancy-heading relative module-title">
|
||
<h2 class="ld-fh-element inline-block relative text-28 m-0">Recent Works</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-12 pt-55 pb-25 module-col">
|
||
<div class="flex flex-wrap" data-custom-animations="true" data-ca-options='{"animationTarget": "h2", "ease": "bounce.in", "direction": "random", "initValues":{ "opacity": 0 }, "animations":{ "opacity": 1 }}'>
|
||
<h2 class="text-94 font-medium -tracking-1 mr-0/25em mb-0/2em sm:text-60">.freelance</h2>
|
||
<h2 class="text-94 font-medium -tracking-1 mr-0/25em mb-0/2em sm:text-60">.ensoleille</h2>
|
||
<h2 class="text-94 font-medium -tracking-1 mr-0/25em mb-0/2em sm:text-60">.attractif</h2>
|
||
<h2 class="text-94 font-medium font-accent italic -tracking-1 mr-0/25em mb-0/2em sm:text-60">.detaille</h2>
|
||
</div>
|
||
<div class="lqd-pf-grid mt-50">
|
||
<div class="liquid-filter-items items-center justify-between">
|
||
<div class="liquid-filter-items-inner flex-grow-1">
|
||
<span class="liquid-filter-items-label size-md">Filter by</span>
|
||
<ul class="filter-list filter-list-inline items-centerd-lg-flex flex items-center md:hidden" id="pf-filter-case-studies">
|
||
<li class="active text-15" data-filter="*">
|
||
<span>All</span>
|
||
</li>
|
||
<li class="text-15" data-filter=".branding">
|
||
<span>Branding</span>
|
||
</li>
|
||
<li class="text-15" data-filter=".custom-print">
|
||
<span>Custom Print</span>
|
||
</li>
|
||
<li class="text-15" data-filter=".digital-design">
|
||
<span>Digital Design</span>
|
||
</li>
|
||
<li class="text-15" data-filter=".ecommerce">
|
||
<span>Ecommerce</span>
|
||
</li>
|
||
</ul>
|
||
<div class="lqd-filter-dropdown hidden md:block" data-form-options='{ "dropdownAppendTo": "self" }'>
|
||
<select name="lqd-filter-dropdown-pf-filter-case-studies" id="lqd-filter-dropdown-pf-filter-case-studies">
|
||
<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>
|
||
<option data-filter=".ecommerce" value=".ecommerce">Ecommerce</option>
|
||
</select>
|
||
</div>
|
||
<a href="#contact-modal" class="btn btn-naked btn-icon-right btn-hover-swp text-13 font-normal uppercase leading-1em text-black rounded-100 whitespace-nowrap capitalize" data-lity="#contact-modal">
|
||
<span class="btn-txt" data-text="Hire me">Hire me</span>
|
||
<span class="btn-icon">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
<span class="btn-icon">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-pf-row row flex flex-wrap -mr-30 -ml-30" data-liquid-masonry="true" data-masonry-options='{ "filtersID": "#pf-filter-case-studies", "filtersCounter": true }'>
|
||
<div class="lqd-pf-column masonry-item digital-design ecommerce col-12 col-sm-6 col-lg-4 px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="524" src="./assets/images/demo/asymmetric-9/case-studies/1.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Beer</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Digital Design</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/1.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="lqd-pf-column masonry-item ecommerce masonry col-12 col-sm-6 col-lg-4 px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="527" src="./assets/images/demo/asymmetric-9/case-studies/2.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Nike</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Ecommerce</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/2.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="lqd-pf-column masonry-item branding custom-print masonry col-12 col-sm-6 col-lg-4 px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="524" src="./assets/images/demo/asymmetric-9/case-studies/3.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Psalms</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Branding</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/3.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="lqd-pf-column col-12 col-sm-6 col-lg-4 masonry-item branding digital-design masonry px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="524" src="./assets/images/demo/asymmetric-9/case-studies/4.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Pixel Phone</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Branding</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/4.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="lqd-pf-column masonry-item custom-print ecommerce masonry col-12 col-sm-6 col-lg-4 px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="527" src="./assets/images/demo/asymmetric-9/case-studies/5.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Next Bank</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Custom Print</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/5.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
<div class="lqd-pf-column masonry-item custom-print masonry col-12 col-sm-6 col-lg-4 px-30">
|
||
<article class="lqd-pf-item lqd-pf-item-style-2 lqd-pf-overlay-bg-scale lqd-pf-dark pf-details-h-str rounded-6">
|
||
<div class="lqd-pf-item-inner rounded-inherit">
|
||
<div class="lqd-pf-img mb-1em relative rounded-6 overflow-hidden">
|
||
<figure class="w-full">
|
||
<img width="581" height="524" src="./assets/images/demo/asymmetric-9/case-studies/6.jpg" alt="case studies">
|
||
</figure>
|
||
<span class="lqd-pf-overlay-bg lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</span>
|
||
</div>
|
||
<div class="lqd-pf-details">
|
||
<h2 class="lqd-pf-title text-22 font-semibold text-black mt-0 mb-1">Network</h2>
|
||
<ul class="lqd-pf-cat reset-ul inline-nav inline-flex relative z-2">
|
||
<li>
|
||
<a href="#">Custom Print</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<a href="./assets/images/demo/asymmetric-9/case-studies/6.jpg" class="lqd-overlay flex lqd-pf-overlay-link lqd-cc-icon-trigger fresco" data-fresco-group="true"></a>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Case Studies -->
|
||
|
||
<!-- Start Services -->
|
||
<section class="lqd-section services bg-white rounded-10 mb-90">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col col-12 text-start" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"x": "-100px", "opacity" : 0} , "animations": {"x": "0px", "opacity" : 1}}'>
|
||
<div class="w-full flex flex-wrap justify-between items-center pt-35">
|
||
<div class="ld-fancy-heading relative lg:w-50percent sm:w-full module-title animation-element">
|
||
<h2 class="ld-fh-element text-28 m-0 inline-block relative">Services</h2>
|
||
</div>
|
||
<div class="flex items-center justify-end lg:w-50percent sm:w-full sm:justify-start module-btn">
|
||
<div class="ld-fancy-heading relative mr-10 py-5 px-15 mb-0 border-2 border-black rounded-100 animation-element">
|
||
<h5 class="ld-fh-element inline-block relative text-14 uppercase tracking-1 m-0">Our services</h5>
|
||
</div>
|
||
<a href="#" class="text-14 font-bold uppercase text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-30 h-30 bg-accent border-none p-0" target="_blank" rel="nofollow">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
<div class="divider w-full max-w-full mt-10 py-15">
|
||
<span class="w-full border-bottom border-black-50"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 pt-55 pb-70 px-10 module-col" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"y": "100px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
|
||
<div class="accordion accordion-title-underlined accordion-sm animation-element" id="accordion-services" role="tablist" aria-multiselectable="true">
|
||
<div class="accordion-item panel active">
|
||
<div class="accordion-heading" role="tab" id="heading-item-one">
|
||
<h4 class="accordion-title font-normal">
|
||
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-one" aria-expanded="true" aria-controls="collapse-item-one">
|
||
<span class="accordion-title-txt">Make your <b>eCommerce business stand out.</b></span>
|
||
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
|
||
<i class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
|
||
</span>
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapse-item-one" class="accordion-collapse collapse show" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-one">
|
||
<div class="accordion-content py-1em">
|
||
<div class="flex flex-wrap items-end">
|
||
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
|
||
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
|
||
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
|
||
<span class="block">6</span>
|
||
</div>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
|
||
</div>
|
||
<div class="ld-fancy-heading relative mt-10">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-60percent sm:w-full sm:order-first">
|
||
<div class="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="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item panel">
|
||
<div class="accordion-heading" role="tab" id="heading-item-two">
|
||
<h4 class="accordion-title font-normal">
|
||
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-two" aria-expanded="false" aria-controls="collapse-item-two">
|
||
<span class="accordion-title-txt">Increase your <b>conversion rate best-in-class experience strategy.</b></span>
|
||
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
|
||
<i class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
|
||
</span>
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapse-item-two" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-two">
|
||
<div class="accordion-content py-1em">
|
||
<div class="flex flex-wrap items-end">
|
||
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
|
||
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
|
||
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
|
||
<span class="block">6</span>
|
||
</div>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
|
||
</div>
|
||
<div class="ld-fancy-heading relative mt-10">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-60percent sm:w-full sm:order-first">
|
||
<div class="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="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item panel">
|
||
<div class="accordion-heading" role="tab" id="heading-item-three">
|
||
<h4 class="accordion-title font-normal">
|
||
<a class="collapsed" role="button" data-bs-toggle="collapse" href="#collapse-item-three" aria-expanded="false" aria-controls="collapse-item-three">
|
||
<span class="accordion-title-txt">Learn how to <b>laser focus and target your audience.</b></span>
|
||
<span class="accordion-expander text-24 w-60 h-60 flex items-center justify-center p-0 border-2 rounded-full border-lightgray flex-shrink-0">
|
||
<i class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
<i class="lqd-icn-ess icon-ion-ios-remove"></i>
|
||
</span>
|
||
</a>
|
||
</h4>
|
||
</div>
|
||
<div id="collapse-item-three" class="accordion-collapse collapse" data-bs-parent="#accordion-services" role="tabpanel" aria-labelledby="heading-item-three">
|
||
<div class="accordion-content py-1em">
|
||
<div class="flex flex-wrap items-end">
|
||
<div class="w-40percent flex flex-wrap align-content-end items-end gap-0 pr-150 sm:w-full module-content">
|
||
<div class="lqd-counter relative lqd-counter-default -mb-20 text-black w-auto">
|
||
<div class="lqd-counter-element relative font-medium mb-0" data-enable-counter="true" data-counter-options='{"targetNumber": "6"}'>
|
||
<span class="block">6</span>
|
||
</div>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<span class="ld-fh-element inline-block relative text-16 leading-20 mb-2em italic text-gray-500 xl:m-0">Years of<br>experience</span>
|
||
</div>
|
||
<div class="ld-fancy-heading relative mt-10">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative">We craft premium digital work for web, mobile and experiential with creative agencies and global brands alike – putting passion, pride and plenty of elbow grease into everything we do.</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-60percent sm:w-full sm:order-first">
|
||
<div class="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="1038" height="614" src="./assets/images/demo/asymmetric-9/services/acc-img-1.jpg" alt="services">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Services -->
|
||
|
||
<!-- Start Section Flow -->
|
||
<section class="lqd-section section-flow bg-white rounded-10 mb-90">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col col-12">
|
||
<div class="lqd-section-flow items-start flex-wrap" data-lqd-section-flow="true">
|
||
<div class="lqd-section-flow-panel lqd-section-flow-panel-start col-lg-6 h-vh-100 px-0 sticky top-0 left-0 overflow-hidden">
|
||
<div class="lqd-section-flow-panel-start-inner">
|
||
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
|
||
<div class="lqd-section-flow-item-inner h-vh-100">
|
||
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
|
||
</div>
|
||
</div>
|
||
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
|
||
<div class="lqd-section-flow-item-inner h-vh-100">
|
||
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
|
||
</div>
|
||
</div>
|
||
<div class="lqd-section-flow-item lqd-overlay flex overflow-hidden">
|
||
<div class="lqd-section-flow-item-inner h-vh-100">
|
||
<img class="h-full objfit-cover objpos-center" src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-section-flow-panel lqd-section-flow-panel-end col-lg-6">
|
||
<div class="lqd-section-flow-item flex items-center">
|
||
<div class="lqd-section-flow-item-inner">
|
||
<div class="lqd-section-flow-content-mobile mb-30">
|
||
<img src="./assets/images/demo/asymmetric-9/section-flow/acc-img-1.jpg" title="section-flow-1" alt="section-flow-1">
|
||
</div>
|
||
<div class="flex flex-wrap py-20percent">
|
||
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
|
||
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">7. Creative</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
|
||
</div>
|
||
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
|
||
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
|
||
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-section-flow-item flex items-center">
|
||
<div class="lqd-section-flow-item-inner">
|
||
<div class="lqd-section-flow-content-mobile mb-30">
|
||
<img src="./assets/images/demo/asymmetric-9/section-flow/Img.jpg" title="Img" alt="Img">
|
||
</div>
|
||
<div class="flex flex-wrap py-20percent">
|
||
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
|
||
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">3. Agencies</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We craft premium designs for agencies and global brands around the globe.</h2>
|
||
</div>
|
||
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
|
||
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
|
||
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="lqd-section-flow-item flex items-center">
|
||
<div class="lqd-section-flow-item-inner">
|
||
<div class="lqd-section-flow-content-mobile mb-30">
|
||
<img src="./assets/images/demo/asymmetric-9/section-flow/Img-1.jpg" title="Img-1" alt="Img-1">
|
||
</div>
|
||
<div class="flex flex-wrap py-20percent">
|
||
<div class="ld-fancy-heading relative py-5 px-15 leading-1 bg-gray rounded-4 mb-15">
|
||
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">2. Brands</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h2 class="ld-fh-element inline-block relative text-42 leading-0/9em mb-0/75em">We create world-class digital products materials that communicate clearly.</h2>
|
||
</div>
|
||
<a href="./page-asymmetric-agency-case-studies.html" class="btn btn-naked btn-icon-left btn-icon-circle btn-icon-custom-size btn-icon-bordered capitalize tracking-0 font-bold leading-1em text-14 text-black hover:inner-text-white hover:inner-bg-black">
|
||
<span class="btn-txt" data-text="Explore Details">Explore Details</span>
|
||
<span class="btn-icon w-55 h-55 border-1 border-black-10 text-black-40 mr-15 inner-bg-black inner-text-white text-1/5em">
|
||
<i aria-hidden="true" class="lqd-icn-ess icon-ion-ios-add"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Section Flow -->
|
||
|
||
<!-- Start Testimonials -->
|
||
<section class="lqd-section testimonials text-white mb-80" id="testimonials" data-custom-animations="true" data-ca-options='{"animationTarget": ".animation-element", "ease": "back.out", "direction": "backward", "initValues": {"y": "100px", "opacity" : 0} , "animations": {"y": "0px", "opacity" : 1}}'>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="w-full flex flex-col items-start flex-wrap p-0">
|
||
<div class="ld-fancy-heading relative leading-1/5em px-10 bg-lightgray rounded-4 animation-element">
|
||
<h6 class="ld-fh-element inline-block relative text-10 font-bold uppercase tracking-1 m-0">Testimonials</h6>
|
||
</div>
|
||
<div class="w-full flex flex-wrap flex-grow-1 items-center justify-start">
|
||
<div class="ld-fancy-heading relative animation-element">
|
||
<h2 class="ld-fh-element inline-block relative text-white text-68 mr-0/5em mb-0">Customer stories</h2>
|
||
</div>
|
||
<span class="btn text-14 font-bold uppercase leading-1em tracking-1 text-white border-2 rounded-100 py-0/6em px-1em bg-white-0 border-white mr-10 hover:bg-white hover:text-black animation-element">
|
||
<span class="btn-txt" data-text="read more">read more</span>
|
||
</span>
|
||
<span class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent border-none p-0 w-35 h-35 animation-element">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
<div class="divider w-full max-w-full items-center py-30 animation-element">
|
||
<h5 class="text-14 uppercase tracking-1 text-white mr-20 mb-0">Testimonials </h5>
|
||
<span class="divider-separator items-center"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-full flex items-center justify-start flex-wrap"></div>
|
||
<div class="w-55percent flex flex-col flex-wrap md:w-full">
|
||
<div class="lqd-imggrp-single block relative mb-25 animation-element">
|
||
<div class="lqd-imggrp-img-container inline-flex relative items-center justify-center">
|
||
<figure class="w-full relative">
|
||
<img width="26" height="26" src="./assets/images/demo/asymmetric-9/testimonials/Quote.svg" alt="testimonials">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-container relative carousel-nav-left carousel-nav-sm carousel-nav-shaped carousel-nav-solid carousel-nav-circle carousel-nav-left carousel-dots-inside carousel-dots-mobile-outside carousel-dots-mobile-left animation-element">
|
||
<div class="carousel-items relative" data-lqd-flickity='{"prevNextButtons": true, "navArrow": "6", "pageDots": true, "dotsIndicator": "numbers", "numbersStyle": "circle", "dotsAppendTo": "#testimonial-carousel-dots-holder", "cellAlign": "left", "groupCells": false, "buttonsAppendTo": "self", "addSlideNumbersToArrows": false}'>
|
||
<!-- <div class="carousel-item flex flex-col justify-center">-->
|
||
<!-- <div class="carousel-item-inner relative w-full mb-20">-->
|
||
<!-- <div class="carousel-item-content relative w-full text-20 text-white leading-1em">-->
|
||
<!-- <p>By enrolling in the Four Bear Program, UM guarantees you will graduate in four years with a bachelor's degree. Discover the global city—filled with inspiration, opportunities to explore.</p>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<?php
|
||
foreach ($blogdata as $item){
|
||
var_dump($data);
|
||
?>
|
||
|
||
<div class="carousel-item flex flex-col justify-center">
|
||
<div class="carousel-item-inner relative w-full mb-20">
|
||
<div class="carousel-item-content relative w-full text-20 text-white leading-1em">
|
||
<p>aaaa By enrolling in the Four Bear Program, UM guarantees you will graduate in four years with a bachelor's degree. Discover the global city—filled with inspiration, opportunities to explore.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<?php
|
||
}
|
||
?>
|
||
|
||
<div class="carousel-item flex flex-col justify-center">
|
||
<div class="carousel-item-inner relative w-full mb-20">
|
||
<div class="carousel-item-content relative w-full text-20 text-white leading-1em">
|
||
<p>sss cc By enrolling in the Four Bear Program, UM guarantees you will graduate in four years with a bachelor's degree. Discover the global city—filled with inspiration, opportunities to explore.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center">
|
||
<div class="carousel-item-inner relative w-full mb-20">
|
||
<div class="carousel-item-content relative w-full text-20 text-white leading-1em">
|
||
<p>By enrolling in the Four Bear Program, UM guarantees you will graduate in four years with a bachelor's degree. Discover the global city—filled with inspiration, opportunities to explore.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center">
|
||
<div class="carousel-item-inner relative w-full mb-20">
|
||
<div class="carousel-item-content relative w-full text-20 text-white leading-1em">
|
||
<p>By enrolling in the Four Bear Program, UM guarantees you will graduate in four years with a bachelor's degree. Discover the global city—filled with inspiration, opportunities to explore.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-45percent relative flex items-center justify-center flex-wrap md:hidden" id="testimonial-carousel-dots-holder">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Testimonials -->
|
||
|
||
<!-- Start Clients Carousel -->
|
||
<section class="lqd-section clients-carousel">
|
||
<div class="container-fluid mx-20">
|
||
<div class="row">
|
||
<div class="col col-12">
|
||
<div class="carousel-container relative carousel-nav-shaped yes">
|
||
<div class="carousel-items relative lqd-fade-sides -mr-30 -ml-30" data-lqd-flickity='{"marquee": true, "equalHeightCells": true, "middleAlignContent": true, "marqueeTickerSpeed": "1", "pauseAutoPlayOnHover": false}'>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="93" height="27" src="./assets/images/demo/asymmetric-9/clients/4-1.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="75" height="27" src="./assets/images/demo/asymmetric-9/clients/nike-1.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="46" height="33" src="./assets/images/demo/asymmetric-9/clients/Path-46878.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="92" height="13" src="./assets/images/demo/asymmetric-9/clients/Path-46880.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="68" height="30" src="./assets/images/demo/asymmetric-9/clients/Path-46881.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item flex flex-col justify-center items-center w-20percent px-30 lg:w-40percent">
|
||
<div class="carousel-item-inner relative w-full h-220 bg-transparent border-1 border-white-10">
|
||
<div class="carousel-item-content relative w-full justify-center">
|
||
<img width="52" height="52" src="./assets/images/demo/asymmetric-9/clients/volkswagen-1.svg" alt="clients">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Clients Carousel -->
|
||
</section>
|
||
<!-- End Section Dark -->
|
||
|
||
<!-- Start Blog -->
|
||
<section class="lqd-section blog pt-90 pb-60">
|
||
<div class="container">
|
||
<div class="row items-center">
|
||
<div class="col col-12 col-md-7">
|
||
<div class="flex flex-wrap items-center">
|
||
<div class="ld-fancy-heading relative sm:w-full">
|
||
<h2 class="ld-fh-element inline-block relative text-74 mr-0/25em mb-0">News</h2>
|
||
</div>
|
||
<span class="text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 btn py-0/6em px-1em mr-10">
|
||
<span class="btn-txt" data-text="Latest news">Latest news</span>
|
||
</span>
|
||
<span class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent border-none p-0 w-35 h-35 ">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 col-md-5">
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative">Latest news in the office. Our design services starts and ends with a best-in-class experience strategy that builds brands. </p>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 mt-15 mb-30">
|
||
<div class="flex flex-wrap justify-between">
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-12 uppercase tracking-1">Latest posts</p>
|
||
</div>
|
||
<div class="ld-fancy-heading relative text-end">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-12 uppercase tracking-1">09</p>
|
||
</div>
|
||
<div class="divider w-full pb-5">
|
||
<span class="w-full flex border-bottom border-black"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row -mr-10 -ml-10">
|
||
<div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
|
||
<article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-beauty tag-travel bg-white border-1 border-black-50">
|
||
<div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
|
||
<figure class="lqd-overlay flex">
|
||
<img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-3-700x450.jpg" alt="nvestment trend monitor">
|
||
<div class="lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="lqd-lp-contents w-full flex flex-col">
|
||
<header class="lqd-lp-header">
|
||
<div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
|
||
<time class="lqd-lp-date inline-flex items-center" datetime="2021-06-02T13:40:12+00:00">2 years ago</time>
|
||
</div>
|
||
<h2 class="lqd-lp-title mb-0/75em h5">
|
||
<a href="#">Investment trend monitor: Top trends in 2023</a>
|
||
</h2>
|
||
</header>
|
||
<div class="lqd-lp-excerpt">
|
||
<p class="text-12 leading-16">As the complexity of buildings to increase, the field of architecture became</p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
|
||
</article>
|
||
</div>
|
||
<div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
|
||
<article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-beauty tag-travel bg-white border-1 border-black-50">
|
||
<div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
|
||
<figure class="lqd-overlay flex">
|
||
<img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-2-700x450.jpg" alt="Free advertising for your online business">
|
||
<div class="lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="lqd-lp-contents w-full flex flex-col">
|
||
<header class="lqd-lp-header">
|
||
<div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
|
||
<time class="lqd-lp-date inline-flex items-center" datetime="2020-09-24T06:00:29+00:00">2 years ago</time>
|
||
</div>
|
||
<h2 class="lqd-lp-title mb-0/75em h5">
|
||
<a href="#">Free advertising for your online business</a>
|
||
</h2>
|
||
</header>
|
||
<div class="lqd-lp-excerpt">
|
||
<p class="text-12 leading-16">Since the 1980s, as the complexity of buildings began to increase, the field of </p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
|
||
</article>
|
||
</div>
|
||
<div class="col col-12 col-md-6 col-lg-4 px-10 mb-30 flex flex-col">
|
||
<article class="lqd-lp relative lqd-lp lqd-lp-style-21 lqd-lp-style-21-alt flex flex-wrap text-start post type-post status-publish format-standard has-post-thumbnail hentry category-blog-single tag-spain tag-travel bg-white border-1 border-black-50">
|
||
<div class="lqd-lp-img w-full relative overflow-hidden mb-1/5rem">
|
||
<figure class="lqd-overlay flex">
|
||
<img class="w-full" width="700" height="450" src="./assets/images/demo/asymmetric-9/blog/blog-img-1-700x450.jpg" alt="Business meeting 2023 in San Francisco">
|
||
<div class="lqd-overlay flex items-center justify-center">
|
||
<i class="lqd-icn-ess icon-md-arrow-forward"></i>
|
||
</div>
|
||
</figure>
|
||
</div>
|
||
<div class="lqd-lp-contents w-full flex flex-col">
|
||
<header class="lqd-lp-header">
|
||
<div class="lqd-lp-meta flex items-center justify-between mb-1/5em">
|
||
<time class="lqd-lp-date inline-flex items-center" datetime="2020-09-23T12:14:11+00:00">2 years ago</time>
|
||
</div>
|
||
<h2 class="lqd-lp-title mb-0/75em h5">
|
||
<a href="#">Business meeting 2023 in San Francisco</a>
|
||
</h2>
|
||
</header>
|
||
<div class="lqd-lp-excerpt">
|
||
<p class="text-12 leading-16">Through a unique combination of engineering, construction and design disciplines and </p>
|
||
</div>
|
||
</div>
|
||
<a href="#" class="lqd-lp-overlay-link lqd-overlay flex z-2"></a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Blog -->
|
||
|
||
<!-- Start Contact -->
|
||
<section class="lqd-section contact pt-60 pb-110" id="contact">
|
||
<div class="container">
|
||
<div class="row items-start">
|
||
<div class="w-45percent sm:w-full module-content">
|
||
<div class="ld-fancy-heading relative">
|
||
<h4 class="ld-fh-element inline-block relative mb-1/5em">Looking for collaboration? Send an email to info@liquid-themes.com.</h4>
|
||
</div>
|
||
<div class="flex justify-start items-center">
|
||
<a href="#contact-modal" class="button btn text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 btn py-0/6em px-1em mr-10 hover:bg-black hover:text-white" data-lity="#contact-modal">
|
||
<span class="btn-txt" data-text="Send a message">Send a message</span>
|
||
</a>
|
||
<a href="#" class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent mr-10 border-none p-0 w-35 h-35 " target="_blank" rel="nofollow">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="w-50percent sm:w-full">
|
||
<div class="lqd-contact-form lqd-contact-form-inputs-underlined lqd-contact-form-button-block lqd-contact-form-button-circle">
|
||
<div role="form">
|
||
<div class="screen-reader-response">
|
||
<p role="status" aria-live="polite" aria-atomic="true"></p>
|
||
</div>
|
||
<form action="./assets/php/mailer.php" method="post" class="lqd-cf-form" novalidate="novalidate" data-status="init">
|
||
<p>
|
||
<span class="lqd-form-control-wrap" data-name="text">
|
||
<input type="text" name="name" value="" size="40" class="lqd-cf-form-control text-15 border-black-50" aria-required="true" aria-invalid="false" placeholder="Your name">
|
||
</span>
|
||
<span class="lqd-form-control-wrap" data-name="email">
|
||
<input type="email" name="email" value="" size="40" class="lqd-cf-form-control text-15 border-black-50" aria-required="true" aria-invalid="false" placeholder="Email address">
|
||
</span>
|
||
<span class="lqd-form-control-wrap text-15 border-bottom border-black-20" data-name="your-subject2">
|
||
<select name="your-subject2" class="wpcf7-form-control" aria-required="true" aria-invalid="false">
|
||
<option value="Your budget">budget</option>
|
||
<option value="< 1000">< 1000</option>
|
||
<option value="< 2000">< 2000</option>
|
||
<option value="< 3000">< 3000</option>
|
||
</select>
|
||
</span>
|
||
<span class="lqd-form-control-wrap" data-name="textarea">
|
||
<textarea name="textarea" cols="10" rows="5" class="lqd-cf-form-control text-15 border-black-50" aria-required="true" aria-invalid="false" placeholder="Your message"></textarea>
|
||
</span>
|
||
<span class="lqd-form-control-wrap border-black-50" data-name="acceptance">
|
||
<span class="lqd-cf-form-control lqd-cf-acceptance optional">
|
||
<span class="lqd-cf-list-item">
|
||
<label>
|
||
<input type="checkbox" name="acceptance" value="1" aria-invalid="false">
|
||
<span class="lqd-cf-list-item-label">I am bound by the terms of the Service I accept Privacy Policy</span>
|
||
</label>
|
||
</span>
|
||
</span>
|
||
</span>
|
||
<input type="submit" value="Send message" class="lqd-cf-form-control has-spinner bg-transparent border-black text-14 font-bold uppercase leading-1em tracking-1 hover:text-white hover:bg-black">
|
||
</p>
|
||
</form>
|
||
<div class="lqd-cf-response-output"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-m-d-1 xs:hidden sm:hidden"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- End Contact -->
|
||
|
||
</div>
|
||
</main>
|
||
|
||
<footer id="site-footer" class="main-footer bg-dark text-white-50" data-sticky-footer="true">
|
||
<section class="lqd-section module-top pt-70">
|
||
<div class="container">
|
||
<div class="row items-center">
|
||
<div class="w-40percent relative flex flex-wrap content-start lg:w-50percent sm:w-full module-col">
|
||
<div class="ld-fancy-heading relative">
|
||
<h4 class="ld-fh-element inline-block relative text-50 -tracking-1 mb-0/35em text-white">Join Hub and get a special discount.</h4>
|
||
</div>
|
||
<div class="flex justify-start items-center">
|
||
<a href="#contact-modal" class="button btn text-14 font-bold uppercase leading-1em tracking-1 text-black border-2 rounded-100 whitespace-nowrap py-0/6em px-1em text-white border-white bg-white-0 mr-10" data-lity="#contact-modal">
|
||
<span class="btn-txt" data-text="contact us">contact us</span>
|
||
</a>
|
||
<a href="#" class="text-14 font-bold uppercase leading-1em tracking-1 text-black rounded-100 btn btn-solid btn-custom-size btn-icon-block btn-icon-top w-35 h-35 bg-accent mr-10 border-none p-0 w-35 h-35 " target="_blank" rel="nofollow">
|
||
<span class="btn-icon w-1em">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="10.625" height="10.625" viewBox="0 0 10.625 10.625">
|
||
<path d="M-1.76-11.322H5.313V-4.25H3.885V-8.932L-4.316-.7l-1-1,8.2-8.234H-1.76Z" transform="translate(5.313 11.322)"></path>
|
||
</svg>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="w-60percent relative flex flex-col pl-200 sm:w-full lg:p-0">
|
||
<div class="absolute max-w-full top-0 ltr-right-0">
|
||
<div class="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="48" height="48" src="./assets/images/demo/asymmetric-9/shape/arrow-2.svg" alt="shape arrow">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="max-w-full relative flex flex-grow-1">
|
||
<div class="divider w-full mt-50 py-15">
|
||
<span class="divider-separator w-full"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="lqd-section module-menu pt-45">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="w-30percent flex flex-auto flex-col mb-20 lg:w-33percent sm:w-50percent">
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-3em text-white-30">Company</h3>
|
||
</div>
|
||
<div class="lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
|
||
<ul class="reset-ul link-15">
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Contact Us
|
||
</a>
|
||
</li>
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
FAQ
|
||
<span class="link-badge">SOON</span>
|
||
</a>
|
||
</li>
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Report A Bug
|
||
</a>
|
||
</li>
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
Careers
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>
|
||
About Us
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="w-20percent flex flex-auto flex-col mb-20 lg:w-33percent sm:w-50percent">
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-3em text-white-30">Products</h3>
|
||
</div>
|
||
<div class="lqd-fancy-menu lqd-custom-menu relative lqd-menu-td-none">
|
||
<ul class="reset-ul link-15">
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>Company</a>
|
||
</li>
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>Contact</a>
|
||
</li>
|
||
<li class="mb-20">
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>Privacy Policy</a>
|
||
</li>
|
||
<li>
|
||
<a class="text-white-70" href="#">
|
||
<span class="link-icon inline-flex hide-if-empty left-icon icon-next-to-label"></span>Careers</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="w-20percent flex flex-auto flex-col mb-20 lg:w-33percent sm:w-full">
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-3em text-white-30">Need help?</h3>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-1em text-white-30">Call us directly</h3>
|
||
</div>
|
||
<div class="ld-fancy-heading relative mb-1em">
|
||
<h5 class="ld-fh-element mb-0/5em inline-block relative text-18 font-semibold text-white">+(1) 123 656 7890</h5>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-1em text-white-30">Need support?</h3>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<h5 class="ld-fh-element mb-0/5em inline-block relative">
|
||
<span class="text-white text-18 font-semibold">help@hub.com</span>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
<div class="w-30percent flex flex-auto flex-col mb-20 lg:w-full module-col">
|
||
<div class="ld-fancy-heading relative">
|
||
<h3 class="ld-fh-element inline-block relative text-10 uppercase tracking-2 mb-3em text-white-30">KEEP IN TOUCH</h3>
|
||
</div>
|
||
<div class="ld-sf relative ld-sf--input-underlined ld-sf--button-naked ld-sf--size-sm ld-sf--circle ld-sf--inputs-has-border ld-sf--border-thin ld-sf--button-show ld-sf--button-inside">
|
||
<form class="ld_sf_form relative" method="post" action="#">
|
||
<p class="relative">
|
||
<input type="email" class="block w-full text-white-50 text-14 border-white-20" name="email" placeholder="Enter your email address">
|
||
</p>
|
||
<button type="submit" class="inline-flex items-center justify-center m-0 text-12 font-bold text-white">
|
||
<span class="text-17 text-white">
|
||
<i class="lqd-icn-ess icon-ion-ios-arrow-forward"></i>
|
||
</span>
|
||
<span class="ld-sf-spinner rounded-full absolute overflow-hidden">
|
||
<span class="block lqd-overlay flex rounded-full">Sending </span>
|
||
</span>
|
||
</button>
|
||
</form>
|
||
<div class="ld_sf_response"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="lqd-section module-info pt-50 pb-90">
|
||
<div class="container">
|
||
<div class="row items-center">
|
||
<div class=" col-12 col-md-4 module-col">
|
||
<div class="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="180" height="11" src="./assets/images/demo/asymmetric-9/logo/logo-light-1.svg" alt="asymetric 9">
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 col-md-4 text-center sm:text-start module-col">
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-14 text-white-50">© <?=date("Y")?> Olu Ameye.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col col-12 col-md-4 text-end sm:text-start">
|
||
<div class="social-icons-wrapper gap-50">
|
||
<a class="icon social-icon social-icon-facebook" href="#" target="_blank">
|
||
<span class="sr-only">Facebook</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<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="#FFFFFFA1" />
|
||
</svg>
|
||
</a>
|
||
<a class="icon social-icon social-icon-twitter" href="#" target="_blank">
|
||
<span class="sr-only">Twitter</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<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="#FFFFFFA1" />
|
||
</svg>
|
||
</a>
|
||
<a class="icon social-icon social-icon-medium" href="#" target="_blank">
|
||
<span class="sr-only">Medium</span>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
|
||
<path d="M180.5,74.262C80.813,74.262,0,155.633,0,256S80.819,437.738,180.5,437.738,361,356.373,361,256,280.191,74.262,180.5,74.262Zm288.25,10.646c-49.845,0-90.245,76.619-90.245,171.095s40.406,171.1,90.251,171.1,90.251-76.619,90.251-171.1H559C559,161.5,518.6,84.908,468.752,84.908Zm139.506,17.821c-17.526,0-31.735,68.628-31.735,153.274s14.2,153.274,31.735,153.274S640,340.631,640,256C640,171.351,625.785,102.729,608.258,102.729Z" fill="#FFFFFFA1" />
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- Contact modal -->
|
||
<div id="contact-modal" class="lity-modal lqd-modal lity-hide" data-modal-type="fullscreen">
|
||
<div class="lqd-modal-inner">
|
||
<div class="lqd-modal-head"></div>
|
||
<section class="lqd-modal-content link-black bg-center bg-cover bg-norepeat" style="background-image: url(./assets/images/common/modal-bg.jpeg);">
|
||
<div class="container min-h-100vh flex items-center flex-wrap">
|
||
<div class="w-55percent relative flex flex-col sm:w-full">
|
||
<div class="flex flex-col items-start justify-center py-10 pr-100 pl-10 module-content">
|
||
<div class="ld-fancy-heading">
|
||
<h2 class="ld-fh-element mb-0/5em text-120 text-black leading-0/8em font-medium">Send a <span>message.</span></h2>
|
||
</div>
|
||
<div class="ld-fancy-heading">
|
||
<p class="ld-fh-element text-18 mb-0/5em">We're here to answer any question you may have.</p>
|
||
</div>
|
||
<div class="w-full flex flex-row flex-grow-1 gap-10 module-info sm:flex-col sm:flex-wrap">
|
||
<div class="w-50percent flex flex-col gap-10">
|
||
<div class="ld-fancy-heading relative">
|
||
<h6 class="ld-fh-element text-14 font-bold text-black mb-0/5em tracking-0 mb-0/5em inline-block relative">careers</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element text-16 leading-1/2em mb-0/5em mb-0/5em inline-block relative">Would you like to join our growing team?</p>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative text-16 font-bold leading-1/2em">careers@hub.com</p>
|
||
</div>
|
||
</div>
|
||
<div class="w-50percent flex flex-col gap-10 pl-15 sm:pl-0">
|
||
<div class="ld-fancy-heading relative">
|
||
<h6 class="ld-fh-element text-14 font-bold text-black mb-0/5em tracking-0 mb-0/5em inline-block relative">Feedbacks</h6>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element text-16 leading-1/2em mb-0/5em mb-0/5em inline-block relative">Have a project in mind? Send a message.</p>
|
||
</div>
|
||
<div class="ld-fancy-heading relative">
|
||
<p class="ld-fh-element mb-0/5em inline-block relative">
|
||
<span class="text-16 font-bold leading-1/2em">info@hub.com </span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-45percent relative flex flex-col sm:w-full module-form">
|
||
<div class="lqd-contact-form lqd-contact-form-inputs-underlined lqd-contact-form-button-lg lqd-contact-form-button-block p-10 sm:p-0">
|
||
<div role="form">
|
||
<div class="screen-reader-response">
|
||
<p role="status" aria-live="polite" aria-atomic="true"></p>
|
||
</div>
|
||
<form action="./assets/php/mailer.php" method="post" class="lqd-cf-form" novalidate="novalidate" data-status="init">
|
||
<div class="row -mr-15 -ml-15">
|
||
<div class="col col-md-6 col-12 px-15">
|
||
<p>
|
||
<span class="lqd-form-control-wrap text">
|
||
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="name" value="" size="40" aria-required="true" aria-invalid="false" placeholder="What's your name?">
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="col col-md-6 col-12 px-15">
|
||
<p>
|
||
<span class="lqd-form-control-wrap email">
|
||
<input class="text-13 text-black border-black-20 bg-transparent" type="email" name="email" value="" size="40" aria-required="true" aria-invalid="false" placeholder="Email address">
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="col col-md-6 col-12 px-15">
|
||
<p>
|
||
<span class="lqd-form-control-wrap tel">
|
||
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="topic" value="" size="40" aria-required="true" aria-invalid="false" placeholder="Select a Discussion Topic">
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="col col-md-6 col-12 px-15">
|
||
<p>
|
||
<span class="lqd-form-control-wrap text">
|
||
<input class="text-13 text-black border-black-20 bg-transparent" type="text" name="budget" value="" size="40" aria-required="true" aria-invalid="false" placeholder="What's your budget?">
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="col col-12 px-15">
|
||
<p>
|
||
<span class="lqd-form-control-wrap textarea">
|
||
<textarea class="text-13 text-black border-black-20 bg-transparent" name="message" cols="10" rows="6" aria-required="true" aria-invalid="false" placeholder="Tell us about your project"></textarea>
|
||
</span>
|
||
</p>
|
||
</div>
|
||
<div class="col col-12 text-center px-15">
|
||
<input type="submit" value="— send message" class="lqd-cf-form-control text-16 uppercase font-medium leading-1em tracking-1 font-bold bg-primary text-white rounded-100 border-none">
|
||
<p class="mt-1/25em text-black">— copy email: info@liquid-themes.com</p>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<div class="lqd-cf-response-output"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="lqd-modal-foot"></div>
|
||
</div>
|
||
</div>
|
||
<!-- Contact modal -->
|
||
|
||
|
||
|
||
<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/fresco/js/fresco.js"></script>
|
||
<script src="./assets/vendors/lity/lity.min.js"></script>
|
||
<script src="./assets/vendors/gsap/minified/gsap.min.js"></script>
|
||
<script src="./assets/vendors/gsap/utils/CustomEase.min.js"></script>
|
||
<script src="./assets/vendors/gsap/minified/ScrollTrigger.min.js"></script>
|
||
<script src="./assets/vendors/fontfaceobserver.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/matter/matter.min.js"></script>
|
||
<script src="./assets/vendors/throwable/liquidThrowable.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/section-flow/liquidSectionFlow.min.js"></script>
|
||
<script src="./assets/vendors/flickity/flickity-fade.min.js"></script>
|
||
<script src="./assets/vendors/body-clip/liquidBodyClip.min.js"></script>
|
||
<script src="./assets/vendors/particles.min.js"></script>
|
||
<script src="./assets/vendors/tinycolor-min.js"></script>
|
||
<script src="./assets/js/liquid-gdpr.min.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-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>
|
||
<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1" data-modal-type="default">
|
||
<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>
|