Copy
<footer class="overflow-hidden bg-secondary [--title:#fff]"> <div class="container"> <div class="row"> <div class="md:w-full lg:w-1/3 w-full !px-0"> <div class="row mx-0 max-sm:!-mx-0 lg:ml-0 md:ml-[calc(calc(-100vw_+_720px)_/_2)] sm:ml-[calc(calc(-100vw_+_520px)_/_2)] h-full relative overflow-hidden xl:w-[calc(50vw_-_200px)] lg:w-[calc(50vw_-_160px)] w-screen lg:float-right"> <div class="w-1/2 !px-0"> <div class="h-full"> <img src="assets/images/posts/pic1.png" alt="" class="size-full object-cover"> </div> </div> <div class="w-1/2 !px-0"> <div class="h-full"> <img src="assets/images/posts/pic2.png" alt="" class="size-full object-cover"> </div> </div> <div class="w-1/2 !px-0"> <div class="h-full"> <img src="assets/images/posts/pic3.png" alt="" class="size-full object-cover"> </div> </div> <div class="w-1/2 !px-0"> <div class="h-full"> <img src="assets/images/posts/pic4.png" alt="" class="size-full object-cover"> </div> </div> <a href="javascript:void(0);" class="absolute top-1/2 left-1/2 [transform:translate(-50%,_-50%)]"> <div class="text-center size-60 mx-auto px-5 pt-11 pb-8 flex flex-col bg-white wow bounceIn" data-wow-delay="0.1s"> <div class="follow-link-icon"> <img src="assets/images/insta-follow.png" alt=""> </div> <div class="mt-auto"> <h4 class="text-base font-bold text-black mb-2">Share with #Pixio</h4> <p class="text-[#6f5e5e] text-2sm">Follow @Pixio for inspiration.</p> </div> </div> </a> </div> </div> <div class="md:w-full lg:w-2/3 w-full"> <div class="xl:pl-32 xl:pt-25 lg:pl-7.5 lg:pt-13.5 pl-0 pt-7.5 md:pb-7.5"> <div> <div class="row items-center sm:mb-20 mb-13.5 pb-7.5 border-b border-white/10 gx-0 wow fadeInUp" data-wow-delay="0.1s"> <div class="w-full sm:w-1/2"> <div class="footer-logo logo-white mb-0"> <a href="index.html"><img src="assets/images/logo-white.svg" alt=""></a> </div> </div> <div class="w-full sm:w-1/2"> <div class="flex justify-end"> <ul class="flex"> <li class="mr-2.5"> <a class="bg-white/10 size-11 text-white leading-[44px] text-center rounded-md text-lg block duration-500 hover:bg-primary" href="https://www.facebook.com/dexignzone" target="_blank"> <i class="fa-brands fa-facebook-f"></i> </a> </li> <li class="mr-2.5"> <a class="bg-white/10 size-11 text-white leading-[44px] text-center rounded-md text-lg block duration-500 hover:bg-primary" href="https://twitter.com/dexignzones" target="_blank"> <i class="fa-brands fa-twitter"></i> </a> </li> <li class="mr-2.5"> <a class="bg-white/10 size-11 text-white leading-[44px] text-center rounded-md text-lg block duration-500 hover:bg-primary" href="https://www.linkedin.com/showcase/3686700/admin/" target="_blank"> <i class="fa-brands fa-linkedin"></i> </a> </li> <li class="mr-2.5"> <a class="bg-white/10 size-11 text-white leading-[44px] text-center rounded-md text-lg block duration-500 hover:bg-primary" href="https://www.instagram.com/dexignzone/" target="_blank"> <i class="fa-brands fa-instagram"></i> </a> </li> </ul> </div> </div> </div> <div class="row"> <div class="sm:w-1/3 w-1/2 wow fadeInUp" data-wow-delay="0.2s"> <div class="mb-7.5 font-medium"> <h5 class="text-xl leading-[1.2] mb-5">Our Stores</h5> <ul> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">New York</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">London SF</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Edinburgh</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Los Angeles</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Chicago</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Las Vegas</a></li> </ul> </div> </div> <div class="sm:w-1/3 w-1/2 wow fadeInUp" data-wow-delay="0.3s"> <div class="mb-7.5 font-medium"> <h5 class="text-xl leading-[1.2] mb-5">Useful Links</h5> <ul> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Privacy Policy</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Returns</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Terms & Conditions</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Contact Us</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Latest News</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Our Sitemap</a></li> </ul> </div> </div> <div class="sm:w-1/3 w-full wow fadeInUp" data-wow-delay="0.4s"> <div class="mb-7.5 font-medium"> <h5 class="text-xl leading-[1.2] mb-5">Footer Menu</h5> <ul> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Instagram Profile</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">New Collection</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Woman Dress</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Contact Us</a></li> <li class="py-2 leading-5 text-2sm"><a class="hover:text-primary" href="javascript:void(0);">Latest News</a></li> </ul> </div> </div> </div> </div> </div> <div class="xl:pl-32 xl:pt-25 lg:pl-7.5 lg:pt-13.5 pl-0 pt-7.5 wow fadeInUp" data-wow-delay="0.5s"> <div class="py-7 max-sm:py-5 border-t border-white/10 text-white/60 font-semibold text-2sm max-sm:text-sm wow fadeInUp" data-wow-delay="0.1s"> <div class="w-full text-center"> <p class="copyright-text">© <span class="current-year">2024</span><a class="text-primary" target="_blank" href="https://www.dexignzone.com/"> DexignZone</a> Theme. All Rights Reserved.</p> </div> </div> </div> </div> </div> </div> </footer>