-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
338 lines (297 loc) · 12 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
328
329
330
331
332
333
334
335
336
337
338
<!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">
<title> A Filtered Generation | CATCH NYC </title>
<link rel="shortcut icon" href="img/afg-img/afg-icon.ico"/>
<!--JavaScript Links-->
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
<script src="bootFiles/js/bootstrap.min.js"></script>
<script src="gsap/src/minified/TweenMax.min.js" type="text/javascript"></script>
<script src="gsap/src/minified/plugins/CSSPlugin.min.js" type="text/javascript"></script>
<script src="gsap/src/minified/plugins/CSSRulePlugin.min.js" type="text/javascript"></script>
<script src="gsap/src/minified/easing/EasePack.min.js" type="text/javascript"></script>
<script src="scrollmagic/minified/ScrollMagic.min.js" type="text/javascript"></script>
<script src="scrollmagic/minified/plugins/animation.gsap.min.js" type="text/javascript"></script>
<script src="scrollmagic/minified/plugins/debug.addIndicators.min.js" type="text/javascript"></script>
<script src="afg-script.js" type="text/javascript"></script>
<!-- CSS Links -->
<link href="bootFiles/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="afg-style.css">
<style type="text/css">
.mil-quote:before {
position: absolute;
top: 0;
content: "";
height: 100%;
border: solid 2px lightgray;
}
.video-container:after {
position: absolute;
bottom: 15%;
right: 10%;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom right;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom right;
-o-transform: rotate(90deg);
-o-transform-origin: bottom right;
-ms-transform: rotate(90deg);
-ms-transform-origin: bottom right;
transform: rotate(90deg);
content: "VIDEO";
font-family: Gotham Narrow Bold;
color: white;
font-size: 25px;
}
.video-container:before {
position: absolute;
top: 10%;
right: 8.3%;
content: "";
height: 50%;
display: inline-block;
background-color: lightgray;
width: 2px;
}
#top-text:before {
content: "";
display: inline-block;
background-color: black;
width: 60%;
height: 3px;
}
#text-box2 p:before {
position: absolute;
bottom: 0;
left: 45%;
width: 250px;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(270deg);
-moz-transform-origin: bottom left;
-o-transform: rotate(270deg);
-o-transform-origin: bottom left;
-ms-transform: rotate(270deg);
-ms-transform-origin: bottom left;
transform: rotate(270deg);
transform-origin: bottom left;
content: "HOW DO YOU KNOW, \A IF YOU ARE MILLENNIALS";
font-family: Gotham Narrow Bold;
font-size: 20px;
text-align: left;
white-space: pre;
}
#text-box2 p:after {
position: absolute;
top: 0;
right: 0;
content: "";
background-color: black;
width: 3px;
height: 120%;
}
#text-box3:after {
position: absolute;
top: -35%;
left: 110%;
content: "";
display: inline-block;
background-color: black;
width: 3px;
height: 170%;
}
#text-box4:after {
position: absolute;
content: "";
display: inline-block;
background-color: black;
right: 0;
bottom: 25px;
width: 55%;
height: 3px;
}
#special-text:after {
position: absolute;
content: "";
display: inline-block;
background-color: black;
width: 45%;
height: 3px;
bottom: 0;
left: 0;
}
#text-box6:before {
position: absolute;
bottom: 0;
left: 0;
width: 170px;
height: 150px;
padding-top: 20px;
padding-left: 20px;
background-color: white;
content: "INFO \A GRAPHIC \A STAT \A ,";
font-family: Gotham Narrow Bold;
font-size: 22px;
text-align: left;
white-space: pre;
}
</style>
</head>
<body>
<div class="all-content">
<!-- This is the navigation bar
<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Example Webpage</a>
</div>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="img/new-york-landscape.jpg" target="_blank">New York Landscape</a>
</li>
</ul>
</div>
</div>
</nav>
-->
<section class="header-image">
<div class="header-content">
<p id="header-title">A Filtered Generation</p>
<img src="img/afg-img/catch-logo.png" id="catch-logo"> <br>
</div>
<img src="img/afg-img/scroll-img.gif" id="scroll">
</section> <!--top-->
<div class="content">
<section class="rockefeller-content">
<div class="quote-content">
<div class="mil-quote">
<!--
<div class="line" style="width:20px; display:inline-block; height:100%; background-color:yellow;"></div>
-->
<p>"I think Millennials are a generation unlike anything we’ve seen on this planet."</p>
<cite>Chelsea Krost</cite>
</div>
</div>
<div class="video-container">
<video id="vid1" controls>
<source src="sample-vid.mp4" type="video/mp4">
<p>
Your browser does not support HTML5 video.
</p>
</video>
</div>
</section>
<section class="article">
<div class="text">
<p id="top-text" style="font-size: 70px;">
<br> WHAT    ARE <br> MILLENNIALS?
</p>
</div>
<div class="text" id="text-box1">
<p>
Rule number one: don’t call them that to their face, they don't like that. They are proud, complex, misunderstood creatures that need to be handled with care. Or not. We don’t really know. What we do know, is that they come in an array of shapes and sizes. But deep down, they actually share a lot of the same values.
</p>
</div>
<div class="text" id="text-box2">
<p>
Trust me, <br>
you’d know. But statistically, you’re a Millennial if you were born anywhere between 1980 and 2000. They’re considered to be the most progressive and accepting generation up to date. With twenty percent have at least one immigrant parent, they’re also a lot more tolerant of races and sexual orientations than generations before them. One might call them the neo-beatniks of this era. Don’t tell that to their baby boomer parents though. These Millennials are balance seekers. Being the expert multitaskers they are, their career, social life, and wellness are properly managed. They are surprisingly health conscious. Whether they’re preaching to you about their paleo diet or texting their virtual doctor through that MD app about a bug bite, they’re on top of it. Taking care of yourself is very trendy now.
</p>
</div>
<div class="text" id="text-box3">
<p>
The big question on everyone’s mind is
</p>
<p class="title-text" style="font-size:25px;">
How to market to Millennials.
</p>
<p>
Actually, not everyone’s minds, just businesses’ minds. Not all of us want to learn how to connect with a Millennial. But if you’re trying to make some money, you may want to listen closely.
</p>
</div>
<div class="text" id="text-box4">
<p>
You need to speak the appropriate Millennial lingo to earn their trust. Memes and nostalgic references to the 90’s are good ways to start. They want to be individualized and catered to. Spotlighting their favorite fandom along with some celebrity musings is one way to earn a ticket into their mind (wallet). Serving it up on the right platform is key too. It’s important to have the right vehicle for the appropriate Millennial. Someone’s Facebook is someone else’s Snapchat and someone’s Instagram is someone else’s Twitter. Make sense? Doesn’t have to, just remember it.
</p>
</div>
<div class="text">
<p class="title-text" id="special-text" style="font-size:30px; padding: 20px 0 20px 40%;">
SPE <br> C <br> IAL <br> ,
</p>
</div>
<div class="text" id="text-box5">
<p>
Once you’ve caught their attention it’s important to know this: It’s all about access, not ownership. Commitment scares them. Not just in a dating sense, but if they can subscribe or opt in and out whenever they please, they’re for it. They know what they want and plan to get it. Preferably now because instant gratification is everything. Something in there has to stimulate their creativity too.
</p>
</div>
<div class="text" id="text-box6">
<p>
How-to videos? Yes. Life-hacks? More yes. Remember, shortcuts lead to instant gratification. And don’t forget to throw in an account for them to personalize, they want to feel special. But in the end, they just want to be related to. “How does this benefit me?” I don’t know, that’s just like, your opinion, man. “Do you think this will make me internet famous?” I sure hope so. “Should I buy this with my parents’ Amazon Prime account?” Yes.
</p>
</div>
</section>
<section class="infographic-content">
<div class="infographic">
<img src="img/afg-img/info-graphic.jpg" id="info-img">
</div>
</section>
<section class="quiz-content">
<div class="quiz-link">
What type <br> of Millenial <br> are you ?
<br> <span>Find out</span>
<a href="https://www.buzzfeed.com/hayeleycromwell/which-millennial-are-you-2i7d5" target="_blank">
here.
</a>
</div>
<div class="quiz">
<img src="img/afg-img/quiz-img.png" id="quiz-image">
</div>
</section>
</div> <!--content-->
<!--
<section class="bottom">
<div class="row">
<ul class="footerList">
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<h3>Header Title</h3>
<p>This is where the column body will go when needed to do so</p>
</li>
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<h3>Header Title</h3>
<p>This is where the column body will go when needed to do so</p>
</li>
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<h3>Header Title</h3>
<p>This is where the column body will go when needed to do so</p>
</li>
<li class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<h3>Header Title</h3>
<p>This is where the column body will go when needed to do so</p>
</li>
</ul>
</div>
<div class="hori-cont">
<div class="hori-line"></div>
</div>
<div class="footer-info">
<p>This website was proudly made by the Catch Interns</p>
<p>
This is a random email that I think does not work:
<a href="mailto:someone@example.com">someone@example.com</a>
</p>
</div>
</section>
-->
</div> <!--all-->
</body>
</html>