-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
350 lines (338 loc) · 14.9 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
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="en" class="sm:scroll-smooth">
<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="stylesheet" href="./css/style.css" />
<script
src="https://kit.fontawesome.com/e62294c5aa.js"
crossorigin="anonymous"
></script>
<script src="js/main.js" defer></script>
<title>Fishy</title>
</head>
<body
class="dark: min-h-screen justify-center bg-slate-50 text-white dark:bg-black"
>
<div class="sticky top-0 z-10 mx-auto bg-purple-900">
<header class="mx-auto max-w-6xl">
<section
class="mx-auto flex max-w-6xl items-center justify-between p-4"
>
<h1 class="text-3xl font-medium">
<a href="#hero"> Fishy 🦈</a>
</h1>
<div>
<button
id="hamburger-button"
class="relative h-8 w-8 cursor-pointer text-3xl md:hidden"
>
<div
class="absolute top-4 -mt-0.5 h-1 w-8 rounded bg-white before:absolute before:h-1 before:w-8 before:-translate-x-4 before:-translate-y-3 before:rounded before:bg-white before:transition-all before:duration-500 before:content-[''] after:absolute after:h-1 after:w-8 after:-translate-x-4 after:translate-y-3 after:rounded after:bg-white after:transition-all after:duration-500 after:content-['']"
></div>
<!-- <i
class="fa-solid fa-bars"></i> -->
</button>
<nav class="hidden space-x-8 text-xl md:block" aria-label="main">
<a href="#species" class="hover:opacity-90">Species</a>
<a href="#testimonials" class="hover:opacity-90">Testimonials</a>
<a href="#contact" class="hover:opacity-90">Contact</a>
<a href="login.html" class="hover:opacity-90">Login</a>
</nav>
</div>
</section>
<section
id="mobile-menu"
class="top-68 md:none absolute hidden w-full origin-top animate-open-menu flex-col justify-center bg-black text-5xl"
>
<!-- <button class="text-8xl w-full px-6">
×
</button> -->
<nav
class="flex min-h-screen flex-col items-center py-8"
aria-label="mobile"
>
<a
href="#hero"
class="w-full py-6 text-center hover:opacity-90"
>Home</a
>
<a
href="#species"
class="w-full py-6 text-center hover:opacity-90"
>Species</a
>
<a
href="#testimonials"
class="w-full py-6 text-center hover:opacity-90"
>What they said</a
>
<a
href="#contact"
class="w-full py-6 text-center hover:opacity-90"
>Contact Us</a
>
<a href="login.html" class=" w-full py-6 text-center hover:opacity-90">Login</a>
<a
href="#footer"
class="w-full py-6 text-center hover:opacity-90"
>Address</a
>
</nav>
</section>
</header>
</div>
<div class="container mx-auto min-h-screen">
<main class="mx-auto max-w-6xl">
<section
id="hero"
class="wideScreen:section-min-height tallScreen:section-min-height mb-12 flex scroll-mt-40 flex-col-reverse items-center justify-center gap-8 p-6 sm:flex-row"
>
<article class="sm:w-1/2">
<h2
class="max-w-md text-center text-4xl font-bold text-slate-900 dark:text-white sm:text-left sm:text-5xl"
>
The largest
<span class="text-purple-900"> tropical fish </span> is the ocean
sunfish
</h2>
<p
class="mt-4 max-w-md text-center text-2xl text-slate-700 dark:text-slate-400 sm:text-left"
>
It can weigh up to 2,200 pounds and grow up to 10 feet in length.
</p>
<p
class="mt-4 max-w-md text-center text-2xl text-slate-700 dark:text-slate-400 sm:text-left"
>
You Did you Know what a fish says when he hit a wall --- Dam
</p>
</article>
<img
class="w-1/2 rounded-[100px] shadow-2xl"
src="./img/3D render of a cute tropical fish in an aquarium on a dark blue background, digital art.webp"
alt="fish image"
/>
</section>
<hr class="dark:bg-white mx-auto w-1/2 bg-black" />
<section
id="species"
class="wideScreen:section-min-height tallScreen:section-min-height my-12 scroll-mt-20 p-6"
>
<h2
class="text-center text-4xl font-bold text-slate-900 dark:text-white sm:text-5xl"
>
Species
</h2>
<ul
class="mx-auto my-12 flex list-none flex-col items-center sm:items-start gap-8 sm:flex-row"
>
<li
class=" mx-4 flex w-2/3 flex-col items-center rounded-3xl border border-solid border-slate-900 bg-white px-2 py-6 shadow-xl dark:border dark:border-gray-100 dark:bg-black"
>
<img
src="./img/DALL·E 2023-05-02 09.28.54 - 3D render of a cute tropical fish in an aquarium on a dark blue background, digital art.png"
alt=""
class="mb-6 w-1/2 rounded-full shadow-2xl"
/>
<h3 class="text-center text-3xl text-slate-900 dark:text-white">
Clownfish
</h3>
<p
class="mt-2 hidden text-center text-3xl text-slate-500 hover:line-clamp-none dark:text-slate-400 sm:block sm:line-clamp-4"
>
It made famous by the movie "Finding Nemo," is immune to the
venomous sting of sea anemones.
</p>
<h3
class="mt-2 text-center text-2xl text-slate-500 line-clamp-3 hover:line-clamp-none dark:text-slate-400 sm:hidden"
>
It made famous by the movie "Finding Nemo," is immune to the
venomous sting of sea anemones.
</h3>
</li>
<li
class=" mx-auto flex w-2/3 flex-col items-center rounded-3xl border border-solid border-slate-900 bg-white px-2 py-6 shadow-xl dark:border dark:border-gray-100 dark:bg-black"
>
<img
src="./img/DALL·E 2023-05-02 09.29.03 - 3D render of a cute tropical fish in an aquarium on a dark blue background, digital art.png"
alt=""
class="mb-6 w-1/2 rounded-full shadow-2xl"
/>
<h3 class="text-center text-3xl text-slate-900 dark:text-white">
Paedocypris
</h3>
<p
class="mt-2 hidden text-center text-3xl text-slate-500 hover:line-clamp-none dark:text-slate-400 sm:block sm:line-clamp-4"
>
The smallest tropical fish, which is found in Indonesia and can
fit on the tip of your finger.
</p>
<h3
class="mt-2 text-center text-2xl text-slate-500 line-clamp-3 hover:line-clamp-none dark:text-slate-400 sm:hidden"
>
The smallest tropical fish, which is found in Indonesia and can
fit on the tip of your finger. nashedi
</h3>
</li>
<li
class=" mx-auto flex w-2/3 flex-col items-center rounded-3xl border border-solid border-slate-900 bg-white px-2 py-6 shadow-xl dark:border dark:border-gray-100 dark:bg-black"
>
<img
src="./img/DALL·E 2023-05-02 09.29.06 - 3D render of a cute tropical fish in an aquarium on a dark blue background, digital art.png"
alt=""
class="mb-6 w-1/2 rounded-full shadow-2xl"
/>
<h3 class="text-center text-3xl text-slate-900 dark:text-white">
Angelfish
</h3>
<div>
<p
class="mt-2 hidden text-center text-3xl text-slate-500 hover:line-clamp-none dark:text-slate-400 sm:block sm:line-clamp-4"
>
It is a popular tropical fish in the aquarium trade, and can
live up to 10 years in captivity.
</p>
<h3
class="mt-2 block text-center text-2xl text-slate-500 line-clamp-3 hover:line-clamp-none dark:text-slate-400 sm:hidden"
>
It is a popular tropical fish in the aquarium trade, and can
live up to 10 years in captivity.
</h3>
</div>
</li>
</ul>
</section>
<hr class="bg:bgwhite mx-auto w-1/2 bg-black" />
<section
id="testimonials"
class="wideScreen:section-min-height tallScreen:section-min-height my-12 scroll-mt-20 p-6"
>
<h2
class="text-center text-4xl font-bold text-slate-900 dark:text-white sm:text-5xl"
>
What they said
</h2>
<figure class="my-12">
<blockquote
class="relative rounded-3xl bg-purple-900 py-12 pl-14 pr-8 dark:bg-black"
>
<p
class="text 2xl after:transform-x-2 mt-2 text-left text-white before:absolute before:left-0 before:top-0 before:translate-x-2 before:translate-y-2 before:transform before:font-serif before:text-9xl before:text-white before:opacity-25 before:content-['\201C'] after:absolute after:bottom-0 after:right-0 after:translate-y-16 after:font-serif after:text-9xl after:text-white after:opacity-25 after:content-['\201D'] dark:text-slate-400 sm:text-3xl"
>
The world is full of magical things, patiently waiting for our
senses to grow sharper.
</p>
</blockquote>
<figcaption
class="mt-2 text-right text-xl italic text-slate-500 dark:text-slate-400 sm:text-2xl"
>
— W.B. Yeats
</figcaption>
</figure>
<figure class="my-12">
<blockquote
class="relative rounded-3xl bg-purple-900 py-12 pl-14 pr-8 dark:bg-black"
>
<p
class="text 2xl after:transform-x-2 mt-2 text-left text-white before:absolute before:left-0 before:top-0 before:translate-x-2 before:translate-y-2 before:transform before:font-serif before:text-9xl before:text-white before:opacity-25 before:content-['\201C'] after:absolute after:bottom-0 after:right-0 after:translate-y-16 after:font-serif after:text-9xl after:text-white after:opacity-25 after:content-['\201D'] dark:text-slate-400 sm:text-3xl"
>
The more I learn about the ocean, the more I want to protect it.
And the more I protect it, the more I want to learn about it.
</p>
</blockquote>
<figcaption
class="mt-2 text-right text-xl italic text-slate-500 dark:text-slate-400 sm:text-2xl"
>
— Sylvia Earle
</figcaption>
</figure>
<figure class="my-12">
<blockquote
class="relative rounded-3xl bg-purple-900 py-12 pl-14 pr-8 dark:bg-black"
>
<p
class="text 2xl after:transform-x-2 mt-2 text-left text-white before:absolute before:left-0 before:top-0 before:translate-x-2 before:translate-y-2 before:transform before:font-serif before:text-9xl before:text-white before:opacity-25 before:content-['\201C'] after:absolute after:bottom-0 after:right-0 after:translate-y-16 after:font-serif after:text-9xl after:text-white after:opacity-25 after:content-['\201D'] dark:text-slate-400 sm:text-3xl"
>
In every drop of water, there is a story of life.
</p>
</blockquote>
<figcaption
class="mt-2 text-right text-xl italic text-slate-500 dark:text-slate-400 sm:text-2xl"
>
— Leena Arif
</figcaption>
</figure>
</section>
<hr class="bg:bgwhite mx-auto w-1/2 bg-black" />
<section
id="contact"
class="wideScreen:section-min-height tallScreen:section-min-height my-12 scroll-mt-16 p-6"
>
<h2
class="text-center text-4xl font-bold text-slate-900 dark:text-white sm:text-5xl"
>
Your Voice
</h2>
<form
action=""
class="mx-auto flex max-w-6xl flex-col items-start gap-4 text-2xl sm:text-3xl"
>
<label for="subject">Subject: </label>
<input
type="text"
id="subject"
name="subject"
required
minlength="3"
maxlength="60"
placeholder="Subject"
class="w-full rounded-xl border border-solid border-slate-900 p-3 text-2xl text-black dark:border-none sm:text-3xl
dark:bg-slate-300"
/>
<label for="message">message</label>
<textarea
name="message"
id="message"
cols="30"
rows="10"
placeholder="Share your thoughts"
b
required
class="w-full rounded-xl border border-solid border-slate-900 p-3 text-2xl text-black dark:border-none sm:text-3xl dark:bg-slate-300"
></textarea>
<button
class="w-48 rounded-xl border border-solid border-slate-900 bg-purple-900 p-3 text-white hover:bg-purple-700 active:bg-purple-500 dark:border-none"
>
Submit
</button>
</form>
</section>
<hr class="bg:bgwhite mx-auto w-1/2 bg-black" />
</main>
</div>
<footer id="footer" class="bg-purple-900 text-xl text-white">
<section
class="mx-auto flex max-w-6xl flex-col p-4 sm:flex-row sm:justify-between"
>
<address>
<h2>
Tropical Fish Haven 123 Coral Reef Street Bluewater Bay, FL -135
United States
</h2>
</address>
<nav class="hidden flex-col gap-2 md:flex" aria-label="footer">
<a href="#species" class="hover:opacity-90">Species</a>
<a href="#testimonials" class="hover:opacity-90">what they said</a>
<a href="#contact" class="hover:opacity-90">Your Voice</a>
</nav>
<div class="flex flex-row justify-center sm:flex-col sm:gap-2">
<p class="text-right opacity-60">
Copyright © <span id="year">2023 </span>
</p>
<p class="text-right opacity-60">No rights Reserved</p>
</div>
</section>
</footer>
</body>
</html>