Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Explore | Campus Connect</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6366f1 0%, #10b981 100%); | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="index.html" class="flex-shrink-0 flex items-center"> | |
| <i data-feather="users" class="h-8 w-8 text-primary-600"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">Campus Connect</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center space-x-8"> | |
| <a href="index.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Home</a> | |
| <a href="explore.html" class="text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 border-primary-500 text-sm font-medium">Explore</a> | |
| <a href="events.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Events</a> | |
| <a href="messages.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Messages</a> | |
| <a href="groups.html" class="text-gray-500 hover:text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium">Groups</a> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Sign In</button> | |
| <button class="ml-4 bg-secondary-500 hover:bg-secondary-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-200">Register</button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Explore Content --> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-900">Discover People</h2> | |
| <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- User Card 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/people/320x240/1" alt="User" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Alex Johnson</h3> | |
| <p class="mt-1 text-sm text-gray-500">Computer Science</p> | |
| <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button> | |
| </div> | |
| </div> | |
| <!-- User Card 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/people/320x240/2" alt="User" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Maria Garcia</h3> | |
| <p class="mt-1 text-sm text-gray-500">Business Administration</p> | |
| <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button> | |
| </div> | |
| </div> | |
| <!-- User Card 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/people/320x240/3" alt="User" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Jamal Williams</h3> | |
| <p class="mt-1 text-sm text-gray-500">Engineering</p> | |
| <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button> | |
| </div> | |
| </div> | |
| <!-- User Card 4 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/people/320x240/4" alt="User" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sarah Chen</h3> | |
| <p class="mt-1 text-sm text-gray-500">Biology</p> | |
| <button class="mt-3 w-full bg-primary-500 hover:bg-primary-600 text-white py-2 rounded-md text-sm font-medium">Connect</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h2 class="text-2xl font-bold text-gray-900">Popular Groups</h2> | |
| <div class="mt-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> | |
| <!-- Group Card 1 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/education/320x240/1" alt="Group" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">CS Coders Club</h3> | |
| <p class="mt-1 text-sm text-gray-500">256 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button> | |
| </div> | |
| </div> | |
| <!-- Group Card 2 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/education/320x240/2" alt="Group" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Business Leaders</h3> | |
| <p class="mt-1 text-sm text-gray-500">189 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button> | |
| </div> | |
| </div> | |
| <!-- Group Card 3 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/education/320x240/3" alt="Group" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Art & Design</h3> | |
| <p class="mt-1 text-sm text-gray-500">143 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button> | |
| </div> | |
| </div> | |
| <!-- Group Card 4 --> | |
| <div class="bg-white rounded-lg shadow-sm overflow-hidden transition duration-300 card-hover"> | |
| <img src="http://static.photos/education/320x240/4" alt="Group" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Sports Enthusiasts</h3> | |
| <p class="mt-1 text-sm text-gray-500">321 members</p> | |
| <button class="mt-3 w-full bg-secondary-500 hover:bg-secondary-600 text-white py-2 rounded-md text-sm font-medium">Join</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |