-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
207 lines (181 loc) · 12.3 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
<!doctype html>
<html class="no-js" lang="en" manifest="cache.manifest">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="css/screen.css?v=1.0">
<script src="js/modernizr-1.7.min.js"></script>
</head>
<body class="hyphenate">
<header>
<hgroup>
<h1><span>The </span><a href="index.html">HTML5 <img src="images/logo.png" alt=""> Herald</a></h1>
<h2>Produced with That Good ol' Timey HTML5 & CSS3</h2>
</hgroup>
<nav>
<ul>
<li><a href="#top">Home</a></li>
<li><a href="register.html">Sign Up</a></li>
</ul>
</nav>
<p id="volume">Vol. MMXI</p>
<p id="issue"><time datetime="1904-06-04" pubdate>June 4, 1904</time></p>
</header>
<div id="main">
<div id="primary">
<article id="ac1">
<div id="video-container">
<video width="373" height="280" preload id="video" poster="images/ford-plane-still.png" controls>
<!-- MP4 must be first for iPad! -->
<source src="media/ford-plane-takes-off.mp4" type="video/mp4"><!-- Safari / iOS video -->
<source src="media/ford-plane-takes-off.ogv" type="video/ogg"><!-- Firefox / Opera / Chrome10 -->
<!-- fallback to Flash: -->
<object width="373" height="280" type="application/x-shockwave-flash" data="jwplayer/player.swf">
<!-- Firefox uses the 'data' attribute above, IE/Safari uses the param below -->
<param name="movie" value="jwplayer/player.swf" >
<param name="allowFullScreen" value="true" >
<param name="wmode" value="transparent" >
<param name="flashvars" value="controlbar=over&image=images/ford-plane-still.png&file=../media/ford-plane-takes-off.mp4">
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="images/ford-plane-still.png" id="video-still" width="373" height="280" alt="Airplane" title="No video playback capabilities, please download the video below">
</object>
</video>
<canvas id="canvasOverlay" width="373" height="280"></canvas>
<div id="controls" class="hidden">
<div id="playPause" class="paused" tabindex="1">Play/Pause</div>
<div id="timer">00:00</div>
<div id="muteUnmute" class="unmuted" tabindex="2">Mute/Unmute</div>
</div><!-- #controls -->
</div> <!-- /#video-container -->
<h1>Video is the final frontier, and now we have conquered it!</h1>
<div class="content">
<p>Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla.</p>
<p>In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.</p>
<p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
</div>
</article>
<article>
<h1>Great Things Are Possible with CSS Columns! Pip Pip Pip!</h1>
<div class="content">
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
<p>Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
</div>
</article>
</div>
<div id="secondary">
<article id="ac2">
<hgroup>
<h1>Text Shadow is the New Black</h1>
<h2>How do we do it?</h2>
</hgroup>
<div class="content">
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
</div>
</article>
<article id="ac3">
<hgroup>
<h1>Wai-Aria? HAHA!</h1>
<h2 id="catHeading">Form Accessibility</h2>
</hgroup>
<img src="images/cat.png" id="cat" alt="WAI-ARIA Cat">
<div class="content">
<p id="mouseContainer">
<img src="images/computer-mouse-pic.png" width="30" alt="mouse treat" id="mouse1" draggable="true">
<img src="images/computer-mouse-pic.png" width="30" alt="mouse treat" id="mouse2" draggable="true">
<img src="images/computer-mouse-pic.png" width="30" alt="mouse treat" id="mouse3" draggable="true">
</p>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.</p>
<p>Nam vestibulum, arcu sodales feugiat.</p>
</div>
</article>
<article id="ac4">
<hgroup>
<h1>Modernizr Times</h1>
<h2>A New Era</h2>
</hgroup>
<div class="content">
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. </p>
</div>
</article>
</div>
<div id="tertiary">
<aside>
<article id="ad1">
<h1>Wanted</h1>
<p>Dead or Alive</p>
<a href="http://sitepoint.com/books/htmlcss1/" class="wanted"><HTML5> & {CSS3}</a>
<p>Reward: Happiness and satisfaction</p>
</article>
<article id="ad3">
<h1>Put your <span>dukes</span> up sire</h1>
<p>It’s time for a good old thrashing.<br>
I will rotate your moustache OFF!</p>
</article>
<article id="ad2">
<h1><a href="http://sitepoint.com/books/htmlcss1/">HTML5 and CSS3 <br/>Now in Book Form!</a></h1>
</article>
<article id="ad4">
<div id="mapDiv">
<h1 id="geoHeading">Where in the world are you?</h1>
<form id="geoForm">
<input type="button" id="geobutton" value="Tell us!">
</form>
<div id="spinner"></div>
</div>
</article>
</aside>
<article id="ac5">
<hgroup>
<h1>CSS Transitions - The State of Play</h1>
<h2>The future?</h2>
</hgroup>
<div class="content">
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum.</p>
<p>Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.</p>
<p>Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
<p>Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at. vestibulum. Nulla at.</p>
</div>
</article>
</div>
</div><!-- #main -->
<footer>
<section id="authors">
<section><h1>Alexis Goldstein</h1>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
</section>
<section><h1>Louis Lazaris</h1>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
</section>
<section>
<h1>Estelle Weyl</h1>
<p>Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh.</p>
</section>
</section>
<section id="footerinfo">
<small>© SitePoint </small>
<p><a href="https://www.sitepoint.com/"><img src="images/logo-sp.png" alt="SitePoint" width="70" height="23"></a></p>
</section>
</footer>
<script src="js/hyphenator.js"></script>
<script src="js/raphael-min.js"></script>
<!-- jQuery version might not be the latest; check jquery.com -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/jquery-1.5.2.min.js"%3E%3C/script%3E'))</script>
<!-- <script src="js/geolocation.js"></script> -->
<script src="js/videoControls.js"></script>
<script src="js/dragDrop.js"></script>
<script src="js/geolocation.js"></script>
<script src="js/videoToBW.js"></script>
<!-- google maps API -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
</body>
</html>