logo.1
30.3 KB
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
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>W3C HTML5 Logo</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/ico">
<link rel="stylesheet" href="css/default.css?123456">
<link rel="stylesheet" href="css/badgebuilder.css">
<script src="js/modernizr.js"></script>
</head>
<body id="top">
<div id="wrapper">
<div id="content">
<header id="main-header">
<h1>HTML5</h1>
<h2>Ready Now For The Future</h2>
</header>
<nav>
<img width="12" height="25" src="img/star-top.png" alt="HTML5 Navbar">
<h2 id="navhdr">NAV</h2>
<ul id="navmenu">
<li><a href="#the-logo" tabindex="1">An HTML5 Logo</a></li>
<li><a href="#the-technology" tabindex="2">The Technology</a></li>
<li><a href="#the-movement" tabindex="3">The Movement</a></li>
<li><a href="#downloads" tabindex="4">Downloads</a></li>
<li><a href="#swag" tabindex="5">Stuff!</a></li>
<li><a href="faq.html" tabindex="6">FAQ</a></li>
<li><a href="#top" tabindex="7">Back Up Top</a></li>
</ul>
<img width="12" height="29" class="star" src="img/star-bottom.png" alt="HTML5 Navbar">
</nav>
<div class="tag-bar">
<h2>Take Control — Your Web, Your Logo</h2>
</div>
<section id="the-logo">
<div id="the-logo-display"></div>
<div id="the-logo-description">
<h2>An HTML5 Logo</h2>
<p> It stands strong and true, resilient and universal as the markup you write. It shines as bright and as bold as the forward-thinking, dedicated web developers you are. It's the standard's standard, a pennant for progress. And it certainly doesn't use tables for layout.</p>
<p>We present an HTML5 logo.</p>
</div>
<aside id="use-logo" class="the-logo-aside">
<h3>Use The Logo</h3>
<p>You have HTML5 on the brain. Tell the world.</p>
<img width="252" height="38" src="img/badge-samples.png" alt="HTML5 Badge Samples">
<ul class="orange-links">
<li><a href="#badge-builder" id="bb-icon">Badge<br>Builder</a></li>
<li><a href="#downloads" id="dl-icon">HTML5 Logo<br>Downloads</a></li>
</ul>
</aside>
<aside id="wear-logo" class="the-logo-aside">
<h3>Show Some Love</h3>
<p>This HTML5 logo is licensed under Creative Commons Attribution 3.0 — all are free to use and reimagine as they see fit. Stickers and T-Shirts are available now; more stuff to come.</p>
<ul class="orange-links orange-right">
<li><a href="#swag" id="sticker-icon">HTML5<br>Stickers</a></li>
<li><a href="#swag" id="gear-icon">HTML5<br>Gear</a></li>
</ul>
</aside>
<aside id="follow-logo" class="the-logo-aside">
<h3>HTML5 in the Wild</h3>
<p>The HTML5 logo gallery (below) shows off community creativity. We invite you to submit your sightings, whether screen shots or movies or cupcakes.</p>
<ul class="orange-links orange-right">
<li><a href="#in-action" id="submit-icon">Submit A<br>Sighting</a></li>
<li><a href="#the-gallery" id="gallery-icon">Browse The<br>Gallery</a></li>
</ul>
</aside>
</section>
<section id="the-technology">
<div id="the-technology-top">
<div id="the-current-class">
<img width="495" height="370" src="img/class-header-semantics.jpg" id="semantics-header" alt="Semantics" title="Semantics">
<img width="495" height="370" style="opacity:0" src="img/class-header-offline.jpg" id="offline-storage-header" alt="Offline & Storage" title="Offline & Storage">
<img width="495" height="370" style="opacity:0" src="img/class-header-device.jpg" id="device-access-header" alt="Device Access" title="Device Access">
<img width="495" height="370" style="opacity:0" src="img/class-header-connectivity.jpg" id="connectivity-header" alt="Connectivity" title="Connectivity">
<img width="495" height="370" style="opacity:0" src="img/class-header-multimedia.jpg" id="multimedia-header" alt="Multimedias" title="Multimedia">
<img width="495" height="370" style="opacity:0" src="img/class-header-3d.jpg" id="threed-effects-header" alt="3D & Effects" title="3D & Effects">
<img width="495" height="370" style="opacity:0" src="img/class-header-performance.jpg" id="performance-integration-header" alt="Performance & Integration" title="Performance & Integration">
<img width="495" height="370" style="opacity:0" src="img/class-header-css3.jpg" id="css3-styling-header" alt="CSS3 & Styling" title="CSS3 & Styling">
</div>
<div id="the-technology-overview">
<h2>The Tech­nology</h2>
<p>Imagination, meet implementation. HTML5 is the cornerstone of the W3C's open web platform; a framework designed to support innovation and foster the full potential the web has to offer. Heralding this revolutionary collection of tools and standards, the HTML5 identity system provides the visual vocabulary to clearly classify and communicate our collective efforts.</p>
</div>
</div>
<div id="the-technology-bottom">
<div id="the-classes">
<ul>
<li><a href="#semantics-desc" class="active" id="semantics-icon" title="Semantics"><span></span></a></li>
<li><a href="#offline-storage-desc" id="offline-storage-icon" title="Offline & Storage"><span></span></a></li>
<li><a href="#device-access-desc" id="device-access-icon" title="Device Access"><span></span></a></li>
<li class="class-end"><a href="#connectivity-desc" id="connectivity-icon" title="Connectivity"><span></span></a></li>
<li><a href="#multimedia-desc" id="multimedia-icon" title="Multimedia"><span></span></a></li>
<li><a href="#threed-effects-desc" id="threed-effects-icon" title="3D & Effects"><span></span></a></li>
<li><a href="#performance-integration-desc" id="performance-integration-icon" title="Performance & Integration"><span></span></a></li>
<li class="class-end"><a href="#css3-styling-desc" id="css3-styling-icon" title="CSS3 & Styling"><span></span></a></li>
</ul>
</div>
<div class="class-description">
<div id="semantics-desc">
<div class="class-number-icon">~ 1 of 8 ~ <img width="20" height="20" src="img/tiny-semantics.png" alt="Semantics"></div>
<h2>Class: Semantics</h2>
<p>Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</p>
</div>
<div id="offline-storage-desc" style="opacity:0">
<div class="class-number-icon">~ 2 of 8 ~ <img width="20" height="20" src="img/tiny-offline-storage.png" alt="Offline & Storage"></div>
<h2>Class: Offline & Storage</h2>
<p>Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</p>
</div>
<div id="device-access-desc" style="opacity:0">
<div class="class-number-icon">~ 3 of 8 ~ <img width="20" height="20" src="img/tiny-device-access.png" alt="Device Access"></div>
<h2>Class: Device Access</h2>
<p>Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to microphones and cameras, to local data such as contacts & events, and even tilt orientation.</p>
</div>
<div id="connectivity-desc" style="opacity:0">
<div class="class-number-icon">~ 4 of 8 ~ <img width="20" height="20" src="img/tiny-connectivity.png" alt="Connectivity"></div>
<h2>Class: Connectivity</h2>
<p>More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.</p>
</div>
<div id="multimedia-desc" style="opacity:0">
<div class="class-number-icon">~ 5 of 8 ~ <img width="20" height="20" src="img/tiny-multimedia.png" alt="Multimedia"></div>
<h2>Class: Multimedia</h2>
<p>Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</p>
</div>
<div id="threed-effects-desc" style="opacity:0">
<div class="class-number-icon">~ 6 of 8 ~ <img width="20" height="20" src="img/tiny-3d-graphics-effects.png" alt="3D & Effects"></div>
<h2>Class: 3D, Graphics & Effects</h2>
<p>Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</p>
</div>
<div id="performance-integration-desc" style="opacity:0">
<div class="class-number-icon">~ 7 of 8 ~ <img width="20" height="20" src="img/tiny-performance-integration.png" alt="Performance & Integration"></div>
<h2>Class: Performance & Integration</h2>
<p>Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</p>
</div>
<div id="css3-styling-desc" style="opacity:0">
<div class="class-number-icon">~ 8 of 8 ~ <img width="20" height="20" src="img/tiny-css3.png" alt="CSS3"></div>
<h2>Class: CSS3</h2>
<p>CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far beyond anything the web has offered before.</p>
</div>
</div>
</div>
</section>
<section id="badge-builder">
<div id="badge-builder-content">
<h2 id="badge-builder-header">Badge Builder <strong>5000</strong></h2>
<p>You're seconds away from your own stunning, customized badge. Fire up the Badge Builder 5000.</p>
</div>
<form method="GET" action="scripts/badge_builder"> <!-- only used if no JavaScript -->
<div id="orientation">
<div id="orientation-content">
<h3>Orientation</h3>
<p>Sidebar or footer? Standing up or lying down?</p>
<fieldset class="badge-selector-classes">
<input type="radio" name="badge-orientation" id="badge-horizontal" value="horizontal" checked><label for="badge-horizontal">Horizontal</label>
<input type="radio" name="badge-orientation" id="badge-vertical" value="vertical"><label for="badge-vertical">Vertical</label>
<fieldset id="badge-selector-horizontal">
<div id="horizontal-badge" class="badges"></div>
</fieldset>
<fieldset id="badge-selector-vertical">
<div id="vertical-badge" class="badges"></div>
</fieldset>
</fieldset>
</div>
</div>
<div id="what-the-tech">
<h3>What the tech?</h3>
<p>Build a logo that shows off what you use.</p>
<fieldset class="badge-selector-classes">
<legend>HTML Technology Classes</legend>
<div id="toggles">
<ul>
<li><input type="checkbox" id="storage" name="storage" value="1"> <label for="storage">Offline & Storage</label></li>
<li><input type="checkbox" id="device" name="device" value="1"> <label for="device">Device Access</label></li>
<li><input type="checkbox" id="connectivity" name="connectivity" value="1"> <label for="connectivity">Connectivity / Realtime</label></li>
<li><input type="checkbox" id="performance" name="performance" value="1"> <label for="performance">Performance & Integration</label></li>
<li><input type="checkbox" id="multimedia" name="multimedia" value="1"> <label for="multimedia">Multimedia</label></li>
<li><input type="checkbox" id="semantics" name="semantics" value="1" checked> <label for="semantics">Semantics</label></li>
<li><input type="checkbox" id="graphics" name="graphics" value="1"> <label for="graphics">Graphics, 3D & Effects</label></li>
<li><input type="checkbox" id="css3" name="css3" value="1" checked> <label for="css3">CSS3 / Styling</label></li>
</ul>
</div>
</fieldset>
</div>
<div class="clear-left" id="badge-code-parent">
<input type="submit" id="badge-builder-submit" value="Fetch My Badge">
<script>
var badgeBuilderSubmit = document.getElementById('badge-builder-submit');
badgeBuilderSubmit.parentNode.removeChild(badgeBuilderSubmit);
var badgeCodeParent = document.getElementById('badge-code-parent');
var badgeCode = document.createElement('textarea');
badgeCode.id = 'badge-code';
badgeCode.setAttribute('readonly', 'readonly');
badgeCodeParent.appendChild(badgeCode);
</script>
</div>
<br class="cleared">
</form> <!-- only used if no JavaScript -->
</section>
<div class="tag-bar">
<h2>Build It And They Will Come</h2>
</div>
<section id="the-movement">
<section id="the-gallery">
<ul>
<li><a href="http://jsdo.it/" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/jsdoit_en.png" alt="jsdo.it" title="jsdo.it"></a></li>
<li class="gallery-even"><a href="http://www.beautyoftheweb.com" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/beautyoftheweb.jpg" alt="Beauty of the Web" title="Beauty of the Web"></a></li>
<li><a href="http://html5poster.com/" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/html5poster.png" alt="HTML5 Poster" title="HTML5 Poster"></a></li>
<li class="gallery-even"><a href="http://modernizr.com/" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/modernizr.jpg" alt="Modernizr" title="Modernizr"></a></li>
<li><a href="http://www.phonegap.com/" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/phonegap.png" alt="PhoneGap" title="PhoneGap"></a></li>
<li class="gallery-even"><a href="http://www.sfhtml5.org" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/sf-html5-meetup.png" alt="San Francisco HTML5 Meetup" title="San Francisco HTML5 Meetup"></a></li>
<li><a href="http://groups.google.com/group/html5-developers-jp" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/html5-developers-jp.png" alt="HTML5 Developers JP" title="HTML5 Developers JP"></a></li>
<li class="gallery-even"><a href="http://jolicloud.com/" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/jolicloud.jpg" alt="Jolicloud" title="Jolicloud"></a></li>
</ul>
</section>
<section id="the-movement-content">
<h2>The Movement</h2>
<p>You're excited about HTML5; we are too. You've not just been enjoying the HTML5-powered web already — you're building it! As adoption and inspiration spreads, the web community will find creative ways to apply HTML5 and related technologies, spark trends, and capture best practices. As momentum builds, we hope you bring this logo along for the ride and paint the world orange.</p>
<h2 id="in-action">A LOGO IN ACTION</h2>
<p>You know that HTML5 badge you've placed oh-so perfectly in your footer? That HTML5 T-shirt turning heads in the office? Those HTML5 stickers on your laptop and that HTML5 logo you shaved into your head? We want to see it! Show us your screenshots, photos, and other creative endeavors and they might end up right here in our HTML5ivers Gallery.</p>
<p>Tweet your HTML5 logo sightings with the hashtag <a href="http://twitter.com/#!/search/%23html5logo">#html5logo</a></p>
</section>
</section>
<section>
<div class="tag-bar">
<h2>Downloads</h2>
</div>
<section id="downloads">
<div id="downloads-content" class="clearfix">
<div id="download-mark-wordmark" class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/mark-word-icon.png" alt="Download the HTML5 Wordmark"></div>
<div>
<h3>Mark + Wordmark</h3>
<h4>SVG</h4>
<p><a href="downloads/HTML5_Logo.svg">Download</a></p>
<h4>PNG</h4>
<ul>
<li><a href="downloads/HTML5_Logo_512.png">512px</a></li>
<li><a href="downloads/HTML5_Logo_256.png">256px</a></li>
<li><a href="downloads/HTML5_Logo_128.png">128px</a></li>
<li><a href="downloads/HTML5_Logo_64.png">64px</a></li>
<li><a href="downloads/HTML5_Logo_32.png">32px</a></li>
</ul>
</div>
</div>
<div id="download-mark-only" class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/mark-only-icon.png" alt="Download the HTML5 Mark only."></div>
<div>
<h3>Mark Only</h3>
<h4>SVG</h4>
<p><a href="downloads/HTML5_Badge.svg">Download</a></p>
<h4>PNG</h4>
<ul>
<li><a href="downloads/HTML5_Badge_512.png">512px</a></li>
<li><a href="downloads/HTML5_Badge_256.png">256px</a></li>
<li><a href="downloads/HTML5_Badge_128.png">128px</a></li>
<li><a href="downloads/HTML5_Badge_64.png">64px</a></li>
<li><a href="downloads/HTML5_Badge_32.png">32px</a></li>
</ul>
</div>
</div>
<div class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/supporting-elements-icon.png" alt="Download the HTML5 Supporting Element Icons"></div>
<div>
<h3>Supporting Elements</h3>
<h4>SVG</h4>
<p><a href="downloads/HTML5_SupportingElements.svg">Download</a></p>
<h4>PNG</h4>
<ul>
<li><a href="downloads/HTML5_SupportingElements_512.png">Standard Size</a></li>
<li><a href="downloads/HTML5_SupportingElements.png">Tiny Size</a></li>
</ul>
</div>
</div>
<div class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/technology-classes-icon.png" alt="Download the HTML5 Technology Class Icons"></div>
<div>
<h3>Technology Classes</h3>
<h4>SVG Icon Set</h4>
<p><a href="downloads/HTML5_Tech_Classes_SVG.zip">Download</a></p>
<h4>PNG</h4>
<ul>
<li><a href="downloads/HTML5_Tech_Classes_512.zip">512px</a></li>
<li><a href="downloads/HTML5_Tech_Classes_256.zip">256px</a></li>
<li><a href="downloads/HTML5_Tech_Classes_128.zip">128px</a></li>
<li><a href="downloads/HTML5_Tech_Classes_64.zip">64px</a></li>
<li><a href="downloads/HTML5_Tech_Classes_32.zip">32px</a></li>
</ul>
</div>
</div>
<div class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/one-color.png" alt="Download the HTML5 One Color Logos"></div>
<div>
<h3>One Color Logos</h3>
<h4>SVG</h4>
<ul id="one-color-svg">
<li><a href="downloads/HTML5_1Color_Black.svg">Black</a></li>
<li><a href="downloads/HTML5_1Color_White.svg">White</a></li>
</ul>
<h4>PNG</h4>
<ul>
<li><a href="downloads/HTML5_1Color_Black.png">Black</a></li>
<li><a href="downloads/HTML5_1Color_White.png">White</a></li>
</ul>
</div>
</div>
<div class="download-item">
<div class="download-thumbnail"><img width="126" height="126" src="img/sticker-template.png" alt="Download the HTML5 Sticker Templates"></div>
<div>
<h3>Sticker Templates</h3>
<h4>SVG</h4>
<p><a href="downloads/HTML5_sticker.svg">Download</a></p>
<h4>PNG</h4>
<p><a href="downloads/HTML5_sticker.png">Standard Size</a></p>
</div>
</div>
</div>
</section>
</section>
<div class="tag-bar">
<h2>People Are Making Stuff!</h2>
</div>
<section id="swag">
<section id="free-stickers" class="swag">
<div>
<h3>Free Stickers!</h3>
<p>Send a Self-Addressed, Stamped Envelope and we'll send you three cool HTML5 stickers—just like that, free! Envelopes must be received by July 15, 2011.</p><img src="img/html5-stickers.png" alt="HTML5 Stickers" title="HTML5 Stickers" id="sticker-image" width="220" height="184">
<address>HTML5 Sticker<br>PO Box 615<br>Belmont, CA 94002-0615</address>
<p>Please send a No. 10 business envelope to accommodate all three stickers, see below for more details and international shipping.</p>
<footer>
Make sure to include enough postage to return a sticker pack via U.S. mail. It's less than one ounce, so a standard $0.44 stamp will do if you're in the United States; enclose an international reply coupon (IRC) if you're outside of the U.S. And be sure to send your envelope in soon -- one per person please.<br/>Your contact information won't be maintained in any way. Void where prohibited and only while supplies last. We just want to send you stickers.
</footer>
</div>
</section>
<section id="apparel" class="swag">
<div>
<h3>WEAR IT NOW FOR THE FUTURE</h3>
<p>A number of people are taking the HTML5 logo and emblazoning everything from t-shirts to pajamas. Here's a peek:</p>
<a href="http://html5shirt.com" id="shirt-link"><img src="img/html5-shirts.png" alt="HTML5 T-Shirts" title="HTML5 T-SHIRTS" id="shirt-image" width="443" height="214"></a>
<h3><a href="http://html5shirt.com">THE HTML5 SHIRT — BUY IT!</a></h3>
<p>Every Man, Woman and Child can show their HTML5 Pride! A portion of every sale is donated to the development of the <a href="http://www.w3.org/html/wiki/Testing">W3C HTML5 Test Suite</a>.</p>
</div>
</section>
</section>
<div class="divider">
</div>
<footer>
<section id="credits" class="outro">
<a href="http://www.w3.org/"><img src="img/footer_W3C_logo.png" id="footer-html5-logo" alt="W3C" width="114" height="61"></a>
<img src="img/footer-cc.png" alt="Creative Commons" width="88" height="32">
<p>Except where otherwise noted, content on this site is licensed under a Creative Commons<br><a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons Attribution 3.0 License">Attribution 3.0 License</a></p>
</section>
<section id="learn-more" class="outro">
<h3>Learn More</h3>
<ul>
<li><a href="http://www.w3.org/html/">Learn about HTML5</a></li>
<li><a href="http://www.w3.org/TR/html5/">The HTML5 Specification</a></li>
</ul>
</section>
<section id="join-the-movement" class="outro">
<h3><a href="faq.html">HTML5 Logo FAQ</a></h3>
<p><a href="faq.html">Get all of your HTML5 Logo questions answered</a></p>
<!-- <div id="join-form-box">
<form> <input name="q" placeholder="Email Address" id="join-q"> <input type="submit" value="Submit" id="join-submit"> </form>
</div> -->
</section>
<br class="cleared">
</footer>
</div>
</div>
<script src="js/jquery.1.4.4.min.js"></script>
<script src="js/badgebuilder.js"></script>
<script>
window.$j = window.$ = jQuery;
$.browser.old_ie = $.browser.msie && $.browser.version < 8;
var od = 'semantics';
function describe(nd) {
if (nd != od) {
$j("#" + nd + "-icon").addClass("active");
$j("#" + od + "-icon").removeClass("active");
$j("#" + od + "-desc, #" + od + "-header").hide();
if (!$j.browser.old_ie){
$j("#" + nd + "-desc, #" + nd + "-header").fadeIn();
}
od = nd;
}
return false;
}
var rotationDelay = 4000;
var rotationList = new Array();
var rotationIndex = 0;
var rotationIntervalId = null;
function rotate() {
++rotationIndex;
rotationIndex %= rotationList.length;
describe(rotationList[rotationIndex]);
}
function stopRotation() {
if (rotationIntervalId != null) {
clearInterval(rotationIntervalId);
rotationIntervalId = null;
}
}
function preFetchImages() {
var stickers = new Image();
stickers.src = 'img/free-stickers-orange-action.png';
var gear = new Image();
gear.src = 'img/gear-orange-action.png';
var badge = new Image();
badge.src = 'img/badge-builder-orange-action.png';
var downloads = new Image();
downloads.src = 'img/downloads-orange-action.png';
var submit = new Image();
submit.src = 'img/submit-icon-action.png';
var gallery = new Image();
gallery.src = 'img/gallery-icon-action.png';
}
$j(document).ready(function() {
preFetchImages();
$j('#the-classes a').click(function() {
describe(this.id.replace('-icon', ''));
stopRotation();
return false;
});
$j('#the-classes a').each(function(){
rotationList.push($j(this).attr("id").replace('-icon',''));
});
// rotationIntervalId = setInterval(rotate, rotationDelay);
var imgs = $j('#the-current-class img').slice(1);
$j('.class-description > div').slice(1).add(imgs).hide().css('opacity', '');
// jQuery SmoothScroll | Version 10-04-30
$('a[href*=#top], a[href*=#the-logo], a[href*=#the-technology], a[href*=#badge-builder], a[href*=#the-movement], a[href*=#downloads], a[href*=#swag], a[href*=#in-action], a[href*=#the-gallery]').click(function() {
// duration in ms
var duration=1000;
// easing values: swing | linear
var easing='swing';
// get / set parameters
var newHash=this.hash;
var target=$(this.hash).offset().top;
var oldLocation=window.location.href.replace(window.location.hash, '');
var newLocation=this;
// make sure it's the same location
if(oldLocation+newHash==newLocation)
{
// set selector
if($.browser.safari) var animationSelector='body:not(:animated)';
else var animationSelector='html:not(:animated)';
// animate to target and set the hash to the window.location after the animation
$(animationSelector).animate({ scrollTop: target }, duration, easing, function() {
// add new hash to the browser location
window.location.href=newLocation;
});
// cancel default click action
return false;
}
});
var galleries = [
{"url":"http://jsdo.it/","image":"jsdoit_en.png","title":"jsdo.it"},
{"url":"http://almaer.com/blog/","image":"almaer.png","title":"techno.blog("Dion")"},
{"url":"http://apparat.io/","image":"apparat.png","title":"apparat.io"},
{"url":"http://www.beautyoftheweb.com/","image":"beautyoftheweb.jpg","title":"Beauty of the Web"},
{"url":"http://people.opera.com/danield/html5/html5logo/","image":"canvas-html5-logo.png","title":"HTML5 logo in HTML5"},
{"url":"http://groups.google.com/group/html5-developers-jp","image":"html5-developers-jp.png","title":"HTML5 Developers JP"},
{"url":"http://html5.jp/","image":"html5-jp.png","title":"HTML5.jp"},
{"url":"http://html5boilerplate.com/","image":"html5boilerplate.png","title":"HTML5 Boilerplate"},
{"url":"http://html5demos.com/","image":"html5demos.png","title":"HTML5 Demos and Examples"},
{"url":"http://html5games.com/","image":"html5games.jpg","title":"HTML5 Games.com"},
{"url":"http://sleekdesignstudio.com/html5poster/","image":"html5poster.png","title":"HTML5 Poster"},
{"url":"http://html5rocks.com/","image":"html5rocks.jpg","title":"HTML5Rocks"},
{"url":"http://ie.microsoft.com/testdrive/","image":"internet-explorer-test-drive.jpg","title":"Internet Explorer Test Drive"},
{"url":"http://www.jolicloud.com/","image":"jolicloud.jpg","title":"Jolicloud"},
{"url":"http://www.modernizr.com/","image":"modernizr.jpg","title":"Modernizr"},
{"url":"http://www.phonegap.com/","image":"phonegap.png","title":"PhoneGap"},
{"url":"http://prohtml5.com/","image":"pro-html5-com.jpg","title":"Pro HTML5 Programming"},
{"url":"http://www.sencha.com/products/touch/","image":"sencha-touch.jpg","title":"Sencha Touch"},
{"url":"http://www.sencha.com/","image":"sencha.png","title":"Sencha"},
{"url":"http://www.sfhtml5.org/","image":"sf-html5-meetup.png","title":"San Francisco HTML5 Meetup"},
{"url":"http://www.sproutcore.com/","image":"sproutcore.jpg","title":"Sproutcore"},
{"url":"http://youtube.com/html5/","image":"youtube-html5.jpg","title":"Youtube HTML5"}
];
for (var r, j, i = galleries.length; i > 0;) {
j = Math.floor(Math.random() * i--);
r = galleries[i];
galleries[i] = galleries[j];
galleries[j] = r;
}
$('#the-gallery li').each(function(i, e) {
var tpl = '<a href="##url##" rel="nofollow" class="galleryLink"><img width="242" height="172" src="img/gallery/##image##" alt="##title##" title="##title##"></a>';
tpl = tpl.replace(/##url##/g, galleries[i].url)
.replace(/##image##/g, galleries[i].image)
.replace(/##title##/g, galleries[i].title);
var li = $('<li/>');
if (i % 2) li.addClass('gallery-even');
$(e).replaceWith(li.html(tpl));
});
window.preloadBadges && preloadBadges();
});
</script>
</body>
</html>