Nama : Muh. Nur Fajrin Amiruddin
NRP : 05111940000005
Tahun : 2021
Berikut tampilan website warung tegal yang telah saya buat :
Berikut untuk source code :
<!DOCTYPE html>
<html>
<head>
<title>Website Warung Tegal</title>
<link rel="icon" href="images/warteg.png" type="image/png">
<style type="text/css">
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/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.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;
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: #de6581;
}
section.courses {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 30px;
}
figure {
float: left;
width: 265px;
height: 220px;
padding: 5px;
margin: 20px;
border: 2px solid #eeeeee;
border-radius: 15px 15px 15px 1px;
}
img{
border-radius: 15px;
width: 265px;
height: 190px;
}
button.btn{
color: #de6581;
font-family: serif;
font-size: 95%;
height: 40px;
border-radius: 5px;
border-color: #eeeeee;
cursor: pointer;
}
figcaption {
font-size: 95%;
text-align: center;
}
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: 20px 0px 0px 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>Warung Tegal</h1>
<nav>
<ul>
<li><a href="#" class="current">Beranda</a></li>
<li><a href="#">Daftar Masakan</a></li>
<li><a href="#">Katering</a></li>
<li><a href="#">Tentang</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</header>
<section class="courses">
<article>
<figure>
<img src="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>
<button class="btn" type="button" href="#">Lihat Selengkapnya...</button>
</article>
<article>
<figure>
<img src="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>
<button class="btn" type="button" href="#">Lihat Selengkapnya...</button>
</article>
<article>
<figure>
<img src="images/sate.jpg" alt="sate"/>
<figcaption>Sate Indonesia</figcaption>
</figure>
<hgroup>
<h2>Sate Ayam</h2>
<h3>Makanan dengan Bumbu Kacang</h3>
</hgroup>
<p>Sate Ayam adalah makanan khas Indonesia yang berupa potongan daging ayam dan diolah
dengan cara dibakar.</p>
<button class="btn" type="button" href="#">Lihat Selengkapnya...</button>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2>
<a href="#">Sayur Lodeh</a>
<a href="#">Sayur Sop</a>
<a href="#">Sayur Asem</a>
<a href="#">Sayur Bayam</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Warung Tegal<br />
di seluruh Indonesia
</section>
</aside>
<footer>
© 2021 Warung Tegal Indonesia
</footer>
</div>
</body>
</html>
Komentar
Posting Komentar