Free
Footer
UniGlobe Footer
A footer block extracted from the UniGlobe template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.
0
18
uniglobe.html
<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UniGlobe Footer | Tailwind CSS UI Block</title>
<meta name="description" content="A footer block extracted from the UniGlobe template, available in Tailwind CSS, Bootstrap, DaisyUI, and Material Design.">
<meta name="keywords" content="UniGlobe, Tailwind CSS template, HTML website template, study abroad template, university landing page, international education, responsive student website">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="UniGlobe | Tailwind CSS Study Abroad Template">
<meta property="og:description" content="A modern Tailwind CSS study-abroad template for universities, international courses, destinations, applications, and student guidance.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="UniGlobe template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="UniGlobe | Tailwind CSS Study Abroad Template">
<meta name="twitter:description" content="A modern Tailwind CSS study-abroad template for universities, international courses, destinations, applications, and student guidance.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="UniGlobe template preview">
<!-- Scripts & Styles -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.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=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#ff4d8d',
secondary: '#7ee09e',
accent: '#d896ff',
bgSoft: '#fdf6ed',
dark: '#1a1a1a'
},
fontFamily: {
sans: ['Plus Jakarta Sans', 'sans-serif'],
}
}
}
}
</script>
<style>
.hero-gradient {
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1541339907198-e08756ebafe3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
background-size: cover;
background-position: center;
}
.scroll-hide::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body class="bg-[#fcf9f4] text-dark font-sans overflow-x-hidden">
<!-- block:start footer -->
<footer id="footer" class="bg-white pt-24 pb-12 border-t border-gray-100">
<div class="max-w-7xl mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-5 gap-12 mb-20">
<div class="col-span-1 md:col-span-1">
<span class="text-2xl font-black tracking-tight text-primary uppercase italic block mb-6">UniGlobe</span>
<p class="text-gray-400 text-xs font-bold leading-relaxed mb-10">Stay updated on all things UniGlobe by subscribing to our newsletter.</p>
<div class="relative max-w-xs">
<input type="email" placeholder="Your Email Here" class="w-full bg-bgSoft border border-gray-100 rounded-full px-6 py-4 text-xs font-bold outline-none pr-14">
<button class="absolute right-2 top-2 bottom-2 w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<div class="hidden lg:block"></div> <!-- Spacer -->
<div>
<h5 class="text-[11px] font-black uppercase tracking-[0.2em] text-gray-800 mb-8">Universities</h5>
<ul class="space-y-4 text-xs font-bold text-gray-400">
<li><a href="#" class="hover:text-primary transition">Oxford University</a></li>
<li><a href="#" class="hover:text-primary transition">Daffodil University</a></li>
<li><a href="#" class="hover:text-primary transition">International University</a></li>
</ul>
</div>
<div>
<h5 class="text-[11px] font-black uppercase tracking-[0.2em] text-gray-800 mb-8">Countries</h5>
<ul class="space-y-4 text-xs font-bold text-gray-400">
<li><a href="#" class="hover:text-primary transition">England</a></li>
<li><a href="#" class="hover:text-primary transition">Canada</a></li>
<li><a href="#" class="hover:text-primary transition">Germany</a></li>
</ul>
</div>
<div>
<h5 class="text-[11px] font-black uppercase tracking-[0.2em] text-gray-800 mb-8">Quick Links</h5>
<ul class="space-y-4 text-xs font-bold text-gray-400">
<li><a href="#" class="hover:text-primary transition">Privacy Policy</a></li>
<li><a href="#" class="hover:text-primary transition">Terms of Service</a></li>
<li><a href="#" class="hover:text-primary transition">Contact Support</a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-6">
<p class="text-[10px] font-black uppercase tracking-widest text-gray-300">Copyright © 2024 UniGlobe. All Rights Reserved.</p>
<div class="flex gap-8">
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa-brands fa-facebook"></i></a>
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
From this template
Free
Education
UniGlobe
Unlimited access to all products
Unlock the entire library of premium templates and blocks. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access