<!DOCTYPE html>
<html>
<head>
<title>Web Warung Tegal</title>
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("http://www.nyekrip.com/wp-content/uploads/2015/custom/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(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png);}
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;
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<title>Web Warung Tegal</title>
5
<style type="text/css">
6
header, section, footer, aside, nav, article, figure, figcaption {
7
display: block;}
8
body {
9
color: #666666;
10
background-color: #f9f8f6;
11
background-image: url("http://www.nyekrip.com/wp-content/uploads/2015/custom/images/dark-wood.jpg");
12
background-position: center;
13
font-family: Georgia, Times, serif;
14
line-height: 1.4em;
15
margin: 0px;}
16
.wrapper {
17
width: 940px;
18
margin: 20px auto 20px auto;
19
border: 2px solid #000000;
20
background-color: #ffffff;}
21
header {
22
height: 160px;
23
background-image: url(http://www.nyekrip.com/wp-content/uploads/2015/custom/images/header.png);}
24
h1 {
25
text-indent: -9999px;
26
width: 940px;
27
height: 130px;
28
margin: 0px;}
29
nav, footer {
30
clear: both;
31
color: #ffffff;
32
background-color: #aeaca8;
33
height: 30px;}
34
nav ul {
35
margin: 0px;
36
padding: 5px 0px 5px 30px;}
37
nav li {
38
display: inline;
39
margin-right: 40px;}
40
nav li a {
41
color: #ffffff;}
42
nav li a:hover, nav li a.current {
43
color: #000000;}
44
section.courses {
45
float: left;
46
width: 659px;
47
border-right: 1px solid #eeeeee;}
48
article {
49
clear: both;
50
overflow: auto;
51
width: 100%;}
52
hgroup {
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>Warung Tegal</h1>
<nav>
<ul>
<li><a href="http://localhost" class="current">beranda</a></li>
<li><a href="http://localhost">daftar masakan</a></li>
<li><a href="http://localhost">katering</a></li>
<li><a href="http://localhost">tentang</a></li>
<li><a href="http://localhost">kontak</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="http://www.nyekrip.com/wp-content/uploads/2015/custom/images/soto.jpg" alt="soto" />
<figcaption>Soto Indonesia</figcaption>
</figure>
<hgroup>
<h2>Soto Ayam</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto ayam adalah makanan khas Indonesia yang berupa sejenis sup ayam dengan kuah yang berwarna kekuningan.</p>
</article>
<article>
<figure>
<img src="http://www.nyekrip.com/wp-content/uploads/2015/custom/images/pecel.jpg" alt="pecel" />
<figcaption>Pecel Indonesia</figcaption>
</figure>
<hgroup>
<h2>Masakan Pecel</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Pecel adalah makanan yang menggunakan bumbu sambal kacang sebagai bahan utamanya yang dicampur dengan aneka jenis sayuran.</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="http://localhost">Sayur Sop</a>
<a href="http://localhost">Sayur Asem</a>
<a href="http://localhost">Sayur Lodeh</a>
<a href="http://localhost">Sayur Bayam</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Warung Tegal<br />
di seluruh indonesia
</section>
</aside>
<footer>
© 2015 Warung Tegal
</footer>
</div><!-- .wrapper -->
</body>
</html>
