-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
327 lines (296 loc) · 21.7 KB
/
index.html
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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700,900" rel="stylesheet">
<title>Harvard OpenBio Lab</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<!-- Additional CSS Files -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/fullpage.min.css">
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<div id="video">
<div class="preloader">
<div class="preloader-bounce">
<span></span>
<span></span>
<span></span>
</div>
</div>
<header id="header">
<div class="container-fluid">
<div class="navbar">
<a href="#home" id="logo" title="Harvard OpenBio Lab">
<!-- <img src="images/small_logo.svg" style="max-height: 50px;"/> -->
OpenBio
</a>
<div class="navigation-row">
<nav id="navigation">
<button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button>
<div class="nav-box navbar-collapse">
<ul class="navigation-menu nav navbar-nav navbars" id="nav">
<li data-menuanchor="home" class="active"><a href="#home">Home</a></li>
<li data-menuanchor="about"><a href="#about">About</a></li>
<li data-menuanchor="projects"><a href="#projects">Projects</a></li>
<li data-menuanchor="team"><a href="#team">Team</a></li>
<li data-menuanchor="contact"><a href="#contact">Join</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<video autoplay muted loop id="myVideo">
<source src="images/video-bg.mp4" type="video/mp4">
</video>
<div id="fullpage" class="fullpage-default">
<div class="section animated-row" data-section="home">
<div class="section-inner">
<div class="welcome-box">
<span class="welcome-title animate" data-animate="fadeInUp">
<img src="images/full_logo_white.svg" />
</span>
<!-- <span class="welcome-first animate" data-animate="fadeInUp">Harvard</span>
<h1 class="welcome-title animate" data-animate="fadeInUp">OpenBio</h1>
<span class="welcome-first animate" data-animate="fadeInUp">Laboratory</span> -->
<p class="animate" data-animate="fadeInUp" style="font-size: 20px;width: 90%;margin-top: 10%"> Hub for student learning, experimentation, and innovation in biology, bioengineering, and beyond.</p>
<div class="scroll-down next-section animate data-animate="fadeInUp""><img src="images/mouse-scroll.png" alt=""><span> </span></div>
</div>
</div>
</div>
<div class="contact-box">
<div class="contact-row">
<a href="https://harvardopenbio.notion.site/Harvard-OpenBio-Project-Application-Fall-2022-1e2397a96203446fb7e22eade83fad73"><p style="font-size:25px;text-shadow: 2px 2px 1px #20AC81;color: #115a57; ">OpenBio Research Project Applications now Open! Apply here (due 9/30)</p></a>
</div>
<div class="contact-row">
<a href="mailto:exec@harvardopenbio.org"><p style="font-size:25px; text-shadow: 2px 2px 1px #20AC81; ">Have questions about the project app? email us at exec@harvardopenbio.org</p></a>
</div>
<div class="contact-row">
<a href="https://groups.google.com/g/harvardopenbio"><p style="font-size:25px;text-shadow: 2px 2px 1px #20AC81; ">Join Our Mailing List here!</p></a>
</div>
</div>
<div class="section animated-row" data-section="about">
<div class="section-inner">
<div class="about-section">
<div class="row justify-content-center">
<div class="col-lg-8 wide-col-laptop">
<div class="row">
<div class="col-md-6">
<div class="about-contentbox">
<div class="animate" data-animate="fadeInUp">
<span>About The</span>
<h2>Laboratory</h2>
<p>Our mission is to change the model of biological research by making the resources and funding to do impactful research accessible to all. <p style="font-weight: bold;">We provide the space, resources, funding, and advising to help students turn their research visions into reality.</p>
<p>We support student-run projects that use biology to create useful experiments, products, or technologies that address the world's problems or advance our appreciation for biology. Our Research Fellows use the OpenBio Lab, a BSL2 wet lab in the Harvard Science and Engineering Complex.</p>
<p>At the beginning of each semester, students can submit research proposals, which will be reviewed by the OpenBio executive board and our faculty advisors.</p>
</div>
<!-- <div class="facts-list owl-carousel">
<div class="item animate" data-animate="fadeInUp">
<div class="counter-box">
<i class="fa fa-trophy counter-icon" aria-hidden="true"></i><span class="count-number">32</span> Awards Won
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="counter-box">
<i class="fa fa-graduation-cap counter-icon" aria-hidden="true"></i><span class="count-number">4</span> Degrees
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="counter-box">
<i class="fa fa-desktop counter-icon" aria-hidden="true"></i><span class="count-number">12</span> Working Years
</div>
</div>
</div> -->
</div>
</div>
<div class="col-md-6">
<figure class="about-img animate" data-animate="fadeInUp"><img style="margin-top:100px;" src="images/BioStar2.jpg" class="rounded" alt=""></figure>
<!-- <div class="facts-list owl-carousel">
<div class="item animate" data-animate="fadeInUp">
<figure class="about-img animate" data-animate="fadeInUp"><img src="images/harvard-sec.jpg" class="rounded" alt=""></figure>
</div>
<div class="item animate" data-animate="fadeInUp">
<figure class="about-img animate" data-animate="fadeInUp"><img src="images/harvard-sec.jpg" class="rounded" alt=""></figure>
</div>
<div class="item animate" data-animate="fadeInUp">
<figure class="about-img animate" data-animate="fadeInUp"><img src="images/harvard-sec.jpg" class="rounded" alt=""></figure>
</div>
</div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section animated-row" data-section="projects">
<div class="section-inner">
<div class="row justify-content-center">
<div class="col-md-8 wide-col-laptop">
<div class="title-block animate" data-animate="fadeInUp">
<span>Ongoing</span>
<h2>Projects</h2>
</div>
<div class="services-section">
<div class="services-list owl-carousel">
<div class="item animate" data-animate="fadeInUp">
<div class="service-box">
<span class="service-icon"><i class="fa fa-leaf" aria-hidden="true"></i></span>
<h3>Fluorescent Plants</h3>
<p>Leveraging synthetic biology and genetic engineering to create living plants that glow-in-the-dark.</p>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="service-box">
<span class="service-icon"><i class="fa fa-bug" aria-hidden="true"></i></span>
<h3>Carminic Acid</h3>
<p>Optimizing the microbial biosynthesis of the commercial dye carminic acid (Natural Red 4)</p>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="service-box">
<span class="service-icon"><i class="fa fa-code" aria-hidden="true"></i></span>
<h3>Protein Modeling</h3>
<p>Predicting the 3D structures of proteins using molecular dynamics and machine learning methods, such as AlphaFold 2.</p>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="service-box">
<span class="service-icon"><i class="fa fa-question" aria-hidden="true"></i></span>
<h3>Your Next Idea</h3>
<p>Have an idea for an impactful or unconventional experiment that you want to explore? Apply now to join our next cohort! Contact us below.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section animated-row" data-section="team">
<div class="section-inner">
<div class="row justify-content-center">
<div class="col-md-8 wide-col-laptop">
<div class="title-block animate" data-animate="fadeInUp">
<span>Leadership</span>
<h2>Team Members</h2>
</div>
<div class="gallery-section">
<div class="gallery-list owl-carousel">
<div class="item animate" data-animate="fadeInUp">
<div class="portfolio-item">
<div class="thumb">
<img src="images/ben-chang-small.jpg" alt="">
</div>
<div class="thumb-inner animate" data-animate="fadeInUp">
<h4>Benjamin Chang</h4>
<p>Benjamin is a junior at Harvard studying Molecular and Cellular Biology and Computer Science. He has developed synthetic circuits for gene therapies and novel CAR immunotherapies.</p>
</div>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="portfolio-item">
<div class="thumb">
<img src="images/ayush-noori-small.png" alt="">
</div>
<div class="thumb-inner animate" data-animate="fadeInUp">
<h4>Ayush Noori</h4>
<p>Ayush is a sophomore at Harvard studying Computational Neuroscience. At MassGeneral Hospital and Harvard Medical School, Ayush designs machine learning and bioinformatics pipelines to decipher neurodegeneration.</p>
</div>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="portfolio-item">
<div class="thumb">
<img src="images/izzy-small.jpg" alt="">
</div>
<div class="thumb-inner animate" data-animate="fadeInUp">
<h4>Izzy Goodchild-Michelman</h4>
<p>Izzy is a junior at Harvard studying Molecular and Cellular Biology. At Harvard Medical School and MassGeneral Hospital she develops computational models of the gut microbiome to streamline the design of personalized therapeutics.</p>
</div>
</div>
</div>
<div class="item animate" data-animate="fadeInUp">
<div class="portfolio-item">
<div class="thumb">
<img src="images/jack-markert-small.jpg" alt="">
</div>
<div class="thumb-inner animate" data-animate="fadeInUp">
<h4>Jack Markert</h4>
<p>Jack is a senior at Harvard concentrating in Molecular and Cellular Biology with a secondary in Statistics. Currently, Jack is working in the Laboratory for Bio-Micro Devices at Brigham and Women's Hospital.</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-inner">
<div class="row justify-content-center">
<div class="col-md-7 wide-col-laptop">
<h2>Our Advisors</h2>
<p style="font-size:22px ; display:inline-block;line-height: 25px; padding-inline: 40px"><span style=";font-weight: bold;">David Mooney, </span>Robert P. Pinkas Family Professor of Bioengineering at the Harvard School of Engineering and Applied Sciences</p>
</div>
<p style="font-size:22px; display:inline-block;line-height: 25px;padding-inline: 40px"><span style="font-weight: bold;">Samir Mitragotri, </span>Hiller Professor of Bioengineering at the Harvard School of Engineering and Applied Sciences and Hansjorg Wyss Professor of Biologically Inspired Engineering</p>
</div>
</div>
</div>
</div>
</div>
<div class="section animated-row" data-section="contact">
<div class="section-inner">
<div class="row justify-content-center">
<div class="col-md-7 wide-col-laptop">
<div class="title-block animate" data-animate="fadeInUp">
<span>Interested in Joining?</span>
<h2>Get In Touch!</h2>
</div>
<div class="contact-section">
<div class="title-block animate" data-animate="fadeInUp">
<div class="contact-box">
<div class="contact-row">
<i class="fa fa-star"></i> <a href="https://harvardopenbio.notion.site/Harvard-OpenBio-Project-Application-Fall-2022-1e2397a96203446fb7e22eade83fad73">Link to Project Application</a>
</div>
<div class="contact-row">
<i class="fa fa-envelope-o"></i> <a href="mailto:exec@harvardopenbio.org">exec@harvardopenbio.org</a>
</div>
<div class="contact-row">
<i class="fa fa-info"></i> Stop by our table at the club fair!
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div id="social-icons">
<div class="text-right">
<ul class="social-icons">
<li><a href="#" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="#" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#" title="Instagram"><i class="fa fa-behance"></i></a></li>
</ul>
</div>
</div> -->
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/fullpage.min.js"></script>
<script src="js/scrolloverflow.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.inview.min.js"></script>
<script src="js/form.js"></script>
<script src="js/custom.js"></script>
</body>
</html>