forked from meterai07/jouwas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
330 lines (330 loc) · 19 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
<!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>Jouwas</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="img/icon.png">
<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=Poppins:wght@500;700&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="navbar" id="navbar">
<div class="logo">
<a href="../index.html"><img src="img/jouwas-logo.png" alt="logo"></a>
</div>
<div class="nav">
<ul>
<li><a href="#thumbnail">Beranda</a></li>
<li><a href="#recomendation">Rekomendasi</a></li>
<li><a href="#wisata">Wisata</a></li>
<li><a href="#kuliner">Kuliner</a></li>
<li><a href="login/login.html" class="masuk">Masuk</a></li>
</ul>
</div>
</div>
</header>
<main>
<div class="thumbnail" id="thumbnail">
<div class="text">
<h1>Temukan kenyamananmu dengan satu sentuhan</h1>
<p>Kamu bisa menggunakan website ini untuk mencari tempat-tempat hidden gems yang ingin kamu kunjungi, seperti wisata alam, restoran, cafe, dan tempat-tempat menarik lainnya.</p>
</div>
<img class="img_main" src="img/Jouwas-img main.png">
<img class="img_main1" src="img/Jouwas-img main1.png">
<img class="img_main2" src="img/Jouwas-img main2.png">
</div>
<div class="total">
<div class="total-box">
<h1>+250</h1>
<p>Tempat wisata</p>
</div>
<div class="total-box">
<h1>+500</h1>
<p>Cafe & Restoran</p>
</div>
<div class="total-box">
<h1>+100</h1>
<p>Destinasi Hidden Gems</p>
</div>
</div>
<div class="recomendation" id="recomendation">
<div class="recomendation-title">
<h1>Rekomendasi Destinasi</h1>
<p>Destinasi terbaik menurut wisatawan</p>
</div>
<div class="wrapper">
<div class="destination-recomendation-box">
<div class="recomendation-box">
<img src="img/recommended1.svg">
<div class="recomendation-box-detail">
<h3>Bukit Paralayang</h3>
<p class="location">Kota Batu, Jawa Timur</p>
<p class="description">Wisatawan dapat melakukan paralayang di pagi hari dan melihat pemandangan cahaya kota di malam ...</p>
<div class="recomendation-box-detail-bottom" style="display: flex;">
<div class="recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="recomendation-box">
<img src="img/recommended2.svg">
<div class="recomendation-box-detail">
<h3>Rafting Kaliwatu</h3>
<p class="location">Kota Batu, Jawa Timur</p>
<p class="description">Wisatawan dapat melakukan arung jeram bersama keluarga ataupun teman dengan dipandu oleh guide ...</p>
<div class="recomendation-box-detail-bottom" style="display: flex;">
<div class="recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.9</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="recomendation-box">
<img src="img/recommended3.svg">
<div class="recomendation-box-detail">
<h3>Nara Coffe</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Wisatawan dapat melakukan arung jeram bersama keluarga ataupun teman dengan dipandu oleh guide ...</p>
<div class="recomendation-box-detail-bottom" style="display: flex;">
<div class="recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="recomendation-box">
<img src="img/recommended4.svg">
<div class="recomendation-box-detail">
<h3>Tanajiva Wooden ...</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Tanajiva Wooden Space and Cafe juga termasuk salah satu cafe hidden gem yang ada di Kota Malang ...</p>
<div class="recomendation-box-detail-bottom" style="display: flex;">
<div class="recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.7</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
</div>
</div>
<div class="tour-recomendation-title" id="wisata">
<h1>Destinasi Wisata</h1>
</div>
<div class="wrapper">
<div class="tour-destination-recomendation-box">
<div class="tour-recomendation-box">
<img src="img/wisata1.svg">
<div class="tour-recomendation-box-detail">
<h3>San Terra de Lafonte</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Wisatawan dapat menikmati panorama aneka jenis bunga yang tentunya cocok digunakan sebagai latar foto ...</p>
<div class="tour-recomendation-box-detail-bottom" style="display: flex;">
<div class="tour-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.7 (91 Review)</p>
</div>
<a href="tour-details-page/index.html" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="tour-recomendation-box">
<img src="img/wisata2.svg">
<div class="tour-recomendation-box-detail">
<h3>Pantai Parang Dowo</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Tempat wisata berupa pantai yang memiliki batu karang yang dapat berubah-ubah warnanya ...</p>
<div class="tour-recomendation-box-detail-bottom" style="display: flex;">
<div class="tour-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.7 (85 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="tour-recomendation-box">
<img src="img/wisata3.svg">
<div class="tour-recomendation-box-detail">
<h3>Malang Night Paradise</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Terdapat beragam hiburan di tempat ini, antara lain yaitu Taman Dinosaurus, Taman Lampion, ...</p>
<div class="tour-recomendation-box-detail-bottom" style="display: flex;">
<div class="tour-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.7 (70 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="tour-recomendation-box">
<img src="img/wisata4.svg">
<div class="tour-recomendation-box-detail">
<h3>Taman Langit Gunung Banyak</h3>
<p class="location">Kota Batu, Jawa Timur</p>
<p class="description">Tempat wisata ini punya konsep menarik, yakni terkait tujuh cahaya cakra manusia, ...</p>
<div class="tour-recomendation-box-detail-bottom" style="display: flex;">
<div class="tour-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.9 (81 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="tour-recomendation-box">
<img src="img/wisata5.svg">
<div class="tour-recomendation-box-detail">
<h3>Wisata Alam Brakseng</h3>
<p class="location">Kota Batu, Jawa Timur</p>
<p class="description">Selain menawarkan tempat foto dengan latar Instagramable, di tempat ini pengunjung juga dapat bersantai ...</p>
<div class="tour-recomendation-box-detail-bottom" style="display: flex;">
<div class="tour-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8 (80 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
</div>
</div>
<a href="tour-page/index.html" class="more">Selengkapnya</a>
<div class="food-recomendation-title" id="kuliner">
<h1>Destinasi Kuliner</h1>
</div>
<div class="wrapper">
<div class="food-destination-recomendation-box">
<div class="food-recomendation-box">
<img src="img/food1.svg">
<div class="food-recomendation-box-detail">
<h3>Pecel Kawi</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Pecel Kawi buka pertama kali pada tahun 1975. Kedai ini terus menyajikan hidangan pecel yang autentik ...</p>
<div class="food-recomendation-box-detail-bottom" style="display: flex;">
<div class="food-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.6 (90 Review)</p>
</div>
<a href="food-details-page/index.html" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="food-recomendation-box">
<img src="img/food2.svg">
<div class="food-recomendation-box-detail">
<h3>Ronde Titoni</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Kedai yang menyajikan aneka ronde dan juga angsle ini telah dibuka sejak tahun 1948 dan terus bertahan ...</p>
<div class="food-recomendation-box-detail-bottom" style="display: flex;">
<div class="food-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8 (70 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="food-recomendation-box">
<img src="img/food3.svg">
<div class="food-recomendation-box-detail">
<h3>Pos Ketan Legenda 1967</h3>
<p class="location">Kota Batu, Jawa Timur</p>
<p class="description">Dibuka pertama kali tahun 1967, kedai ini menjual aneka olahan ketan yang cukup laris di kalangan wisatawan ...</p>
<div class="food-recomendation-box-detail-bottom" style="display: flex;">
<div class="food-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8 (87 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="food-recomendation-box">
<img src="img/food4.svg">
<div class="food-recomendation-box-detail">
<h3>Sego Resek</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Nasi ini berisi banyak isian seperti kecambah, kubis, daun bawang, dan juga topping nikmat lainnya ...</p>
<div class="food-recomendation-box-detail-bottom" style="display: flex;">
<div class="food-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.8 (80 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
<div class="food-recomendation-box">
<img src="img/food5.svg">
<div class="food-recomendation-box-detail">
<h3>Rawon Nguling</h3>
<p class="location">Kota Malang, Jawa Timur</p>
<p class="description">Daging yang menjadi isian dari rawon ini memiliki tekstur yang empuk dan nikmat ...</p>
<div class="food-recomendation-box-detail-bottom" style="display: flex;">
<div class="food-recomendation-box-detail-bottom-rating" style="display: flex;">
<img src="img/star.svg" style="height: 30px;">
<p class="rating">4.7 (68 Review)</p>
</div>
<a href="#" class="detail">Lihat Detail</a>
</div>
</div>
</div>
</div>
</div>
<a href="food-page/index.html" class="more">Selengkapnya</a>
</div>
</main>
<footer>
<div class="footer1">
<div class="foto_footer">
<img class="logo-footer" src="img/jouwas-logo.png">
<div class="logo_beautiful">
<img class="beautiful1" src="img/Jouwas-beautiful1.png">
<img class="beautiful2" src="img/Jouwas-beautiful2.png">
<img class="beautiful3" src="img/Jouwas-beautiful3.png">
</div>
</div>
<div class="box-information">
<div class="box-information-detail-1">
<h5>Perusahaan</h5>
<ul>
<li><a href="">Syarat & ketentuan</a></li>
<li><a href="">Kebijakan privasi</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Bantuan pelayanan</a></li>
</ul>
</div>
<div class="box-information-detail-2">
<h5>Kontak</h5>
<p>Jl. Cengger Ayam No. 16
Kota Malang, Jawa Timur
Indonesia</p>
<p>(0341) 722 179</p>
<p><a href="mailto:[email protected]">[email protected]</a></p>
</div>
</div>
<!-- <div class="box-information">
</div> -->
</div>
<div class="footer2">
<p>Copyright 2022 JOUWAS. All Rights Reserved.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>