<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5</title>
<link rel="stylesheet" href="html5.css" />
<style type="text/css">
body{
background-color:#ccc;
font-family:geneva,arital,helvetica,sans-serif;
margin:0 auto;
max-width:900px;
border:1px solid #fff;
}
header{
background-color:#f47d31;
display:block;
color:#fff;
text-align:center;
}
header h2{
margin:0
}
h1{
font-size:72px;
margin:0
}
h2{
font-size:24px;
margin:0;
text-align:center;
color:#f47d31;
}
h3{
font-size:18px;
margin:0;
text-align:center;
color:#f47d31;
}
h4{
text-align:center;
color:#f47d31;
background-color:#fff;
-webkit-box-shadow:2px 2px 20px #888;
-moz-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
position:absolute;
padding:0 150px;
top:50px;
left:-120px;
}
nav{
display:block;
width:25%;
float:left;
}
nav a:link,nav a:visited{
display:block;
border-bottom:3px solid #fff;
padding:10px;
text-decoration:none;
font-weight:bold;
margin:5px;
}
nav a:hover{
color:white;
background-color:#f47d31;
}
nav h3{
margin:15px;
color:white;
}
#container{
background-color:#888;
}
section{
display:block;
width:50%;
float:left
}
article{
background-color:#eee;
display:block;
margin:10px;
padding:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:2px 2px 20px #888;
-moz-box-shadow:2px 2px 20px #888;
-webkit-transform:rotate(-10deg);
-moz-transform:rotate(-10deg);
}
article header{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px
}
article footer{
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
padding:5px
}
article h1{
font-size:18px
}
aside{
display:block;
width:25%;
float:left;
}
aside h3{
margin:15px;
color:white;
}
aside p{
margin:15px;
color:#fff;
font-weight:bold;
font-style:italic;
}
footer{
clear:both;
display:block;
background-color:#f47d31;
color:#fff;
text-align:center;
padding:15px
}
footer h2{
font-size:14px;
color:#fff;
}
/* links */
a{
color:#f47d31;
}
a:hover{
text-decoration:underline;
}
</style>
</head>
<body>
<header>
<h1>header</h1>
<h2>Subtitle</h2>
<h4>HTML5 Rocks</h4>
</header>
<div id="container">
<nav>
<h3>Nav</h3>
<a href="http://www.example.com">Link 1</a>
<a href="http://www.example.com">Link 2</a>
<a href="http://www.example.com">Link 3</a>
</nav>
<section>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc </p>
<p>Per Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc </p>
<footer>
<h2>article footer</h2>
</footer>
</article>
<article>
<header>
<h1>Article Header</h1>
</header>
<p>HTML5:"Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc </p>
<p>Per Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc Lorem ipsum dolor html5 nunc </p>
<footer>
<h2>article footer</h2>
</footer>
</article>
</section>
<aside>
<h3>Aside</h3>
<p>HTML5:"Lorem ipsum dolor numc aut nunLorem ipsum dolor numc aut nunLorem ipsum dolor numc aut nun"</p>
</aside>
<footer>
<h2>Footer</h2>
</footer>
</div>
</body>
</html>
