Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Global Learning Hub</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .flag { | |
| width: 30px; | |
| height: 20px; | |
| display: inline-block; | |
| margin-right: 8px; | |
| vertical-align: middle; | |
| border-radius: 3px; | |
| } | |
| .course-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .tab-content { | |
| display: none; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .search-box { | |
| transition: all 0.3s ease; | |
| } | |
| .search-box:focus { | |
| width: 300px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header --> | |
| <header class="bg-indigo-700 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-graduation-cap text-3xl mr-3"></i> | |
| <h1 class="text-2xl font-bold">Global Learning Hub</h1> | |
| </div> | |
| <div class="relative w-full md:w-auto"> | |
| <input type="text" placeholder="Search courses..." | |
| class="search-box w-full md:w-48 px-4 py-2 rounded-full bg-indigo-600 text-white placeholder-indigo-300 focus:outline-none focus:bg-white focus:text-gray-800"> | |
| <i class="fas fa-search absolute right-3 top-2.5 text-indigo-300"></i> | |
| </div> | |
| <nav class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-indigo-200 font-medium">Home</a> | |
| <a href="#" class="hover:text-indigo-200 font-medium">Courses</a> | |
| <a href="#" class="hover:text-indigo-200 font-medium">Universities</a> | |
| <a href="#" class="hover:text-indigo-200 font-medium">Scholarships</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Learn Without Borders</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Access the best educational courses from top institutions in the USA, UK, and India. Your global learning journey starts here.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <button class="bg-white text-indigo-700 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Explore Courses</button> | |
| <button class="border-2 border-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-indigo-700 transition">Consult an Expert</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Country Navigation --> | |
| <div class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex overflow-x-auto space-x-1 py-4"> | |
| <button onclick="filterCourses('all')" class="country-tab flex-shrink-0 px-6 py-2 bg-indigo-700 text-white rounded-full font-medium">All Countries</button> | |
| <button onclick="filterCourses('usa')" class="country-tab flex-shrink-0 px-6 py-2 rounded-full font-medium hover:bg-indigo-100 flex items-center"> | |
| <span class="flag bg-blue-600"></span> | |
| <span class="flag bg-white"></span> | |
| <span class="flag bg-red-600"></span> | |
| USA | |
| </button> | |
| <button onclick="filterCourses('uk')" class="country-tab flex-shrink-0 px-6 py-2 rounded-full font-medium hover:bg-indigo-100 flex items-center"> | |
| <span class="flag bg-blue-800"></span> | |
| <span class="flag bg-white"></span> | |
| <span class="flag bg-red-700"></span> | |
| UK | |
| </button> | |
| <button onclick="filterCourses('india')" class="country-tab flex-shrink-0 px-6 py-2 rounded-full font-medium hover:bg-indigo-100 flex items-center"> | |
| <span class="flag bg-orange-500"></span> | |
| <span class="flag bg-white"></span> | |
| <span class="flag bg-green-500"></span> | |
| India | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-12"> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Popular Courses</h2> | |
| <!-- All Courses (default active) --> | |
| <div id="all" class="tab-content active"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Course Card 1 (USA) --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Computer Science" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-600 text-white text-xs rounded-full">USA</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Computer Science</h3> | |
| <p class="text-gray-600 mb-4">Harvard University offers one of the world's best computer science programs with cutting-edge research.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">$45,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.9 (120)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Card 2 (UK) --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Business Management" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-800 text-white text-xs rounded-full">UK</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Business Management</h3> | |
| <p class="text-gray-600 mb-4">London Business School's MBA program ranks among the top globally, offering unparalleled networking.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">£38,500/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.8 (95)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Course Card 3 (India) --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581094794329-c8113297a8c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Engineering" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-orange-500 text-white text-xs rounded-full">India</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Engineering</h3> | |
| <p class="text-gray-600 mb-4">IIT Bombay's engineering program is world-renowned, producing top engineers with rigorous curriculum.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">₹2,50,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.7 (210)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- USA Courses --> | |
| <div id="usa" class="tab-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- USA Course 1 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Computer Science" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-600 text-white text-xs rounded-full">USA</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Computer Science</h3> | |
| <p class="text-gray-600 mb-4">Harvard University offers one of the world's best computer science programs with cutting-edge research.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">$45,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.9 (120)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- USA Course 2 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581094271901-8022df4466f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Medicine" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-600 text-white text-xs rounded-full">USA</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Medicine</h3> | |
| <p class="text-gray-600 mb-4">Johns Hopkins University School of Medicine leads in medical education and groundbreaking research.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">$52,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.8 (158)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- USA Course 3 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Data Science" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-600 text-white text-xs rounded-full">USA</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Data Science</h3> | |
| <p class="text-gray-600 mb-4">MIT's Data Science program combines computer science, statistics, and domain expertise for real-world impact.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">$48,500/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.9 (142)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UK Courses --> | |
| <div id="uk" class="tab-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- UK Course 1 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Business Management" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-800 text-white text-xs rounded-full">UK</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Business Management</h3> | |
| <p class="text-gray-600 mb-4">London Business School's MBA program ranks among the top globally, offering unparalleled networking.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">£38,500/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.8 (95)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UK Course 2 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Law" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-800 text-white text-xs rounded-full">UK</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Law</h3> | |
| <p class="text-gray-600 mb-4">University of Oxford's Law program is globally respected, producing legal experts and policymakers.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">£32,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.7 (87)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- UK Course 3 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Artificial Intelligence" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-blue-800 text-white text-xs rounded-full">UK</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Artificial Intelligence</h3> | |
| <p class="text-gray-600 mb-4">Imperial College London's AI program combines theoretical foundations with practical applications.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">£35,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.9 (112)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- India Courses --> | |
| <div id="india" class="tab-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- India Course 1 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581094794329-c8113297a8c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Engineering" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-orange-500 text-white text-xs rounded-full">India</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Engineering</h3> | |
| <p class="text-gray-600 mb-4">IIT Bombay's engineering program is world-renowned, producing top engineers with rigorous curriculum.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">₹2,50,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.7 (210)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- India Course 2 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581094487238-8c0a2274b4e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Ayurvedic Medicine" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-orange-500 text-white text-xs rounded-full">India</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Ayurvedic Medicine</h3> | |
| <p class="text-gray-600 mb-4">BHU's Ayurvedic Medicine program combines traditional knowledge with modern scientific approaches.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">₹1,20,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.6 (184)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- India Course 3 --> | |
| <div class="course-card bg-white rounded-xl shadow-md overflow-hidden transition"> | |
| <div class="relative"> | |
| <img src="https://images.unsplash.com/photo-1581094270840-923c69d6198f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Digital Marketing" class="w-full h-48 object-cover"> | |
| <span class="absolute top-2 left-2 px-2 py-1 bg-orange-500 text-white text-xs rounded-full">India</span> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Digital Marketing</h3> | |
| <p class="text-gray-600 mb-4">IIM Bangalore's executive program in Digital Marketing provides cutting-edge skills for the digital era.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-indigo-600 font-medium">₹1,80,000/year</span> | |
| <span class="text-sm text-gray-500"><i class="fas fa-star text-yellow-400"></i> 4.8 (156)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- University Partners --> | |
| <div class="mb-12"> | |
| <h2 class="text-3xl font-bold mb-8 text-gray-800">Our University Partners</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/29/Harvard_shield_wreath.svg/1200px-Harvard_shield_wreath.svg.png" alt="Harvard" class="h-10"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Massachusetts_Institute_of_Technology_logo.svg/2560px-Massachusetts_Institute_of_Technology_logo.svg.png" alt="MIT" class="h-8"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Oxford-Coat-of-Arms.svg/1200px-Oxford-Coat-of-Arms.svg.png" alt="Oxford" class="h-10"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/8d/Imperial_College_London_logo.svg/1200px-Imperial_College_London_logo.svg.png" alt="Imperial College" class="h-10"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/1d/Indian_Institute_of_Technology_Bombay_Logo.svg/1200px-Indian_Institute_of_Technology_Bombay_Logo.svg.png" alt="IIT Bombay" class="h-10"> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm flex items-center justify-center h-20"> | |
| <img src="https://upload.wikimedia.org/wikipedia/en/thumb/2/2d/Indian_Institute_of_Management_Bangalore_Logo.svg/1200px-Indian_Institute_of_Management_Bangalore_Logo.svg.png" alt="IIM Bangalore" class="h-10"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonials --> | |
| <div class="bg-indigo-100 rounded-xl p-8 mb-12"> | |
| <h2 class="text-3xl font-bold mb-8 text-center text-gray-800">What Students Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Sarah Johnson</h4> | |
| <p class="text-sm text-gray-500">MIT, USA</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"The Data Science program at MIT transformed my career. The curriculum is challenging but extremely rewarding."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Raj" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Raj Patel</h4> | |
| <p class="text-sm text-gray-500">IIT Bombay, India</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"IIT Bombay's engineering program gave me the technical foundation to work at top tech companies globally."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="far fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-semibold">Emily Chen</h4> | |
| <p class="text-sm text-gray-500">Oxford, UK</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-700">"Oxford's Law program exceeded my expectations. The faculty and resources are truly world-class."</p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Call to Action --> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-xl p-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-4">Ready to Start Your Global Education Journey?</h2> | |
| <p class="text-xl mb-6 max-w-2xl mx-auto">Connect with our education consultants to find the perfect course for your career goals.</p> | |
| <button class="bg-white text-indigo-700 px-8 py-3 rounded-full font-semibold hover:bg-gray-100 transition">Book a Consultation</button> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-4">Global Learning Hub</h3> | |
| <p class="text-gray-400">Connecting students with the best educational opportunities across the globe.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Countries</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">United States</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">United Kingdom</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">India</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Popular Courses</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Computer Science</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Business Administration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Engineering</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Medicine</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold text-lg mb-4">Contact Us</h4> | |
| <address class="text-gray-400 not-italic"> | |
| <p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i> 123 Education St, Global City</p> | |
| <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> +1 (123) 456-7890</p> | |
| <p><i class="fas fa-envelope mr-2"></i> info@globallearninghub.com</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 Global Learning Hub. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| function filterCourses(country) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(country).classList.add('active'); | |
| // Update active tab button | |
| document.querySelectorAll('.country-tab').forEach(button => { | |
| if (button.textContent.toLowerCase().includes(country) || | |
| (country === 'all' && button.textContent.toLowerCase().includes('all countries'))) { | |
| button.classList.add('bg-indigo-700', 'text-white'); | |
| button.classList.remove('hover:bg-indigo-100'); | |
| } else { | |
| button.classList.remove('bg-indigo-700', 'text-white'); | |
| button.classList.add('hover:bg-indigo-100'); | |
| } | |
| }); | |
| } | |
| // Initialize the active tab | |
| document.addEventListener('DOMContentLoaded', function() { | |
| filterCourses('all'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=kodanda12/ffff-jfebownfk" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |