Hugging Face's logo

Spaces:
PyQuarX
/
brainyscribbleschronicles
Running

App Files Community
PyQuarX commited on
Commit
f8c4957
·
verified ·
1 Parent(s): ee91e4b

i want to create a website for my university press club where we post short stories scientific paper teasing our events ecr

Browse files
Files changed (6) hide show
  1. README.md +9 -5
  2. about.html +183 -0
  3. events.html +171 -0
  4. index.html +61 -19
  5. research.html +140 -0
  6. stories.html +128 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Brainyscribbleschronicles
3
- emoji: 🦀
4
- colorFrom: purple
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: BrainyScribblesChronicles 📚
3
+ colorFrom: green
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
about.html ADDED
@@ -0,0 +1,183 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>About Us | BrainyScribblesChronicles</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+ .title-font {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="bg-gray-50">
27
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-16">
30
+ <div class="flex items-center">
31
+ <div class="flex-shrink-0 flex items-center">
32
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
33
+ <span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
34
+ </div>
35
+ </div>
36
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
37
+ <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
38
+ <a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
39
+ <a href="research.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
40
+ <a href="events.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
41
+ <a href="about.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </nav>
46
+
47
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
48
+ <div class="flex flex-col md:flex-row gap-12">
49
+ <div class="md:w-1/2">
50
+ <h1 class="title-font text-4xl font-bold text-gray-900 mb-6">About BrainyScribbles</h1>
51
+ <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>
52
+ <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>
53
+ <div class="bg-indigo-50 rounded-lg p-6 mb-8">
54
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-4">Our Mission</h2>
55
+ <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>
56
+ </div>
57
+ <div class="flex flex-wrap gap-4">
58
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
59
+ <div class="text-indigo-600 mb-2">
60
+ <i data-feather="users" class="w-8 h-8"></i>
61
+ </div>
62
+ <h3 class="font-bold text-gray-900 mb-1">150+</h3>
63
+ <p class="text-gray-600 text-sm">Active Members</p>
64
+ </div>
65
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
66
+ <div class="text-indigo-600 mb-2">
67
+ <i data-feather="file-text" class="w-8 h-8"></i>
68
+ </div>
69
+ <h3 class="font-bold text-gray-900 mb-1">80+</h3>
70
+ <p class="text-gray-600 text-sm">Publications</p>
71
+ </div>
72
+ <div class="bg-white p-4 rounded-lg shadow-sm flex-1 min-w-[200px]">
73
+ <div class="text-indigo-600 mb-2">
74
+ <i data-feather="calendar" class="w-8 h-8"></i>
75
+ </div>
76
+ <h3 class="font-bold text-gray-900 mb-1">24</h3>
77
+ <p class="text-gray-600 text-sm">Annual Events</p>
78
+ </div>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="md:w-1/2">
83
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
84
+ <img src="http://static.photos/education/1024x576/1" alt="Club Members" class="w-full h-64 object-cover">
85
+ <div class="p-6">
86
+ <h2 class="title-font text-2xl font-bold text-gray-900 mb-4">Join Our Community</h2>
87
+ <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>
88
+ <div class="space-y-4">
89
+ <div class="flex items-start">
90
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
91
+ <i data-feather="edit-3" class="text-indigo-600 w-5 h-5"></i>
92
+ </div>
93
+ <div>
94
+ <h3 class="font-bold text-gray-900 mb-1">Writing Team</h3>
95
+ <p class="text-gray-600 text-sm">Contribute articles, stories, or research highlights</p>
96
+ </div>
97
+ </div>
98
+ <div class="flex items-start">
99
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
100
+ <i data-feather="camera" class="text-indigo-600 w-5 h-5"></i>
101
+ </div>
102
+ <div>
103
+ <h3 class="font-bold text-gray-900 mb-1">Media Team</h3>
104
+ <p class="text-gray-600 text-sm">Photography, videography, and graphic design</p>
105
+ </div>
106
+ </div>
107
+ <div class="flex items-start">
108
+ <div class="bg-indigo-100 rounded-full p-2 mr-4">
109
+ <i data-feather="mic" class="text-indigo-600 w-5 h-5"></i>
110
+ </div>
111
+ <div>
112
+ <h3 class="font-bold text-gray-900 mb-1">Events Team</h3>
113
+ <p class="text-gray-600 text-sm">Plan and organize our seminars and workshops</p>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ <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>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="mt-16">
124
+ <h2 class="title-font text-3xl font-bold text-gray-900 mb-8">Meet the Team</h2>
125
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
126
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
127
+ <img src="http://static.photos/people/640x360/1" alt="Team Member" class="w-full h-48 object-cover">
128
+ <div class="p-6">
129
+ <h3 class="title-font text-xl font-bold text-gray-900">Dr. Sarah Chen</h3>
130
+ <p class="text-indigo-600 mb-2">Faculty Advisor</p>
131
+ <p class="text-gray-600 text-sm">Professor of Literature and Creative Writing</p>
132
+ </div>
133
+ </div>
134
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
135
+ <img src="http://static.photos/people/640x360/2" alt="Team Member" class="w-full h-48 object-cover">
136
+ <div class="p-6">
137
+ <h3 class="title-font text-xl font-bold text-gray-900">Alex Johnson</h3>
138
+ <p class="text-indigo-600 mb-2">Editor-in-Chief</p>
139
+ <p class="text-gray-600 text-sm">Graduate Student in Journalism</p>
140
+ </div>
141
+ </div>
142
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
143
+ <img src="http://static.photos/people/640x360/3" alt="Team Member" class="w-full h-48 object-cover">
144
+ <div class="p-6">
145
+ <h3 class="title-font text-xl font-bold text-gray-900">Priya Patel</h3>
146
+ <p class="text-indigo-600 mb-2">Research Editor</p>
147
+ <p class="text-gray-600 text-sm">PhD Candidate in Neuroscience</p>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </div>
152
+ </main>
153
+
154
+ <footer class="bg-gray-100 py-8">
155
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
156
+ <div class="flex flex-col md:flex-row justify-between items-center">
157
+ <div class="flex items-center mb-4 md:mb-0">
158
+ <i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
159
+ <span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
160
+ </div>
161
+ <div class="flex space-x-6">
162
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
163
+ <i data-feather="twitter"></i>
164
+ </a>
165
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
166
+ <i data-feather="instagram"></i>
167
+ </a>
168
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
169
+ <i data-feather="facebook"></i>
170
+ </a>
171
+ </div>
172
+ </div>
173
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
174
+ <p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
175
+ </div>
176
+ </div>
177
+ </footer>
178
+
179
+ <script>
180
+ feather.replace();
181
+ </script>
182
+ </body>
183
+ </html>
events.html ADDED
@@ -0,0 +1,171 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Events | BrainyScribblesChronicles</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+ .title-font {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ .event-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex items-center">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
37
+ <span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
41
+ <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
42
+ <a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
43
+ <a href="research.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
44
+ <a href="events.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
45
+ <a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
52
+ <h1 class="title-font text-4xl font-bold text-gray-900 mb-8">Upcoming Events</h1>
53
+
54
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
55
+ <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
56
+ <div class="p-6">
57
+ <div class="flex items-start">
58
+ <div class="bg-indigo-100 rounded-lg p-4 mr-6 text-center">
59
+ <div class="text-indigo-600 font-bold text-2xl">15</div>
60
+ <div class="text-indigo-600 font-medium uppercase text-sm">Jun</div>
61
+ </div>
62
+ <div>
63
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-2">Science & Fiction Symposium</h2>
64
+ <p class="text-gray-600 mb-4">Explore the intersection of scientific discovery and creative storytelling with our panel of researchers and authors.</p>
65
+ <div class="flex flex-wrap gap-2 mb-4">
66
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Science</span>
67
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Literature</span>
68
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Panel</span>
69
+ </div>
70
+ <div class="flex items-center text-sm text-gray-500">
71
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
72
+ <span>4:00 PM - 6:30 PM</span>
73
+ <span class="mx-2">•</span>
74
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
75
+ <span>University Hall, Room 203</span>
76
+ </div>
77
+ <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>
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
84
+ <div class="p-6">
85
+ <div class="flex items-start">
86
+ <div class="bg-indigo-100 rounded-lg p-4 mr-6 text-center">
87
+ <div class="text-indigo-600 font-bold text-2xl">22</div>
88
+ <div class="text-indigo-600 font-medium uppercase text-sm">Jun</div>
89
+ </div>
90
+ <div>
91
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-2">Research Writing Workshop</h2>
92
+ <p class="text-gray-600 mb-4">Learn how to craft compelling research papers and grant proposals from our faculty experts.</p>
93
+ <div class="flex flex-wrap gap-2 mb-4">
94
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Workshop</span>
95
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Writing</span>
96
+ <span class="bg-indigo-100 text-indigo-800 text-xs px-3 py-1 rounded-full">Graduate</span>
97
+ </div>
98
+ <div class="flex items-center text-sm text-gray-500">
99
+ <i data-feather="clock" class="w-4 h-4 mr-1"></i>
100
+ <span>10:00 AM - 12:30 PM</span>
101
+ <span class="mx-2">•</span>
102
+ <i data-feather="map-pin" class="w-4 h-4 mr-1"></i>
103
+ <span>Library Learning Commons</span>
104
+ </div>
105
+ <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>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <h2 class="title-font text-3xl font-bold text-gray-900 mt-16 mb-8">Past Events</h2>
113
+
114
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
115
+ <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
116
+ <img src="http://static.photos/education/640x360/1" alt="Event Image" class="w-full h-40 object-cover">
117
+ <div class="p-4">
118
+ <h3 class="title-font font-bold text-gray-900 mb-1">Poetry & Physics Night</h3>
119
+ <p class="text-gray-500 text-sm mb-2">May 5, 2023</p>
120
+ <p class="text-gray-600 text-sm">An evening exploring the beauty of both equations and verse.</p>
121
+ </div>
122
+ </div>
123
+ <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
124
+ <img src="http://static.photos/education/640x360/2" alt="Event Image" class="w-full h-40 object-cover">
125
+ <div class="p-4">
126
+ <h3 class="title-font font-bold text-gray-900 mb-1">Undergrad Research Fair</h3>
127
+ <p class="text-gray-500 text-sm mb-2">April 18, 2023</p>
128
+ <p class="text-gray-600 text-sm">Showcasing exceptional undergraduate research projects.</p>
129
+ </div>
130
+ </div>
131
+ <div class="event-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
132
+ <img src="http://static.photos/education/640x360/3" alt="Event Image" class="w-full h-40 object-cover">
133
+ <div class="p-4">
134
+ <h3 class="title-font font-bold text-gray-900 mb-1">SciComm Bootcamp</h3>
135
+ <p class="text-gray-500 text-sm mb-2">March 30, 2023</p>
136
+ <p class="text-gray-600 text-sm">Learn to communicate complex ideas to broad audiences.</p>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </main>
141
+
142
+ <footer class="bg-gray-100 py-8">
143
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
144
+ <div class="flex flex-col md:flex-row justify-between items-center">
145
+ <div class="flex items-center mb-4 md:mb-0">
146
+ <i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
147
+ <span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
148
+ </div>
149
+ <div class="flex space-x-6">
150
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
151
+ <i data-feather="twitter"></i>
152
+ </a>
153
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
154
+ <i data-feather="instagram"></i>
155
+ </a>
156
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
157
+ <i data-feather="facebook"></i>
158
+ </a>
159
+ </div>
160
+ </div>
161
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
162
+ <p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
163
+ </div>
164
+ </div>
165
+ </footer>
166
+
167
+ <script>
168
+ feather.replace();
169
+ </script>
170
+ </body>
171
+ </html>
index.html CHANGED
@@ -1,19 +1,61 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ink & Intellect Chronicles | University Press Club</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
14
+ body {
15
+ font-family: 'Poppins', sans-serif;
16
+ }
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+ .vanta-container {
21
+ position: absolute;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ z-index: -1;
27
+ }
28
+ .article-card:hover {
29
+ transform: translateY(-5px);
30
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
31
+ }
32
+ .gradient-text {
33
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
34
+ -webkit-background-clip: text;
35
+ background-clip: text;
36
+ color: transparent;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <div class="vanta-container" id="vanta-bg"></div>
42
+
43
+ <!-- Navigation -->
44
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
45
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
46
+ <div class="flex justify-between h-16">
47
+ <div class="flex items-center">
48
+ <div class="flex-shrink-0 flex items-center">
49
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
50
+ <span class="ml-2 title-font text-2xl font-bold text-gray-900">Ink & Intellect</span>
51
+ </div>
52
+ </div>
53
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
54
+ <a href="index.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
55
+ <a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
56
+ <a href="research.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
57
+ <a href="events.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
58
+ <a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
59
+ <a href="#" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text
60
+ </body>
61
+ </html>
research.html ADDED
@@ -0,0 +1,140 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Research Teasers | BrainyScribblesChronicles</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+ .title-font {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ .research-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex items-center">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
37
+ <span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
41
+ <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
42
+ <a href="stories.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
43
+ <a href="research.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
44
+ <a href="events.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
45
+ <a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
52
+ <h1 class="title-font text-4xl font-bold text-gray-900 mb-8">Research Teasers</h1>
53
+
54
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
55
+ <div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
56
+ <div class="p-6">
57
+ <div class="flex items-center mb-4">
58
+ <div class="bg-indigo-100 rounded-full p-3 mr-4">
59
+ <i data-feather="dna" class="text-indigo-600"></i>
60
+ </div>
61
+ <h2 class="title-font text-xl font-bold text-gray-900">Quantum Biology Breakthrough</h2>
62
+ </div>
63
+ <p class="text-gray-600 mb-4">Our team has discovered quantum coherence in photosynthesis at room temperature, challenging previous assumptions about quantum effects in biological systems.</p>
64
+ <div class="flex items-center text-sm text-gray-500">
65
+ <span>Biology Dept.</span>
66
+ <span class="mx-2">•</span>
67
+ <span>June 2, 2023</span>
68
+ </div>
69
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
70
+ </div>
71
+ </div>
72
+
73
+ <div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
74
+ <div class="p-6">
75
+ <div class="flex items-center mb-4">
76
+ <div class="bg-indigo-100 rounded-full p-3 mr-4">
77
+ <i data-feather="cpu" class="text-indigo-600"></i>
78
+ </div>
79
+ <h2 class="title-font text-xl font-bold text-gray-900">AI Ethics Framework</h2>
80
+ </div>
81
+ <p class="text-gray-600 mb-4">New ethical framework for AI development addresses bias mitigation, transparency, and accountability in machine learning systems.</p>
82
+ <div class="flex items-center text-sm text-gray-500">
83
+ <span>Computer Science</span>
84
+ <span class="mx-2">•</span>
85
+ <span>May 18, 2023</span>
86
+ </div>
87
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
88
+ </div>
89
+ </div>
90
+
91
+ <div class="research-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
92
+ <div class="p-6">
93
+ <div class="flex items-center mb-4">
94
+ <div class="bg-indigo-100 rounded-full p-3 mr-4">
95
+ <i data-feather="globe" class="text-indigo-600"></i>
96
+ </div>
97
+ <h2 class="title-font text-xl font-bold text-gray-900">Climate Resilience Study</h2>
98
+ </div>
99
+ <p class="text-gray-600 mb-4">Urban planning strategies for climate resilience in coastal cities show promising results in our 5-year longitudinal study.</p>
100
+ <div class="flex items-center text-sm text-gray-500">
101
+ <span>Environmental Science</span>
102
+ <span class="mx-2">•</span>
103
+ <span>April 30, 2023</span>
104
+ </div>
105
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Abstract →</a>
106
+ </div>
107
+ </div>
108
+ </div>
109
+ </main>
110
+
111
+ <footer class="bg-gray-100 py-8">
112
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
113
+ <div class="flex flex-col md:flex-row justify-between items-center">
114
+ <div class="flex items-center mb-4 md:mb-0">
115
+ <i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
116
+ <span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
117
+ </div>
118
+ <div class="flex space-x-6">
119
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
120
+ <i data-feather="twitter"></i>
121
+ </a>
122
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
123
+ <i data-feather="instagram"></i>
124
+ </a>
125
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
126
+ <i data-feather="facebook"></i>
127
+ </a>
128
+ </div>
129
+ </div>
130
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
131
+ <p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
132
+ </div>
133
+ </div>
134
+ </footer>
135
+
136
+ <script>
137
+ feather.replace();
138
+ </script>
139
+ </body>
140
+ </html>
stories.html ADDED
@@ -0,0 +1,128 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Short Stories | BrainyScribblesChronicles</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ }
15
+ .title-font {
16
+ font-family: 'Playfair Display', serif;
17
+ }
18
+ .gradient-text {
19
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6);
20
+ -webkit-background-clip: text;
21
+ background-clip: text;
22
+ color: transparent;
23
+ }
24
+ .story-card:hover {
25
+ transform: translateY(-5px);
26
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
27
+ }
28
+ </style>
29
+ </head>
30
+ <body class="bg-gray-50">
31
+ <nav class="bg-white bg-opacity-90 backdrop-filter backdrop-blur-lg shadow-sm sticky top-0 z-50">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-16">
34
+ <div class="flex items-center">
35
+ <div class="flex-shrink-0 flex items-center">
36
+ <i data-feather="book-open" class="text-indigo-600 h-8 w-8"></i>
37
+ <span class="ml-2 title-font text-2xl font-bold text-gray-900">BrainyScribbles</span>
38
+ </div>
39
+ </div>
40
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
41
+ <a href="index.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
42
+ <a href="stories.html" class="text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Stories</a>
43
+ <a href="research.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Research</a>
44
+ <a href="events.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Events</a>
45
+ <a href="about.html" class="text-gray-500 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
52
+ <h1 class="title-font text-4xl font-bold text-gray-900 mb-8">Short Stories Collection</h1>
53
+
54
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
55
+ <div class="story-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
56
+ <img src="http://static.photos/literature/640x360/1" alt="Story Cover" class="w-full h-48 object-cover">
57
+ <div class="p-6">
58
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-2">The Midnight Thesis</h2>
59
+ <p class="text-gray-600 mb-4">A graduate student's encounter with the supernatural in the library stacks...</p>
60
+ <div class="flex items-center text-sm text-gray-500">
61
+ <span>By: Alex Chen</span>
62
+ <span class="mx-2">•</span>
63
+ <span>May 15, 2023</span>
64
+ </div>
65
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Story →</a>
66
+ </div>
67
+ </div>
68
+
69
+ <div class="story-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
70
+ <img src="http://static.photos/literature/640x360/2" alt="Story Cover" class="w-full h-48 object-cover">
71
+ <div class="p-6">
72
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-2">Coffee Shop Equations</h2>
73
+ <p class="text-gray-600 mb-4">When a math major meets a poet at 2am over stale pastries...</p>
74
+ <div class="flex items-center text-sm text-gray-500">
75
+ <span>By: Priya Patel</span>
76
+ <span class="mx-2">•</span>
77
+ <span>April 28, 2023</span>
78
+ </div>
79
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Story →</a>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="story-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
84
+ <img src="http://static.photos/literature/640x360/3" alt="Story Cover" class="w-full h-48 object-cover">
85
+ <div class="p-6">
86
+ <h2 class="title-font text-xl font-bold text-gray-900 mb-2">The Last Lecture</h2>
87
+ <p class="text-gray-600 mb-4">A professor's final class holds more secrets than anyone expected...</p>
88
+ <div class="flex items-center text-sm text-gray-500">
89
+ <span>By: Jordan Williams</span>
90
+ <span class="mx-2">•</span>
91
+ <span>March 10, 2023</span>
92
+ </div>
93
+ <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800 font-medium">Read Story →</a>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ </main>
98
+
99
+ <footer class="bg-gray-100 py-8">
100
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101
+ <div class="flex flex-col md:flex-row justify-between items-center">
102
+ <div class="flex items-center mb-4 md:mb-0">
103
+ <i data-feather="book-open" class="text-indigo-600 h-6 w-6"></i>
104
+ <span class="ml-2 title-font text-lg font-bold text-gray-900">BrainyScribbles</span>
105
+ </div>
106
+ <div class="flex space-x-6">
107
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
108
+ <i data-feather="twitter"></i>
109
+ </a>
110
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
111
+ <i data-feather="instagram"></i>
112
+ </a>
113
+ <a href="#" class="text-gray-500 hover:text-indigo-600">
114
+ <i data-feather="facebook"></i>
115
+ </a>
116
+ </div>
117
+ </div>
118
+ <div class="mt-8 pt-8 border-t border-gray-200 text-center text-gray-500 text-sm">
119
+ <p>© 2023 BrainyScribblesChronicles. All rights reserved.</p>
120
+ </div>
121
+ </div>
122
+ </footer>
123
+
124
+ <script>
125
+ feather.replace();
126
+ </script>
127
+ </body>
128
+ </html>