Hugging Face's logo

Spaces:
TeaCoffee
/
test3
Running

App Files Community
TeaCoffee commited on
Commit
7ed3dcb
·
verified ·
1 Parent(s): 61795cb

Build a super fancy futuristic website for a brand called Arabian Post, featuring css3 animated and interactive hacks.. Arabian post is a bold newspaper publisher from Dubai - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +514 -18
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Test3
3
- emoji: 🌖
4
- colorFrom: red
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: test3
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,515 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Arabian Post - Futuristic News Platform</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
13
+ <style>
14
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Montserrat:wght@300;600&display=swap');
15
+
16
+ :root {
17
+ --primary: #FFD700;
18
+ --secondary: #C0A080;
19
+ --dark: #121212;
20
+ --accent: #E25822;
21
+ }
22
+
23
+ body {
24
+ font-family: 'Montserrat', sans-serif;
25
+ background-color: var(--dark);
26
+ color: white;
27
+ overflow-x: hidden;
28
+ }
29
+
30
+ .futuristic-text {
31
+ font-family: 'Orbitron', sans-serif;
32
+ }
33
+
34
+ .gradient-text {
35
+ background: linear-gradient(90deg, var(--primary), var(--accent));
36
+ -webkit-background-clip: text;
37
+ background-clip: text;
38
+ color: transparent;
39
+ }
40
+
41
+ .glow {
42
+ text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
43
+ }
44
+
45
+ .news-card:hover {
46
+ transform: translateY(-10px);
47
+ box-shadow: 0 20px 25px -5px rgba(255, 215, 0, 0.1), 0 10px 10px -5px rgba(255, 215, 0, 0.04);
48
+ }
49
+
50
+ .hover-scale {
51
+ transition: transform 0.3s ease;
52
+ }
53
+
54
+ .hover-scale:hover {
55
+ transform: scale(1.05);
56
+ }
57
+
58
+ .border-glow {
59
+ border: 1px solid rgba(255, 215, 0, 0.3);
60
+ transition: all 0.3s ease;
61
+ }
62
+
63
+ .border-glow:hover {
64
+ border-color: var(--primary);
65
+ box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
66
+ }
67
+
68
+ #vanta-bg {
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ width: 100%;
73
+ height: 100%;
74
+ z-index: -1;
75
+ opacity: 0.3;
76
+ }
77
+
78
+ .animated-underline {
79
+ position: relative;
80
+ display: inline-block;
81
+ }
82
+
83
+ .animated-underline::after {
84
+ content: '';
85
+ position: absolute;
86
+ width: 0;
87
+ height: 2px;
88
+ bottom: -5px;
89
+ left: 0;
90
+ background-color: var(--primary);
91
+ transition: width 0.3s ease;
92
+ }
93
+
94
+ .animated-underline:hover::after {
95
+ width: 100%;
96
+ }
97
+
98
+ @keyframes pulse {
99
+ 0%, 100% {
100
+ opacity: 1;
101
+ }
102
+ 50% {
103
+ opacity: 0.5;
104
+ }
105
+ }
106
+
107
+ .animate-pulse {
108
+ animation: pulse 2s infinite;
109
+ }
110
+
111
+ .parallax {
112
+ background-attachment: fixed;
113
+ background-position: center;
114
+ background-repeat: no-repeat;
115
+ background-size: cover;
116
+ }
117
+ </style>
118
+ </head>
119
+ <body class="min-h-screen">
120
+ <div id="vanta-bg"></div>
121
+
122
+ <!-- Navigation -->
123
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
124
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125
+ <div class="flex justify-between h-16 items-center">
126
+ <div class="flex items-center">
127
+ <div class="flex-shrink-0 flex items-center">
128
+ <span class="futuristic-text text-2xl font-bold gradient-text">ARABIAN POST</span>
129
+ </div>
130
+ </div>
131
+ <div class="hidden md:block">
132
+ <div class="ml-10 flex items-baseline space-x-8">
133
+ <a href="#" class="px-3 py-2 text-sm font-medium text-white hover:text-yellow-400 animated-underline">Home</a>
134
+ <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">News</a>
135
+ <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Business</a>
136
+ <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Technology</a>
137
+ <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Culture</a>
138
+ <a href="#" class="px-3 py-2 text-sm font-medium text-gray-300 hover:text-yellow-400 animated-underline">Subscribe</a>
139
+ </div>
140
+ </div>
141
+ <div class="flex items-center">
142
+ <button class="p-2 rounded-full text-gray-400 hover:text-white focus:outline-none">
143
+ <i data-feather="search"></i>
144
+ </button>
145
+ <button class="md:hidden p-2 ml-2 rounded-full text-gray-400 hover:text-white focus:outline-none">
146
+ <i data-feather="menu"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </nav>
152
+
153
+ <!-- Hero Section -->
154
+ <section class="relative pt-32 pb-20 md:pt-40 md:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden">
155
+ <div class="max-w-7xl mx-auto">
156
+ <div class="text-center" data-aos="fade-up" data-aos-duration="1000">
157
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 futuristic-text glow">
158
+ <span class="gradient-text">THE FUTURE</span> OF NEWS
159
+ </h1>
160
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-10">
161
+ Breaking news from Dubai and beyond. Experience journalism reimagined for the digital age.
162
+ </p>
163
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
164
+ <button class="px-8 py-4 bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-lg font-bold hover:opacity-90 transition-all duration-300 transform hover:scale-105 border-glow">
165
+ Latest Headlines
166
+ </button>
167
+ <button class="px-8 py-4 bg-transparent border border-yellow-600 text-yellow-400 rounded-lg font-bold hover:bg-yellow-600 hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
168
+ Subscribe Now
169
+ </button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div>
174
+ </section>
175
+
176
+ <!-- Breaking News Ticker -->
177
+ <div class="bg-yellow-600 text-black py-3 overflow-hidden">
178
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
179
+ <div class="flex items-center">
180
+ <span class="font-bold mr-4 whitespace-nowrap">BREAKING:</span>
181
+ <div class="relative flex-1 overflow-hidden">
182
+ <div class="inline-block whitespace-nowrap animate-marquee">
183
+ <span class="mx-4">• UAE announces new economic initiatives to boost digital transformation •</span>
184
+ <span class="mx-4">• Dubai Expo 2025 preparations enter final phase •</span>
185
+ <span class="mx-4">• Middle East tech startups raise record $1.5B in Q3 •</span>
186
+ <span class="mx-4">• New archaeological discovery in Saudi Arabia rewrites regional history •</span>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Featured Stories -->
194
+ <section class="py-16 px-4 sm:px-6 lg:px-8 bg-black bg-opacity-50">
195
+ <div class="max-w-7xl mx-auto">
196
+ <h2 class="text-3xl md:text-4xl font-bold mb-12 text-center futuristic-text" data-aos="fade-up">
197
+ <span class="gradient-text">FEATURED</span> STORIES
198
+ </h2>
199
+
200
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
201
+ <!-- Story 1 -->
202
+ <div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="100">
203
+ <div class="relative h-64 overflow-hidden">
204
+ <img src="http://static.photos/dubai/1024x576/1" alt="Dubai Skyline" class="w-full h-full object-cover hover-scale transition-transform duration-500">
205
+ <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div>
206
+ <div class="absolute top-4 left-4 bg-yellow-600 text-black px-3 py-1 rounded-full text-xs font-bold">
207
+ EXCLUSIVE
208
+ </div>
209
+ </div>
210
+ <div class="p-6">
211
+ <div class="flex items-center text-sm text-gray-400 mb-2">
212
+ <span>POLITICS</span>
213
+ <span class="mx-2">•</span>
214
+ <span>2 HOURS AGO</span>
215
+ </div>
216
+ <h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200">
217
+ UAE Unveils Ambitious 2050 Sustainability Plan
218
+ </h3>
219
+ <p class="text-gray-400 mb-4">
220
+ The government announces revolutionary green initiatives that will transform the country's energy landscape.
221
+ </p>
222
+ <div class="flex items-center text-yellow-400">
223
+ <span class="text-sm font-medium">Read More</span>
224
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Story 2 -->
230
+ <div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="200">
231
+ <div class="relative h-64 overflow-hidden">
232
+ <img src="http://static.photos/technology/1024x576/2" alt="Tech Innovation" class="w-full h-full object-cover hover-scale transition-transform duration-500">
233
+ <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div>
234
+ <div class="absolute top-4 left-4 bg-red-600 text-white px-3 py-1 rounded-full text-xs font-bold">
235
+ BREAKING
236
+ </div>
237
+ </div>
238
+ <div class="p-6">
239
+ <div class="flex items-center text-sm text-gray-400 mb-2">
240
+ <span>TECHNOLOGY</span>
241
+ <span class="mx-2">•</span>
242
+ <span>5 HOURS AGO</span>
243
+ </div>
244
+ <h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200">
245
+ Dubai-Based AI Startup Raises $150M Series B
246
+ </h3>
247
+ <p class="text-gray-400 mb-4">
248
+ The company's revolutionary language model could transform how businesses interact with customers across the Middle East.
249
+ </p>
250
+ <div class="flex items-center text-yellow-400">
251
+ <span class="text-sm font-medium">Read More</span>
252
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <!-- Story 3 -->
258
+ <div class="news-card bg-gray-900 rounded-xl overflow-hidden border-glow transition-all duration-300 hover:border-yellow-500" data-aos="fade-up" data-aos-delay="300">
259
+ <div class="relative h-64 overflow-hidden">
260
+ <img src="http://static.photos/culture/1024x576/3" alt="Cultural Event" class="w-full h-full object-cover hover-scale transition-transform duration-500">
261
+ <div class="absolute bottom-0 left-0 right-0 h-1/2 bg-gradient-to-t from-black to-transparent"></div>
262
+ <div class="absolute top-4 left-4 bg-blue-600 text-white px-3 py-1 rounded-full text-xs font-bold">
263
+ ANALYSIS
264
+ </div>
265
+ </div>
266
+ <div class="p-6">
267
+ <div class="flex items-center text-sm text-gray-400 mb-2">
268
+ <span>CULTURE</span>
269
+ <span class="mx-2">•</span>
270
+ <span>1 DAY AGO</span>
271
+ </div>
272
+ <h3 class="text-xl font-bold mb-3 hover:text-yellow-400 transition-colors duration-200">
273
+ How Contemporary Arab Artists Are Redefining Global Art Scene
274
+ </h3>
275
+ <p class="text-gray-400 mb-4">
276
+ From Dubai to New York, a new generation of Middle Eastern creatives is making waves with boundary-pushing work.
277
+ </p>
278
+ <div class="flex items-center text-yellow-400">
279
+ <span class="text-sm font-medium">Read More</span>
280
+ <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
281
+ </div>
282
+ </div>
283
+ </div>
284
+ </div>
285
+
286
+ <div class="text-center mt-12" data-aos="fade-up">
287
+ <button class="px-8 py-3 bg-transparent border border-yellow-600 text-yellow-400 rounded-lg font-bold hover:bg-yellow-600 hover:bg-opacity-10 transition-all duration-300 transform hover:scale-105">
288
+ View All Stories
289
+ </button>
290
+ </div>
291
+ </div>
292
+ </section>
293
+
294
+ <!-- Video Spotlight -->
295
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-black to-gray-900">
296
+ <div class="max-w-7xl mx-auto">
297
+ <div class="flex flex-col lg:flex-row items-center gap-12">
298
+ <div class="lg:w-1/2" data-aos="fade-right">
299
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 futuristic-text">
300
+ <span class="gradient-text">VIDEO</span> SPOTLIGHT
301
+ </h2>
302
+ <p class="text-xl text-gray-300 mb-8">
303
+ Immerse yourself in our premium video content, bringing you closer to the stories that matter with stunning visuals and in-depth reporting.
304
+ </p>
305
+ <div class="space-y-4">
306
+ <div class="flex items-start">
307
+ <div class="flex-shrink-0 mt-1">
308
+ <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
309
+ </div>
310
+ <div class="ml-4">
311
+ <h3 class="text-lg font-bold text-white">Exclusive Interviews</h3>
312
+ <p class="text-gray-400">Direct access to regional leaders and innovators</p>
313
+ </div>
314
+ </div>
315
+ <div class="flex items-start">
316
+ <div class="flex-shrink-0 mt-1">
317
+ <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
318
+ </div>
319
+ <div class="ml-4">
320
+ <h3 class="text-lg font-bold text-white">360° Documentaries</h3>
321
+ <p class="text-gray-400">Immersive explorations of Middle Eastern culture</p>
322
+ </div>
323
+ </div>
324
+ <div class="flex items-start">
325
+ <div class="flex-shrink-0 mt-1">
326
+ <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
327
+ </div>
328
+ <div class="ml-4">
329
+ <h3 class="text-lg font-bold text-white">Data Visualizations</h3>
330
+ <p class="text-gray-400">Complex stories made simple through animation</p>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ <div class="lg:w-1/2 relative" data-aos="fade-left">
336
+ <div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-xl overflow-hidden border-2 border-gray-700 hover:border-yellow-500 transition-all duration-300">
337
+ <div class="absolute inset-0 flex items-center justify-center">
338
+ <div class="w-20 h-20 rounded-full bg-yellow-600 bg-opacity-80 flex items-center justify-center hover:scale-110 transition-transform duration-300 cursor-pointer">
339
+ <i data-feather="play" class="w-10 h-10 text-white ml-1"></i>
340
+ </div>
341
+ </div>
342
+ <img src="http://static.photos/dubai/1024x576/4" alt="Video Thumbnail" class="w-full h-full object-cover opacity-70 hover:opacity-50 transition-opacity duration-300">
343
+ </div>
344
+ <div class="mt-4 flex justify-between items-center">
345
+ <h3 class="text-xl font-bold">Inside Dubai's Mega Project: The Mars Science City</h3>
346
+ <span class="text-yellow-400 text-sm">12:45</span>
347
+ </div>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </section>
352
+
353
+ <!-- Newsletter -->
354
+ <section class="py-20 px-4 sm:px-6 lg:px-8 bg-gradient-to-r from-yellow-900 to-yellow-700">
355
+ <div class="max-w-4xl mx-auto text-center" data-aos="zoom-in">
356
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 text-black futuristic-text">
357
+ STAY AHEAD WITH OUR <span class="gradient-text">NEWSLETTER</span>
358
+ </h2>
359
+ <p class="text-xl text-black mb-8">
360
+ Get exclusive content, early access to stories, and insights from our editors delivered straight to your inbox.
361
+ </p>
362
+ <div class="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto">
363
+ <input type="email" placeholder="Your email address" class="flex-grow px-6 py-4 rounded-lg bg-black bg-opacity-20 text-white placeholder-gray-300 border border-black border-opacity-30 focus:outline-none focus:ring-2 focus:ring-black focus:ring-opacity-50">
364
+ <button class="px-8 py-4 bg-black text-yellow-400 rounded-lg font-bold hover:bg-opacity-90 transition-all duration-300 transform hover:scale-105">
365
+ Subscribe
366
+ </button>
367
+ </div>
368
+ <p class="text-sm text-black mt-4 opacity-80">
369
+ We respect your privacy. Unsubscribe at any time.
370
+ </p>
371
+ </div>
372
+ </section>
373
+
374
+ <!-- Footer -->
375
+ <footer class="bg-black text-gray-400 py-16 px-4 sm:px-6 lg:px-8">
376
+ <div class="max-w-7xl mx-auto">
377
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
378
+ <div>
379
+ <h3 class="text-2xl font-bold mb-6 futuristic-text gradient-text">ARABIAN POST</h3>
380
+ <p class="mb-6">
381
+ The leading digital news platform in the Middle East, bringing you fearless journalism and innovative storytelling.
382
+ </p>
383
+ <div class="flex space-x-4">
384
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300">
385
+ <i data-feather="twitter"></i>
386
+ </a>
387
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300">
388
+ <i data-feather="instagram"></i>
389
+ </a>
390
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300">
391
+ <i data-feather="linkedin"></i>
392
+ </a>
393
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center hover:bg-yellow-600 hover:text-black transition-all duration-300">
394
+ <i data-feather="youtube"></i>
395
+ </a>
396
+ </div>
397
+ </div>
398
+ <div>
399
+ <h4 class="text-lg font-bold text-white mb-6">SECTIONS</h4>
400
+ <ul class="space-y-3">
401
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Politics</a></li>
402
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Business</a></li>
403
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Technology</a></li>
404
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Culture</a></li>
405
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Opinion</a></li>
406
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Sports</a></li>
407
+ </ul>
408
+ </div>
409
+ <div>
410
+ <h4 class="text-lg font-bold text-white mb-6">COMPANY</h4>
411
+ <ul class="space-y-3">
412
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">About Us</a></li>
413
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Careers</a></li>
414
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Contact</a></li>
415
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Ethics Policy</a></li>
416
+ <li><a href="#" class="hover:text-yellow-400 transition-colors duration-200">Diversity Report</a></li>
417
+ </ul>
418
+ </div>
419
+ <div>
420
+ <h4 class="text-lg font-bold text-white mb-6">LOCATIONS</h4>
421
+ <ul class="space-y-3">
422
+ <li class="flex items-start">
423
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i>
424
+ <span>Dubai Media City, UAE</span>
425
+ </li>
426
+ <li class="flex items-start">
427
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i>
428
+ <span>Riyadh, Saudi Arabia</span>
429
+ </li>
430
+ <li class="flex items-start">
431
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i>
432
+ <span>Doha, Qatar</span>
433
+ </li>
434
+ <li class="flex items-start">
435
+ <i data-feather="map-pin" class="w-4 h-4 mt-1 mr-2 text-yellow-400"></i>
436
+ <span>Cairo, Egypt</span>
437
+ </li>
438
+ </ul>
439
+ </div>
440
+ </div>
441
+ <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center">
442
+ <p>© 2023 Arabian Post. All rights reserved.</p>
443
+ <div class="flex space-x-6 mt-4 md:mt-0">
444
+ <a href="#" class="hover:text-yellow-400 transition-colors duration-200">Privacy Policy</a>
445
+ <a href="#" class="hover:text-yellow-400 transition-colors duration-200">Terms of Service</a>
446
+ <a href="#" class="hover:text-yellow-400 transition-colors duration-200">Cookie Policy</a>
447
+ </div>
448
+ </div>
449
+ </div>
450
+ </footer>
451
+
452
+ <script>
453
+ // Initialize animations and effects
454
+ AOS.init({
455
+ duration: 800,
456
+ once: true
457
+ });
458
+
459
+ feather.replace();
460
+
461
+ // Vanta.js background
462
+ VANTA.GLOBE({
463
+ el: "#vanta-bg",
464
+ mouseControls: true,
465
+ touchControls: true,
466
+ gyroControls: false,
467
+ minHeight: 200.00,
468
+ minWidth: 200.00,
469
+ scale: 1.00,
470
+ scaleMobile: 1.00,
471
+ color: 0xffd700,
472
+ backgroundColor: 0x121212,
473
+ size: 0.8
474
+ });
475
+
476
+ // Marquee animation for ticker
477
+ document.addEventListener('DOMContentLoaded', function() {
478
+ const style = document.createElement('style');
479
+ style.innerHTML = `
480
+ @keyframes marquee {
481
+ 0% { transform: translateX(0); }
482
+ 100% { transform: translateX(-50%); }
483
+ }
484
+ .animate-marquee {
485
+ display: inline-block;
486
+ animation: marquee 30s linear infinite;
487
+ }
488
+ `;
489
+ document.head.appendChild(style);
490
+ });
491
+
492
+ // Interactive hover effects
493
+ document.querySelectorAll('.news-card').forEach(card => {
494
+ card.addEventListener('mousemove', (e) => {
495
+ const rect = card.getBoundingClientRect();
496
+ const x = e.clientX - rect.left;
497
+ const y = e.clientY - rect.top;
498
+
499
+ card.style.setProperty('--mouse-x', `${x}px`);
500
+ card.style.setProperty('--mouse-y', `${y}px`);
501
+
502
+ const glow = document.createElement('div');
503
+ glow.className = 'glow-effect';
504
+ glow.style.left = `${x}px`;
505
+ glow.style.top = `${y}px`;
506
+ card.appendChild(glow);
507
+
508
+ setTimeout(() => {
509
+ glow.remove();
510
+ }, 1000);
511
+ });
512
+ });
513
+ </script>
514
+ </body>
515
  </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Build a super fancy futuristic website for a brand called Arabian Post, featuring css3 animated and interactive hacks.. Arabian post is a bold newspaper publisher from Dubai