-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (150 loc) · 8.34 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | All the Sprouts</title>
<script id="replace_with_header" src="js/header.js"></script>
</head>
<body>
<!-- <div class="bg-success text-center py-2" role="alert">
<div>
<h4><a href="/registration">Registration is open for Summer Science Seminars!</a></h4>
</div>
</div> -->
<!-- Navbar -->
<div class="sticky-top">
<script id="replace_with_navbar" src="js/nav.js"></script>
</div>
<!-- Obligatory Spacing -->
<br><br>
<div class="card text-bg-dark position-relative rounded-0 no-animation">
<img src="/images/SO Season 3/IMG_4183.jpg" class="jumbotron-img opacity-25" alt="Students sitting on a bench, happy that they participated in Science Outdoors Season 3!">
<div class="card-img-overlay">
<br>
<h1 class="card-title text-end p-5 animate__animated animate__bounceInUp"><span class="green">Sprouting</span> <strong class="text-oscillation"></strong> from student to student.</h1>
<a class="btn bg-blue btn-lg position-absolute end-0 me-5 text-white" href="about" role="button">Learn more</a>
</div>
<span class="scroll-down-arrow"></span>
</div>
<div class="card bg-fuchsia-gradient position-relative rounded-0 no-animation">
<div class="container body-container text-center">
<br>
<h1>Testimonials</h1>
<blockquote class="blockquote text-center">
<h4>Students in last year's class rated us 9 out of 10!</h4>
</blockquote>
<figure class="text-center">
<blockquote class="blockquote">
<p>Very fun and informative! I feel like I learned a lot.</p>
<p>The learning environment was pretty good, and the teachers were fun, nice, and assertive—they gave everyone a voice—they encouraged and enabled people to talk. I think that in all fields, this camp excelled in general. Go Sprouts!</p>
<p>I really enjoyed chemistry—especially the DNA extraction experiment. I even used this as inspiration for an idea for my science fair at school!</p>
</blockquote>
<figcaption class="blockquote-footer">
―Testimonials from students in 2023 programs
</figcaption>
</figure>
<a class="btn btn-info justify-content-center" href="https://docs.google.com/forms/d/e/1FAIpQLSfpHPK9ws5AHEr3LLkf7RnOE4Q0FxQqPR3i0N9rXGQF__4Zqw/viewform">Join the mailing list!</a>
<br>
<br>
</div>
</div>
<div class="container body-container">
<br>
<div class="row gy-4 text-center">
<h1>Programs</h1>
<div class="col-lg-4">
<div class="card card-animated shadow bg-green-gradient">
<img src="/images/SO Season 3/IMG_4124.jpg" style="height: 12rem; display: block; object-fit: cover; width: auto;" class="card-img-top" alt="A Science Outdoors Class in Lexington">
<div class="card-body">
<h5 class="card-title">Science Outdoors</h5>
<h6 class="card-subtitle mb-2">SO</h6>
<p class="card-text">A 5-day, small-class, hands-on program to introduce students to STEM</p>
<a href="programs/science-outdoors" class="stretched-link"></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-animated shadow bg-silver-gradient">
<img src="/images/3s_title.png" style="height: 12rem; display: block; object-fit: cover; width: auto;" class="card-img-top" alt="A Summer Science Seminars Class in Lexington">
<div class="card-body">
<h5 class="card-title">Summer Science Seminars</h5>
<h6 class="card-subtitle mb-2">3S</h6>
<p class="card-text">A Splash-like lecture marathon bringing to you knowledge about various branches of science!</p>
<a href="programs/summer-science-seminars" class="stretched-link"></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-animated shadow bg-fuchsia-gradient">
<img src="/images/artwork/Wish.jpeg" style="height: 12rem; display: block; object-fit: cover; width: auto;" class="card-img-top" alt="A Piece of Artwork from Slice of Art">
<div class="card-body">
<h5 class="card-title">Slice of Art</h5>
<h6 class="card-subtitle mb-2">SOA</h6>
<p class="card-text">Covering the basics of art and their purposes, getting you introduced to multiple mediums!</p>
<a href="programs/slice-of-art" class="stretched-link"></a>
</div>
</div>
</div>
</div>
<br>
<div class="row gy-4 text-center">
<h1>Branches</h1>
<div class="col-lg-4">
<div class="card card-animated shadow bg-blue-gradient">
<img src="/images/SO Season 3/IMG_4174.jpg" style="height: 12rem; display: block; object-fit: cover; width: auto;" class="card-img-top" alt="A Science Outdoors Class in Lexington">
<div class="card-body">
<h5 class="card-title">Lexington</h5>
<h6 class="card-subtitle mb-2">Massachusetts</h6>
<p class="card-text">Run by: Stephanie Wan, Owen Jiang, Nishtha Chhabra, Alex Corbett</p>
<a href="branches/lexington" class="stretched-link"></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-animated shadow bg-purple-gradient">
<svg class="bd-placeholder-img card-img-top" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect></svg>
<div class="card-body">
<h5 class="card-title">Hopkinton</h5>
<h6 class="card-subtitle mb-2">Massachusetts</h6>
<p class="card-text">Run by: Aryan Shah</p>
<a href="branches/hopkinton" class="stretched-link"></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card card-animated shadow bg-indigo-gradient">
<svg class="bd-placeholder-img card-img-top" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect></svg>
<div class="card-body">
<h5 class="card-title"><em>Coming soon</em></h5>
<h6 class="card-subtitle mb-2">TBD</h6>
<p class="card-text">Run by: TBD</p>
<a href="branches/" class="stretched-link"></a>
</div>
</div>
</div>
</div>
<br>
<div class="text-center">
<strong>
Website last updated <a href="#" data-bs-toggle="tooltip" data-bs-custom-class="sprouts-tooltip" data-bs-title="At 22:13 EDT">August 12th, 2024</a>
</strong>
<br>
Note: website also being revamped right now. Please be patient as information is in the process of changing. <a href="mailto:[email protected]">Email us</a> if you have any questions.
</div>
</div>
<script id="replace_with_footer" src="js/footer.js"></script>
<!-- End scripts -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<!-- Initialize Tooltips -->
<script type="text/javascript">
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
<script type="text/javascript">
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
</script>
</body>
</html>