forked from peortiz89/BCSR
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsimons-rock-at-a-glance.php
289 lines (259 loc) · 12.1 KB
/
simons-rock-at-a-glance.php
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="_js/modernizr.custom.js"></script>
<title>Simon's Rock at a Glance</title>
<?php include '_inc/head-js-css.php'; ?>
<?php include '_resources/includes/icon-loader.php'; ?>
</head>
<body class="has-hero">
<?php include '_inc/nav.php'; ?>
<div class="container-fluid page-container">
<div class="row-full-width">
<div class="page-hero-container at-a-glance-bg">
<div class="page-hero page-hero-gateway-alt text-center">
<h1 class="hero-title">Simon's Rock at a Glance</h1>
<p class="hero-text">A collection of pithy, impressive, and occasionally idiosyncratic stats that begins to capture everything wonderful and life-changing about Simon’s Rock.</p>
<i id="intro_arrow_down" class="fa fa-angle-down"></i>
</div>
</div>
</div>
<div class="at-a-glance">
<div id="location">
<div class="container">
<div class="row">
<h2 class="text-center col-sm-10 col-sm-push-1">“No. 1 Small Town in America”</h2>
<p class="col-xs-12 col-md-8 col-md-push-2 text-center">Our home, Great Barrington, Massachusetts, as ranked by Smithsonian Magazine. It’s an easy walk or bike ride from campus.</p>
</div>
<div class="row">
<div class="col-xs-6 col-sm-5 col-md-push-1">
<h2>275 Acres</h2>
<p>Our wooded campus is in the heart of the Berkshires, an area known for its natural beauty and rich cultural life.</p>
</div>
</div>
</div>
</div>
<div class="container" id="concentrations">
<div class="no-margin row text-center">
<div class="ribbon"><span>40+ Concentrations</span></div>
<h4>Our Top Majors Include:</h4>
<div class="major col-xs-6 col-sm-3 icon-major-biology">
<h4>Biology</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-photography">
<h4>Photography</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-politics">
<h4>Politics</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-music">
<h4>Music</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-theater">
<h4>Theater</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-cross-cultural-relations">
<h4>Cross Cultural Relations</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-pre-engineering">
<h4>Pre-Engineering</h4>
</div>
<div class="major col-xs-6 col-sm-3 icon-major-literary-studies">
<h4>Literary Studies</h4>
</div>
</div>
<div class="row text-center">
<div class="major col-xs-6 col-sm-3 col-sm-push-3 icon-major-psychology">
<h4>Psychology</h4>
</div>
<div class="major col-xs-6 col-sm-3 col-sm-push-3 icon-major-creative-writing">
<h4>Creative Writing</h4>
</div>
</div>
</div>
<div id="our-students">
<div class="container">
<div class="row text-center">
<h2>Our Students</h2>
<div class="col-xs-6 col-sm-4">
<div class="no-margin row">
<h2 class="stat blue col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3"><span>400</span></h2>
<h5 class="stat-description col-xs-12 col-lg-8 col-lg-push-2">Full-Time Students</h5>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="no-margin row">
<h2 class="stat red col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3"><span>16.5</span></h2>
<h5 class="stat-description col-xs-12 col-lg-8 col-lg-push-2">Average Age of Entering Students</h5>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="no-margin row">
<h2 class="stat orange col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3"><span>11</span></h2>
<h5 class="stat-description col-xs-12 col-lg-8 col-lg-push-2">Average Class Size</h5>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-sm-push-2">
<div class="no-margin row">
<h2 class="stat yellow col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3"><span>45</span></h2>
<h5 class="stat-description col-xs-12 col-lg-8 col-lg-push-2">Number of States our Students Come From</h5>
</div>
</div>
<div class="col-xs-6 col-xs-push-3 col-sm-4 col-sm-push-2">
<div class="no-margin row">
<h2 class="stat yellow col-xs-10 col-xs-push-1 col-sm-6 col-sm-push-3"><span>27</span></h2>
<h5 class="stat-description col-xs-12 col-lg-8 col-lg-push-2">Number of Countries our Students Come From</h5>
</div>
</div>
</div>
<div class="graph-container">
<div class="row">
<div class="col-md-8 col-md-push-2">
<div class="row graph no-margin">
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="blue icon-graph-building--before" data-percentage="90"> </div>
</div>
<h5>90%</h5>
</div>
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="orange icon-graph-male--before" data-percentage="41"> </div>
</div>
<h5>41%</h5>
</div>
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="yellow icon-graph-female--before" data-percentage="59"> </div>
</div>
<h5>59%</h5>
</div>
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="white icon-graph-piggy-bank--before" data-percentage="85"> </div>
</div>
<h5>85%</h5>
</div>
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="charcoal icon-graph-people--before" data-percentage="30"> </div>
</div>
<h5>30%</h5>
</div>
<div class="col-xs-2 bar-wrapper">
<div class="bar">
<div class="red icon-graph-flag--before" data-percentage="14"> </div>
</div>
<h5>14%</h5>
</div>
</div>
</div>
</div>
<div class="no-margin row">
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="blue">Students Who Live On Campus</h4>
</div>
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="charcoal">Students Of Color</h4>
</div>
</div>
<div class="no-margin row">
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="orange">Male Students</h4>
</div>
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="yellow">Female Students</h4>
</div>
</div>
<div class="no-margin row">
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="white">Students Receiving Financial Aid</h4>
</div>
<div class="col-xs-6 col-md-4 col-md-push-2">
<h4 class="red">International Students</h4>
</div>
</div>
</div>
</div>
</div>
<div id="our-faculty">
<div class="container">
<div class="row">
<h2 class="text-center">Our Faculty</h2>
<div>
<div class="stat blue col-xs-10 col-md-7 col-md-push-2">
<h2>8:1</h2>
<h4>Student to faculty ratio</h4>
</div>
<div class="icon col-xs-2 col-md-1 col-md-push-2 icon-faculty-ratio"></div>
<div class="stat orange col-xs-10 col-md-7 col-md-push-2">
<h2>95%</h2>
<h4>Full-time faculty holding highest degree in their field</h4>
</div>
<div class="icon col-xs-2 col-md-1 col-md-push-2 icon-faculty-cap"></div>
<div class="stat yellow col-xs-10 col-md-7 col-md-push-2">
<h2>24/7</h2>
<h4>Availability of our professional residence directors—who live in each residence hall</h4>
</div>
<div class="icon col-xs-2 col-md-1 col-md-push-2 icon-faculty-lamp"></div>
<div class="stat red col-xs-10 col-md-7 col-md-push-2">
<h2>Once a week</h2>
<h4>Number of times you’ll meet with your academic advisor (That’s a minimum. He/she will always be happy to talk to you more)</h4>
</div>
<div class="icon col-xs-2 col-md-1 col-md-push-2 icon-faculty-coffee"></div>
<div class="stat blue col-xs-10 col-md-7 col-md-push-2">
<h2>0</h2>
<h4>Number of schools that do what we do</h4>
</div>
<div class="icon col-xs-2 col-md-1 col-md-push-2 icon-faculty-logo"></div>
</div>
</div>
</div>
</div>
<div id="smartest-colleges">
<div class="container">
<div class="row text-center">
<h3 class="col-sm-8 col-sm-push-2">“One of America’s smartest colleges.”</h3>
<p class="col-sm-10 col-sm-push-1">Business Insider picked Simon’s Rock as a top choice “if you want to be among the most intelligent students in America”</p>
<div class="col-xs-12">
<div class="page--link">
<a class="right-arrow-primary" href="#"><i class="fa fa-angle-right bold"></i> Learn about our sterling reputation and enviable outcomes</a>
</div>
</div>
</div>
</div>
</div>
<div class="row-full-width">
<div class="solid-bar">
<h3 class="text-center">Questions? We would love to talk to you!</h3>
<div class="text-center">
<a class="btn btn-primary" href="#">Contact Admission</a>
</div>
</div>
</div>
</div>
</div>
<?php include '_inc/footer.php'; ?>
<?php include '_inc/bottom-js.php' ?>
<script type="text/javascript" src="/_js/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="/_js/scrollmagic/jquery.scrollmagic.min.js"></script>
<script type="text/javascript" src="/_resources/js/at-a-glance-min.js"></script>
<script>
var controller;
$(document).ready(function($) {
// init controller
controller = new ScrollMagic();
// Page hero parallax
var tween_page_hero = TweenMax.fromTo('.page-hero', 1.5,
{ 'opacity' : 1, 'padding-top' : $('.page-hero').css('padding-top')},
{ 'opacity' : 0.5, 'padding-top' : (parseInt($('.page-hero').css('padding-top'))+60) +'px'}
);
// build scene
var scene_page_hero = new ScrollScene({duration: 300}).setTween(tween_page_hero).addTo(controller);
});
</script>
</body>
</html>