-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (165 loc) · 9.4 KB
/
index.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
173
174
175
176
177
<!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" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="index.css" />
<link rel="icon" href="assets/inmind_icon.svg" />
<script src="index.js"></script>
<title>Inmind</title>
</head>
<body>
<script src="https://kit.fontawesome.com/d436d4cf93.js" crossorigin="anonymous"></script>
<nav class="flex" id="navbar">
<div class="flex logo">
<img src="assets/inmind_icon.svg" />
<h3 class="subheading-size jellee-font">Inmind</h5>
</div>
<ul>
<li><a id="nav-beranda" onclick="jumpTo('jumbotron')">Beranda</a></li>
<li><a id="nav-tentang" onclick="jumpTo('about')">Tentang</a></li>
<li><a id="nav-layanan" onclick="jumpTo('prevention')">Pencegahan</a></li>
<li><a id="nav-edukasi" onclick="jumpTo('education')">Edukasi</a></li>
</ul>
<button class="btn-primary" onclick="redirect('relax')">Rehat Sejenak</button>
</nav>
<nav class="topnav" id="navbar-responsive">
<a onclick="jumpTo('jumbotron')">Beranda</a>
<a onclick="jumpTo('about')">Tentang</a>
<a onclick="jumpTo('prevention')">Pencegahan</a>
<a onclick="jumpTo('education')">Edukasi</a>
<a id="nav-rest" onclick="redirect('relax')">Rehat Sejenak</a>
<a href="javascript:void(0);" class="icon" onclick="onTapNavbar()">
<i class="fa fa-bars"></i>
</a>
</nav>
<header>
<center>
<div class="jumbotron">
<div class="jumbotron-content">
<h1 class="jumbotron-heading-size jellee-font">
Edukasi kesehatan mental di masa pandemi
</h1>
<p class="subheading-size gray-color">
Agar stigma yang ada di masyarakat dapat dihilangkan dan penderita mendapatkan penanganan yang tepat.
</p>
<div class="flex jumbotron-buttons">
<button class="btn-primary" onclick="jumpTo('about')">Mulai Sekarang</button>
<button class="btn-secondary" onclick="redirect('relax')">Rehat Sejenak</button>
</div>
</div>
</div>
</center>
</header>
<main>
<center>
<article class="about ">
<div class="about-title ">
<h2 class="heading-size jellee-font ">Apa itu kesehatan mental?</h2>
</div>
<div class="about-content ">
<p class="subheading-size ">
Kondisi di mana individu terbebas dari segala bentuk gejala-gejala gangguan mental dan batin kita merasa tenang atau tentram. Tuntutan hidup yang berdampak pada stress berlebih akan berdampak pada gangguan kesehatan mental yang lebih buruk.
</p>
</div>
</article>
<article class="prevention ">
<div class="prevention-background "></div>
<div class="prevention-content ">
<h2 class="heading-size jellee-font ">Pencegahan</h2>
<p class="gray-color subheading-size ">Kesehatan Mental</p>
<div class="flex prevention-box-container ">
<div class="prevention-box " id="prevention-box-meditation ">
<div class="flex prevention-box-title ">
<img src="assets/prevention_meditation.svg ">
<h4 class="semibold-weight subheading-size ">Meditasi</h4>
</div>
<p>Sisihkan waktu untuk bermeditasi di rumah. Pejamkan mata, duduk nyaman, dan dengarkan musik tenang dari kami. Rasakan ketenangan.</p>
</div>
<div class="prevention-box " id="prevention-box-thinking ">
<div class="flex prevention-box-title ">
<img src="assets/prevention_thinking.svg ">
<h4 class="semibold-weight subheading-size ">Berpikiran Positif</h4>
</div>
<p>Berpikir positif atau rasional dapat dilakukan dengan cara memilih tontonan yang bersifat menghibur dan membatasi informasi negatif.</p>
</div>
<div class="prevention-box " id="prevention-box-exercise ">
<div class="flex prevention-box-title ">
<img src="assets/prevention_exercise.svg ">
<h4 class="semibold-weight subheading-size ">Olahraga</h4>
</div>
<p>Olahraga untuk menjaga kesehatan dapat dilakukan minimal tiga kali seminggu selama 30 menit.</p>
</div>
<div class="prevention-box " id="prevention-box-rest ">
<div class="flex prevention-box-title ">
<img src="assets/prevention_rest.svg ">
<h4 class="semibold-weight subheading-size ">Istirahat Cukup</h4>
</div>
<p>Salah satu cara agar jam tidur tetap teratur adalah menghentikan aktivitas satu jam sebelum waktu tidur.</p>
</div>
</div>
</div>
</article>
<article class="education ">
<div class="education-background "></div>
<div class="education-content ">
<h2 class="heading-size jellee-font ">Edukasi</h2>
<p class="gray-color subheading-size ">Kesehatan Mental</p>
<div class="flex education-box-container ">
<div class="education-box " id="education-box-1 " onclick="redirect('gejala')">
<img src="assets/education_1_preview.svg ">
<div class="education-box-detail ">
<h4 class="subheading-size semibold-weight ">Gejala gangguan kesehatan mental</h4>
<h6 class="small-text-size regular-weight ">1 November 2021</h6>
<p>Kenali gejala gangguan kesehatan mental sejak dini. Apa saja gejala gangguan kesehatan mental? Dikutip UNICEF, gejala gangguan kesehatan mental sebagai berikut:</p>
</div>
</div>
<div class="education-box " id="education-box-2 " onclick="redirect('kondisi-mental')">
<img src="assets/education_2_preview.svg ">
<div class="education-box-detail ">
<h4 class="subheading-size semibold-weight ">Kesehatan mental di Indonesia</h4>
<h6 class="small-text-size regular-weight ">31 Oktober 2021</h6>
<p>Bagaimana kondisi kesehatan mental di Indonesia sendiri? Kesehatan mental di Indonesia sendiri masih dianggap tabu oleh masyarakat sekitar.</p>
</div>
</div>
<div class="education-box " id="education-box-3 ">
<img src="assets/education_3_preview.svg ">
<div class="education-box-detail ">
<h4 class="subheading-size semibold-weight " onclick="redirect('hari-kesehatan-mental')">Hari kesehatan mental sedunia</h4>
<h6 class="small-text-size regular-weight ">10 Oktober 2021</h6>
<p>Setiap tahun pada 10 Oktober diperingati Hari Kesehatan Mental Sedunia. Tema yang diangkat yaitu “Mental health care for all: let's make it a reality”.</p>
</div>
</div>
</div>
</div>
</article>
</center>
</main>
<footer class="flex ">
<div class="flex footer-content ">
<div class="flex logo ">
<img src="assets/inmind_icon.svg " />
<h3 class="subheading-size jellee-font ">Inmind</h5>
</div>
<div class="flex follow-us ">
<p>Ikuti Kami</p>
<a href="https://www.tiktok.com/@inmind_id " target="_blank ">
<i class="fab fa-tiktok "></i>
</a>
<a href="https://www.instagram.com/inmind_id " target="_blank ">
<i class="fab fa-instagram "></i>
</a>
<a href="https://www.twitter.com/inmind_id " target="_blank ">
<i class="fab fa-twitter "></i>
</a>
</div>
</div>
<p id="footer-copyright ">Copyright © 2021. Inmind</p>
</footer>
</body>
</html>