Files
OluAmeyeMain/app/Views/view_home.php
T
CHIEFSOFT\ameye 5e08671cbe first commit
2024-08-26 12:42:47 -04:00

1958 lines
156 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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" style="font-weight: bolder; font-size: 20px; color: #0A2C4E;">
Olu Ameye
<!-- <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">
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 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>Case Studies</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 &amp; 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>
<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 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="&lt; 1000">&lt; 1000</option>
<option value="&lt; 2000">&lt; 2000</option>
<option value="&lt; 3000">&lt; 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 Me
</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>Projects</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>Blog</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" style="font-weight: bolder; font-size: 20px; color: white;">
Olu Ameye<!--
<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>&times;</button>
</div>
</div>
</body>
</html>