-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
321 lines (312 loc) · 14.1 KB
/
Copy pathindex.html
File metadata and controls
321 lines (312 loc) · 14.1 KB
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
<!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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Tugas Akhir Membuat Website | Submission</title>
</head>
<body>
<header class="header container spacerSection1">
<!-- Navbar -->
<nav id="navbar" class="nav d-flex ai-center jc-sb">
<div class="logo">
<h1><a href="./index.html">Peats.</a></h1>
</div>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu d-flex">
<li class="menu-item"><a class="menu-link" href="./index.html">Home</a></li>
<li class="menu-item"><a class="menu-link" href="#feature">Features</a></li>
<li class="menu-item"><a class="menu-link" href="#about">About</a></li>
<li class="menu-item"><a class="menu-link" href="#contact">Contact</a></li>
<div>
<a class="menu-item" href="">
<button class="btn btn-primary">Login
<i class="fa-solid fa-arrow-right-to-bracket icon-rotate"></i>
</button>
</a>
<a class="menu-item" href="">
<button class="btn btn-primary btn-signup">Sign up
<i class="fa-solid fa-arrow-right-to-bracket"></i>
</button>
</a>
</div>
</ul>
</nav>
<!-- End Navbar -->
</header>
<main>
<!-- Hero -->
<article class="hero container row mobile-reverse tablet-reverse dekstop-reverse spacerSection">
<div class="col6 col12-dekstop-device col6-dekstopL-device zindex">
<h1 class="bigTitle">Dengarkan music dan podcasts favorit Anda</h1>
<div class="spacer-px10"></div>
<p>Di situs kami Anda dapat menemukan musik, podcasts apa pun sesuai selera Anda, gunakan aplikasi kami selama 3 bulan gratis.</p>
<div class="spacer-px25"></div>
<a href="">
<button class="btn btn-primary">Browse for free
<i class="fa-solid fa-arrow-up icon-rotate45"></i>
</button>
</a>
</div>
<div class="col6 col12-dekstop-device col6-dekstopL-device">
<a href="https://www.freepik.com/" target="_blank">
<img src="assets/image/hero.png" alt="hero" title="Design by Slidesgo / Freepik" class="img-responsive img-radius">
</a>
</div>
</article>
<!-- End Hero -->
<!-- Features -->
<article id="feature" class="bg-color3 spacerFirst">
<section class="features container">
<div class="row ai-center tablet-reverse">
<div class="col6 col6-dekstop-device col6-dekstopL-device">
<img src="https://images.unsplash.com/photo-1589903308904-1010c2294adc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-responsive img-efect img-crop2">
</div>
<div class="col6 col6-dekstop-device">
<h2 class="bigTitle">Most Popular Creators on <span>Peats.</span></h2>
<p>Produk unggulan bulan ini yang cocok untuk menemani aktifitas Anda diluar maupun didalam agar lebih percaya diri dan lebih menginspirasi</p>
</div>
</div>
</section>
<section class="features container">
<div class="row">
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<div class="kotak">
<img src="https://images.unsplash.com/photo-1581368129682-e2d66324045b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" class="img-responsive img-crop img-efect">
</div>
</div>
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<div class="kotak">
<img src="https://images.unsplash.com/photo-1655717888556-94c84643ebec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" class="img-responsive img-crop img-efect">
</div>
</div>
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<div class="kotak">
<img src="https://images.unsplash.com/photo-1575285113814-f770cb8c796e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" class="img-responsive img-crop img-efect">
</div>
</div>
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<div class="kotak">
<img src="https://images.unsplash.com/photo-1583127662686-c00fb903b78b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" class="img-responsive img-crop img-efect">
</div>
</div>
</div>
</section>
</article>
<!-- End Features -->
<!-- Features1 -->
<article class="spacerFirst">
<section class="features1 container row ai-center">
<div class="col6 col6-dekstop-device col6-dekstopL-device">
<div class="content-left">
<div class="content-left-1">
<h3>Create account</h3>
<div class="spacer-px10"></div>
<p>Buat akun gratis, hubungkan semua media sosial di dalamnya sehingga Anda dapat lebih memudahkan audiens Anda untuk mendukung podcast dan music Anda.</p>
</div>
<div class="content-left-2">
<h3>Make content & share</h3>
<div class="spacer-px10"></div>
<p>Buat konten pertama Anda dan setelah Anda membuat konten bagaikan ke audiens Anda untuk mendapatkan dukungan konten Anda.</p>
</div>
</div>
</div>
<div class="col6 col6-dekstop-device col6-dekstopL-device">
<div class="content-right">
<h2 class="bigTitle">How spooked helps you <span>grow up</span></h2>
<div class="spacer-px10"></div>
<p>Kami memberikan cara terbaik untuk Anda kembangkan podcast dan lagu Anda tercinta. Anda akan menjadli lebih konsisten dalam mencapai karya yang sukses.</p>
<div class="spacer-px30"></div>
<div class="content-right-button d-flex">
<a href="">
<button class="btn btn-primary">
Get started now
</button>
</a>
<a href="">
<button class="btn btn-primary bg-btn-none">
Download now
</button>
</a>
</div>
</div>
</div>
</section>
</article>
<!-- End Features1 -->
<!-- Rviews -->
<article class="review container spacerSection">
<h3 class="fw-medium">Our reviews</h3>
<div class="spacer-px10"></div>
<div class="row">
<div class="col3 col6-dekstop-device col6-dekstopL-device">
<div class="review-boxrev">
<i class="fa-solid fa-quote-left"></i>
<p>Saya seorang Designer Developer WEB & Mobile saya sangat menyukai platform ini.</p>
<div class="review-content d-flex ai-center jc-sb">
<div class="info">
<div class="name">Jason Rick</div>
<div class="job">Designer | Developer</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="image">
<img src="assets/image/profile.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="col3 col6-dekstop-device col6-dekstopL-device">
<div class="review-boxrev">
<i class="fa-solid fa-quote-left"></i>
<p>Saya menjadi musisi sejak tahun 2015, dengan Peats aku menjadi lebih konsisten dalam berkarya</p>
<div class="review-content d-flex ai-center jc-sb">
<div class="info">
<div class="name">Catherine Angelina</div>
<div class="job">Rock | Musician</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="image">
<img src="assets/image/profile1.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="col3 col6-dekstop-device col6-dekstopL-device">
<div class="review-boxrev">
<i class="fa-solid fa-quote-left"></i>
<p>Saya sudah menggunakan platform ini lebih dari 6 bulan platfrom ini bagus, & saya menyuikainya.</p>
<div class="review-content d-flex ai-center jc-sb">
<div class="info">
<div class="name">Anastasia Angelina</div>
<div class="job">Singer | Artist</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<div class="image">
<img src="assets/image/profile2.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="col3 col6-dekstop-device col6-dekstopL-device">
<div class="review-boxrev">
<i class="fa-solid fa-quote-left"></i>
<p>Saya menyukai platform Peats ini, ringan dan mudah digunakan. Saya rekomen untuk Anda install.</p>
<div class="review-content d-flex ai-center jc-sb">
<div class="info">
<div class="name">Chris Dominic</div>
<div class="job">Classical | Musician</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
</div>
<div class="image">
<img src="assets/image/profile3.jpg" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</article>
<!-- End Reviews -->
<!-- Subscribe -->
<article class="subscribe spacerFirst">
<div class="container row jc-center">
<div class="col6 col12-dekstop-device col12-dekstopL-device">
<div class="form">
<h3 class="fw-medium">Peats brings together people at educate. fun and meals podcast and music</h3>
<div class="spacer-px30"></div>
<form name="subsForm" method="post" onsubmit="return validationSubscribeFrom()">
<div class="form-group">
<!-- <fieldset>
<legend>Subscribe</legend>
<input type="email" name="" id="emailAddress">
<input type="button" value="Stay Tuned!" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
</fieldset> -->
<!-- mantap -->
<input type="email" name="emailAddress" class="form-control1" placeholder="What's your email?">
<input type="submit" value="Stay Tuned!" class="tombol">
<!-- end mantap -->
</div>
</form>
<!-- <form action="#" method="post" onsubmit="myFunction()">
<input type="text" name="emailAddress" id="email"><br>
<input type="submit" value="Stay Tuned!"> -->
</form>
</div>
</div>
</div>
</article>
<!-- End Subcribe -->
</main>
<footer class="footer spacerFirst">
<div class="container">
<div class="row jc-sb">
<div class="col3 col6-dekstop-device col3-dekstopL-device">
<h3><a href="">Peats.</a></h3>
<div class="spacer-px20"></div>
<p>Submission © 2022, Joko Saputro. All right reserved</p>
</div>
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<h3>Information</h3>
<div class="spacer-px20"></div>
<p>About Us</p>
<p>Career</p>
<p>Affiliates</p>
</div>
<div class="col3 col6-tablet-device col6-dekstop-device col3-dekstopL-device">
<h3>Help</h3>
<div class="spacer-px20"></div>
<p>Privacy Policy</p>
<p>Term & Condition</p>
<p>Contact Us</p>
<p>FAQ</p>
</div>
<div class="col3 col6-dekstop-device col3-dekstopL-device">
<h3>Our Mobile App</h3>
<div class="spacer-px20"></div>
<p>Download peats. app available on IOS and Android</p>
<div class="spacer-px20"></div>
<a href="https://www.freepnglogos.com/pics/app-store-png-logo">
<img src="assets/image/app-play-store-logo.png" alt="logo App and Play Store" class="img-responsive">
</a>
</div>
</div>
</div>
</footer>
<script src="assets/js/app.js"></script>
</body>
</html>