/
index.html
executable file
·211 lines (180 loc) · 13.8 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Year in the Life</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/skrollr.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<!-- <div id="header-bar">
<div id="header-title">Year in the Life</div>
</div>
-->
<section id="intro" data-0="bottom:0px;">
<article>
<h1><span id="title-year">Year</span> <span id="title-inthe">in the</span> <span id="title-life">Life</span> <span id="title-atucla">at UCLA</span><span style="width:100%; display:block; clear:both" /></h1>
<h2>This is <strong id="tagline-name">your</strong> story.</h2>
<div id="privacy-disclaimer">
Don’t worry, we won’t save any of your info. It will only be used to customize your experience.
</div><!-- end div#privacy-disclaimer -->
<form id="info-form">
<input type="text" placeholder="Name" id="info-name" />
<label for="info-grad-year">I am graduating in </label>
<select id="info-grad-year">
<option value="" disabled="disabled" selected="selected">Grad year</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</form><!-- end form#info-form -->
</article>
<img src="img/arrow.png" id="start-arrow"
data-start="bottom:-13px"
data-13-start="bottom:15px;opacity:1"
data-100-start="bottom:43px;opacity:0"/>
</section><!-- end section#intro -->
<section id="welcome-letter" data-0="bottom:-1000px" data-1000="bottom:0px">
<article>
<div class="story-text"><span id="user-first-blurb">Your</span> journey began with a letter.</div>
<!-- data is here: http://www.admissions.ucla.edu/Prospect/Adm_fr/Frosh_Prof.htm -->
<img id="letter-front" src="img/letter-front.png" />
<div id="letter-body" data-1000="top:-15px" data-700="top:400px">
<p>Dear <span class="user-name">student</span>:</p>
<p>Congratulations! It is our great pleasure to offer you admission to UCLA for Fall Quarter<span class="user-year"> 2009</span>.</p>
<p>This is a remarkable achievement. You were selected from <span class="user-applicant-number">more than <span id="user-applied-data">55,000</span> students</span> who applied to UCLA this year.</p>
<p>Sincerely,<br /><img src="img/letter-signature.png" /></p>
</div>
</article>
</section><!-- end section#welcome-letter -->
<section id="orientation-myths" data-1000="bottom:-1000px" data-2000="bottom:0px">
<div class="story-text story-text-white" data-1000="top:15px" data-2000="top:200px">You attended orientation and learned the “history” of UCLA.</div>
<img src="img/myths.janss.jpg" />
</section><!-- end section#orientation-myths -->
<section id="dormroom" data-2000="bottom:-1000px" data-3000="bottom:0px" data-4000="bottom:0px">
<div class="story-text story-text-white" data-2000="top:15px" data-3000="top:200px;opacity:1;" data-3500="top:1000px;opacity:0">A little while later, you moved to your first dorm room.</div>
<div id="dorm-bubble1" data-3000="top:-24%" data-3300="top:23%" data-3900="top:23%;opacity:1">Hi, what's<br />your name?</div>
<div id="dorm-bubble2" data-3300="top:-24%" data-3500="top:48%" data-4000="top:48%;" >I'm <span class="user-name">Josephine</span>!</div>
<img src="img/dorm-boxes.png" id="dorm-boxes" data-3000="bottom:-100px" data-4000="bottom:-50px" />
<img src="img/dorm-back.png" />
</section><!-- end section#bruinbash -->
<section id="volunteer" data-4000="bottom:-1000px" data-5000="bottom:0px">
<div class="story-text story-text-white" data-4000="top:15px" data-5000="top:50px">You boogied at Bruin Bash and got your hands dirty at Volunteer Day.</div>
<img src="img/bruinbash.jpg" />
</section><!-- end section#volunteer -->
<section id="bruinbash" data-5000="bottom:-1000px" data-6000="bottom:0px">
<img src="img/volunteer.jpg" />
</section><!-- end section#bruinbash -->
<section id="elections" data-6000="bottom:-1000px" data-7000="bottom:0px">
<div class="story-text story-text-white" data-6000="top:300px" data-7000="top:15px">You submitted your ballots, Barack Obama was re-elected as president and Proposition 30, Gov. Jerry Brown's tax initiative, passed.</div>
<!-- <img src="img/elections.jpg" id="elections-img" /> -->
<img src="img/elections-box.png" id="box-img" data-6000="top:100%" data-7000="top:50%"/>
<img src="img/elections-ballot.png" id="ballot-img" data-6000="top:0%" data-7000="top:34%" />
</section><!-- end section#elections -->
<section id="elections2" data-7000="bottom:-1000px" data-8000="bottom:0px">
<img src="img/elections.jpg" id="elections-img" />
</section><!-- end section#elections2 -->
<!-- source: http://www.uclabruins.com/facilities/new-pauley-faq.html 33 months, so almost 3 years -->
<section id="pauley" data-8000="bottom:-1000px" data-9000="bottom:0px">
<div class="story-text story-text-white" data-8000="top:600px" data-9000="top:15px">You watched the first Bruin basketball game in the newly-renovated Pauley Pavilion.</div>
<img src="img/pauley.jpg" />
</section><!-- end section#pauley -->
<!-- source: http://en.wikipedia.org/wiki/UCLA%E2%80%93USC_rivalry -->
<section id="football" data-9000="bottom:-1000px" data-10000="bottom:0px">
<div class="story-text story-text-white" data-9000="top:300px" data-10000="top:15px">Every Bruin remembers beating ‘SC for the first time in six years in 2012.</div>
<img src="img/football.jpg" />
</section><!-- end section#football -->
<!-- source: http://dailybruin.com/dance-marathon/ -->
<section id="dancemarathon" data-10000="bottom:-1000px" data-11000="bottom:0px">
<div class="story-text story-text-white" data-10000="top:500px" data-11000="top:15px">Students then danced for 26 hours straight at Dance Marathon in 2012 to raise $475,422.57 to combat pediatric AIDS.</div>
<img src="img/dancemarathon.jpg" />
</section><!-- end section#dancemarathon -->
<section id="undie" data-11000="bottom:-1000px" data-12000="bottom:0px">
<img src="img/undie-back.jpg" id="undie-back" />
<img src="img/undie-people.png" id="undie-people" data-11000="top:800px" data-12400="top:-10px" />
<div class="story-text story-text-white" data-11000="top:600px" data-12000="top:15px">At the end of the quarter, students relieved the stress of finals by stripping down to their bare basics for the Undie Run and screaming at the top of their lungs during midnight yell.</div>
</section><!-- end section#undie -->
<section id="usac" data-12000="bottom:-1000px" data-13000="bottom:0px">
<img src="img/usac.jpg" />
<div class="story-text story-text-white" data-12000="top:600px" data-13000="top:15px">After spring break, students elected their next USAC representatives.</div>
</section><!-- end section#usac -->
<section id="springsing" data-13000="bottom:-1000px" data-14000="bottom:0px">
<img src="img/springsing.jpg" />
<div class="story-text story-text-white" data-13000="top:600px" data-14000="top:30px">Then rocked Pauley Pavilion during Spring Sing.</div>
</section><!-- end section#springsing -->
<section id="jazz" data-14000="bottom:-1000px" data-15000="bottom:0px">
<img src="img/jazz.jpg" />
<div class="story-text" data-14000="top:600px" data-15000="top:30px">A few weeks later, students took over the Intramural Field for two days of music at the JazzReggae Festival.</div>
</section><!-- end section#jazz -->
<section id="fountain" data-15000="bottom:-1000px" data-16000="bottom:0px" data-16500="bottom:0px">
<img src="img/classroom-back.jpg" id="classroom-back" />
<img src="img/classroom-person.png" id="classroom-person" data-16000="top:0%" data-16500 = "top:100%" />
<img src="img/classroom-front.png" id="classroom-front" />
<div class="story-text story-text-white" data-15000="top:600px" data-16000="top:30px">And now you’re finishing up your last finals...</div>
</section><!-- end section#fountain -->
<section id="fountain2" data-16500="bottom:-1000px" data-17000="bottom:0px" data-18000="bottom:0px">
<img src="img/fountain-back.jpg" id="fountain-back" />
<img src="img/fountain-person.png" id="fountain-person" data-17000="top:-100%" data-18000 = "top:10%" />
<img src="img/fountain-front.png" id="fountain-front" />
<div class="story-text" data-16000="top:600px" data-17000="top:30px">... <span id="fountain-text">watching graduates</span> jump into the Inverted Fountain.</div>
</section><!-- end section#fountain2 -->
<section id="grad" data-18000="bottom:-1000px" data-19000="bottom:0px">
<img src="img/grad-back.jpg" id="grad-back" />
<img src="img/grad-caps.png" id="grad-caps" data-18800="top:0%" data-20000="top:-40%" />
<div class="story-text" data-18000="top:600px" data-19000="top:30px"><span id="graduate-text">Then, this weekend we’ll say farewell to the class of 2013.</span></div>
</section><!-- end section#grad -->
<section id="diploma" data-19000="bottom:-1000px" data-20000="bottom:0px" data-20300="bottom:0px">
<div id="diploma-img">
<img src="img/diploma.jpg" />
<div class="story-text" id="diploma-name" data-20000="opacity:0" data-20300="opacity:1">Joe Bruin</div>
</div><!-- end div#diploma-img -->
<div class="story-text" data-19000="top:600px" data-20000="top:30px" data-20300="top:-100px">... and hello to a diploma.</div>
</section><!-- end section#diploma -->
<section id="final" data-20000="bottom:-1000px" data-20300="bottom:100px; opacity:0" data-20400="opacity:1">
Congratulations
<span class="links"><a href="#">Daily Bruin Grad Issue 2013</a> • <a href="https://www.facebook.com/dialog/feed?
app_id=269701246422391&
link=http://graphics.dailybruin.com/year-in-the-life-2013/&
name=A%20Year%20in%20the%20Life%20of%20UCLA&
caption=INTERACTIVE:%202013%20at%20UCLA&
description=Explore%20the%20last%20year%20at%20UCLA%20through%20photos%20and%20illustrations%20customized%20to%20your%20year.&
redirect_uri=http://dailybruin.com/" target="_blank">Share this on Facebook</a>
<small>Web page by Byron Lutz, Bruin senior staff. Illustrations by Victoria Chang, Roxanne Hallbauer, Yangzi She, and Vivian Tong, Bruin staff.</small>
</section><!-- end section#final -->
<section id="final2" data-0="bottom:-1000px" data-19000="bottom:100px; opacity:0" data-19400="opacity:1">
<span class="links"><a href="#">Daily Bruin Grad Issue 2013</a> • <a href="https://www.facebook.com/dialog/feed?
app_id=269701246422391&
link=http://graphics.dailybruin.com/year-in-the-life-2013/&
name=A%20Year%20in%20the%20Life%20of%20UCLA&
caption=INTERACTIVE:%202013%20at%20UCLA&
description=Explore%20the%20last%20year%20at%20UCLA%20through%20photos%20and%20illustrations%20customized%20to%20your%20year.&
redirect_uri=http://dailybruin.com/" target="_blank">Share this on Facebook</a>
<small>Web page by Byron Lutz, Bruin senior staff. Illustrations by Victoria Chang, Roxanne Hallbauer, Yangzi She, and Vivian Tong, Bruin staff.</small>
</section><!-- end section#final2 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq=[['_setAccount','UA-28181852-14'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>