zhensolid
/
Python-100-Days


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
							<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Layout</title>
		<style type="text/css">
			header,
			section,
			footer,
			aside,
			nav,
			article,
			figure,
			figcaption {
				display: block;
			}

			body {
				color: #666666;
				background-color: #f9f8f6;
				background-image: url("images/dark-wood.jpg");
				background-position: center;
				font-family: Georgia, Times, serif;
				line-height: 1.4em;
				margin: 0px;
			}

			.wrapper {
				width: 940px;
				margin: 20px auto 20px auto;
				border: 2px solid #000000;
				background-color: #ffffff;
			}

			header {
				height: 160px;
				background-image: url(images/header.jpg);
			}

			h1 {
				text-indent: -9999px;
				width: 940px;
				height: 130px;
				margin: 0px;
			}

			nav,
			footer {
				clear: both;
				color: #ffffff;
				background-color: #aeaca8;
				height: 30px;
			}

			nav ul {
				margin: 0px;
				padding: 5px 0px 5px 30px;
			}

			nav li {
				display: inline;
				margin-right: 40px;
			}

			nav li a {
				color: #ffffff;
			}

			nav li a:hover,
			nav li a.current {
				color: #000000;
			}

			section.courses {
				float: left;
				width: 659px;
				border-right: 1px solid #eeeeee;
			}

			article {
				clear: both;
				overflow: auto;
				width: 100%;
			}

			hgroup {
				margin-top: 40px;
			}

			figure {
				float: left;
				width: 290px;
				height: 220px;
				padding: 5px;
				margin: 20px;
				border: 1px solid #eeeeee;
			}

			figcaption {
				font-size: 90%;
				text-align: left;
			}

			aside {
				width: 230px;
				float: left;
				padding: 0px 0px 0px 20px;
			}

			aside section a {
				display: block;
				padding: 10px;
				border-bottom: 1px solid #eeeeee;
			}

			aside section a:hover {
				color: #985d6a;
				background-color: #efefef;
			}

			a {
				color: #de6581;
				text-decoration: none;
			}

			h1,
			h2,
			h3 {
				font-weight: normal;
			}

			h2 {
				margin: 10px 0px 5px 0px;
				padding: 0px;
			}

			h3 {
				margin: 0px 0px 10px 0px;
				color: #de6581;
			}

			aside h2 {
				padding: 30px 0px 10px 0px;
				color: #de6581;
			}

			footer {
				font-size: 80%;
				padding: 7px 0px 0px 20px;
			}
		</style>
		<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="wrapper">
			<header>
				<h1>Yoko's Kitchen</h1>
				<nav>
					<ul>
						<li><a href="" class="current">home</a></li>
						<li><a href="">classes</a></li>
						<li><a href="">catering</a></li>
						<li><a href="">about</a></li>
						<li><a href="">contact</a></li>
					</ul>
				</nav>
			</header>
			<section class="courses">
				<article>
					<figure>
						<img src="images/bok-choi.jpg" alt="Bok Choi" />
						<figcaption>Bok Choi</figcaption>
					</figure>
					<hgroup>
						<h2>Japanese Vegetarian</h2>
						<h3>Five week course in London</h3>
					</hgroup>
					<p>
						A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle
						dishes.
					</p>
				</article>
				<article>
					<figure>
						<img src="images/teriyaki.jpg" alt="Teriyaki sauce">
						<figcaption>Teriyaki Sauce</figcaption>
					</figure>
					<hgroup>
						<h2>Sauces Masterclass</h2>
						<h3>One day workshop</h3>
					</hgroup>
					<p>
						An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese
						cookery.
					</p>
				</article>
			</section>
			<aside>
				<section class="popular-recipes">
					<h2>Popular Recipes</h2>
					<a href="">Yakitori (grilled chicken)</a>
					<a href="">Tsukune (minced chicken patties)</a>
					<a href="">Okonomiyaki (savory pancakes)</a>
					<a href="">Mizutaki (chicken stew)</a>
				</section>
				<section class="contact-details">
					<h2>Contact</h2>
					<p>
						Yoko's Kitchen<br>
						27 Redchurch Street<br>
						Shoreditch<br>
						London E2 7DP
					</p>
				</section>
			</aside>
			<footer>
				&copy; 2011 Yoko's Kitchen
			</footer>
		</div>
	</body>
</html>