File size: 10,814 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 172 173 174 175 176 177 178 179 180 181 182 183 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us | 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;
}
</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-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
<a href="about.html" class="text-gray-900 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">
<div class="flex flex-col md:flex-row gap-12">
<div class="md:w-1/2">
<h1 class="title-font text-4xl font-bold text-gray-900 mb-6">About BrainyScribbles</h1>
<p class="text-gray-600 mb-6">Founded in 2018, BrainyScribbles is the official press club of our university, dedicated to bridging the gap between academic research and creative expression.</p>
<p class="text-gray-600 mb-6">We believe that knowledge should be accessible, engaging, and inspiring. Our platform showcases the best of university life - from groundbreaking research to captivating stories and vibrant campus events.</p>
<div class="bg-indigo-50 rounded-lg p-6 mb-8">
<h2 class="title-font text-xl font-bold text-gray-900 mb-4">Our Mission</h2>
<p class="text-gray-600">"To foster a culture of intellectual curiosity and creative expression by providing a platform where students can share their ideas, research, and stories with the university community and beyond."</p>
</div>
<div class="flex flex-wrap gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
<div class="text-indigo-600 mb-2">
<i data-feather="users" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-gray-900 mb-1">150+</h3>
<p class="text-gray-600 text-sm">Active Members</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
<div class="text-indigo-600 mb-2">
<i data-feather="file-text" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-gray-900 mb-1">80+</h3>
<p class="text-gray-600 text-sm">Publications</p>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
<div class="text-indigo-600 mb-2">
<i data-feather="calendar" class="w-8 h-8"></i>
</div>
<h3 class="font-bold text-gray-900 mb-1">24</h3>
<p class="text-gray-600 text-sm">Annual Events</p>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/education/1024x576/1" alt="Club Members" class="w-full h-64 object-cover">
<div class="p-6">
<h2 class="title-font text-2xl font-bold text-gray-900 mb-4">Join Our Community</h2>
<p class="text-gray-600 mb-6">Whether you're a writer, researcher, photographer, or just someone who loves knowledge, we welcome you to join our vibrant community.</p>
<div class="space-y-4">
<div class="flex items-start">
<div class="bg-indigo-100 rounded-full p-2 mr-4">
<i data-feather="edit-3" class="text-indigo-600 w-5 h-5"></i>
</div>
<div>
<h3 class="font-bold text-gray-900 mb-1">Writing Team</h3>
<p class="text-gray-600 text-sm">Contribute articles, stories, or research highlights</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 rounded-full p-2 mr-4">
<i data-feather="camera" class="text-indigo-600 w-5 h-5"></i>
</div>
<div>
<h3 class="font-bold text-gray-900 mb-1">Media Team</h3>
<p class="text-gray-600 text-sm">Photography, videography, and graphic design</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-indigo-100 rounded-full p-2 mr-4">
<i data-feather="mic" class="text-indigo-600 w-5 h-5"></i>
</div>
<div>
<h3 class="font-bold text-gray-900 mb-1">Events Team</h3>
<p class="text-gray-600 text-sm">Plan and organize our seminars and workshops</p>
</div>
</div>
</div>
<a href="#" class="mt-6 inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-md font-medium">Join Now</a>
</div>
</div>
</div>
</div>
<div class="mt-16">
<h2 class="title-font text-3xl font-bold text-gray-900 mb-8">Meet the Team</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/people/640x360/1" alt="Team Member" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="title-font text-xl font-bold text-gray-900">Dr. Sarah Chen</h3>
<p class="text-indigo-600 mb-2">Faculty Advisor</p>
<p class="text-gray-600 text-sm">Professor of Literature and Creative Writing</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/people/640x360/2" alt="Team Member" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="title-font text-xl font-bold text-gray-900">Alex Johnson</h3>
<p class="text-indigo-600 mb-2">Editor-in-Chief</p>
<p class="text-gray-600 text-sm">Graduate Student in Journalism</p>
</div>
</div>
<div class="bg-white rounded-lg shadow-md overflow-hidden">
<img src="http://static.photos/people/640x360/3" alt="Team Member" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="title-font text-xl font-bold text-gray-900">Priya Patel</h3>
<p class="text-indigo-600 mb-2">Research Editor</p>
<p class="text-gray-600 text-sm">PhD Candidate in Neuroscience</p>
</div>
</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> |