244 lines
7.4 KiB
HTML
244 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Makan Sehat dengan Gizi Seimbang!</title>
|
|
<style>
|
|
* {
|
|
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;
|
|
}
|
|
|
|
.gizi-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 5px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.gizi-item {
|
|
text-align: center;
|
|
max-width: 100px;
|
|
flex: 1 1 200px;
|
|
}
|
|
|
|
.gizi-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.full-width-image {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
figcaption {
|
|
font-size: 0.9rem;
|
|
text-align: center;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
p, li {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.container {
|
|
padding: 15px;
|
|
}
|
|
|
|
.gizi-grid {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.gizi-item {
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>Makan Sehat dengan Gizi Seimbang!</h1>
|
|
<p class="subtitle">Tahukah kamu bahwa makan dengan gizi seimbang itu penting untuk tubuh kita?</p>
|
|
</header>
|
|
|
|
<main>
|
|
<section>
|
|
<p>Gizi seimbang berarti kita harus makan berbagai jenis makanan dengan jumlah yang pas supaya tubuh tetap sehat dan kuat!</p>
|
|
</section>
|
|
|
|
<section>
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<h2>Porsi Makan yang Seimbang</h2>
|
|
<p>Supaya makan kita sehat, ada aturan "Isi Piringku" yang bisa kita ikuti:</p>
|
|
<ul>
|
|
<li>🍽️ Separuh piring: Sayur dan buah</li>
|
|
<li>🍽️ Seperempat piring: Karbohidrat (seperti nasi atau roti)</li>
|
|
<li>🍽️ Seperempat piring: Protein (seperti ayam atau tempe)</li>
|
|
<li>🍽️ Sedikit lemak sehat</li>
|
|
</ul>
|
|
<img src="assets/html/isipiringku.png" alt="Piring Gizi Seimbang" class="full-width-image">
|
|
<figcaption>Isi Piringku</figcaption>
|
|
<p>Selain itu, kita tidak boleh makan terlalu banyak atau terlalu sedikit, karena bisa membuat tubuh tidak sehat. Makan berlebihan bisa menyebabkan obesitas, sedangkan makan terlalu sedikit bisa membuat tubuh lemas dan kurang gizi.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Menjaga Kebersihan Makanan</h2>
|
|
<p>Selain memilih makanan sehat, kita juga harus menjaga kebersihan makanan agar tidak sakit perut! Caranya:</p>
|
|
<ul>
|
|
<li>Cuci tangan sebelum makan dan mengolah makanan.</li>
|
|
<li>Simpan makanan dengan baik agar tidak terkena kuman.</li>
|
|
<li>Masak makanan dengan suhu yang cukup supaya aman dimakan.</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Aktivitas Fisik Itu Penting!</h2>
|
|
<p>Selain makan sehat, kita juga harus rajin bergerak! Olahraga atau bermain di luar rumah bisa membantu tubuh tetap bugar, menjaga berat badan, dan membuat kita lebih bersemangat.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Yuk, Mulai Gizi Seimbang!</h2>
|
|
<p>Makan dengan gizi seimbang akan membuat tubuh kita lebih sehat, kuat, dan penuh energi. Yuk, biasakan makan sehat mulai sekarang supaya kita tumbuh dengan baik dan terhindar dari penyakit!</p>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<p>Artikel tentang Makan Sehat dengan Gizi Seimbang</p>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|