254 lines
21 KiB
PHP
254 lines
21 KiB
PHP
<!-- 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 --> |