-
Notifications
You must be signed in to change notification settings - Fork 0
/
detail-artikel.html
172 lines (168 loc) · 7.52 KB
/
detail-artikel.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Healer | Artikel</title>
<link rel="shortcut icon" href="img/logo healer.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<script src="aos.js"></script>
<link rel="stylesheet" href="aos.css">
</head>
<body>
<div class="nav">
<img src="img/logo healer.png" alt="" data-aos="fade-down" data-aos-duration="800">
<div class="area-nav">
<div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="100">
<a class="link-nav" href="index.html #beranda">Beranda</a>
</div>
<div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="150">
<a class="link-nav" href="index.html #layanan">Layanan</a>
</div>
<div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="200">
<a class="link-nav" href="lokasi.html">Lokasi</a>
</div>
<div class="nav-link" data-aos="fade-down" data-aos-duration="800" data-aos-delay="250">
<a class="link-nav" href="artikel.html">Artikel</a>
</div>
</div>
<img src="img/menu.png" alt="" id="open-nav" data-aos="fade-down" data-aos-duration="800">
<a class="nav-login" href="login.html" data-aos="fade-down" data-aos-duration="800">LOGIN</a>
</div>
<div class="nav-menu">
<div class="close-btn">
<img src="img/close.png" alt="" id="close-nav" />
</div>
<a href="index.html #beranda" id="nav-link">Beranda</a>
<a href="index.html #layanan" id="nav-link1">Layanan</a>
<a href="lokasi.html" id="nav-link2">Lokasi</a>
<a href="artikel.html" id="nav-link3">Artikel</a>
<a href="login.html" id="login-nav-menu">LOGIN</a>
</div>
<div class="header-artikel">
<h1>5 Makanan Diet Sehat <br> Yang Harus Dicoba</h1>
<div class="kategori-artikel">
<p>MAKANAN</p>
<p>ARTIKEL KESEHATAN</p>
</div>
</div>
<div class="isi-artikel container column">
<p>Ditinjau Oleh : <span>Dr. David Noah</span> : 22 Oktober 2022</p>
<div class="area-detail-artikel">
<div class="text-artikel">
<p style="font-weight: 700;">“Salah satu cara efektif diet sehat adalah mengubah pola makan. Caranya bisa dilakukan dengan mengonsumsi dada ayam, telur, daging sapi tanpa lemak, kentang dan kacang-kacangan.”</p>
<h1>Makanan Diet Sehat</h1>
<h1>1. Dada Ayam</h1>
<img src="img/makanan1.jpg" alt="">
<p>Bagian dada ayam memiliki kandungan lemak jenuh lebih rendah ketimbang bagian lainnya. Bagian ini juga mengandung zat besi dan tinggi protein. Guna meningkatkan keberhasilan diet, dada ayam bisa diolah dengan dipanggang atau direbus.</p>
<h1>2. Telur</h1>
<img src="img/makanan2.jpg" alt="">
<p>Telur mengandung banyak nutrisi seperti protein, vitamin D dan kolin. Agar lebih sehat, peserta diet bisa mengonsumsi bagian putih telurnya saja. Bagian ini mengandung 406 gram protein yang bisa menjadi sumber energi tubuh.</p>
<h1>3. Daging Sapi dan Lemak</h1>
<img src="img/makanan3.jpg" alt="">
<p>Daging ini mengandung protein, zat besi, vitamin, mineral, zinc dan vitamin B12. Untuk mendapatkan manfaatnya, disarankan untuk memasak daging sapi dengan cara direbus, dikukus atau dipanggang.</p>
<h1>4. Kentang</h1>
<img src="img/makanan4.jpg" alt="">
<p>Makanan untuk diet sehat ini mengandung kalium yang berperan dalam menjaga tekanan darah tetap stabil. Di dalamnya juga vitamin B1, B9, B6 dan C. Untuk mendapatkan manfaatnya, olah kentang dengan cara direbus atau dikukus. </p>
<h1>5. kacang-kacangan</h1>
<img src="img/makanan.jpg" alt="">
<p>Makanan ini mengandung vitamin dan mineral, termasuk zat besi serta folat. Di dalamnya juga mengandung tinggi protein dan serat yang bisa membuat rasa kenyang bertahan lebih lama. Jenis kacang yang bisa dikonsumsi adalah kacang kedelai, kacang tanah atau kacang merah. </p>
</div>
<div class="area-artikel-terkait">
<h1 style="color: #3ec70b;">ARTIKEL TERKAIT</h1>
<div class="box-artikel-terkait">
<img src="img/makanan1.jpg" alt="">
<h1>Kandungan Gizi Dalam Daging Ayam</h1>
</div>
<div class="box-artikel-terkait">
<img src="img/makanan2.jpg" alt="">
<h1>Manfaat Mengkonsumsi Telur Setiap Hari</h1>
</div>
<div class="box-artikel-terkait">
<img src="img/artikel 1.jpg" alt="">
<h1>5 Sayuran Yang Kaya Manfaat</h1>
</div>
</div>
</div>
</div>
<div class="footer container">
<div class="footer-1 column">
<div class="logo-footer">
<img src="img/logo healer.png" alt="" />
<h1>Healer</h1>
</div>
<p>Mulai Hidup Sehat <br />Bersama Kami</p>
<div class="sosial">
<img src="img/facebook.png" alt="" />
<img src="img/instagram.png" alt="" />
<img src="img/twitter.png" alt="" />
</div>
</div>
<div class="footer-2 column">
<h1>Link</h1>
<a href="index.html #beranda">Beranda</a>
<a href="index.html #layanan">Layanan</a>
<a href="lokasi.html">Lokasi</a>
<a href="artikel.html">Artikel</a>
</div>
<div class="footer-3 column">
<h1>Bantuan</h1>
<a href="konsultasi.html">Konsultasi Dokter</a>
<a href="lokasi.html">Cari Rumah Sakit</a>
<a href="trainer.html">Konsultasi Olah Raga</a>
</div>
<div class="footer-4 column">
<h1>Hubungi Kami</h1>
<p>[email protected]</p>
<p>+62 22 2222-2222</p>
</div>
</div>
<script>
AOS.init();
$(function () {
var navbar = $(".nav");
var navlogin = $(".nav-login");
$(window).scroll(function () {
if ($(window).scrollTop() <= 40) {
navbar.removeClass("nav-scroll");
$(".link-nav").css("color", "#fff");
navlogin.removeClass("nav-login-scroll");
$(".link-nav").mouseleave(function () {
$(this).css("color", "#fff");
});
} else {
navbar.addClass("nav-scroll");
$(".link-nav").css("color", "black");
navlogin.addClass("nav-login-scroll");
$(".link-nav").mouseleave(function () {
$(this).css("color", "#000");
});
}
});
});
$(".link-nav").mouseenter(function () {
$(this).css("color", "#3ec70b");
});
$("#open-nav").click(function () {
$(".nav-menu").toggleClass("active");
});
$("#close-nav").click(function () {
$(".nav-menu").removeClass("active");
});
$("#nav-link").click(function () {
$(".nav-menu").removeClass("active");
});
$("#nav-link1").click(function () {
$(".nav-menu").removeClass("active");
});
$("#nav-link2").click(function () {
$(".nav-menu").removeClass("active");
});
$("#nav-link3").click(function () {
$(".nav-menu").removeClass("active");
});
</script>
</body>
</html>