Untitled
unknown
plain_text
a year ago
11 kB
8
Indexable
<!-- Footer Section -->
<footer class="bg-white text-[#FFFFFFB2] relative">
<div class="bg-[#052e26] md:rounded-t-3xl">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 rounded">
<!-- Upper and Lower Footer: Combined Grid Layout -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-8 py-12">
<!-- Logo and Social Links (spanning 2 columns on mobile, 1 on larger screens) -->
<div class="col-span-2 sm:col-span-1">
<div class="flex-shrink-0 mb-4">
<!-- Logo -->
<a href="#" class="flex items-center">
<img
src="../assets/images/logo/logo_footer.png"
alt="Logo"
class="h-8 w-auto"
/>
</a>
</div>
<p class="mb-4 w-[14rem] text-[#FFF] sm:w-full">
Fun, engaging and authentic Platform
</p>
<div class="flex space-x-4">
<a href="#"
><img
src="../assets/linkedin.png"
alt="LinkedIn"
class="h-5"
/></a>
<a href="#"
><img
src="../assets/youtube.png"
alt="YouTube"
class="h-5"
/></a>
<a href="#"
><img
src="../assets/twitter.png"
alt="Twitter"
class="h-5"
/></a>
<a href="#"
><img
src="../assets/facebook.png"
alt="Facebook"
class="h-5"
/></a>
</div>
</div>
<!-- Product Links -->
<div>
<h4 class="font-bold mb-4 text-[#FFF]">Product</h4>
<ul>
<li>
<a href="#" class="hover:text-green-400"
>About us</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>FAQs</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Contact</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Pricing</a
>
</li>
<li>
<a
href="../signin.html"
class="hover:text-green-400"
>Log in</a
>
</li>
</ul>
</div>
<!-- Resources Links -->
<div>
<h4 class="font-bold mb-4 text-[#FFF]">
Resources
</h4>
<ul>
<li>
<a href="#" class="hover:text-green-400"
>Learn</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Videos</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Help Center</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Webinar Glossary</a
>
</li>
</ul>
</div>
<!-- More Links -->
<div>
<h4 class="font-bold mb-4 text-[#FFF]">More</h4>
<ul>
<li>
<a href="#" class="hover:text-green-400"
>Our story</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>We’re hiring</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Resolver NG</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Resolver NG Satisfaction</a
>
</li>
</ul>
</div>
<div class="block md:hidden">
<h4 class="font-bold mb-4 text-[#FFF]">Support</h4>
<ul>
<li>
<a href="#" class="hover:text-green-400"
>Trust Center</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Privacy Policy</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Resolver NG</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Status</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Legal</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Do Not Sell My Info</a
>
</li>
<li>
<a href="#" class="hover:text-green-400"
>Opt out</a
>
</li>
</ul>
</div>
</div>
<div class="border-t text-[#FFF] border-gray-600 py-4">
<div
class="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center text-sm space-y-4 sm:space-y-0"
>
<!-- Left Section: Links -->
<div class="hidden md:block">
<div
class="flex flex-wrap justify-center sm:justify-start space-x-6"
>
<a href="#" class="hover:text-green-400"
>Trust Center</a
>
<a href="#" class="hover:text-green-400"
>Privacy Policy</a
>
<a href="#" class="hover:text-green-400"
>Status</a
>
<a href="#" class="hover:text-green-400"
>Legal</a
>
<a href="#" class="hover:text-green-400"
>Do Not Sell My Info</a
>
<a href="#" class="hover:text-green-400"
>Opt out</a
>
</div>
</div>
<!-- Right Section: Copyright -->
<div class="text-right sm:text-center">
<p>© All rights reserved by Resolver NG.</p>
</div>
</div>
</div>
<!-- Star Icon (Absolute Positioned) -->
<div
class="absolute top-9 md:top-11 right-9 transform translate-x-1/4 -translate-y-1/4"
>
<img
src="../assets/images/footer_star.png"
alt="Star Icon"
class="h-32 w-32"
/>
</div>
</div>
</div>
</footer>Editor is loading...
Leave a Comment