Tugas 3 Website Warung Tegal
oleh Hana Machmudah
Pada tugas 3 Pemograman Web kali ini, saya membuat website profil warung makan, yaitu "Warung Tegal". Dalam website saya hanya menggunakan HTML dan CSS. Untuk website Warung Tegal sendiri terbagi menjadi header, body dan footer.
Dalam header terdapat judul website dan navbar (menu-menu dalam website), terdapat Beranda, Daftar Menu, Katering, Tentang, dan Kontak. Pada tugas kali ini saya hanya menampilkan detail dari isi menu Beranda.
Kemudian dalam body dibagi menjadi section dan aside. Untuk section akan berisi bebrapa article yang berisi daftar dan detail setiap makanan yang terdapat dalam Warung Tegal. Dalam article terdapat 2 bagian yaitu figure dari setiap dan hgroup. figure untuk kotak yang berisi gambar dan nama setiap makanan. hgroup berisi detail makanan-makanan tersebut. Pada kolom aside dibagi menjadi 2 section. section pertama berisi daftar menu makanan ang populer. dan section kedua berisi kontak dan video youtube.
Pada bagian footer hanya berisi copyright.
Penampilan website seperti berikut:
Untuk programmnya sendiri, terdapat 2 file. File HTML untuk program utama dan CSS untuk design website.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Warung Tegal</title>
<style type="text/css"></style>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header>
<h1><strong>Warung Tegal<br><br> Masakan Nusantara </strong></h1>
<nav>
<ul>
<li><a href="" class="current">Beranda</a></li>
<li><a href="">Daftar Menu</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="img/sotoayam.png" alt="Soto"/>
<figcaption>Soto Lamongan</figcaption>
</figure>
<hgroup>
<h2>Soto Ayam</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Soto Lamongan adalah makanan khas Indonesia yang
berasal dari kota Lamongan di Jawa Timur.
Makanan ini berupa sup ayam dengan kuah yang berwarna kuning</p>
</article>
<article>
<figure>
<img src="img/pecel.png">
<figcaption>Pecel</figcaption>
</figure>
<hgroup>
<h2>Makanan 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>
<article>
<figure>
<img src="img/sop.png">
<figcaption>Sayur Sop</figcaption>
</figure>
<hgroup>
<h2>Sayur Sop</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Sayur Sop adalah makanan berkuah dengan sayur-sayur
sebagai isinya dan bakso atau telur puyuh sebagai pelengkap</p>
</article>
<article>
<figure>
<img src="img/rendang.png">
<figcaption>Rendang</figcaption>
</figure>
<hgroup>
<h2>Makanan Rendang</h2>
<h3>Makanan kaya rempah-rempah</h3>
</hgroup>
<p>Rendang adalah makanan khas Padang, Sumatera.
Makanan ini bisanya juga sebagai pelengkap dari masakan Padang</p>
</article>
<article>
<figure>
<img src="img/geprek.png">
<figcaption>Ayam Geprek</figcaption>
</figure>
<hgroup>
<h2>Makanan Ayam Geprek</h2>
<h3>Makanan dengan Sambal Korek</h3>
</hgroup>
<p>Ayam Geprek adalah makanan ayam yang dibaluri
dengan sambal korek yang sangat pedas</p>
</article>
<article>
<figure>
<img src="img/lodeh.png">
<figcaption>Sayur Lodeh</figcaption>
</figure>
<hgroup>
<h2>Makanan Sayur Lodeh</h2>
<h3>Makanan Berkuah</h3>
</hgroup>
<p>Sayur Lodeh adalah makanan bekuah yang bersantan
dengan daging sapi sebagai pelengkap</p>
</article>
</section>
<aside>
<section class="popular-recipes">
<h2>Masakan Populer</h2><a href="">Sayur Sop</a>
<a href="">Rendang</a>
<a href="">Ayam Geprek</a>
<a href="">Sayur Lodeh</a>
</section>
<section class="contact-details">
<h2>Kontak</h2>
<p>Warung Tegal <br> Di seluruh Indonesia</p>
<iframe width="180" height="150"
src="https://www.youtube.com/embed/TDegUdg5cYA"
title="YouTube video player"
frameborder="0"
allow="accelerometer;
autoplay;
clipboard-write;
encrypted-media;
gyroscope;
picture-in-picture"
allowfullscreen></iframe>
</section>
</aside>
<footer>
© 2021 warung tegal
</footer>
</div>
</body>
</html>
style.css
header, section, footer, aside, nav, article, figure, figcaption {
display: block;
}
body {
color: #66666666;
background-color: #f9f8f6;
background-image: url(img/bg.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: 210px;
background-image: url(img/header.png);
}
h1 {
width: 940px;
height: 130px;
margin: 0px;
color: white;
text-align: center;
padding-top: 50px;
}
nav, footer {
clear: both;
color: #fffffff;
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: #ffffffff;
}
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: 200px;
height: 220px;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
figcaption {
font-size: 90%;
text-align: left;
color: darkgrey;
}
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;
color: black;
}
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;
color: black;
background-color: chocolate;
}
Komentar
Posting Komentar