FreekakeApp/assets/html/furikake/index.html
2025-05-05 18:11:34 +07:00

279 lines
7.6 KiB
HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Furikake: Taburan Lezat untuk Nasi!</title>
<style>
/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
padding: 0;
margin: 0;
font-size: 1rem;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
main {
margin-bottom: 40px;
}
footer {
text-align: center;
padding: 20px 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #666;
}
h1 {
font-size: 2.2rem;
line-height: 1.2;
margin-bottom: 10px;
color: #222;
}
.subtitle {
font-size: 1.2rem;
color: #666;
font-weight: normal;
margin-bottom: 20px;
}
h2 {
font-size: 1.6rem;
margin: 30px 0 15px 0;
color: #333;
}
p {
margin-bottom: 20px;
font-size: 1.1rem;
line-height: 1.7;
}
ul {
margin-bottom: 20px;
padding-left: 20px;
}
li {
margin-bottom: 8px;
font-size: 1.1rem;
}
figure {
margin: 30px 0;
text-align: center;
}
img {
max-width: 100%;
height: auto;
border-radius: 4px;
}
.bahan-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin: 20px 0;
}
.bahan-item {
text-align: center;
flex: 1 0 calc(25% - 15px); /* 4 items per row by default */
min-width: calc(25% - 15px);
max-width: calc(25% - 15px);
}
.bahan-item img {
width: 100%;
height: 120px;
object-fit: cover;
border-radius: 8px;
}
.bahan-item p {
margin-top: 8px;
font-size: 0.9em;
}
.full-width-image {
width: 100%;
height: auto;
display: block;
margin: 0;
padding: 0;
}
figcaption {
font-size: 0.9rem;
color: #666;
margin-top: 10px;
}
/* Responsive Adjustments */
/* Tablet Size (768px and below) - 2 items per row */
@media (max-width: 768px) {
.bahan-item {
flex: 1 0 calc(50% - 15px);
min-width: calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
/* Mobile Size (480px and below) - 1 item per row */
@media (max-width: 480px) {
h1 {
font-size: 1.8rem;
}
.japanese-title {
font-size: 2rem;
}
.subtitle {
font-size: 1.1rem;
}
h2 {
font-size: 1.4rem;
}
p, li {
font-size: 1rem;
}
.container {
padding: 15px;
}
.bahan-item {
flex: 1 0 100%;
min-width: 100%;
max-width: 100%;
}
}
/* Small Mobile (360px and below) - Adjust font sizes further */
@media (max-width: 360px) {
h1 {
font-size: 1.6rem;
}
h2 {
font-size: 1.3rem;
}
.subtitle {
font-size: 1rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Furikake: Taburan Lezat untuk Nasi!</h1>
<p class="subtitle">Tahukah kamu bahwa di Jepang ada bumbu tabur yang bisa membuat nasi menjadi lebih enak?</p>
</header>
<div class="japanese-title">ふりかけ</div>
<main>
<section>
<p>Kata "furikake" berasal dari bahasa Jepang, yaitu "furi" yang berarti menaburkan dan "kake" yang berarti menuangkan. Jadi, furikake adalah bumbu yang ditaburkan di atas nasi supaya lebih lezat!</p>
</section>
<section>
<h2>Asal Usul Furikake</h2>
<p>Furikake pertama kali dibuat di Jepang pada tahun 1913 oleh seorang apoteker bernama Suekichi Yoshimaru. Awalnya, ia ingin membantu orang-orang yang kekurangan kalsium. Maka, ia membuat bubuk dari tulang ikan kering, biji wijen, dan rumput laut. Campuran ini kemudian diberi nama "Gohan no Tomo" yang artinya "Teman Nasi" karena memang cocok untuk dimakan bersama nasi.</p>
</section>
<section>
<h2>Perkembangan Furikake</h2>
<p>Seiring berjalannya waktu, furikake menjadi semakin populer dan dibuat dengan berbagai rasa. Dulu, furikake hanya bisa dibeli oleh orang kaya, tetapi setelah Perang Dunia II, furikake mulai dijual dengan harga terjangkau sehingga semua orang bisa menikmatinya. Akhirnya, pada tahun 1959, furikake semakin terkenal dan banyak orang mulai membuat berbagai variasi rasa yang lebih menarik.</p>
</section>
<section>
<h2>Apa Saja Isi Furikake?</h2>
<p>Furikake biasanya terbuat dari campuran beberapa bahan seperti:</p>
<div class="bahan-container">
<div class="bahan-item">
<img src="assets/html/furikake/nori.jpeg" alt="Nori">
<p>Nori (Rumput Laut)</p>
</div>
<div class="bahan-item">
<img src="assets/html/furikake/wijen.jpeg" alt="Biji Wijen">
<p>Biji Wijen</p>
</div>
<div class="bahan-item">
<img src="assets/html/furikake/ikankering.jpg" alt="Katsuobushi">
<p>Katsuobushi (Ikan Kering)</p>
</div>
<div class="bahan-item">
<img src="assets/html/furikake/gulagaram.jpg" alt="Garam dan Gula">
<p>Garam & Gula</p>
</div>
</div>
<ul>
<li>Rumput laut kering (nori) yang memberikan rasa laut yang khas.</li>
<li>Biji wijen yang menambah rasa gurih dan tekstur renyah.</li>
<li>Katsuobushi (ikan kering) yang menambah rasa gurih dan protein.</li>
<li>Gula dan garam untuk memberikan keseimbangan rasa.</li>
</ul>
</section>
<section>
<h2>Beragam Rasa Furikake</h2>
<p>Sekarang, furikake punya banyak rasa yang bisa dipilih sesuai selera! Beberapa contoh rasa furikake adalah:</p>
<ul>
<li>Wasabi Furikake, untuk yang suka rasa pedas khas wasabi.</li>
<li>Salmon Furikake, dengan aroma salmon yang lezat.</li>
<li>Furikake Vegan, yang dibuat tanpa bahan dari hewan, cocok untuk vegetarian.</li>
</ul>
<figure>
<img src="furikake.jpg" alt="Contoh produk furikake" class="full-width-image">
<figcaption>Berbagai varian produk furikake yang tersedia di pasaran</figcaption>
</figure>
</section>
<section>
<h2>Cara Menikmati Furikake</h2>
<p>Furikake sangat mudah digunakan! Cukup taburkan di atas nasi hangat, dan nasi pun menjadi lebih lezat. Bisa juga ditambahkan ke dalam mie, sup, atau onigiri (nasi kepal) untuk menambah rasa.</p>
<p>Nah, sekarang kamu tahu tentang furikake! Kalau suatu saat berkesempatan mencobanya, jangan lupa untuk menikmati kelezatannya. Siapa tahu, kamu jadi semakin suka makan nasi!</p>
</section>
</main>
<footer>
<p>Artikel tentang Furikake - Taburan Lezat untuk Nasi</p>
</footer>
</div>
</body>
</html>