Premium
0
10
UniGlobe
UniGlobe template helps you find and apply to the best universities abroad. Explore top study destinations, specialized courses, and expert guidance for your global education journey.
Download Codebase
Commercial License<!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 - Your Path to International Education</title>
<meta name="description" content="UniGlobe is a modern Tailwind CSS study-abroad template for universities, international courses, destinations, applications, and student guidance.">
<meta name="keywords" content="UniGlobe, Tailwind CSS template, HTML website template, study abroad template, university landing page, international education, responsive student website">
<!-- 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 header -->
<header id="header" class="w-full bg-white py-4 px-6 md:px-12 flex items-center justify-between shadow-sm sticky top-0 z-50">
<div class="flex items-center gap-12">
<a href="#" class="flex items-center gap-2">
<span class="text-2xl font-extrabold tracking-tight text-primary uppercase italic">UniGlobe</span>
</a>
<div class="hidden lg:flex items-center bg-bgSoft px-4 py-2 rounded-full border border-gray-100">
<i class="fa-solid fa-magnifying-glass text-gray-400 mr-3"></i>
<input type="text" placeholder="Search for courses..." class="bg-transparent border-none outline-none text-sm w-48 font-medium">
</div>
</div>
<nav class="hidden lg:flex items-center gap-8 text-sm font-bold text-gray-600">
<div class="flex items-center gap-1 cursor-pointer hover:text-primary">Courses <i class="fa-solid fa-chevron-down text-[10px]"></i></div>
<div class="flex items-center gap-1 cursor-pointer hover:text-primary">Destinations <i class="fa-solid fa-chevron-down text-[10px]"></i></div>
<div class="flex items-center gap-1 cursor-pointer hover:text-primary">About <i class="fa-solid fa-chevron-down text-[10px]"></i></div>
</nav>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2 cursor-pointer border border-gray-100 px-3 py-1.5 rounded-full hover:bg-bgSoft transition">
<img src="https://flagcdn.com/w20/gb.png" alt="UK" class="w-5 h-3.5 rounded-sm">
<i class="fa-solid fa-chevron-down text-[10px] text-gray-400"></i>
</div>
<button class="bg-primary text-white px-6 py-2.5 rounded-full text-xs font-black uppercase tracking-widest hover:shadow-lg transition">Contact Us</button>
</div>
</header>
<!-- block:end header -->
<!-- block:start hero -->
<section id="hero" class="p-4 md:p-8">
<div class="max-w-7xl mx-auto rounded-[3rem] overflow-hidden hero-gradient h-[500px] flex flex-col items-center justify-center text-center text-white px-6 relative">
<!-- Floating Country Icons -->
<div class="absolute top-10 left-10 animate-bounce delay-100"><img src="https://flagcdn.com/w40/us.png" class="w-10 rounded shadow-xl"></div>
<div class="absolute top-24 right-20 animate-bounce delay-300"><img src="https://flagcdn.com/w40/ca.png" class="w-10 rounded shadow-xl"></div>
<div class="absolute bottom-20 left-20 animate-bounce delay-500"><img src="https://flagcdn.com/w40/au.png" class="w-10 rounded shadow-xl"></div>
<div class="absolute bottom-10 right-32 animate-bounce delay-200"><img src="https://flagcdn.com/w40/de.png" class="w-10 rounded shadow-xl"></div>
<h1 class="text-4xl md:text-6xl font-black mb-6 leading-tight max-w-4xl">
Embark on Your Global<br>Academic Adventure Today
</h1>
<p class="text-white/80 font-medium max-w-2xl mx-auto mb-10 text-sm md:text-base">
Discover a world of opportunities. Compare top-tier universities, find the perfect program, and get personalized support for your international education journey.
</p>
<button class="bg-primary text-white px-10 py-4 rounded-full text-sm font-black uppercase tracking-widest hover:scale-105 transition shadow-2xl">
Start Your Journey
</button>
</div>
</section>
<!-- block:end hero -->
<!-- block:start destinations -->
<section id="destinations" class="py-12">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-lg font-black text-gray-800 mb-10 flex items-center justify-center gap-2">
<i class="fa-solid fa-graduation-cap text-primary"></i> Explore Top Study Destinations
</h2>
<div class="flex flex-wrap justify-center gap-6 md:gap-10">
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/in.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">India</span>
</div>
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/ie.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">Ireland</span>
</div>
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/gb.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">UK</span>
</div>
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/my.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">Malaysia</span>
</div>
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/ge.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">Georgia</span>
</div>
<div class="flex flex-col items-center gap-3 group cursor-pointer">
<div class="w-16 h-12 bg-white rounded-xl shadow-sm border border-gray-100 flex items-center justify-center group-hover:shadow-md transition">
<img src="https://flagcdn.com/w40/ae.png" class="w-8 rounded-sm">
</div>
<span class="text-[11px] font-black uppercase tracking-widest text-gray-500 group-hover:text-primary">UAE</span>
</div>
</div>
</div>
</section>
<!-- block:end destinations -->
<!-- block:start stats -->
<section id="stats" class="py-16">
<div class="max-w-7xl mx-auto px-6">
<h2 class="text-3xl font-black text-center mb-12">Our Global Reach</h2>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">01</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-calendar"></i></div>
<div class="text-3xl font-black mb-1">16+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Years of Experience</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">02</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-building"></i></div>
<div class="text-3xl font-black mb-1">230+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">University Partners</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">03</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-users"></i></div>
<div class="text-3xl font-black mb-1">1600+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Students Guided</p>
</div>
<div class="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm relative group overflow-hidden">
<div class="absolute top-4 right-6 text-gray-100 text-3xl font-black">04</div>
<div class="w-10 h-10 bg-bgSoft text-primary rounded-xl flex items-center justify-center mb-6"><i class="fa-solid fa-book-open"></i></div>
<div class="text-3xl font-black mb-1">180+</div>
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Courses Provided</p>
</div>
</div>
</div>
</section>
<!-- block:end stats -->
<!-- block:start process -->
<section id="process" class="py-20 bg-bgSoft/30">
<div class="max-w-7xl mx-auto px-6 text-center">
<h2 class="text-3xl font-black mb-4 flex items-center justify-center gap-3">
Admission Pathway <i class="fa-solid fa-user-graduate text-primary"></i>
</h2>
<p class="text-gray-500 font-medium text-sm mb-16 max-w-2xl mx-auto">Explore global opportunities, find programs aligned with your career goals, compare options, and receive end-to-end guidance.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Step 1 -->
<div class="bg-white p-8 rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500 group">
<div class="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center mx-auto mb-8 relative">
<div class="absolute inset-0 bg-primary/10 rounded-full scale-110 blur group-hover:scale-125 transition"></div>
<i class="fa-solid fa-book-open text-xl text-primary relative"></i>
</div>
<h4 class="font-black mb-3">Study Planner</h4>
<p class="text-xs text-gray-500 leading-relaxed font-medium">Strategic planning to map your academic goals with professional success.</p>
</div>
<!-- Step 2 -->
<div class="bg-white p-8 rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500 group">
<div class="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center mx-auto mb-8 relative">
<div class="absolute inset-0 bg-secondary/10 rounded-full scale-110 blur group-hover:scale-125 transition"></div>
<i class="fa-solid fa-file-pen text-xl text-secondary relative"></i>
</div>
<h4 class="font-black mb-3">Test Prep</h4>
<p class="text-xs text-gray-500 leading-relaxed font-medium">Expert training for IELTS, TOEFL, GRE, and other key entrance exams.</p>
</div>
<!-- Step 3 -->
<div class="bg-white p-8 rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500 group">
<div class="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center mx-auto mb-8 relative">
<div class="absolute inset-0 bg-sky-100 rounded-full scale-110 blur group-hover:scale-125 transition"></div>
<i class="fa-solid fa-folder-open text-xl text-sky-500 relative"></i>
</div>
<h4 class="font-black mb-3">Document Tracker</h4>
<p class="text-xs text-gray-500 leading-relaxed font-medium">A centralized system to manage your transcripts, SOPs, and LORs.</p>
</div>
<!-- Step 4 -->
<div class="bg-white p-8 rounded-[2.5rem] border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-500 group">
<div class="w-16 h-16 bg-white rounded-full shadow-lg flex items-center justify-center mx-auto mb-8 relative">
<div class="absolute inset-0 bg-emerald-100 rounded-full scale-110 blur group-hover:scale-125 transition"></div>
<i class="fa-solid fa-comments text-xl text-emerald-500 relative"></i>
</div>
<h4 class="font-black mb-3">Expert Chat</h4>
<p class="text-xs text-gray-500 leading-relaxed font-medium">Direct access to certified advisors for real-time application support.</p>
</div>
</div>
</div>
</section>
<!-- block:end process -->
<!-- block:start universities -->
<section id="universities" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="text-3xl font-black mb-3 flex items-center gap-3">Top-Tier Partner Institutions <i class="fa-solid fa-building-columns text-primary"></i></h2>
<p class="text-gray-500 text-sm font-medium">Partnering with world-class universities to offer you premium educational opportunities.</p>
</div>
<a href="#" class="text-xs font-black uppercase tracking-widest text-primary border-b border-primary pb-1">View All <i class="fa-solid fa-arrow-right ml-1"></i></a>
</div>
<div class="flex gap-8 overflow-x-auto pb-8 scroll-hide -mx-6 px-6">
<!-- University 1 -->
<div class="bg-white border border-gray-100 rounded-[2.5rem] p-6 shadow-sm min-w-[320px] relative shrink-0">
<div class="absolute top-4 right-6 bg-red-50 text-red-500 text-[10px] font-black px-3 py-1 rounded-full uppercase">Most Popular</div>
<div class="flex items-center gap-4 mb-6">
<div class="w-14 h-14 bg-bgSoft rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-university text-primary text-xl"></i>
</div>
<div>
<h4 class="font-black flex items-center gap-2">Global Institute London <i class="fa-solid fa-circle-check text-blue-500 text-[10px]"></i></h4>
<p class="text-[10px] font-bold text-gray-400 uppercase flex items-center gap-1"><img src="https://flagcdn.com/w20/gb.png" class="w-3"> United Kingdom, London</p>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mb-8 bg-bgSoft/50 p-4 rounded-2xl">
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Courses</p>
<p class="text-xs font-black">1000+</p>
</div>
<div class="text-center border-x border-gray-200">
<p class="text-[10px] font-bold text-gray-400 uppercase">Scholarships</p>
<p class="text-xs font-black">Available</p>
</div>
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Intake</p>
<p class="text-xs font-black">July 2025</p>
</div>
</div>
<div class="flex gap-4">
<button class="flex-1 bg-primary text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest">Apply Now</button>
<button class="flex-1 bg-white border border-gray-100 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-bgSoft transition">Learn More</button>
</div>
</div>
<!-- University 2 -->
<div class="bg-white border border-gray-100 rounded-[2.5rem] p-6 shadow-sm min-w-[320px] relative shrink-0">
<div class="absolute top-4 right-6 bg-red-50 text-red-500 text-[10px] font-black px-3 py-1 rounded-full uppercase">Most Popular</div>
<div class="flex items-center gap-4 mb-6">
<div class="w-14 h-14 bg-bgSoft rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-building-columns text-primary text-xl"></i>
</div>
<div>
<h4 class="font-black flex items-center gap-2">Pacific Coast Univ <i class="fa-solid fa-circle-check text-blue-500 text-[10px]"></i></h4>
<p class="text-[10px] font-bold text-gray-400 uppercase flex items-center gap-1"><img src="https://flagcdn.com/w20/us.png" class="w-3"> United States, CA</p>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mb-8 bg-bgSoft/50 p-4 rounded-2xl">
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Courses</p>
<p class="text-xs font-black">800+</p>
</div>
<div class="text-center border-x border-gray-200">
<p class="text-[10px] font-bold text-gray-400 uppercase">Scholarships</p>
<p class="text-xs font-black">50% Off</p>
</div>
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Intake</p>
<p class="text-xs font-black">Sept 2025</p>
</div>
</div>
<div class="flex gap-4">
<button class="flex-1 bg-primary text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest">Apply Now</button>
<button class="flex-1 bg-white border border-gray-100 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-bgSoft transition">Learn More</button>
</div>
</div>
<!-- University 3 -->
<div class="bg-white border border-gray-100 rounded-[2.5rem] p-6 shadow-sm min-w-[320px] relative shrink-0">
<div class="flex items-center gap-4 mb-6">
<div class="w-14 h-14 bg-bgSoft rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-graduation-cap text-primary text-xl"></i>
</div>
<div>
<h4 class="font-black flex items-center gap-2">Dublin Tech Academy <i class="fa-solid fa-circle-check text-blue-500 text-[10px]"></i></h4>
<p class="text-[10px] font-bold text-gray-400 uppercase flex items-center gap-1"><img src="https://flagcdn.com/w20/ie.png" class="w-3"> Ireland, Dublin</p>
</div>
</div>
<div class="grid grid-cols-3 gap-2 mb-8 bg-bgSoft/50 p-4 rounded-2xl">
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Courses</p>
<p class="text-xs font-black">450+</p>
</div>
<div class="text-center border-x border-gray-200">
<p class="text-[10px] font-bold text-gray-400 uppercase">Scholarships</p>
<p class="text-xs font-black">Full Ride</p>
</div>
<div class="text-center">
<p class="text-[10px] font-bold text-gray-400 uppercase">Intake</p>
<p class="text-xs font-black">Feb 2025</p>
</div>
</div>
<div class="flex gap-4">
<button class="flex-1 bg-primary text-white py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest">Apply Now</button>
<button class="flex-1 bg-white border border-gray-100 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-bgSoft transition">Learn More</button>
</div>
</div>
</div>
</div>
</section>
<!-- block:end universities -->
<!-- block:start courses -->
<section id="courses" class="py-24 bg-white rounded-t-[5rem]">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-16">
<div>
<h2 class="text-3xl font-black mb-3">Discover Specialized Programs <i class="fa-solid fa-book text-primary"></i></h2>
<p class="text-gray-500 text-sm font-medium">Curated courses to help you achieve your career milestones.</p>
</div>
<a href="#" class="text-xs font-black uppercase tracking-widest text-primary border-b border-primary pb-1">View All <i class="fa-solid fa-arrow-right ml-1"></i></a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Course 1 -->
<div class="bg-secondary p-8 rounded-[3rem] text-white relative overflow-hidden group">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center absolute top-6 right-6">
<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
</div>
<div class="h-40 rounded-3xl overflow-hidden mb-8 shadow-inner">
<img class="w-full h-full object-cover group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_b0edeccb6c_9ce7b5687d65c87e.png" alt="student in library studying computer science, modern laptop, vibrant green background" />
</div>
<h4 class="text-xl font-extrabold mb-2">Advanced Data Science</h4>
<p class="text-xs text-white/80 font-medium mb-4">Master AI and ML at Global Institute London</p>
<p class="text-2xl font-black">$500.00 <span class="text-xs font-bold opacity-60">/ semester</span></p>
</div>
<!-- Course 2 -->
<div class="bg-primary/90 p-8 rounded-[3rem] text-white relative overflow-hidden group">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center absolute top-6 right-6">
<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
</div>
<div class="h-40 rounded-3xl overflow-hidden mb-8 shadow-inner">
<img class="w-full h-full object-cover group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_18365a5e33_b7d43e448410a039.png" alt="group of diverse business students in discussion, creative workspace, vibrant pink background" />
</div>
<h4 class="text-xl font-extrabold mb-2">Global MBA Strategy</h4>
<p class="text-xs text-white/80 font-medium mb-4">Leadership and innovation at Pacific Coast Univ</p>
<p class="text-2xl font-black">$750.00 <span class="text-xs font-bold opacity-60">/ semester</span></p>
</div>
<!-- Course 3 -->
<div class="bg-accent p-8 rounded-[3rem] text-white relative overflow-hidden group">
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center absolute top-6 right-6">
<i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
</div>
<div class="h-40 rounded-3xl overflow-hidden mb-8 shadow-inner">
<img class="w-full h-full object-cover group-hover:scale-105 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_ecc951f07e_e1380a27d9d14544.png" alt="digital media student working on production set, professional camera equipment, vibrant purple backg" />
</div>
<h4 class="text-xl font-extrabold mb-2">Creative Media Arts</h4>
<p class="text-xs text-white/80 font-medium mb-4">Design and film at Dublin Tech Academy</p>
<p class="text-2xl font-black">$450.00 <span class="text-xs font-bold opacity-60">/ semester</span></p>
</div>
</div>
</div>
</section>
<!-- block:end courses -->
<!-- block:start search-filter -->
<section id="search-filter" class="py-20">
<div class="max-w-5xl mx-auto px-6">
<div class="bg-white p-10 rounded-[3rem] shadow-2xl border border-gray-100 flex flex-col md:flex-row items-end gap-6 relative overflow-hidden">
<div class="absolute -top-10 -right-10 w-40 h-40 bg-primary/5 rounded-full blur-3xl"></div>
<div class="flex-1 space-y-4">
<label class="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 ml-1">Study Level</label>
<select class="w-full bg-bgSoft border border-gray-100 rounded-2xl px-6 py-4 text-sm font-bold focus:ring-2 focus:ring-primary/10 outline-none transition appearance-none">
<option>Undergraduate</option>
<option>Postgraduate</option>
<option>Doctoral</option>
</select>
</div>
<div class="flex-1 space-y-4">
<label class="text-[10px] font-black uppercase tracking-[0.2em] text-gray-400 ml-1">Subject Preference</label>
<select class="w-full bg-bgSoft border border-gray-100 rounded-2xl px-6 py-4 text-sm font-bold focus:ring-2 focus:ring-primary/10 outline-none transition appearance-none">
<option>Computer Science</option>
<option>Business Management</option>
<option>Medicine</option>
</select>
</div>
<button class="bg-primary text-white h-[60px] px-12 rounded-2xl text-xs font-black uppercase tracking-widest hover:shadow-xl transition flex items-center justify-center">
Find Courses
</button>
</div>
</div>
</section>
<!-- block:end search-filter -->
<!-- block:start blog -->
<section id="blog" class="py-24">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-16">
<div>
<h2 class="text-3xl font-black mb-3">Insights for Global Students <i class="fa-solid fa-newspaper text-primary"></i></h2>
<p class="text-gray-500 text-sm font-medium">Expert tips, destination guides, and student experiences.</p>
</div>
<a href="#" class="text-xs font-black uppercase tracking-widest text-primary border-b border-primary pb-1">Read All <i class="fa-solid fa-arrow-right ml-1"></i></a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Blog 1 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-yellow-400 rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_f86bfee294_494b43553dd23772.png" alt="3D illustration of a graduation cap and diploma, educational concept, bright yellow background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Scholarships</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in Australia</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Mastering Scholarship Applications for 2025</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 17 March 2024</p>
</div>
<!-- Blog 2 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-secondary rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_119fd8b83c_221e3ef7d6fdacf7.png" alt="3D illustration of a globe and passport, travel concept, bright green background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Visa Tips</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in Europe</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Navigating Student Visas Across the EU</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 15 March 2024</p>
</div>
<!-- Blog 3 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-primary rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6f25894e08_3f0adc03e043f1ba.png" alt="3D illustration of a stack of books and pencil, learning concept, bright pink background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Guide</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Study in USA</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Top US Universities for STEM Degrees</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 12 March 2024</p>
</div>
<!-- Blog 4 -->
<div class="bg-white rounded-[2.5rem] p-4 shadow-sm border border-gray-100 group cursor-pointer hover:shadow-xl transition">
<div class="h-48 bg-accent rounded-3xl overflow-hidden mb-6 relative">
<img class="w-full h-full object-contain p-4 group-hover:scale-110 transition duration-500" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_9ef1607cb1_07fa84f8598c0083.png" alt="3D illustration of a lightbulb and gear, innovation concept, bright purple background" />
<div class="absolute bottom-4 left-4 bg-white/20 backdrop-blur-md px-3 py-1 rounded-full text-[9px] font-black text-white uppercase tracking-widest">Career</div>
</div>
<span class="text-[9px] font-black text-primary uppercase tracking-widest mb-2 block">Global Insights</span>
<h4 class="font-extrabold text-sm mb-6 leading-tight">Future-Proofing Your Career with an MBA</h4>
<p class="text-[10px] text-gray-400 font-bold flex items-center gap-2"><i class="fa-solid fa-calendar"></i> 10 March 2024</p>
</div>
</div>
</div>
</section>
<!-- block:end blog -->
<!-- block:start final-cta -->
<section class="py-20 px-6">
<div class="max-w-7xl mx-auto bg-primary rounded-[4rem] p-12 md:p-24 text-center text-white relative overflow-hidden">
<div class="absolute inset-0 bg-black/10"></div>
<div class="relative z-10">
<h2 class="text-4xl md:text-5xl font-black mb-8 leading-tight">
Take Your Education to the<br>Next Level Abroad
</h2>
<p class="text-white/80 font-medium max-w-xl mx-auto mb-12">
Our advisors are ready to help you navigate the complexities of international applications. Your future starts with a single click.
</p>
<button class="bg-white text-primary px-12 py-5 rounded-full text-sm font-black uppercase tracking-widest hover:scale-105 transition shadow-2xl">
Get Free Counseling
</button>
</div>
</div>
</section>
<!-- block:end final-cta -->
<!-- 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>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access
