File size: 10,103 Bytes
f8c4957 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Events | BrainyScribblesChronicles</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=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.title-font {
font-family: 'Playfair Display', serif;
}
.gradient-text {
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.event-card: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">
<nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
<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">
<div class="flex-shrink-0 flex items-center">
<i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
<span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
</div>
</div>
<div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
<a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
<a href="research.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
<a href="events.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
<a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
</div>
</div>
</div>
</nav>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h1 class="title-font text-4xl font-bold text-gray-900 mb-8">Upcoming Events</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-6">
<div class="flex items-start">
<div class="bg-indigo-100 rounded-lg p-4 mr-6 text-center">
<div class="text-indigo-600 font-bold text-2xl">15</div>
<div class="text-indigo-600 font-medium uppercase text-sm">Jun</div>
</div>
<div>
<h2 class="title-font text-xl font-bold text-gray-900 mb-2">Science & Fiction Symposium</h2>
<p class="text-gray-600 mb-4">Explore the intersection of scientific discovery and creative storytelling with our panel of researchers and authors.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Science</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Literature</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Panel</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
<span>4:00 PM - 6:30 PM</span>
<span class="mx-2">•</span>
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
<span>University Hall, Room 203</span>
</div>
<a href="#" class="mt-4 inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium">RSVP Now</a>
</div>
</div>
</div>
</div>
<div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<div class="p-6">
<div class="flex items-start">
<div class="bg-indigo-100 rounded-lg p-4 mr-6 text-center">
<div class="text-indigo-600 font-bold text-2xl">22</div>
<div class="text-indigo-600 font-medium uppercase text-sm">Jun</div>
</div>
<div>
<h2 class="title-font text-xl font-bold text-gray-900 mb-2">Research Writing Workshop</h2>
<p class="text-gray-600 mb-4">Learn how to craft compelling research papers and grant proposals from our faculty experts.</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Workshop</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Writing</span>
<span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Graduate</span>
</div>
<div class="flex items-center text-sm text-gray-500">
<i data-feather="clock" class="w-4 h-4 mr-1"></i>
<span>10:00 AM - 12:30 PM</span>
<span class="mx-2">•</span>
<i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
<span>Library Learning Commons</span>
</div>
<a href="#" class="mt-4 inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md font-medium">RSVP Now</a>
</div>
</div>
</div>
</div>
</div>
<h2 class="title-font text-3xl font-bold text-gray-900 mt-16 mb-8">Past Events</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<img src="http://static.photos/education/640x360/1" alt="Event Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="title-font font-bold text-gray-900 mb-1">Poetry & Physics Night</h3>
<p class="text-gray-500 text-sm mb-2">May 5, 2023</p>
<p class="text-gray-600 text-sm">An evening exploring the beauty of both equations and verse.</p>
</div>
</div>
<div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<img src="http://static.photos/education/640x360/2" alt="Event Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="title-font font-bold text-gray-900 mb-1">Undergrad Research Fair</h3>
<p class="text-gray-500 text-sm mb-2">April 18, 2023</p>
<p class="text-gray-600 text-sm">Showcasing exceptional undergraduate research projects.</p>
</div>
</div>
<div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
<img src="http://static.photos/education/640x360/3" alt="Event Image" class="w-full h-40 object-cover">
<div class="p-4">
<h3 class="title-font font-bold text-gray-900 mb-1">SciComm Bootcamp</h3>
<p class="text-gray-500 text-sm mb-2">March 30, 2023</p>
<p class="text-gray-600 text-sm">Learn to communicate complex ideas to broad audiences.</p>
</div>
</div>
</div>
</main>
<footer class="bg-gray-100 py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
<span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
</div>
<div class="flex space-x-6">
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-gray-500 hover:text-indigo-600">
<i data-feather="facebook"></i>
</a>
</div>
</div>
<div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
<p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
</div>
</div>
</footer>
<script>
feather.replace();
</script>
</body>
</html> |