Hugging Face's logo

Spaces:
WartenWeg
/
bayede-zulu
Running

App Files Community
WartenWeg commited on
Commit
55a069e
·
verified ·
1 Parent(s): af215f6

- Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +331 -307
index.html CHANGED
@@ -3,377 +3,401 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Bayede Zulu Newspaper</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
- /* Custom CSS for elements that need more styling than Tailwind provides */
11
- .newspaper-texture {
12
- background-image: url('https://www.transparenttextures.com/patterns/rice-paper-3.png');
13
- background-color: #f9f9f9;
 
14
  }
15
- .dark .newspaper-texture {
16
- background-image: url('https://www.transparenttextures.com/patterns/dark-wood.png');
17
- background-color: #111;
18
  }
19
- .social-popup {
20
- opacity: 0;
21
- visibility: hidden;
22
- transition: all 0.3s ease;
23
  }
24
- .social-popup.active {
25
- opacity: 1;
26
- visibility: visible;
27
  }
28
- .weather-icon {
29
- filter: invert(0);
 
30
  }
31
- .dark .weather-icon {
32
- filter: invert(1);
 
 
33
  }
34
- .headline-border {
35
- border-bottom: 3px double #000;
 
36
  }
37
- .dark .headline-border {
38
- border-bottom: 3px double #fff;
 
39
  }
40
  </style>
41
  </head>
42
- <body class="bg-white dark:bg-gray-900 transition-colors duration-300">
43
- <!-- Header Section -->
44
- <header class="py-4 px-4 md:px-8 border-b border-gray-200 dark:border-gray-700">
45
- <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
46
- <!-- Date, Time and Weather -->
47
- <div class="flex items-center space-x-4 mb-4 md:mb-0">
48
- <div id="current-date" class="text-sm font-serif dark:text-white"></div>
49
- <div id="current-time" class="text-sm font-serif dark:text-white"></div>
50
- <div class="flex items-center">
51
- <span id="weather-icon" class="weather-icon mr-1"><i class="fas fa-cloud-sun"></i></span>
52
- <span id="weather-temp" class="text-sm font-serif dark:text-white">24°C</span>
53
- </div>
54
  </div>
55
-
56
- <!-- Logo and Title -->
57
- <div class="text-center mb-4 md:mb-0">
58
- <h1 class="text-3xl md:text-4xl font-bold font-serif uppercase tracking-wider dark:text-white">Bayede Zulu</h1>
59
- <p class="text-xs italic dark:text-gray-300">The Voice of the Nation</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  </div>
61
 
62
- <!-- Dark Mode Toggle and Social -->
63
- <div class="flex items-center space-x-4">
64
- <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
65
- <i class="fas fa-moon dark:hidden"></i>
66
- <i class="fas fa-sun hidden dark:inline"></i>
67
- </button>
68
- <button id="share-btn" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
69
- <i class="fas fa-share-alt dark:text-white"></i>
70
- </button>
71
  </div>
72
  </div>
73
  </header>
74
 
75
- <!-- Social Share Popup -->
76
- <div id="social-popup" class="social-popup fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl z-50 max-w-xs w-full">
77
- <div class="flex justify-between items-center mb-4">
78
- <h3 class="text-lg font-bold dark:text-white">Share Article</h3>
79
- <button id="close-popup" class="text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-100">
80
- <i class="fas fa-times"></i>
81
- </button>
82
- </div>
83
- <div class="grid grid-cols-2 gap-4">
84
- <a href="#" class="bg-blue-600 text-white p-3 rounded flex items-center justify-center hover:bg-blue-700 transition">
85
- <i class="fab fa-facebook-f mr-2"></i> Facebook
86
- </a>
87
- <a href="#" class="bg-blue-400 text-white p-3 rounded flex items-center justify-center hover:bg-blue-500 transition">
88
- <i class="fab fa-twitter mr-2"></i> Twitter
89
- </a>
90
- <a href="#" class="bg-green-500 text-white p-3 rounded flex items-center justify-center hover:bg-green-600 transition">
91
- <i class="fab fa-whatsapp mr-2"></i> WhatsApp
92
- </a>
93
- <a href="#" class="bg-red-500 text-white p-3 rounded flex items-center justify-center hover:bg-red-600 transition">
94
- <i class="fab fa-pinterest-p mr-2"></i> Pinterest
95
- </a>
96
- <a href="#" class="bg-blue-700 text-white p-3 rounded flex items-center justify-center hover:bg-blue-800 transition col-span-2">
97
- <i class="fab fa-linkedin-in mr-2"></i> LinkedIn
98
- </a>
99
- </div>
100
- </div>
101
-
102
  <!-- Navigation -->
103
- <nav class="bg-black text-white py-2 px-4 sticky top-0 z-40">
104
- <div class="container mx-auto">
105
- <ul class="flex flex-wrap justify-center space-x-1 md:space-x-4 text-xs md:text-sm uppercase font-bold">
106
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Home</a></li>
107
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Politics</a></li>
108
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Business</a></li>
109
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Sports</a></li>
110
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Entertainment</a></li>
111
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Health</a></li>
112
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Technology</a></li>
113
- <li><a href="#" class="hover:text-yellow-300 px-2 py-1">Opinion</a></li>
114
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
  </nav>
117
 
118
- <!-- Main Content -->
119
- <main class="container mx-auto px-4 py-8 newspaper-texture">
120
- <!-- Breaking News Ticker -->
121
- <div class="bg-red-700 text-white px-4 py-2 mb-6 flex items-center">
122
- <span class="font-bold mr-3 whitespace-nowrap">BREAKING NEWS:</span>
123
- <div class="overflow-hidden">
124
- <div id="ticker" class="whitespace-nowrap animate-marquee">
125
- President to address nation tonight on economic recovery plan • New COVID variant detected in three provinces • Local team reaches continental finals for first time in history
126
- </div>
 
 
127
  </div>
128
  </div>
 
129
 
130
- <!-- Featured Article -->
131
- <article class="mb-12">
132
- <div class="headline-border pb-4 mb-6">
133
- <span class="text-sm uppercase font-bold tracking-wider text-gray-500 dark:text-gray-400">Featured Story</span>
134
- <h2 class="text-3xl md:text-4xl font-bold font-serif mt-2 dark:text-white">Historic Agreement Reached Between Traditional Leaders and Government</h2>
135
- <div class="flex items-center mt-2 text-sm text-gray-600 dark:text-gray-300">
136
- <span>By Thando Mkhize</span>
137
- <span class="mx-2">•</span>
138
- <span>3 hours ago</span>
139
- </div>
140
- </div>
141
-
142
- <div class="grid md:grid-cols-3 gap-8">
143
- <div class="md:col-span-2">
144
- <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
145
- alt="Traditional leaders meeting" class="w-full h-auto mb-4">
146
- <p class="text-lg font-serif mb-4 dark:text-gray-200">
147
- In a landmark decision that could reshape local governance, traditional leaders from across the province have reached an agreement with national government representatives on the contentious issue of land administration and development rights.
148
- </p>
149
- <p class="font-serif mb-4 dark:text-gray-300">
150
- The marathon negotiations, which lasted nearly 72 hours, resulted in a compromise that preserves traditional authority while allowing for modern development frameworks. The agreement comes after months of protests and legal battles that had threatened to destabilize the region.
151
- </p>
152
- <p class="font-serif mb-4 dark:text-gray-300">
153
- "This is a victory for all our people," said Inkosi Zwelibanzi Mthethwa, spokesperson for the traditional council. "We have shown that our ancient systems can work hand in hand with contemporary governance structures."
154
- </p>
155
- <div class="flex justify-between items-center mt-8 border-t border-gray-200 dark:border-gray-700 pt-4">
156
- <div class="flex space-x-4">
157
- <button class="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white">
158
- <i class="far fa-comment mr-1"></i> 24 Comments
159
- </button>
160
- <button id="article-share" class="text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white">
161
- <i class="fas fa-share mr-1"></i> Share
162
- </button>
163
  </div>
164
- <button class="text-black dark:text-white font-bold hover:underline">
165
- Read Full Story <i class="fas fa-arrow-right ml-1"></i>
166
- </button>
 
 
167
  </div>
168
  </div>
169
 
170
- <div class="md:col-span-1">
171
- <!-- Sidebar Latest News -->
172
- <div class="bg-gray-100 dark:bg-gray-800 p-4 mb-6">
173
- <h3 class="text-lg font-bold mb-4 dark:text-white">Latest Updates</h3>
174
- <ul class="space-y-4">
175
- <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
176
- <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
177
- <h4 class="font-bold dark:text-gray-200">Education Dept Announces New School Calendar</h4>
178
- <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">2 hours ago</p>
179
- </a>
180
- </li>
181
- <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
182
- <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
183
- <h4 class="font-bold dark:text-gray-200">Local Entrepreneur Wins Continental Award</h4>
184
- <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">4 hours ago</p>
185
- </a>
186
- </li>
187
- <li class="border-b border-gray-200 dark:border-gray-700 pb-3">
188
- <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
189
- <h4 class="font-bold dark:text-gray-200">Weather Service Warns of Heavy Rains This Weekend</h4>
190
- <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">6 hours ago</p>
191
- </a>
192
- </li>
193
- <li class="pb-3">
194
- <a href="#" class="hover:text-red-700 dark:hover:text-red-400 transition">
195
- <h4 class="font-bold dark:text-gray-200">New Archaeological Find Rewrites Regional History</h4>
196
- <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Yesterday</p>
197
- </a>
198
- </li>
199
- </ul>
200
  </div>
201
 
202
- <!-- Newsletter Signup -->
203
- <div class="bg-gray-800 text-white p-4">
204
- <h3 class="text-lg font-bold mb-2">Stay Informed</h3>
205
- <p class="text-sm mb-4">Subscribe to our daily newsletter for the top stories delivered to your inbox</p>
206
- <form class="space-y-3">
207
- <input type="text" placeholder="Your Name" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400">
208
- <input type="email" placeholder="Email Address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400">
209
- <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white py-2 rounded font-bold transition">Subscribe</button>
210
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
211
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  </div>
213
  </div>
214
- </article>
215
-
216
- <!-- More Articles Grid -->
217
- <section class="mb-12">
218
- <h3 class="text-2xl font-bold font-serif mb-6 dark:text-white headline-border pb-2">More Stories</h3>
219
- <div class="grid md:grid-cols-3 gap-6">
220
- <!-- Article 1 -->
221
- <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
222
- <img src="https://images.unsplash.com/photo-1601584115197-04ecc0da31d7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
223
- alt="Construction site" class="w-full h-48 object-cover">
224
- <div class="p-4">
225
- <span class="text-xs uppercase font-bold text-red-600">Business</span>
226
- <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">New Industrial Park to Create 5,000 Jobs</h4>
227
- <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">The R2.3 billion development is set to transform the local economy with manufacturing and logistics opportunities.</p>
228
- <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
229
- <span>By Nomsa Dlamini</span>
230
- <span>5 hours ago</span>
231
- </div>
232
  </div>
233
- </article>
234
 
235
- <!-- Article 2 -->
236
- <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
237
- <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80"
238
- alt="Football match" class="w-full h-48 object-cover">
239
- <div class="p-4">
240
- <span class="text-xs uppercase font-bold text-green-600">Sports</span>
241
- <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">Local Team Secures Historic Finals Berth</h4>
242
- <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">After a thrilling penalty shootout, the underdogs advance to their first continental championship final.</p>
243
- <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
244
- <span>By Sipho Khumalo</span>
245
- <span>Yesterday</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
  </div>
248
- </article>
249
 
250
- <!-- Article 3 -->
251
- <article class="border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:shadow-lg transition">
252
- <img src="https://images.unsplash.com/photo-1581093057305-25a8e1c0e34d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
253
- alt="Science lab" class="w-full h-48 object-cover">
254
- <div class="p-4">
255
- <span class="text-xs uppercase font-bold text-blue-600">Technology</span>
256
- <h4 class="font-bold text-lg mt-1 mb-2 dark:text-white">University Researchers Make Clean Energy Breakthrough</h4>
257
- <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">The new battery technology could make renewable energy storage more affordable and efficient.</p>
258
- <div class="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
259
- <span>By Dr. James Molefe</span>
260
- <span>2 days ago</span>
261
- </div>
262
  </div>
263
- </article>
 
 
 
 
 
 
 
 
 
 
 
 
 
264
  </div>
265
- </section>
266
  </main>
267
 
268
  <!-- Footer -->
269
- <footer class="bg-black text-white py-8 px-4">
270
- <div class="container mx-auto">
271
- <div class="grid md:grid-cols-4 gap-8 mb-8">
 
272
  <div>
273
- <h4 class="text-lg font-bold mb-4">Bayede Zulu</h4>
274
- <p class="text-sm text-gray-400">The most trusted source for news and information in the region since 1985.</p>
 
 
 
 
 
 
275
  </div>
 
 
276
  <div>
277
- <h4 class="text-lg font-bold mb-4">Sections</h4>
278
- <ul class="space-y-2 text-sm text-gray-400">
279
- <li><a href="#" class="hover:text-white transition">News</a></li>
280
- <li><a href="#" class="hover:text-white transition">Politics</a></li>
281
- <li><a href="#" class="hover:text-white transition">Business</a></li>
282
- <li><a href="#" class="hover:text-white transition">Sports</a></li>
283
- <li><a href="#" class="hover:text-white transition">Entertainment</a></li>
284
  </ul>
285
  </div>
 
 
286
  <div>
287
- <h4 class="text-lg font-bold mb-4">Company</h4>
288
- <ul class="space-y-2 text-sm text-gray-400">
289
- <li><a href="#" class="hover:text-white transition">About Us</a></li>
290
- <li><a href="#" class="hover:text-white transition">Contact</a></li>
291
- <li><a href="#" class="hover:text-white transition">Careers</a></li>
292
- <li><a href="#" class="hover:text-white transition">Advertise</a></li>
293
- <li><a href="#" class="hover:text-white transition">Ethics Policy</a></li>
294
  </ul>
295
  </div>
 
 
296
  <div>
297
- <h4 class="text-lg font-bold mb-4">Connect</h4>
298
- <div class="flex space-x-4 mb-4">
299
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
300
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
301
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
302
- <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-youtube"></i></a>
303
- </div>
304
- <p class="text-sm text-gray-400">Subscribe to our newsletters for daily updates.</p>
305
  </div>
306
  </div>
307
- <div class="border-t border-gray-800 pt-6 text-sm text-gray-400 text-center">
308
- <p>© 2023 Bayede Zulu. All rights reserved. | <a href="#" class="hover:text-white transition">Privacy Policy</a> | <a href="#" class="hover:text-white transition">Terms of Service</a></p>
 
 
309
  </div>
310
  </div>
311
  </footer>
312
 
313
  <script>
314
- // Dark/Light Mode Toggle
315
- const themeToggle = document.getElementById('theme-toggle');
316
- const html = document.documentElement;
317
-
318
- // Check for saved user preference or use system preference
319
- const savedTheme = localStorage.getItem('theme') ||
320
- (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
321
- html.classList.add(savedTheme);
322
-
323
- themeToggle.addEventListener('click', () => {
324
- html.classList.toggle('dark');
325
- const theme = html.classList.contains('dark') ? 'dark' : 'light';
326
- localStorage.setItem('theme', theme);
327
- });
328
-
329
- // Date and Time Display
330
- function updateDateTime() {
331
- const now = new Date();
332
- const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
333
- document.getElementById('current-date').textContent = now.toLocaleDateString('en-ZA', options);
334
- document.getElementById('current-time').textContent = now.toLocaleTimeString('en-ZA', { hour: '2-digit', minute: '2-digit' });
335
- }
336
- updateDateTime();
337
- setInterval(updateDateTime, 60000); // Update every minute
338
-
339
- // Weather Simulation (in a real scenario, you would use a weather API)
340
- function updateWeather() {
341
- const weatherConditions = [
342
- { icon: 'fa-sun', temp: '28°C' },
343
- { icon: 'fa-cloud-sun', temp: '24°C' },
344
- { icon: 'fa-cloud', temp: '21°C' },
345
- { icon: 'fa-cloud-rain', temp: '18°C' }
346
- ];
347
- const randomWeather = weatherConditions[Math.floor(Math.random() * weatherConditions.length)];
348
- document.getElementById('weather-icon').innerHTML = `<i class="fas ${randomWeather.icon}"></i>`;
349
- document.getElementById('weather-temp').textContent = randomWeather.temp;
350
- }
351
- updateWeather();
352
-
353
- // Social Share Popup
354
- const shareBtn = document.getElementById('share-btn');
355
- const articleShareBtn = document.getElementById('article-share');
356
- const socialPopup = document.getElementById('social-popup');
357
- const closePopup = document.getElementById('close-popup');
358
-
359
- function togglePopup() {
360
- socialPopup.classList.toggle('active');
361
- }
362
-
363
- shareBtn.addEventListener('click', togglePopup);
364
- articleShareBtn.addEventListener('click', togglePopup);
365
- closePopup.addEventListener('click', togglePopup);
366
-
367
- // Close popup when clicking outside
368
- window.addEventListener('click', (e) => {
369
- if (e.target === socialPopup) {
370
- togglePopup();
371
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
372
  });
373
-
374
- // Marquee Animation for Ticker
375
- const ticker = document.getElementById('ticker');
376
- ticker.style.animationDuration = '30s';
377
  </script>
378
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WartenWeg/bayede-zulu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
379
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bayede Zulu - Izindaba ZesiZulu</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f8f9fa;
15
  }
16
+
17
+ .news-ticker {
18
+ animation: ticker 30s linear infinite;
19
  }
20
+
21
+ @keyframes ticker {
22
+ 0% { transform: translateX(100%); }
23
+ 100% { transform: translateX(-100%); }
24
  }
25
+
26
+ .dropdown:hover .dropdown-menu {
27
+ display: block;
28
  }
29
+
30
+ .gradient-bg {
31
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
32
  }
33
+
34
+ .article-card:hover {
35
+ transform: translateY(-5px);
36
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
37
  }
38
+
39
+ .category-tag {
40
+ transition: all 0.3s ease;
41
  }
42
+
43
+ .category-tag:hover {
44
+ transform: scale(1.05);
45
  }
46
  </style>
47
  </head>
48
+ <body class="bg-gray-50">
49
+ <!-- Top Bar -->
50
+ <div class="gradient-bg text-white py-2 px-4">
51
+ <div class="container mx-auto flex justify-between items-center">
52
+ <div class="text-sm hidden md:block">
53
+ <span class="mr-4"><i class="fas fa-calendar-alt mr-1"></i> Disemba 06, 2024</span>
54
+ <span><i class="fas fa-map-marker-alt mr-1"></i> South Africa</span>
 
 
 
 
 
55
  </div>
56
+ <div class="flex space-x-4">
57
+ <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a>
58
+ <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-twitter"></i></a>
59
+ <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-instagram"></i></a>
60
+ <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-youtube"></i></a>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Header -->
66
+ <header class="bg-white shadow-sm">
67
+ <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center">
68
+ <div class="flex items-center mb-4 md:mb-0">
69
+ <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjLs37QlT0_ORJGDtlsVSQgcNNRckrHfbPOzv3EA_wb8eLmkqDVz8oKBBXw1CJ1UCPIjDODDH7tdX5z70ibyiUx_abivqoXtkM_DwEUM66JfDjQQotRGW_4iWDzRe2fb_yqStt4fI1JKpPaJAcI7M6L-4CPytETeRqYR78egEgiBQADT5nb6d0EiuMliy8o=s236" alt="Bayede Zulu Logo" class="h-16 w-auto">
70
+ <div class="ml-4">
71
+ <h1 class="text-2xl font-bold text-gray-800">Bayede Zulu</h1>
72
+ <p class="text-sm text-gray-600">Izindaba ZesiZulu Ezihamba Phambili</p>
73
+ </div>
74
  </div>
75
 
76
+ <div class="w-full md:w-auto">
77
+ <div class="relative">
78
+ <input type="text" placeholder="Sesha izindaba..." class="w-full md:w-64 px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
79
+ <button class="absolute right-3 top-2 text-gray-500 hover:text-blue-600">
80
+ <i class="fas fa-search"></i>
81
+ </button>
82
+ </div>
 
 
83
  </div>
84
  </div>
85
  </header>
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
87
  <!-- Navigation -->
88
+ <nav class="gradient-bg text-white">
89
+ <div class="container mx-auto px-4">
90
+ <div class="flex flex-col md:flex-row justify-between items-center">
91
+ <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 py-4">
92
+ <li><a href="https://bayedezulu.blogspot.com/" class="hover:text-yellow-300 font-medium"><i class="fas fa-home mr-1"></i> Ekhaya</a></li>
93
+ <li class="dropdown relative">
94
+ <a href="#" class="hover:text-yellow-300 font-medium flex items-center">
95
+ Izinto Ezenziwayo <i class="fas fa-chevron-down ml-1 text-xs"></i>
96
+ </a>
97
+ <ul class="dropdown-menu absolute hidden bg-white text-gray-800 rounded-md shadow-lg mt-2 py-2 w-48 z-10">
98
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Multi DropDown</a></li>
99
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Ama-ShortCodes</a></li>
100
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-SiteMap</a></li>
101
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Ikhasi Le-Error</a></li>
102
+ </ul>
103
+ </li>
104
+ <li class="dropdown relative">
105
+ <a href="#" class="hover:text-yellow-300 font-medium flex items-center">
106
+ Ukwaziswa <i class="fas fa-chevron-down ml-1 text-xs"></i>
107
+ </a>
108
+ <ul class="dropdown-menu absolute hidden bg-white text-gray-800 rounded-md shadow-lg mt-2 py-2 w-48 z-10">
109
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Web Doc</a></li>
110
+ <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Video Doc</a></li>
111
+ </ul>
112
+ </li>
113
+ <li><a href="#" class="hover:text-yellow-300 font-medium">Ama-Templates eBlogger</a></li>
114
+ <li><a href="https://bayedezulu.blogspot.com/p/about.html" class="hover:text-yellow-300 font-medium">Mayelana Nathi</a></li>
115
+ <li><a href="https://bayedezulu.blogspot.com/p/contact.html" class="hover:text-yellow-300 font-medium">Xhumana Nathi</a></li>
116
+ </ul>
117
+
118
+ <div class="flex space-x-4 pb-4 md:pb-0">
119
+ <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-medium px-4 py-2 rounded-full flex items-center">
120
+ <i class="fas fa-rss mr-2"></i> Bhalisa
121
+ </button>
122
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-full flex items-center">
123
+ <i class="fas fa-envelope mr-2"></i> I-Email
124
+ </button>
125
+ </div>
126
+ </div>
127
  </div>
128
  </nav>
129
 
130
+ <!-- Breaking News Ticker -->
131
+ <div class="bg-red-600 text-white py-2 px-4 overflow-hidden">
132
+ <div class="container mx-auto flex items-center">
133
+ <span class="font-bold mr-4 whitespace-nowrap flex items-center">
134
+ <i class="fas fa-bolt mr-2"></i> Izindaba Eziphuthumayo:
135
+ </span>
136
+ <div class="news-ticker whitespace-nowrap flex items-center">
137
+ <span class="mr-8">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</span>
138
+ <span class="mr-8">Ngamubulala ngesende umama wase rank</span>
139
+ <span class="mr-8">Ngangimthatha Kancane Kanti Angibuzanga</span>
140
+ <span>Cishe Ngafa Fi yiDogstyle</span>
141
  </div>
142
  </div>
143
+ </div>
144
 
145
+ <!-- Main Content -->
146
+ <main class="container mx-auto px-4 py-8">
147
+ <div class="flex flex-col lg:flex-row gap-8">
148
+ <!-- Left Column (Main Articles) -->
149
+ <div class="lg:w-2/3">
150
+ <!-- Featured Article -->
151
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8 article-card transition duration-300">
152
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDt4bOEQsltKXvYs3LM16z5g0hw0cgCjoeQtf172LB3YYR7NmkSgjdG1SfXI9Ke6xdIJoJbVtSSgB3S_FzZ6pitqk9O3JoUjHOu3M9Iap8ALSAku_jTMMFSsEnTZSyRueVKrBI0XeA9eYpdc4yJ3QF96nuj07I7r_AkxhIuI6eZ2Q5k4L-1VYcvAmG0k/w308-h231-p-k-no-nu/Ngangimthatha%20Kancane%20Kanti%20Angibuzanga.jpg" alt="Featured Article" class="w-full h-64 object-cover">
153
+ <div class="p-6">
154
+ <div class="flex items-center mb-4">
155
+ <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Funny</span>
156
+ <span class="text-gray-500 text-sm ml-4"><i class="far fa-clock mr-1"></i> ULwesihlanu, Disemba 06, 2024</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
157
  </div>
158
+ <h2 class="text-2xl font-bold text-gray-800 mb-3">Ngangimthatha Kancane Kanti Angibuzanga</h2>
159
+ <p class="text-gray-600 mb-4">Ngangimthatha Kancane Kanti Angibuzanga Ngicela ufihle igama lam pic yam iyeke angenandaba ohk ngiyintombazane esenca…</p>
160
+ <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium">
161
+ Funda kabanzi <i class="fas fa-arrow-right ml-2"></i>
162
+ </a>
163
  </div>
164
  </div>
165
 
166
+ <!-- Recent Articles Grid -->
167
+ <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center">
168
+ <i class="fas fa-fire text-red-500 mr-2"></i> Okuthunyelwe Kwakamuva
169
+ </h2>
170
+
171
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
172
+ <!-- Article 1 -->
173
+ <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300">
174
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1WvAzpWRpfWN87VrJkBGpS_aK5oOgC3vJn3BY3w50OWlC2K9UmV55iU9T35GTf7f-gh8PNClzM5iZRj362X5Rn1NtIY_YfCcFAyCaqai3B0I8c2YUBpY329oFT_Eg2wJLLVLNGUukdfkDvwJlCvHh6Hb_Nki4r0-e2KU5Zje17i6vY3RGkUHQSWRMwY/w308-h231-p-k-no-nu/Cishe%20Ngafa%20Fi%20yiDogstyle.jpg" alt="Article 1" class="w-full h-48 object-cover">
175
+ <div class="p-4">
176
+ <div class="flex items-center mb-2">
177
+ <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span>
178
+ <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> ULwesithathu, Disemba 04, 2024</span>
179
+ </div>
180
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Cishe Ngafa Fi yiDogstyle</h3>
181
+ <p class="text-gray-600 text-sm mb-3">Cishe Ngafa Fi yiDogstyle Hhayike siyaphuza endlini yami nnomunye uSkoolboy ozitshela ukuthi usileoyi bestie yami kw…</p>
182
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a>
183
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
184
  </div>
185
 
186
+ <!-- Article 2 -->
187
+ <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300">
188
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0RlOGKP7Tz6rblUxGDuhRNjWH9D3h21QgyIvA-DQffsKZBTZCWO1yDlP2KraYeSEFoFY1TQJy3vhY4CU3YowHwvH7m8OM7tDpVfFuxu5StodK4Qdj4L0dNJ2Nud9bBA6xQ1OQNBeutTZZsxjpDhnkeDT0vZWwZwBjXJzbKaXXwSKEUUVP2M_r9CuEA04/w308-h231-p-k-no-nu/Wangikhwela%20ngangakholwa2.jpg" alt="Article 2" class="w-full h-48 object-cover">
189
+ <div class="p-4">
190
+ <div class="flex items-center mb-2">
191
+ <span class="category-tag bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded-full">lifestyle</span>
192
+ <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMsombuluko, Disemba 02, 2024</span>
193
+ </div>
194
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Wangikhwela ngangakholwa Umfana Kamekhelwane</h3>
195
+ <p class="text-gray-600 text-sm mb-3">Wangikhwela ngangakholwa Umfana Kamekhelwane Ngangiphuma emsebenzini, ngezwa ngisindwa isithunzi somuntu owayengiland…</p>
196
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Article 3 -->
201
+ <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300">
202
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmFIBdvDdLSIhAobCcWQiw8mcXvP5oRYF2wG-hBcQVsFMOD0PeL0Mpsx57gCBdy1OJNgQ5RZu-bBrNlTjK6srW705jpl3VD5EczB87_OpvoJvLm4dugcZ3ZrFnuTR_64ko993mBZ7QWHoBQqgKpzjdAXi_I2LjSvuh1ko9xqhhRtnvnknTYy5JFFZ8xdc/w72-h72-p-k-no-nu/Yanginabisa%20Ingane%20Encane%20Yangikhipha%20uFakhini%203.jpg" alt="Article 3" class="w-full h-48 object-cover">
203
+ <div class="p-4">
204
+ <div class="flex items-center mb-2">
205
+ <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span>
206
+ <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMgqibelo, Novemba 30, 2024</span>
207
+ </div>
208
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">Yanginabisa Ingane Encane Yangikhipha uFakhini - Amahle</h3>
209
+ <p class="text-gray-600 text-sm mb-3">Yanginabisa Ingane Encane Yangikhipha uFakhini Wake wakhaliswa ingane encane kunawe uzu bambe ikhanda ngaphenduka…</p>
210
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a>
211
+ </div>
212
  </div>
213
+
214
+ <!-- Article 4 -->
215
+ <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300">
216
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEing7vXKYsNgJIfTpmzKiE5S-uqalnpbr0ZhAmlh7X_s3HiFQj9WBr4saULIqsVntLRL63zTQUkQi88OgHMjbNCu0m8GHkvxj8F265ZCV3rXzhIwKc_DYeP9rVi34iUr8yCvU-tm4IsGiPlP2mW7I5jKmdjh2R0mDfMlNkcYDcqXHrQckNhsuP3GDkZ48k/w72-h72-p-k-no-nu/UGogo%20Owayazi%20Ukudansa%20%20Awusoze%20Ukholelwe%20Okwenzekile%20Lapho%20Ngathola%20UGogo.jpeg" alt="Article 4" class="w-full h-48 object-cover">
217
+ <div class="p-4">
218
+ <div class="flex items-center mb-2">
219
+ <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span>
220
+ <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMgqibelo, Novemba 30, 2024</span>
221
+ </div>
222
+ <h3 class="text-lg font-semibold text-gray-800 mb-2">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</h3>
223
+ <p class="text-gray-600 text-sm mb-3">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo UGogo owayazi ukudansa, awusoze ukholelwe o…</p>
224
+ <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Load More Button -->
230
+ <div class="text-center mt-8">
231
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-full inline-flex items-center">
232
+ <i class="fas fa-plus-circle mr-2"></i> Thola Okwengeziwe
233
+ </button>
234
  </div>
235
  </div>
236
+
237
+ <!-- Right Column (Sidebar) -->
238
+ <div class="lg:w-1/3">
239
+ <!-- About Section -->
240
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
241
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
242
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i> Mayelana Nathi
243
+ </h3>
244
+ <img src="https://blogger.googleusercontent.com/img/a/AVvXsEjLs37QlT0_ORJGDtlsVSQgcNNRckrHfbPOzv3EA_wb8eLmkqDVz8oKBBXw1CJ1UCPIjDODDH7tdX5z70ibyiUx_abivqoXtkM_DwEUM66JfDjQQotRGW_4iWDzRe2fb_yqStt4fI1JKpPaJAcI7M6L-4CPytETeRqYR78egEgiBQADT5nb6d0EiuMliy8o=s236" alt="Bayede Zulu" class="w-full h-auto rounded mb-4">
245
+ <p class="text-gray-600 mb-4">"Bayede Zulu" yisayithi yezindaba ekhuluma ulimi lwesiZulu, egxile ekuletheni izindaba ezibucayi nezibalulekile kubantu bonke baseNingizimu Afrika nakwamanye amazwe.</p>
246
+ <div class="flex space-x-4">
247
+ <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a>
248
+ <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a>
249
+ <a href="#" class="text-pink-600 hover:text-pink-800"><i class="fab fa-instagram"></i></a>
250
+ <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-youtube"></i></a>
 
 
 
251
  </div>
252
+ </div>
253
 
254
+ <!-- Popular Posts -->
255
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
256
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
257
+ <i class="fas fa-star text-yellow-500 mr-2"></i> Okuthandwa Kakhulu
258
+ </h3>
259
+ <div class="space-y-4">
260
+ <!-- Popular Post 1 -->
261
+ <div class="flex items-start">
262
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMDt4bOEQsltKXvYs3LM16z5g0hw0cgCjoeQtf172LB3YYR7NmkSgjdG1SfXI9Ke6xdIJoJbVtSSgB3S_FzZ6pitqk9O3JoUjHOu3M9Iap8ALSAku_jTMMFSsEnTZSyRueVKrBI0XeA9eYpdc4yJ3QF96nuj07I7r_AkxhIuI6eZ2Q5k4L-1VYcvAmG0k/w83-h66-p-k-no-nu/Ngangimthatha%20Kancane%20Kanti%20Angibuzanga.jpg" alt="Popular Post 1" class="w-16 h-16 object-cover rounded">
263
+ <div class="ml-3">
264
+ <h4 class="text-sm font-semibold text-gray-800">Ngangimthatha Kancane Kanti Angibuzanga</h4>
265
+ <p class="text-xs text-gray-500">ULwesihlanu, Disemba 06, 2024</p>
266
+ </div>
267
+ </div>
268
+
269
+ <!-- Popular Post 2 -->
270
+ <div class="flex items-start">
271
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_2tavN3qPz0Sn9D00-3MFMiawFBktaLYOD5whINfLCDg7ovpIT-fQNUWoCsQ0fxwWKUiRIrq3O_tE3Vscq4KGN-f7XSzSSQDECeYEIJrPEzdqT6IoEwA5xi5RbvrTiy9bmNYfpcLWYAmIoKY_SmtBzF2Dca5LnwqiW2SJSCuwOuGQOsEYqpWMYZLYCZ4/w83-h66-p-k-no-nu/BangiBhebha%20Abafana%20Akhumul%20abenqunu(naked)%20nami%20ngenze%20njala%20angimunce%20amabele%20ngivele%20ngiqhanyelwe%20kakhulu%20kusenjalo%20kungene%20uLindoh%20emnyango.jpg" alt="Popular Post 2" class="w-16 h-16 object-cover rounded">
272
+ <div class="ml-3">
273
+ <h4 class="text-sm font-semibold text-gray-800">BangiBhebha Abafana</h4>
274
+ <p class="text-xs text-gray-500">UMgqibelo, Novemba 30, 2024</p>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Popular Post 3 -->
279
+ <div class="flex items-start">
280
+ <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEing7vXKYsNgJIfTpmzKiE5S-uqalnpbr0ZhAmlh7X_s3HiFQj9WBr4saULIqsVntLRL63zTQUkQi88OgHMjbNCu0m8GHkvxj8F265ZCV3rXzhIwKc_DYeP9rVi34iUr8yCvU-tm4IsGiPlP2mW7I5jKmdjh2R0mDfMlNkcYDcqXHrQckNhsuP3GDkZ48k/w72-h72-p-k-no-nu/UGogo%20Owayazi%20Ukudansa%20%20Awusoze%20Ukholelwe%20Okwenzekile%20Lapho%20Ngathola%20UGogo.jpeg" alt="Popular Post 3" class="w-16 h-16 object-cover rounded">
281
+ <div class="ml-3">
282
+ <h4 class="text-sm font-semibold text-gray-800">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</h4>
283
+ <p class="text-xs text-gray-500">UMgqibelo, Novemba 30, 2024</p>
284
+ </div>
285
  </div>
286
  </div>
287
+ </div>
288
 
289
+ <!-- Categories -->
290
+ <div class="bg-white rounded-lg shadow-md p-6 mb-6">
291
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
292
+ <i class="fas fa-tags text-purple-500 mr-2"></i> Izigaba
293
+ </h3>
294
+ <div class="flex flex-wrap gap-2">
295
+ <a href="#" class="category-tag bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full hover:bg-blue-200">Funny</a>
296
+ <a href="#" class="category-tag bg-green-100 text-green-800 text-sm font-semibold px-3 py-1 rounded-full hover:bg-green-200">lifestyle</a>
297
+ <a href="#" class="category-tag bg-red-100 text-red-800 text-sm font-semibold px-3 py-1 rounded-full hover:bg-red-200">relationship</a>
 
 
 
298
  </div>
299
+ </div>
300
+
301
+ <!-- Newsletter -->
302
+ <div class="bg-blue-50 rounded-lg shadow-md p-6">
303
+ <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
304
+ <i class="fas fa-envelope text-red-500 mr-2"></i> Bhalisela Izindaba
305
+ </h3>
306
+ <p class="text-gray-600 mb-4">Thola izindaba ezintsha ngqo ku-email yakho!</p>
307
+ <form class="space-y-3">
308
+ <input type="text" placeholder="Igama lakho" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
309
+ <input type="email" placeholder="I-imeyili yakho" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
310
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">Bhalisa Manje</button>
311
+ </form>
312
+ </div>
313
  </div>
314
+ </div>
315
  </main>
316
 
317
  <!-- Footer -->
318
+ <footer class="gradient-bg text-white py-8">
319
+ <div class="container mx-auto px-4">
320
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
321
+ <!-- Footer Column 1 -->
322
  <div>
323
+ <h4 class="text-lg font-bold mb-4">Mayelana Nathi</h4>
324
+ <p class="text-gray-300 mb-4">"Bayede Zulu" yisayithi yezindaba ekhuluma ulimi lwesiZulu, egxile ekuletheni izindaba ezibucayi nezibalulekile.</p>
325
+ <div class="flex space-x-4">
326
+ <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a>
327
+ <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-twitter"></i></a>
328
+ <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-instagram"></i></a>
329
+ <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-youtube"></i></a>
330
+ </div>
331
  </div>
332
+
333
+ <!-- Footer Column 2 -->
334
  <div>
335
+ <h4 class="text-lg font-bold mb-4">Amakhasi</h4>
336
+ <ul class="space-y-2">
337
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">Ekhaya</a></li>
338
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">Mayelana Nathi</a></li>
339
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">Xhumana Nathi</a></li>
340
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">Inqubomgomo Yobumfihlo</a></li>
 
341
  </ul>
342
  </div>
343
+
344
+ <!-- Footer Column 3 -->
345
  <div>
346
+ <h4 class="text-lg font-bold mb-4">Izigaba</h4>
347
+ <ul class="space-y-2">
348
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">Funny</a></li>
349
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">lifestyle</a></li>
350
+ <li><a href="#" class="text-gray-300 hover:text-yellow-300">relationship</a></li>
 
 
351
  </ul>
352
  </div>
353
+
354
+ <!-- Footer Column 4 -->
355
  <div>
356
+ <h4 class="text-lg font-bold mb-4">Xhumana Nathi</h4>
357
+ <ul class="space-y-2">
358
+ <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@bayedezulu.com</li>
359
+ <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +27 12 345 6789</li>
360
+ <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Johannesburg, South Africa</li>
361
+ </ul>
 
 
362
  </div>
363
  </div>
364
+
365
+ <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-300">
366
+ <p>&copy; 2024 Bayede Zulu. Wonke Amalungelo Agodliwe.</p>
367
+ <p class="mt-2">Inikezwe amandla yi-<a href="https://www.blogger.com/" class="text-yellow-300 hover:underline">Blogger</a></p>
368
  </div>
369
  </div>
370
  </footer>
371
 
372
  <script>
373
+ // Mobile menu toggle functionality
374
+ document.addEventListener('DOMContentLoaded', function() {
375
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
376
+ const mobileMenu = document.getElementById('mobile-menu');
377
+
378
+ if(mobileMenuButton && mobileMenu) {
379
+ mobileMenuButton.addEventListener('click', function() {
380
+ mobileMenu.classList.toggle('hidden');
381
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
382
  }
383
+
384
+ // Smooth scrolling for anchor links
385
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
386
+ anchor.addEventListener('click', function(e) {
387
+ e.preventDefault();
388
+
389
+ const targetId = this.getAttribute('href');
390
+ if(targetId === '#') return;
391
+
392
+ const targetElement = document.querySelector(targetId);
393
+ if(targetElement) {
394
+ targetElement.scrollIntoView({
395
+ behavior: 'smooth'
396
+ });
397
+ }
398
+ });
399
+ });
400
  });
 
 
 
 
401
  </script>
402
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=WartenWeg/bayede-zulu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
403
  </html>