Pertemuan 5 - Pemrograman Web
Sasmita Wiropati - 5053231016 - RPL - PWEB (M) - GitHub Hosting
Website Menu Makanan
Pertemuan kelima ini, kami diminta untuk membuat sebuah website yang menampung informasi menu dari suatu rumah makan serta informasi-informasi pendukung lainnya. Hasil website yang saya buat memiliki penampilan seperti ini:
 |
| Snapshot Hasil |
Berikut merupakan source code dari website di atas:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Warung</title>
<style>
body{
display: grid;
grid-template-columns: 1fr 0.4fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"section aside"
"footer footer";
margin: 0;
padding: 0;
font-family: Georgia, 'Times New Roman', Times, serif;
}
header{
grid-area: header;
color: white;
background-color: rgb(80, 80, 255);
}
header h1{
margin-left: 20px;
}
header nav{
background-color: rgb(100, 100, 255);
}
header nav ul{
padding: 0;
list-style: none;
display: inline-flex;
overflow: hidden;
}
header nav ul li{
margin-left: 20px;
}
header a{
color: white;
text-decoration: none;
}
header a:hover{
color: black;
}
section, aside{
padding: 10px;
}
section{
grid-area: section;
margin-top: 20px;
margin-bottom: 20px;
}
.nama-menu{
font-size: 32px;
color: mediumblue
}
.jenis-menu{
font-size: 24px;
color: palevioletred;
}
aside{
grid-area: aside;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}
.menu-populer h4{
color: palevioletred;
}
.kontak-container{
margin-bottom: 10px;
}
.kontak-container img{
margin-right: 10px;
}
footer{
grid-area: footer;
background-color: rgb(80, 80, 255);
}
footer h3{
color: white;
margin-left: 20px;
}
</style>
</head>
<body>
<header>
<h1>Warteg Lokal ITS</h1>
<nav><ul>
<li><a href="">Beranda</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Tentang</a></li>
<li><a href="">Kontak</a></li>
</ul></nav>
</header>
<section>
<article>
<table cellpadding="10">
<tr>
<td class="img-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYrKE_tv1PLnuqjZdZPqeTqFAgd-4UjrfB9w&s" width="300px"><br>
<label>Soto Ayam</label>
</td>
<td class="menu-label">
<label class="nama-menu">Soto Ayam</label><br>
<label class="jenis-menu">Menu Berkuah</label><br><br>
<label class="desc-menu">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, dicta quos. Porro nostrum optio, delectus, accusantium quod, sapiente ipsum odio enim modi minima non perferendis dicta commodi sint iusto officia!</label>
</td>
</tr>
</table>
</article>
<article>
<table cellpadding="10">
<tr>
<td class="img-container">
<img src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhkDAa5oMviTFEV_ICDYK1UVcgp8AyRwwTocCwFiPkrAYwg4Tw32tiZc2msdmy7kKlHTHPLtweTrRSxctDCovPMaeD84jMAEBKEaSCbokBu2DOcyGTxF19gDuj6Rw-dRNTB3D60NgAy0NjwvennPxrLxj-E0Pcat4mmPTOq1yIb3EPtEX1jVfrscRpT2NjsJ6nNCqJZbW8kMSGQ7TN5e39zDGIjrpTqJBDx8m7MqXW7WxQux_GkbGUicAQ=" width="300px"><br>
<label>Nasi Goreng</label>
</td>
<td class="menu-label">
<label class="nama-menu">Nasi Goreng</label><br>
<label class="jenis-menu">Menu Original</label><br><br>
<label class="desc-menu">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, dicta quos. Porro nostrum optio, delectus, accusantium quod, sapiente ipsum odio enim modi minima non perferendis dicta commodi sint iusto officia!</label>
</td>
</tr>
</table>
</article>
<article>
<table cellpadding="10">
<tr>
<td class="img-container">
<img src="https://img-global.cpcdn.com/recipes/1a7edf68dac82948/1200x630cq70/photo.jpg" width="300px"><br>
<label>Sate Ayam</label>
</td>
<td class="menu-label">
<label class="nama-menu">Sate Ayam</label><br>
<label class="jenis-menu">Menu Khas</label><br><br>
<label class="desc-menu">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, dicta quos. Porro nostrum optio, delectus, accusantium quod, sapiente ipsum odio enim modi minima non perferendis dicta commodi sint iusto officia!</label>
</td>
</tr>
</table>
</article>
</section>
<aside>
<div class="menu-populer">
<h2>Menu Populer</h2>
<h4>Soto Ayam</h4>
<h4>Nasi Goreng</h4>
<h4>Sate Ayam</h4>
</div>
<div class="kontak">
<h3>Kontak</h3>
<div class="kontak-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4vtphMtxRWfK6nO2CIbGfSETyEs79Dr6oPw&s" width="20px">
<a href="">warteg.lokal.its@gmail.com</a>
</div>
<div class="kontak-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Instagram_logo_2022.svg/600px-Instagram_logo_2022.svg.png" width="20px">
<a href="">@warteg.lokal.its</a>
</div>
<div class="kontak-container">
<img src="https://static.vecteezy.com/system/resources/thumbnails/023/986/480/small_2x/youtube-logo-youtube-logo-transparent-youtube-icon-transparent-free-free-png.png" width="20px">
<a href="">Warteg ITS</a>
</div>
<div class="kontak-container">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTapo-FVNZWXtIBUOfsY3PIfs7kr1KfD7R47Q&s" width="20px">
<a href="">@warteg_ITS</a>
</div>
</div>
</aside>
<footer>
<h3>Visit now</h3>
</footer>
</body>
</html>
Comments
Post a Comment