-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
317 lines (308 loc) · 19.5 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./dist/output.css" rel="stylesheet">
<script src="https://unpkg.com/scrollreveal"></script>
<title>Neon Components</title>
</head>
<body class="bg-[#12102a] font-pop overflow-hidden lg:overflow-visible">
<section class="relative w-full h-full">
<div class="w-screen min-h-screen flex items-center justify-center fixed z-50 lg:hidden bg-[#12102a]">
<div class="w-fit h-fit relative">
<h1 class="font-LED text-4xl absolute -z-10 font-extralight text-blue-500 blur text-center">Sorry NeonZone Avaliable For Dekstop Only</h1>
<h1 class="font-LED text-4xl font-extralight text-white text-center">Sorry NeonZone Avaliable For Dekstop Only</h1>
</div>
</div>
<!-- Jumbotron -->
<section class="relative h-screen w-full flex items-center">
<div class="nav">
<div class="relative mr-8">
<h1 class="font-LED text-4xl font-bold text-pink-500 absolute -z-10 blur-md animate-pulse">Neon Zone</h1>
<h1 class="font-LED text-4xl font-bold text-white">Neon Zone</h1>
</div>
<div class="flex justify-between">
<ul class="flex space-x-4">
<div class="relative group">
<li
class="absolute font-medium text-pink-400 -z-10 blur-sm group-hover:underline-offset-4 group-hover:underline">
Home</li>
<a href="#" class="">
<li class="font-extralight text-white group-hover:underline-offset-4 group-hover:underline">
Home</li>
</a>
</div>
<div class="relative group">
<li
class="absolute font-medium text-pink-400 -z-10 blur-sm group-hover:underline-offset-4 group-hover:underline">
About</li>
<a href="#" class="">
<li class="font-extralight text-white group-hover:underline-offset-4 group-hover:underline">
About</li>
</a>
</div>
<div class="relative group">
<li
class="absolute font-medium text-pink-400 -z-10 blur-sm group-hover:underline-offset-4 group-hover:underline">
Component</li>
<a href="./AlertComps.html" class="">
<li class="font-extralight text-white group-hover:underline-offset-4 group-hover:underline">
Component</li>
</a>
</div>
<div class="relative group">
<li
class="absolute font-medium text-pink-400 -z-10 blur-sm group-hover:underline-offset-4 group-hover:underline">
GitHub</li>
<a href="#" class="">
<li class="font-extralight text-white group-hover:underline-offset-4 group-hover:underline">
GitHub</li>
</a>
</div>
</ul>
</div>
</div>
<div class="image">
<div class="bg-gradient-to-r from-[#12102a] to-transparent absolute w-full h-full">
</div>
<img src="./src/img/background_neon.jpg" class="w-full">
</div>
<div class="intro">
<h1 class="absolute -z-10 font-LITE text-7xl text-blue-400 blur-sm animate-pulse">Tailwind Component</h1>
<h1 class="font-LITE text-7xl text-blue-400">Tailwind Component</h1>
<p class="my-4 text-white text-sm">Website yang Anda buat dengan tema neon ini tentu saja akan memberikan manfaat
besar bagi pengguna Tailwind CSS yang ingin membuat komponen dengan tema neon. Dengan website ini,
pengguna dapat dengan mudah menemukan komponen yang mereka butuhkan dan menggunakannya untuk proyek
mereka dengan cepat dan efisien.</p>
<div class="relative flex group w-fit">
<a href="#" class="absolute blur bg-pink-500 py-2 px-4 rounded-xl w-fit -z-10 text-white group-hover:animate-pulse delay-75">Get Start</a>
<a href="#" class="bg-pink-500 py-2 px-4 rounded-xl w-fit text-white group-hover:bg-cyan-500">Get Start</a>
</div>
</div>
</section>
<!-- Jumbotron -->
<!-- Card -->
<section class="flex items-center justify-center -mt-10 bg-gradient-to-b from-[#12102a] to-cyan-500">
<div class="block">
<div class="flex items-center justify-center w-full mt-10">
<h1
class="title">
Kenapa Harus Neon Zone?</h1>
</div>
<div class="items">
<a href="#"
class="block max-w-sm p-6 bg-[#12102a] border border-gray-200 rounded-lg shadow hover:-translate-y-3 transition-transform">
<div class="relative w-fit h-fit">
<h5 class="mb-2 text-2xl font-LED tracking-tight text-white">Kemudahan Penggunaan
</h5>
<h5 class="mb-2 text-2xl font-LED tracking-tight text-cyan-500 blur-sm absolute top-0 -z-[-5]">Kemudahan
Penggunaan
</h5>
</div>
<p class="text-white text-sm">menyediakan antarmuka yang mudah digunakan dan intuitif bagi pengguna Tailwind CSS untuk menemukan komponen yang mereka butuhkan dengan cepat.</p>
</a>
<a href="#"
class="block max-w-sm p-6 bg-[#12102a] border border-gray-200 rounded-lg shadow hover:-translate-y-3 transition-transform">
<div class="relative w-fit h-fit">
<h5 class="mb-2 text-2xl font-LED tracking-tight text-white">Komponen yang Disediakan
</h5>
<h5 class="mb-2 text-2xl font-LED tracking-tight text-cyan-500 blur-sm absolute top-0 -z-[-5]">Komponen yang Disediakan
</h5>
</div>
<p class="text-white text-sm">menyediakan berbagai jenis komponen dengan tema neon yang sudah siap digunakan, sehingga pengguna tidak perlu lagi membuat semuanya dari awal.</p>
</a>
<a href="#"
class="block max-w-sm p-6 bg-[#12102a] border border-gray-200 rounded-lg shadow hover:-translate-y-3 transition-transform">
<div class="relative w-fit h-fit">
<h5 class="mb-2 text-2xl font-LED tracking-tight text-white">Tampilan yang Konsisten
</h5>
<h5 class="mb-2 text-2xl font-LED tracking-tight text-cyan-500 blur-sm absolute top-0 -z-[-5]">Tampilan yang Konsisten
</h5>
</div>
<p class="text-white text-sm">Dengan menggunakan komponen yang disediakan oleh website Anda, pengguna Tailwind CSS dapat memastikan tampilan yang konsisten dan seragam dengan tema neon pada seluruh proyek mereka.</p>
</a>
</div>
</div>
</section>
<!-- Card -->
<!-- Fundamental -->
<section class="bg-[#12102a] py-5 px-6 my-10">
<div class="flex items-center justify-center w-full mb-6">
<h1
class="title">
Info Dari Neon Zone</h1>
</div>
<div class="flex mt-3 space-x-3">
<div class="isian">
<div class="relative">
<h1 class="font-LED absolute -z-10 blur-sm text-cyan-500 text-xl">Solid Fundamental</h1>
<h1 class="font-LED text-cyan-500 text-xl">Solid Fundamental</h1>
</div>
<p class="text-sm text-white">
Neon Zone menyediakan sejumlah token desain dan komponen yang kuat berdasarkan kerangka kerja Tailwind CSS yang populer. Dari komponen antarmuka pengguna yang paling sering digunakan seperti formulir dan bilah navigasi hingga seluruh tampilan aplikasi yang dirancang baik untuk desktop maupun mobile, kit antarmuka pengguna ini menyediakan dasar yang kuat untuk setiap proyek.
<br><br>
Mendesain dengan komponen Neon Zone yang dapat dengan mudah diterjemahkan menjadi kelas utilitas dari Tailwind CSS merupakan penghemat waktu yang besar!
</p>
<div class="flex items-center">
<div class="bg-cover bg-center w-11 h-11 rounded-full" style="background-image: url(./src/img/aku.png);"></div>
<div class="block ml-3 text-white">
<h1>Bima Mahendra</h1>
<p class="text-xs">Designer and Programer of Neon Zone</p>
</div>
</div>
</div>
<div class="gambaran">
<div class="col-span-2 w-full h-full rounded-xl flex items-end justify-center overflow-hidden group border border-cyan-500 backdrop-blur-sm bg-center bg-no-repeat bg-cover" style="background-image: url(./src/img/car.jpg);">
<div class="bg-gradient-to-b from-transparent p-5 to-[#12102a] text-white w-full translate-y-20 group-hover:translate-y-0 transition-transform">
Neon Super Car
</div>
</div>
<div class="w-full h-full rounded-xl flex items-end justify-center overflow-hidden group border border-cyan-500 backdrop-blur-sm bg-center bg-no-repeat bg-cover" style="background-image: url(./src/img/golem.jpg);">
<div class="bg-gradient-to-b from-transparent p-5 to-[#12102a] text-white w-full translate-y-20 group-hover:translate-y-0 transition-transform">
Neon Golem
</div>
</div>
<div class="w-full h-full rounded-xl flex items-end justify-center overflow-hidden group border border-cyan-500 backdrop-blur-sm bg-center bg-no-repeat bg-cover" style="background-image: url(./src/img/soldiers.jpg);">
<div class="bg-gradient-to-b from-transparent p-5 to-[#12102a] text-white w-full translate-y-20 group-hover:translate-y-0 transition-transform">
Neon Army
</div>
</div>
</div>
</div>
</section>
<!-- Fundamental -->
<!-- Subs -->
<section class="bg-gradient-to-b from-cyan-500 to-[#12102a]">
<div class="subs">
<div class="mx-auto max-w-screen-md text-center">
<h2 class="mb-4 text-4xl font-LED tracking-tight font-extrabold text-pink-500">Subscribe</h2>
<p class="mx-auto mb-8 max-w-2xl font-light text-sm text-[#12102a]">Untuk tetap mengikuti kemajuan rencana jalan, pengumuman, dan diskon eksklusif, Subscribe dengan alamat email Anda.</p>
<form action="#">
<div class="items-center space-x-3 mx-auto mb-3 max-w-screen-sm flex space-y-0">
<div class="relative w-full">
<label for="email" class="hidden mb-2 text-sm font-medium text-gray-300">Email address</label>
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
</div>
<input class="block p-3 pl-10 w-full text-sm text-gray-900 bg-transparent rounded-lg " placeholder="Enter your email" type="email" id="email" required="">
</div>
<div>
<button type="submit" class="py-3 px-5 w-full text-sm font-medium text-center text-white rounded-lg border cursor-pointer bg-primary-700 border-primary-600">Subscribe</button>
</div>
</div>
<div class="mx-auto max-w-screen-sm text-center text-pink-500 newsletter-form-footer text-xs">We care about the protection of your data. <a href="#" class="font-medium text-white">Read our Privacy Policy</a>.</div>
</form>
</div>
</div>
</section>
<!-- Subs -->
</body>
<footer class="bg-[#12102a] text-center text-white">
<div class="px-6 pt-6">
<div class="icons">
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
</svg>
</a>
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
</a>
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M7 11v2.4h3.97c-.16 1.029-1.2 3.02-3.97 3.02-2.39 0-4.34-1.979-4.34-4.42 0-2.44 1.95-4.42 4.34-4.42 1.36 0 2.27.58 2.79 1.08l1.9-1.83c-1.22-1.14-2.8-1.83-4.69-1.83-3.87 0-7 3.13-7 7s3.13 7 7 7c4.04 0 6.721-2.84 6.721-6.84 0-.46-.051-.81-.111-1.16h-6.61zm0 0 17 2h-3v3h-2v-3h-3v-2h3v-3h2v3h3v2z"
fill-rule="evenodd"
clip-rule="evenodd" />
</svg>
</a>
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
</a>
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M4.98 3.5c0 1.381-1.11 2.5-2.48 2.5s-2.48-1.119-2.48-2.5c0-1.38 1.11-2.5 2.48-2.5s2.48 1.12 2.48 2.5zm.02 4.5h-5v16h5v-16zm7.982 0h-4.968v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0v8.399h4.988v-10.131c0-7.88-8.922-7.593-11.018-3.714v-2.155z" />
</svg>
</a>
<a
href="#!"
type="button"
class="m-1 h-9 w-9 rounded-full border-2 border-white uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-black hover:bg-opacity-5 focus:outline-none focus:ring-0 hover:animate-bounce"
data-te-ripple-init
data-te-ripple-color="light">
<svg
xmlns="http:https://www.w3.org/2000/svg"
class="mx-auto h-full w-4"
fill="currentColor"
viewBox="0 0 24 24">
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
</div>
</div>
<div
class="p-4 text-center text-xs">
© 2023 Copyright
<a class="text-whitehite" href="https://tailwind-elements.com/"
>NeonZone</a
>
</div>
</footer>
</section>
<script src="./src/animate.js"></script>
</html>