Skip to content

Commit bfe3281

Browse files
jpalayjpalay
committed
Changed some stuff
1 parent 2fb6e62 commit bfe3281

File tree

6 files changed

+125
-6
lines changed

6 files changed

+125
-6
lines changed

‎fonts.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@font-face {
2+
font-family: Bebas;
3+
src: url('fonts/Bebas.ttf');
4+
}

‎fonts/Bebas.ttf

35.9 KB
Binary file not shown.

‎img/john.png

356 KB
Loading

‎index.html

+34-3
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,49 @@
33
<head>
44
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
55
<script src="typing.js"></script>
6-
6+
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Lato:700|Quattrocento&subset=latin,latin-ext'>
7+
<link rel="stylesheet" href="fonts.css">
78
<link rel="stylesheet" href="style.css">
89
</head>
910
<body>
10-
<div id="cover">
11-
<div id="logo" class="type-target"><span class="text"></span></div>
11+
<div id="logo" class="intro type-target"><span class="text"></span></div>
12+
<div class="intro">
1213
<div id="cursor" class="type-target"><span class="text"></span></div>
1314
<div id="headline" class="type-target"><span class="text"></span></div>
1415
<div id="byline" class="type-target"><span class="text"></span></div>
1516
</div>
1617
<div id="binary-pane">
1718
<div id="binary-text"></div>
1819
</div>
20+
<div id="content">
21+
<div id="top" class="white"></div>
22+
<div id="john-row">
23+
<div id="left" class="white"></div>
24+
<img id="statue" src="img/john.png">
25+
<div id="right" class="white"></div>
26+
</div>
27+
<div id="article" class="white">
28+
<h1 class="bebas">Hacking Harvard</h1>
29+
<p class="byline bebas">BY SAM WEINSTOCK AND DEV PATEL</p>
30+
<div id="article-contents">
31+
<p> Proident quinoa ethnic, assumenda organic nulla artisan nesciunt fap flannel butcher. Hashtag cray commodo art party. Sustainable fugiat hashtag, assumenda kogi +1 fingerstache kale chips ex Portland. Scenester Vice lo-fi ut, 8-bit American Apparel veniam vegan. Disrupt non 90's meh. Sustainable pug tousled elit. Aesthetic excepteur deep v consectetur, leggings Thundercats Carles reprehenderit ethical ullamco yr fanny pack. </p>
32+
<p> Bespoke seitan laboris vegan stumptown adipisicing, pour-over VHS fap scenester plaid. Beard occupy Godard, DIY odio Austin fugiat messenger bag dolor enim mustache Schlitz cillum sapiente skateboard. Fap pop-up Thundercats, next level try-hard polaroid bitters paleo forage. Duis Shoreditch pariatur leggings photo booth cardigan, nisi id selvage 90's banjo. Enim mustache four loko tote bag YOLO mlkshk. Ea street art pop-up letterpress paleo. Wolf dolor quinoa, brunch velit Williamsburg iPhone quis ethical salvia. </p>
33+
<p> Intelligentsia fingerstache kitsch stumptown chambray. Literally dreamcatcher Truffaut, meh Etsy asymmetrical pop-up Odd Future blog disrupt occaecat id anim est. Cred ut gentrify, tofu lomo aute ea sriracha drinking vinegar 8-bit labore. Tempor anim post-ironic fashion axe roof party viral. Aesthetic vinyl selfies messenger bag. Culpa selfies sustainable, mumblecore art party 3 wolf moon odio aute ut ethical banjo. Mollit tote bag culpa velit bicycle rights, +1 consectetur laboris veniam street art disrupt retro officia. </p>
34+
<p> Paleo messenger bag ad Carles ea, ethnic drinking vinegar Williamsburg you probably haven't heard of them exercitation. Sed in skateboard ullamco Helvetica, cardigan polaroid lomo. Fanny pack exercitation ennui, small batch odio hashtag magna actually mixtape. Twee wolf squid blog mollit aliquip. Narwhal bitters deep v Terry Richardson, nihil skateboard disrupt enim gluten-free VHS nulla chambray Pinterest. Retro cupidatat synth, accusamus magna ugh skateboard tote bag eiusmod Wes Anderson fixie nulla paleo. Fashion axe eu literally minim culpa meh kale chips, PBR&B mlkshk sustainable tattooed beard chambray qui messenger bag. </p>
35+
<p> Proident quinoa ethnic, assumenda organic nulla artisan nesciunt fap flannel butcher. Hashtag cray commodo art party. Sustainable fugiat hashtag, assumenda kogi +1 fingerstache kale chips ex Portland. Scenester Vice lo-fi ut, 8-bit American Apparel veniam vegan. Disrupt non 90's meh. Sustainable pug tousled elit. Aesthetic excepteur deep v consectetur, leggings Thundercats Carles reprehenderit ethical ullamco yr fanny pack. </p>
36+
<p> Proident quinoa ethnic, assumenda organic nulla artisan nesciunt fap flannel butcher. Hashtag cray commodo art party. Sustainable fugiat hashtag, assumenda kogi +1 fingerstache kale chips ex Portland. Scenester Vice lo-fi ut, 8-bit American Apparel veniam vegan. Disrupt non 90's meh. Sustainable pug tousled elit. Aesthetic excepteur deep v consectetur, leggings Thundercats Carles reprehenderit ethical ullamco yr fanny pack. </p>
37+
<p> Proident quinoa ethnic, assumenda organic nulla artisan nesciunt fap flannel butcher. Hashtag cray commodo art party. Sustainable fugiat hashtag, assumenda kogi +1 fingerstache kale chips ex Portland. Scenester Vice lo-fi ut, 8-bit American Apparel veniam vegan. Disrupt non 90's meh. Sustainable pug tousled elit. Aesthetic excepteur deep v consectetur, leggings Thundercats Carles reprehenderit ethical ullamco yr fanny pack. </p>
38+
<p> Bespoke seitan laboris vegan stumptown adipisicing, pour-over VHS fap scenester plaid. Beard occupy Godard, DIY odio Austin fugiat messenger bag dolor enim mustache Schlitz cillum sapiente skateboard. Fap pop-up Thundercats, next level try-hard polaroid bitters paleo forage. Duis Shoreditch pariatur leggings photo booth cardigan, nisi id selvage 90's banjo. Enim mustache four loko tote bag YOLO mlkshk. Ea street art pop-up letterpress paleo. Wolf dolor quinoa, brunch velit Williamsburg iPhone quis ethical salvia. </p>
39+
<p> Intelligentsia fingerstache kitsch stumptown chambray. Literally dreamcatcher Truffaut, meh Etsy asymmetrical pop-up Odd Future blog disrupt occaecat id anim est. Cred ut gentrify, tofu lomo aute ea sriracha drinking vinegar 8-bit labore. Tempor anim post-ironic fashion axe roof party viral. Aesthetic vinyl selfies messenger bag. Culpa selfies sustainable, mumblecore art party 3 wolf moon odio aute ut ethical banjo. Mollit tote bag culpa velit bicycle rights, +1 consectetur laboris veniam street art disrupt retro officia. </p>
40+
<p> Paleo messenger bag ad Carles ea, ethnic drinking vinegar Williamsburg you probably haven't heard of them exercitation. Sed in skateboard ullamco Helvetica, cardigan polaroid lomo. Fanny pack exercitation ennui, small batch odio hashtag magna actually mixtape. Twee wolf squid blog mollit aliquip. Narwhal bitters deep v Terry Richardson, nihil skateboard disrupt enim gluten-free VHS nulla chambray Pinterest. Retro cupidatat synth, accusamus magna ugh skateboard tote bag eiusmod Wes Anderson fixie nulla paleo. Fashion axe eu literally minim culpa meh kale chips, PBR&B mlkshk sustainable tattooed beard chambray qui messenger bag. </p>
41+
<p> Bespoke seitan laboris vegan stumptown adipisicing, pour-over VHS fap scenester plaid. Beard occupy Godard, DIY odio Austin fugiat messenger bag dolor enim mustache Schlitz cillum sapiente skateboard. Fap pop-up Thundercats, next level try-hard polaroid bitters paleo forage. Duis Shoreditch pariatur leggings photo booth cardigan, nisi id selvage 90's banjo. Enim mustache four loko tote bag YOLO mlkshk. Ea street art pop-up letterpress paleo. Wolf dolor quinoa, brunch velit Williamsburg iPhone quis ethical salvia. </p>
42+
<p> Intelligentsia fingerstache kitsch stumptown chambray. Literally dreamcatcher Truffaut, meh Etsy asymmetrical pop-up Odd Future blog disrupt occaecat id anim est. Cred ut gentrify, tofu lomo aute ea sriracha drinking vinegar 8-bit labore. Tempor anim post-ironic fashion axe roof party viral. Aesthetic vinyl selfies messenger bag. Culpa selfies sustainable, mumblecore art party 3 wolf moon odio aute ut ethical banjo. Mollit tote bag culpa velit bicycle rights, +1 consectetur laboris veniam street art disrupt retro officia. </p>
43+
<p> Paleo messenger bag ad Carles ea, ethnic drinking vinegar Williamsburg you probably haven't heard of them exercitation. Sed in skateboard ullamco Helvetica, cardigan polaroid lomo. Fanny pack exercitation ennui, small batch odio hashtag magna actually mixtape. Twee wolf squid blog mollit aliquip. Narwhal bitters deep v Terry Richardson, nihil skateboard disrupt enim gluten-free VHS nulla chambray Pinterest. Retro cupidatat synth, accusamus magna ugh skateboard tote bag eiusmod Wes Anderson fixie nulla paleo. Fashion axe eu literally minim culpa meh kale chips, PBR&B mlkshk sustainable tattooed beard chambray qui messenger bag. </p>
44+
<p> Bespoke seitan laboris vegan stumptown adipisicing, pour-over VHS fap scenester plaid. Beard occupy Godard, DIY odio Austin fugiat messenger bag dolor enim mustache Schlitz cillum sapiente skateboard. Fap pop-up Thundercats, next level try-hard polaroid bitters paleo forage. Duis Shoreditch pariatur leggings photo booth cardigan, nisi id selvage 90's banjo. Enim mustache four loko tote bag YOLO mlkshk. Ea street art pop-up letterpress paleo. Wolf dolor quinoa, brunch velit Williamsburg iPhone quis ethical salvia. </p>
45+
<p> Intelligentsia fingerstache kitsch stumptown chambray. Literally dreamcatcher Truffaut, meh Etsy asymmetrical pop-up Odd Future blog disrupt occaecat id anim est. Cred ut gentrify, tofu lomo aute ea sriracha drinking vinegar 8-bit labore. Tempor anim post-ironic fashion axe roof party viral. Aesthetic vinyl selfies messenger bag. Culpa selfies sustainable, mumblecore art party 3 wolf moon odio aute ut ethical banjo. Mollit tote bag culpa velit bicycle rights, +1 consectetur laboris veniam street art disrupt retro officia. </p>
46+
<p> Paleo messenger bag ad Carles ea, ethnic drinking vinegar Williamsburg you probably haven't heard of them exercitation. Sed in skateboard ullamco Helvetica, cardigan polaroid lomo. Fanny pack exercitation ennui, small batch odio hashtag magna actually mixtape. Twee wolf squid blog mollit aliquip. Narwhal bitters deep v Terry Richardson, nihil skateboard disrupt enim gluten-free VHS nulla chambray Pinterest. Retro cupidatat synth, accusamus magna ugh skateboard tote bag eiusmod Wes Anderson fixie nulla paleo. Fashion axe eu literally minim culpa meh kale chips, PBR&B mlkshk sustainable tattooed beard chambray qui messenger bag. </p>
47+
</div>
48+
</div>
49+
</div>
1950
</body>
2051
</html>

‎style.css

+81-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,12 @@ body {
66
height: 100%%;
77
}
88

9-
#cover {
9+
.bebas {
10+
font-family: "Bebas";
11+
word-spacing: 0.2em;
12+
}
13+
14+
.intro {
1015
width: 100%;
1116
height: 100%;
1217
font-family: Courier;
@@ -18,7 +23,10 @@ body {
1823
}
1924

2025
#logo {
21-
display: inline-block;
26+
position: relative;
27+
padding: 7px 0;
28+
background-color: black;
29+
z-index: 10;
2230
}
2331

2432
#headline {
@@ -38,7 +46,7 @@ body {
3846
}
3947

4048
#binary-pane {
41-
position: absolute;
49+
position: fixed;
4250
z-index: -1;
4351
background-color: black;
4452
width: 100%;
@@ -59,6 +67,76 @@ body {
5967
line-height: 1.3em;
6068
}
6169

70+
.white {
71+
background-color: white;
72+
}
73+
74+
#content {
75+
position: absolute;
76+
top: 0;
77+
left: 0;
78+
right: 0;
79+
display: none;
80+
}
81+
82+
#top {
83+
height: 100px;
84+
}
85+
86+
#left {
87+
position: absolute;
88+
left: 0;
89+
top: 0;
90+
bottom: 0;
91+
width: 37.5%;
92+
}
93+
94+
#john-row {
95+
position: relative;
96+
text-align: center;
97+
}
98+
99+
#statue {
100+
width: 25%;
101+
/* margin-left: 36%; */
102+
margin-bottom: -4px;
103+
}
104+
105+
#right {
106+
position: absolute;
107+
right: 0;
108+
top: 0;
109+
bottom: 0;
110+
width: 37.5%;
111+
}
112+
113+
#article {
114+
min-height: 700px;
115+
padding-bottom: 100px;
116+
}
117+
118+
#article h1 {
119+
margin-top: 0;
120+
margin-bottom: 5px;
121+
font-size: 4em;
122+
text-align: center;
123+
}
124+
125+
#article .byline {
126+
text-align: center;
127+
}
128+
129+
#article-contents {
130+
font-family: 'Quattrocento', sans-serif;
131+
max-width: 800px;
132+
margin: 40px auto 0;
133+
font-size: 18px;
134+
}
135+
136+
#article-contents p:last-child {
137+
margin-bottom: 0;
138+
}
139+
62140
.blink {
63141
animation-name: blinker;
64142
animation-duration: 1s;

‎typing.js

+6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
var $cursor = $('<span />').html('&#9608;').addClass('blink cursor');
22

33
$(document).ready(function() {
4+
var $statue = $('#statue');
45
typeString($('#logo'), 'THE HARVARD CRIMSON', 0, 100, $cursor, type_headline);
56
});
67

78
function empty($cursor) {
89
setInterval(scroll_binary, 50);
10+
setTimeout(function() {
11+
$('#content').fadeIn();
12+
$('#headline').fadeOut();
13+
$('#byline').fadeOut();
14+
}, 1800);
915
}
1016

1117
function type_byline($cursor) {

0 commit comments

Comments
 (0)