Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Global University | Excellence in Education</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#1a365d', | |
| secondary: '#2c5282', | |
| accent: '#4299e1', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .hero-bg { | |
| background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .program-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .news-card:hover .news-overlay { | |
| opacity: 1; | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| .stats-item { | |
| transition: all 0.3s ease; | |
| } | |
| .stats-item:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://via.placeholder.com/50x50" alt="University Logo" class="h-12 mr-3"> | |
| <div> | |
| <h1 class="text-xl font-bold text-primary">GLOBAL UNIVERSITY</h1> | |
| <p class="text-xs text-gray-600">Excellence in Education Since 1965</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#home" class="font-medium hover:text-accent transition">Home</a> | |
| <a href="#about" class="font-medium hover:text-accent transition">About</a> | |
| <a href="#programs" class="font-medium hover:text-accent transition">Programs</a> | |
| <a href="#admissions" class="font-medium hover:text-accent transition">Admissions</a> | |
| <a href="#research" class="font-medium hover:text-accent transition">Research</a> | |
| <a href="#contact" class="font-medium hover:text-accent transition">Contact</a> | |
| </div> | |
| <div class="hidden md:flex space-x-4"> | |
| <a href="#" class="bg-primary text-white px-4 py-2 rounded hover:bg-secondary transition">Apply Now</a> | |
| <a href="#" class="border border-primary text-primary px-4 py-2 rounded hover:bg-gray-100 transition">Portal</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu bg-white md:hidden"> | |
| <div class="px-4 py-2 space-y-3"> | |
| <a href="#home" class="block py-2 hover:text-accent transition">Home</a> | |
| <a href="#about" class="block py-2 hover:text-accent transition">About</a> | |
| <a href="#programs" class="block py-2 hover:text-accent transition">Programs</a> | |
| <a href="#admissions" class="block py-2 hover:text-accent transition">Admissions</a> | |
| <a href="#research" class="block py-2 hover:text-accent transition">Research</a> | |
| <a href="#contact" class="block py-2 hover:text-accent transition">Contact</a> | |
| <div class="pt-2 border-t"> | |
| <a href="#" class="block bg-primary text-white px-4 py-2 rounded mb-2 text-center hover:bg-secondary transition">Apply Now</a> | |
| <a href="#" class="block border border-primary text-primary px-4 py-2 rounded text-center hover:bg-gray-100 transition">Portal</a> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-bg text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Shape Your Future With Us</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Join a vibrant community of scholars and innovators at one of the world's leading research universities.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#programs" class="bg-accent hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition">Explore Programs</a> | |
| <a href="#admissions" class="bg-white hover:bg-gray-100 text-primary px-8 py-3 rounded-lg font-medium transition">Admissions Info</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Quick Links --> | |
| <div class="bg-gray-100 py-6 shadow-inner"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> | |
| <i class="fas fa-calendar-alt text-accent text-xl mr-3"></i> | |
| <span>Academic Calendar</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> | |
| <i class="fas fa-book text-accent text-xl mr-3"></i> | |
| <span>Course Catalog</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> | |
| <i class="fas fa-graduation-cap text-accent text-xl mr-3"></i> | |
| <span>Scholarships</span> | |
| </a> | |
| <a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition flex items-center"> | |
| <i class="fas fa-map-marked-alt text-accent text-xl mr-3"></i> | |
| <span>Campus Map</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">About Global University</h2> | |
| <div class="w-20 h-1 bg-accent mx-auto"></div> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8 items-center"> | |
| <div class="lg:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1576495199011-eb94736d05d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1472&q=80" alt="University Campus" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h3 class="text-2xl font-semibold mb-4 text-secondary">Our History & Mission</h3> | |
| <p class="mb-4">Founded in 1965, Global University has grown from a small college to a world-renowned institution with over 30,000 students across multiple campuses.</p> | |
| <p class="mb-6">Our mission is to advance knowledge and educate students in science, technology, and other areas of scholarship that will best serve the nation and the world in the 21st century.</p> | |
| <div class="grid grid-cols-2 gap-4 mb-6"> | |
| <div class="stats-item bg-gray-100 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-primary">30K+</div> | |
| <div class="text-gray-600">Students</div> | |
| </div> | |
| <div class="stats-item bg-gray-100 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-primary">2K+</div> | |
| <div class="text-gray-600">Faculty</div> | |
| </div> | |
| <div class="stats-item bg-gray-100 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-primary">150+</div> | |
| <div class="text-gray-600">Programs</div> | |
| </div> | |
| <div class="stats-item bg-gray-100 p-4 rounded-lg text-center"> | |
| <div class="text-3xl font-bold text-primary">80+</div> | |
| <div class="text-gray-600">Countries</div> | |
| </div> | |
| </div> | |
| <a href="#" class="inline-block bg-primary hover:bg-secondary text-white px-6 py-2 rounded transition">Learn More About Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Programs Section --> | |
| <section id="programs" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-primary mb-4">Academic Programs</h2> | |
| <p class="text-lg max-w-2xl mx-auto">Discover our comprehensive range of undergraduate, graduate, and professional programs designed to meet the needs of today's global workforce.</p> | |
| <div class="w-20 h-1 bg-accent mx-auto mt-4"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Program Card 1 --> | |
| <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="fas fa-flask text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-secondary">Science & Technology</h3> | |
| <p class="text-gray-600 mb-4">Cutting-edge programs in physics, chemistry, biology, computer science and engineering.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 4 Years</span> | |
| <a href="#" class="text-accent hover:text-blue-600 font-medium">Explore <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Program Card 2 --> | |
| <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-green-600 to-green-400 flex items-center justify-center"> | |
| <i class="fas fa-briefcase text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-green-600">Business & Economics</h3> | |
| <p class="text-gray-600 mb-4">Develop leadership skills and business acumen with our AACSB-accredited programs.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 3-4 Years</span> | |
| <a href="#" class="text-green-600 hover:text-green-700 font-medium">Explore <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Program Card 3 --> | |
| <div class="program-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> | |
| <div class="h-48 bg-gradient-to-r from-purple-600 to-purple-400 flex items-center justify-center"> | |
| <i class="fas fa-paint-brush text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-600">Arts & Humanities</h3> | |
| <p class="text-gray-600 mb-4">Explore creativity and critical thinking through our diverse arts and humanities programs.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-sm text-gray-500"><i class="fas fa-clock mr-1"></i> 3-4 Years</span> | |
| <a href="#" class="text-purple-600 hover:text-purple-700 font-medium">Explore <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-10"> | |
| <a href="#" class="inline-block bg-primary hover:bg-secondary text-white px-8 py-3 rounded-lg font-medium transition">View All Programs</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Admissions Section --> | |
| <section id="admissions" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-primary mb | |
| </html> |