Pertemuan 5 PWEB - Membuat Menu Restoran
Nama : Kadek Fajar Pramartha Yasodana
NRP : 5025231185
Kelas : PWEB E
Membuat Web Menu Oemah B'tutu
Pada tugas kali ini, kita melakukan latihan menggunakan fitur html5 seperti fitur sematics. Contohnya adalah element <footer> <header> <nav> dan lain lainnya. Disini saya membuat sebuah website yang berisi menu sebuah restaurant bertema balinese, dan juga contactnya.
Link Code : GitHub
Link Hositing Website : Vercel
Foto Website
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../normalize.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<header>
<h1>
Oemah B'tutu
</h1>
</header>
<nav>
<div>
<h3 onclick="document.getElementById('home').scrollIntoView()">Home</h3>
</div>
<div>
<h3 onclick="document.getElementById('menu').scrollIntoView()">Menu</h3>
</div>
</nav>
<main>
<div id="home" class="home">
<img src="./cover.jpg" style="width: 100%;">
<div>
<h1>
B'tutu
</h1>
<p>
"Betutu is a traditional Balinese dish made from chicken or duck that is marinated with a rich blend of spices, wrapped in banana leaves, and slow-cooked until tender. The dish is known for its flavorful and aromatic taste, making it a favorite among locals and tourists alike. Betutu is often served with rice and a variety of Balinese side dishes"
</p>
<button class="button-main" onclick="document.getElementById('menu').scrollIntoView()">
Menu
</button>
</div>
</div>
<div id="menu" class="menu">
<section>
<h2>
Menu
</h2>
<div>
<div class="item-container black-text-normalize">
<h3>
B'tutu
</h3>
<img src="./b'tutu.jpeg">
<p>
Betutu is a traditional Balinese dish made from chicken or duck that is seasoned and marinated with a rich blend of spices. The meat is then wrapped in banana leaves and slow-cooked until tender. This dish is known for its aromatic flavors and is often served during special occasions and ceremonies in Bali. The spices used typically include turmeric, ginger, garlic, shallots, and chili, giving the dish a distinctive and flavorful taste.
</p>
<button class="button-secondary">
$9.99
</button>
</div>
<div class="item-container black-text-normalize">
<h3>
Lawar
</h3>
<img src="./lawar.jpg">
<p>
Lawar is a traditional Balinese dish that consists of finely chopped meat, vegetables, grated coconut, and a rich blend of spices. It is often made with pork or chicken, but variations with other meats or even vegetarian versions exist. The dish is known for its complex flavors, combining the freshness of the vegetables with the richness of the meat and the aromatic spices. Lawar is typically served during Balinese ceremonies and festive occasions, and it is enjoyed for its unique taste and cultural significance. The spices used in Lawar often include turmeric, galangal, kaffir lime leaves, and chili, which contribute to its distinctive and flavorful profile.
</p>
<button class="button-secondary">
$12.99
</button>
</div>
<div class="item-container black-text-normalize">
<h3>
Avocado Toast
</h3>
<img src="./avocadotoast.jpg">
<p>
Avocado Toast with Balinese Style is a fusion dish that combines the creamy texture of ripe avocados with the vibrant flavors of Balinese cuisine. The toast is topped with mashed avocado, seasoned with a blend of traditional Balinese spices such as turmeric, ginger, and chili. It is then garnished with fresh herbs and a sprinkle of grated coconut, adding a tropical twist to the classic avocado toast. This dish offers a unique combination of smooth avocado and aromatic spices, making it a delightful and flavorful breakfast or snack option.
</p>
<button class="button-secondary">
$12.99
</button>
</div>
<div class="item-container black-text-normalize">
<h3>
Laklak
</h3>
<img src="./laklak.jpeg">
<p>
Laklak is a traditional Balinese dessert made from rice flour and coconut milk, often colored with natural dyes from pandan leaves or other ingredients. These small, round cakes are typically steamed and served with grated coconut and a drizzle of palm sugar syrup. Laklak is known for its soft, chewy texture and sweet, aromatic flavor, making it a popular treat during Balinese ceremonies and festivals. The combination of the rich coconut and the sweet palm sugar creates a delightful balance of flavors that is both satisfying and unique.
</p>
<button class="button-secondary">
$3.99
</button>
</div>
</div>
</section>
<aside>
<div>
<h2>
Best Seller
</h2>
<div style="margin-top: 12px;">
<div class="best-seller-container">
Avocado Toast
</div>
<div class="best-seller-container">
B'tutu
</div>
</div>
</div>
<div>
<h2>
Contact
</h2>
<ul>
<li>
<strong>Address:</strong> 123 Balinese Street, Bali, Indonesia
</li>
<li>
<strong>Phone:</strong> +62 123 456 789
</li>
<li>
<strong>Email:</strong> contact@balinesecuisine.com
</li>
<li>
<strong>Opening Hours:</strong> Mon-Sun: 8:00 AM - 10:00 PM
</li>
</ul>
</div>
</aside>
</div>
</main>
<footer>
<h3>
© 2023 Kadek Fajar Pramartha Yasodana. Mock Project.
</h3>
<p>
Some images used are downloaded from internet image resources and are subject to their respective copyrights.
</p>
</footer>
</body>
</html>
Penjelasan
- Header : Elemen <header> digunakan untuk mendefinisikan bagian header dari sebuah dokumen atau bagian dari dokumen. Header biasanya berisi judul, logo, atau informasi pengantar lainnya.
- Nav : Elemen <nav> digunakan untuk mendefinisikan bagian navigasi dari sebuah dokumen. Ini biasanya berisi tautan ke bagian lain dari situs web atau halaman.
- Main : Elemen <main> digunakan untuk mendefinisikan konten utama dari sebuah dokumen. Konten utama adalah bagian yang paling penting dari dokumen dan biasanya hanya ada satu elemen <main> per halaman.
- Footer : Elemen <footer> digunakan untuk mendefinisikan bagian footer dari sebuah dokumen atau bagian dari dokumen. Footer biasanya berisi informasi penulis, hak cipta, atau tautan ke dokumen terkait.
Comments
Post a Comment