You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
550 lines
30 KiB
550 lines
30 KiB
<!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>
|