Skip to content

Instantly share code, notes, and snippets.

@marcric

marcric/html5sample.html

Created May 1, 2010 22:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcric/386724 to your computer and use it in GitHub Desktop.
Save marcric/386724 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
html5sample.html
<!DOCTYPE html> <!-- HTML5 Doctype -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" id="marcric.com">
<head>
<title>MarcRic's One day Conference</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="copyright" content="Copyright (c) 2010 Marcos Ricardo. All Rights Reserved.">
<meta name="author" content="Marcos Ricardo">
<style type="text/css">
/* Use your own HTML reset option */
* {
margin: 0;
padding: 0;
}
/* HTML5 reset */
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
display:block;
}
nav ul {
list-style:none;
}
mark {
background-color:#ff9;
color:#fff;
font-style:italic;
font-weight:bold;
}
/* Your style goes here */
article, aside, footer, header, nav, section {
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
}
body {
font: normal 16px/20px Georgia, Palatino, "Palatino Linotype", Times, Times New Roman, serif;
padding: 10px 10px 10px 10px;
margin: 10px 10px 10px 10px;
background: #EFEAE2;
}
h1 { font-size: 1.6em; margin: 5px 5px 5px 0px;}
h2 { font-size: 1.4em; margin: 5px 5px 5px 4px;}
h3 { font-size: 1.2em; margin: 5px 5px 5px 8px;}
img {
float:left;
margin: 0px 0px 0px 0px;
padding: 5px 5px 5px 5px;
border: 2px solid pink;
}
header {
float: left;
padding: 15px 5px 15px 10px;
width: 97%;
min-width: 960px;
text-align:center;
border: 2px dashed green;
}
article {
float: left;
width: 60%;
min-width: 600px;
border: 2px dashed red;
}
article img {
width: 70px;
height: 70px;
}
aside {
font-size: 14px;
float: right;
width: 30%;
min-width: 305px;
min-height: 100%;
border: 2px dashed aqua;
}
aside img {
width: 80px;
height: 40px;
}
section {
float:left;
border: 2px dashed #B33C00;
}
footer {
width: 97%;
min-width: 960px;
padding: 15px 5px 15px 10px;
font-size: 15px;
text-align:center;
font-variant: small-caps;
clear: both;
color: #696763;
border: 2px dashed blue;
}
footer img {
width: 60px;
height: 15px;
}
</style>
<!-- Just to give MSIE a minimum HTML5 support -->
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('nav');
document.createElement('article');
</script>
<![endif]-->
</head>
<body>
<header>
<p><a title="MarRic's conference sample page"
href="http://www.marcric.com/">MarRic's</a>
one day Conference <time datetime="2010-10-10T09:00"> - October 10th, 2010</time>
<a href="http://www.marcric.com/">
Buy a ticket now</a> - One day conference for just $999.99</p>
</header>
<article>
<h1><strong>MarRic's</strong> <small>(<em>Conference</em>)</small>:</h1>
<p>I will talk about everything you ever wanted to know. <small><a
href="http://www.marcric.com/">more</a></small></p>
<h2>Speakers</h2>
<section>
<img title="Photograph by None" src="http://www.public.marcric.com/img/no-image.png" alt="None">
<h3><a href="http://www.marcric.com/">MarcRic</a> - <em>9.25am</em></h3>
<p>Justo semper Ut non aeonian torture parturient:
<em>Consecrate justo Parking he aran groovy Vestibulum</em>.</p>
<div>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
</div>
<p><a href="http://www.marcric.com/"><span>More</span> about MarcRic</a></p>
<p><a href="http://www.marcric.com/">MarcRic's talk</a></p>
<p><a href="http://www.marcric.com/">MarcRic's slides</a></p>
</section>
<section>
<img title="Photograph by None" src="http://www.public.marcric.com/img/no-image.png" alt="None">
<h3><a href="http://www.marcric.com/">MarcRic</a> - <em>10.25am</em></h3>
<p>Justo semper Ut non aeonian torture parturient:
<em>Consecrate justo Parking he aran groovy Vestibulum</em>.</p>
<div>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
<p>Wac cursus cursus eric due venenating. Quis maoris adipsia allogamy crepitus alarums.
Vestibulum id montes aeonian uric cursus veil spine. Auctor veal aliquot phratry eat ye.
Nub tincture aeonian quis mousy id.</p>
</div>
<p><a href="http://www.marcric.com/"><span>More</span> about MarcRic</a></p>
<p><a href="http://www.marcric.com/">MarcRic's talk</a></p>
<p><a href="http://www.marcric.com/">MarcRic's slides</a></p>
</section>
</article>
<aside>
<section>
<h3>Twitter Feed</h3>
<p>Nub <a href="http://twitter.com/marcric">@marcric</a> at
<a href="http://twitter.com/marcric">@marcric</a> cursus
<a href="http://twitter.com/marcric">@marcric</a>, fames
<a href="http://twitter.com/marcric">@marcric</a>, pede
<a href="http://twitter.com/marcric">@marcric</a> &amp; ante
<a href="http://twitter.com/marcric">@marcric</a> ultrafiche
<a href="http://twitter.com/marcric">@marcric</a> Parking
<a href="http://twitter.com/marcric">@marcric</a> on
Twitter</p>
</section>
<section>
<h3>Partners</h3>
<a href="http://www.marcric.com/"><img alt="none"
src="http://www.public.marcric.com/img/no-image.png"></a>
<a href="http://www.marcric.com/"><img alt="none"
src="http://www.public.marcric.com/img/no-image.png"></a>
<a href="http://www.marcric.com/"><img alt="none"
src="http://www.public.marcric.com/img/no-image.png"></a>
<a href="http://www.marcric.com/"><img alt="none"
src="http://www.public.marcric.com/img/no-image.png"></a>
<p>Could you be a sponsor for MarcRic's Conference?
<a href="http://www.marcric.com/"><br>Get in touch</a>
Yes You Can!</p>
</section>
<section>
<h3>Where</h3>
<p><span class="location">Yuppy Palace of conferences, <br>
Virtual Community Circus, Brownout Park, A1L Z4G</span>.</p>
<h3>When</h3>
<p><time datetime="2010-10-10T09:25">
<abbr title="2010-10-10T09:25Z">09:25am</abbr> -
<abbr title="2010-10-10T11:25Z">11:25am</abbr> 10<sup>th</sup> October, 2010</time></p>
<h3>Tags</h3>
<p>The event tag will be:
<a href="http://www.marcric.com/">#marcricsconference</a></p>
<h3>Contact</h3>
<p>Conference organizers <a href="http://www.marcric.com/">MarcRic</a></p>
<p>All enquiries: <a href="http://www.marcric.com/">email</a></p>
</section>
<section>
<h3>How to get there</h3>
<a href="http://www.marcric.com/"><img alt="none"
src="http://www.public.marcric.com/img/no-image.png"></a>
</section>
</aside>
<footer>
<p><a href="http://www.marcric.com/"><img src="http://www.public.marcric.com/img/no-image.png"
alt="none"></a> MarcRic's one day Conference organized by
<a href="http://www.marcric.com/">MarcRic</a> |
<a href="http://www.marcric.com/">Terms &amp; Conditions</a></p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment