freekake basename
This commit is contained in:
='fauz
@@ -93,7 +93,7 @@ img {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.bahan-container {
|
||||
.div-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -101,21 +101,21 @@ img {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.bahan-item {
|
||||
.div-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 {
|
||||
.div-item img {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.bahan-item p {
|
||||
.div-item p {
|
||||
margin-top: 8px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@@ -138,7 +138,7 @@ figcaption {
|
||||
|
||||
/* Tablet Size (768px and below) - 2 items per row */
|
||||
@media (max-width: 768px) {
|
||||
.bahan-item {
|
||||
.div-item {
|
||||
flex: 1 0 calc(50% - 15px);
|
||||
min-width: calc(50% - 15px);
|
||||
max-width: calc(50% - 15px);
|
||||
@@ -171,7 +171,7 @@ figcaption {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.bahan-item {
|
||||
.div-item {
|
||||
flex: 1 0 100%;
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -222,20 +222,20 @@ figcaption {
|
||||
<h2>Apa Saja Isi Furikake?</h2>
|
||||
<p>Furikake biasanya terbuat dari campuran beberapa bahan seperti:</p>
|
||||
|
||||
<div class="bahan-container">
|
||||
<div class="bahan-item">
|
||||
<div class="div-grid">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/furikake/nori.jpeg" alt="Nori">
|
||||
<p>Nori (Rumput Laut)</p>
|
||||
</div>
|
||||
<div class="bahan-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/furikake/wijen.jpeg" alt="Biji Wijen">
|
||||
<p>Biji Wijen</p>
|
||||
</div>
|
||||
<div class="bahan-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/furikake/ikankering.jpg" alt="Katsuobushi">
|
||||
<p>Katsuobushi (Ikan Kering)</p>
|
||||
</div>
|
||||
<div class="bahan-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/furikake/gulagaram.jpg" alt="Garam dan Gula">
|
||||
<p>Garam & Gula</p>
|
||||
</div>
|
||||
@@ -259,7 +259,7 @@ figcaption {
|
||||
</ul>
|
||||
|
||||
<figure>
|
||||
<img src="furikake.jpg" alt="Contoh produk furikake" class="full-width-image">
|
||||
<img src="assets/html/furikake/furikake.jpg" alt="Contoh produk furikake" class="full-width-image">
|
||||
<figcaption>Berbagai varian produk furikake yang tersedia di pasaran</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
+11
-11
@@ -92,7 +92,7 @@
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.gizi-grid {
|
||||
.div-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
@@ -100,13 +100,13 @@
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.gizi-item {
|
||||
.div-item {
|
||||
text-align: center;
|
||||
max-width: 100px;
|
||||
flex: 1 1 200px;
|
||||
}
|
||||
|
||||
.gizi-item img {
|
||||
.div-item img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
@@ -148,12 +148,12 @@
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.gizi-grid {
|
||||
.div-grid {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gizi-item {
|
||||
.div-item {
|
||||
max-width: 80%;
|
||||
}
|
||||
}
|
||||
@@ -175,24 +175,24 @@
|
||||
<h2>Apa Itu Gizi Seimbang?</h2>
|
||||
<p>Gizi seimbang adalah cara makan yang mengandung semua zat gizi yang dibutuhkan tubuh. Zat gizi itu terdiri dari:</p>
|
||||
|
||||
<div class="gizi-grid">
|
||||
<div class="gizi-item">
|
||||
<div class="div-grid">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/karbohidrat.png" alt="Karbohidrat" />
|
||||
<p><strong>Karbohidrat</strong><br>Sumber energi seperti nasi, roti, dan kentang.</p>
|
||||
</div>
|
||||
<div class="gizi-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/protein.png" alt="Protein" />
|
||||
<p><strong>Protein</strong><br>Untuk membangun otot, misalnya ikan, telur, dan tahu.</p>
|
||||
</div>
|
||||
<div class="gizi-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/lemak.png" alt="Lemak" />
|
||||
<p><strong>Lemak</strong><br>Memberikan tenaga, seperti dari kacang-kacangan dan minyak sehat.</p>
|
||||
</div>
|
||||
<div class="gizi-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/vitaminmineral.png" alt="Vitamin dan Mineral" />
|
||||
<p><strong>Vitamin dan mineral</strong><br>Dari sayur dan buah yang membantu tubuh bekerja dengan baik.</p>
|
||||
</div>
|
||||
<div class="gizi-item">
|
||||
<div class="div-item">
|
||||
<img src="assets/html/seratair.png" alt="Serat dan Air" />
|
||||
<p><strong>Serat dan air</strong><br>Membantu pencernaan dan menjaga tubuh tetap segar!</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user