-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (257 loc) · 17 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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<link rel="stylesheet" href="css/style.css" />
<title>Tailwind</title>
<script>
// tailwind.config = {
// darkMode: 'class',
// theme: {
// fontFamily: {
// inter: ['Inter'],
// },
// },
// };
</script>
<style type="text/tailwindcss">
/* * {
border: 1px solid red;
} */
/* TOGGLE DARK MODE */
#toggle:checked ~ label div.toggle-circle {
@apply translate-x-3;
}
</style>
</head>
<!-- TOGGLE DARK MODE -->
<div class="flex justify-center pt-7">
<span class="mr-2 text-sm text-slate-500 dark:text-slate-100"
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
/>
</svg>
</span>
<input type="checkbox" id="toggle" class="hidden" />
<label for="toggle">
<div class="flex items-center h-6 p-1 rounded-full cursor-pointer w-9 bg-slate-500 dark:bg-slate-100">
<div class="w-4 h-4 rounded-full bg-slate-100 toggle-circle dark:bg-slate-800"></div>
</div>
</label>
<span class="ml-2 text-sm text-slate-500 dark:text-slate-100"
><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
/>
</svg>
</span>
</div>
<!-- END TOGGLE DARK MODE -->
<body class="dark:bg-slate-800 dark:text-slate-200">
<h1 class="flex max-w-lg m-4 mx-auto font-bold text-transparent text-8xl bg-gradient-to-tr from-blue-500 to-teal-400 bg-clip-text">Belajar Tailwind</h1>
<section class="max-w-lg mx-auto font-serif">
<h2 class="mb-3 text-3xl font-bold">Belajar Mengenai Typography pada Tailwindcss</h2>
<div class="mb-4 text-gray-600 dark:text-slate-300">By <a href="#" class="font-bold text-gray-900 dark:text-slate-100">Azzam,</a> 1 January 2025</div>
<p class="mb-2">
Lorem ipsum dolor <a href="#" class="font-semibold text-red-500 underline">sit under </a>amet consectetur adipisicing elit. Consequuntur similique magni, hic eum ipsum placeat quis tempora sed quae! Iure quidem qui eaque praesentium
illo. Amet inventore quidem tempora fuga, optio suscipit similique. Laboriosam, distinctio voluptates incidunt ipsa quia molestias ea, in autem illo labore velit, ullam quidem odio neque.
</p>
<blockquote class="p-8 mb-2 text-xl italic font-thin bg-gradient-to-tr from-cyan-500 via-red-100 to-blue-500 text-slate-900">
"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi placeat sint porro fugiat quo possimus error quasi perferendis doloribus autem?
</blockquote>
<p class="mb-2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quis nulla quibusdam, dolor commodi laudantium quisquam placeat magnam dolores incidunt id laborum ex, numquam officia veritatis voluptatum earum pariatur tempora?
</p>
</section>
<div class="max-w-lg mx-auto mt-[90px] h-96 bg-[#cbcbcb] overflow-y-scroll bg-cover rounded-2xl shadow-xl shadow-slate-500" style="background-image: url('q\ -\ Copy.JPG')">
<p class="p-5 text-2xl text-yellow-100">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae possimus sed ex, minus provident suscipit nemo error. Facilis perspiciatis odit blanditiis obcaecati sint voluptatem quis qui dolor natus itaque accusamus aut earum
beatae nisi vitae culpa, commodi ipsam repudiandae laboriosam saepe! Autem repudiandae a impedit consectetur totam doloribus earum nemo esse? Sapiente, quas dolore nam veniam debitis obcaecati eos atque commodi molestiae nobis dolor
illum laborum ex beatae tempora exercitationem deleniti reiciendis impedit minima neque voluptatem omnis optio maxime? Rem, rerum minus. Sint quam accusamus exercitationem laborum fuga explicabo, neque facere, perspiciatis autem
commodi earum recusandae vel, hic blanditiis! Beatae corrupti voluptates architecto molestiae illum ex recusandae nam. Delectus officiis suscipit, minus nostrum sed numquam odio cupiditate id, voluptatibus deleniti voluptatum
laudantium aliquid esse voluptas et corporis est ea amet ex omnis dicta nihil! Temporibus inventore quibusdam exercitationem! Accusamus cumque aliquid necessitatibus ab reiciendis ipsa tempora repellat illum soluta non, ea odio
iste. Magni, animi! Vel distinctio adipisci optio voluptate, alias autem ullam quasi molestiae impedit quam? Ipsa officia assumenda possimus! At minus impedit ea asperiores, corporis sint tenetur inventore nemo vitae labore in
corrupti soluta neque laudantium voluptatem natus eaque nostrum possimus assumenda eum! Totam consectetur fuga sit nihil.
</p>
</div>
<div class="max-w-lg mx-auto mt-[90px] h-96 bg-slate-300 bg-contain bg-no-repeat bg-center rounded-2xl shadow-xl shadow-slate-500 overflow-hidden" style="background-image: url('q\ -\ Copy.JPG')">
<div class="w-full h-full bg-[#649195] mix-blend-overlay"></div>
</div>
<div class="max-w-lg mx-auto mt-[90px] h-96 bg-slate-300 bg-contain bg-no-repeat bg-center rounded-2xl shadow-xl shadow-slate-500 overflow-hidden blur-sm hover:blur-none" style="background-image: url('q\ -\ Copy.JPG')"></div>
<div class="max-w-lg mx-auto mt-[90px] h-96 bg-slate-300 bg-contain bg-no-repeat bg-center rounded-2xl shadow-xl shadow-slate-500 flex" style="background-image: url('q\ -\ Copy.JPG')">
<div class="m-auto w-72 h-72 bg-white/25 backdrop-blur-sm"></div>
</div>
<hr class="my-20" />
<button
class="block max-w-lg px-6 py-3 mx-auto font-bold text-white rounded-full mt-9 bg-sky-500 hover:bg-sky-600 active:bg-sky-800 focus:ring ring-sky-600 ring-offset-2 dark:bg-slate-300 dark:text-slate-800 dark:hover:text-slate-900 dark:hover:bg-slate-100"
>
Save changes
</button>
<div class="max-w-lg p-6 mx-auto my-10 border shadow-md group border-slate-200 rounded-xl hover:bg-sky-500 hover:ring-sky-500 dark:hover:bg-slate-300">
<h5 class="mb-3 text-lg font-bold text-slate-800 group-hover:text-white dark:group-hover:text-slate-800 dark:text-slate-300">My Cars</h5>
<p class="mb-5 font-serif text-slate-500 group-hover:text-white selection:bg-gray-800 dark:group-hover:text-slate-800">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quos quas provident placeat. Vel obcaecati voluptas possimus mollitia error aliquam? Cupiditate aut modi error incidunt, voluptas eveniet. Expedita, incidunt dolore?
</p>
<p
class="font-serif text-slate-500 group-hover:text-white selection:bg-gray-800 first-line:uppercase first-line:tracking-widest first-letter:text-7xl first-letter:font-bold first-letter:text-slate-500 first-letter:mr-3 first-letter:float-left dark:group-hover:text-slate-800"
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas quos quas provident placeat. Vel obcaecati voluptas possimus mollitia error aliquam? Cupiditate aut modi error incidunt, voluptas eveniet. Expedita, incidunt dolore?
</p>
</div>
<div class="max-w-lg p-6 mx-auto my-10 border shadow-md group border-slate-200 rounded-xl">
<form action="">
<label for="email">
<span class="block font-semibold mb-2 text-slate-700 after:content-['*'] after:text-pink-700 after:ml-0.5 dark:text-slate-300">Email</span>
<input
type="email"
id="email"
placeholder="Masukkan E-Mail anda"
class="block w-full px-3 py-2 text-sm border rounded-sm shadow placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-sky-400 focus:border-sky-400 invalid:text-pink-700 invalid:focus:ring-pink-400 invalid:focus:border-pink-400 peer"
/>
<p class="invisible m-1 text-sm text-pink-700 peer-invalid:visible">Email tidak valid</p>
</label>
</form>
</div>
<hr class="m-20 border-t-4 border-slate-900" />
<div class="w-40 h-40 mx-auto mb-40 bg-pink-500 mt-14 group">
<div class="w-full h-full transition origin-top-left rounded-lg shadow-lg bg-sky-500 group-hover:rotate-45"></div>
</div>
<!-- PROJECTS -->
<a href="projects.html">
<div class="mx-auto overflow-hidden shadow-2xl w-96 h-72 bg-slate-800 rounded-xl mt-14 ring-slate-700 ring-offset-1 group hover:ring">
<h5 class="pt-5 text-xl font-semibold tracking-wider pl-7 text-slate-50">Project 1</h5>
<p class="p-2 px-6 font-light transition duration-500 text-slate-50 pl-7 group-hover:opacity-0">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis placeat ex repudiandae totam. Voluptas ipsa beatae eum tenetur atque nisi culpa
</p>
<div class="h-56 mt-16 overflow-hidden transition duration-500 ease-in-out origin-top-left bg-cover rounded-lg shadow-lg mx-7 w-72 bg-slate-500 group-hover:-translate-y-40"><img src="q - Copy.JPG" alt="Project 1" /></div>
</div>
</a>
<!-- END PROJECTS -->
<hr class="m-20 border-t-4 border-slate-900" />
<div class="container mx-auto">
<div class="relative p-10 border rounded-lg shadow-2xl">
<div class="fixed flex w-10 h-10 bg-pink-300 rounded-full cursor-pointer bottom-5 right-5"><a href="#" class="m-auto text-xl">❌</a></div>
<img src="q - Copy.JPG" alt="azz" width="150" class="float-left mr-5" />
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Asperiores rem, eligendi aspernatur aut placeat repellendus tempore doloribus corrupti perferendis, omnis aliquam, ab repellat? Ipsa enim ea, ut, labore dolor reprehenderit
nostrum obcaecati iure doloremque quisquam optio nisi vero cum quos tempore possimus. Sint modi eos deserunt maxime. Quo quae accusantium officia eos repellendus odio voluptas itaque natus facere ex maiores, ea deserunt est
ducimus a cum voluptatibus mollitia beatae quia quaerat? Excepturi mollitia, corrupti nulla nobis iure corporis voluptate, culpa minus eaque eveniet perferendis ea quaerat dolores esse explicabo facere harum tempore, in hic? Illo,
omnis corporis. Quos eos necessitatibus recusandae nostrum vitae hic tempora, incidunt dolore, aliquid voluptatum sunt nihil unde et eligendi odit debitis dolorem quo sequi iusto fugiat cupiditate illo consequatur ullam? Maiores
natus optio vitae obcaecati, esse et laboriosam minima magnam! Perspiciatis repudiandae quia, nisi sequi voluptatibus libero molestiae amet hic, at neque deleniti temporibus enim animi deserunt facere quis mollitia! Voluptatem
nesciunt ab maxime, minus odio est, voluptatum quia explicabo cupiditate officia repellat provident eaque quisquam. Pariatur, ex quis laudantium, saepe, enim expedita illum repudiandae maiores ea ipsa consequatur recusandae
numquam nostrum iusto aliquam dolorem facere. Repellat, ullam totam! Voluptate esse maxime nemo aperiam eum.
</p>
</div>
</div>
<hr class="m-20 border-t-4 border-slate-900" />
<div class="container p-10 mx-auto mt-20 border rounded-lg shadow-lg columns-3">
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
<img src="q - Copy.JPG" alt="azzam" class="mb-4" />
</div>
<hr class="my-20 border-t-4 border-slate-900" />
<div class="container max-w-lg mx-auto font-serif sm:max-w-xl lg:flex lg:max-w-full">
<div class="lg:p-12 lg:flex-1">
<h3 class="text-3xl font-bold text-slate-800 sm:text-5xl">Az<span class="rounded-lg bg-slate-800 text-slate-300">zam</span> Azhari</h3>
<img src="q - Copy.JPG" alt="az" class="mt-5 shadow-xl rounded-xl lg:hidden" />
<h2 class="mt-6 text-2xl font-semibold text-slate-700">Adventure</h2>
<p class="mt-2 text-slate-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti dolores aperiam at consequatur libero saepe cum blanditiis quas ab officiis iste eaque numquam rem consectetur.</p>
<div class="mt-4">
<a href="#" class="inline-block px-5 py-3 text-sm font-semibold tracking-widest uppercase rounded-lg shadow-lg bg-slate-800 text-slate-100">Follow Instagram</a>
</div>
</div>
<div class="hidden md:block">
<img src="q - Copy.JPG" alt="az" />
</div>
</div>
<!-- My Gallery -->
<h2 class="mt-24 mb-10 text-3xl font-bold text-center text-slate-800">My Gallery</h2>
<div class="container px-6 mx-auto font-sans sm:flex sm:flex-wrap sm:gap-6 sm:justify-center">
<div class="mb-10 overflow-hidden rounded-md shadow-2xl sm:mb-0 sm:w-64 md:w-80 lg:w-80">
<img src="q - Copy.JPG" alt="dsada" class="w-full" />
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold text-slate-700">Image Title</div>
<p class="text-sm text-slate-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, officiis!</p>
</div>
</div>
<div class="mb-10 overflow-hidden rounded-md shadow-2xl sm:mb-0 sm:w-64 md:w-80 lg:w-80">
<img src="q - Copy.JPG" alt="dsada" class="w-full" />
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold text-slate-700">Image Title</div>
<p class="text-sm text-slate-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, officiis!</p>
</div>
</div>
<div class="mb-10 overflow-hidden rounded-md shadow-2xl sm:mb-0 sm:w-64 md:w-80 lg:w-80">
<img src="q - Copy.JPG" alt="dsada" class="w-full" />
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold text-slate-700">Image Title</div>
<p class="text-sm text-slate-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, officiis!</p>
</div>
</div>
<div class="mb-10 overflow-hidden rounded-md shadow-2xl sm:mb-0 sm:w-64 md:w-80 lg:w-80">
<img src="q - Copy.JPG" alt="dsada" class="w-full" />
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold text-slate-700">Image Title</div>
<p class="text-sm text-slate-500">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nihil, officiis!</p>
</div>
</div>
</div>
<!-- End My Gallery -->
<hr class="my-20 border-t-4 border-slate-900" />
<div class="grid grid-cols-2 gap-2 p-2 mt-64 md:grid-cols-4 md:p-4">
<h2 class="text-xl font-semibold h-15 text-slate-700 md:col-start-4 md:row-start-2 md:flex"><span class="self-center">Welcome WPU</span></h2>
<div class="text-lg font-bold h-15 text-slate-600 md:col-start-2 md:row-start-2 md:flex"><span class="self-end">@azzamazhari._</span></div>
<div class="group card-gallery">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery md:col-start-3">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery md:col-start-2">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery md:col-start-4">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery md:col-start-3">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
<div class="group card-gallery md:col-start-3">
<div class="bg-[url('/img-grid/1.jpg')] card-foto"></div>
</div>
</div>
<h1 class="text-6xl">Azzam Azhari</h1>
<div class="mb-96"></div>
<script>
// TOGGLE DARK MODE
const checkbox = document.querySelector('#toggle');
const html = document.querySelector('html');
checkbox.addEventListener('click', function () {
checkbox.checked ? html.classList.add('dark') : html.classList.remove('dark');
});
// END TOGGLE DARK MODE
</script>
</body>
</html>