Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bayede Zulu - Izindaba ZesiZulu</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f8f9fa; | |
| } | |
| .news-ticker { | |
| animation: ticker 30s linear infinite; | |
| } | |
| @keyframes ticker { | |
| 0% { transform: translateX(100%); } | |
| 100% { transform: translateX(-100%); } | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); | |
| } | |
| .article-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .category-tag { | |
| transition: all 0.3s ease; | |
| } | |
| .category-tag:hover { | |
| transform: scale(1.05); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Top Bar --> | |
| <div class="gradient-bg text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="text-sm hidden md:block"> | |
| <span class="mr-4"><i class="fas fa-calendar-alt mr-1"></i> Disemba 06, 2024</span> | |
| <span><i class="fas fa-map-marker-alt mr-1"></i> South Africa</span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-white hover:text-yellow-300"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <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"> | |
| <div class="ml-4"> | |
| <h1 class="text-2xl font-bold text-gray-800">Bayede Zulu</h1> | |
| <p class="text-sm text-gray-600">Izindaba ZesiZulu Ezihamba Phambili</p> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-auto"> | |
| <div class="relative"> | |
| <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"> | |
| <button class="absolute right-3 top-2 text-gray-500 hover:text-blue-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 py-4"> | |
| <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> | |
| <li class="dropdown relative"> | |
| <a href="#" class="hover:text-yellow-300 font-medium flex items-center"> | |
| Izinto Ezenziwayo <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <ul class="dropdown-menu absolute hidden bg-white text-gray-800 rounded-md shadow-lg mt-2 py-2 w-48 z-10"> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Multi DropDown</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Ama-ShortCodes</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-SiteMap</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Ikhasi Le-Error</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="hover:text-yellow-300 font-medium flex items-center"> | |
| Ukwaziswa <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </a> | |
| <ul class="dropdown-menu absolute hidden bg-white text-gray-800 rounded-md shadow-lg mt-2 py-2 w-48 z-10"> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Web Doc</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">I-Video Doc</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="#" class="hover:text-yellow-300 font-medium">Ama-Templates eBlogger</a></li> | |
| <li><a href="https://bayedezulu.blogspot.com/p/about.html" class="hover:text-yellow-300 font-medium">Mayelana Nathi</a></li> | |
| <li><a href="https://bayedezulu.blogspot.com/p/contact.html" class="hover:text-yellow-300 font-medium">Xhumana Nathi</a></li> | |
| </ul> | |
| <div class="flex space-x-4 pb-4 md:pb-0"> | |
| <button class="bg-yellow-400 hover:bg-yellow-500 text-gray-800 font-medium px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-rss mr-2"></i> Bhalisa | |
| </button> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-4 py-2 rounded-full flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> I-Email | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Breaking News Ticker --> | |
| <div class="bg-red-600 text-white py-2 px-4 overflow-hidden"> | |
| <div class="container mx-auto flex items-center"> | |
| <span class="font-bold mr-4 whitespace-nowrap flex items-center"> | |
| <i class="fas fa-bolt mr-2"></i> Izindaba Eziphuthumayo: | |
| </span> | |
| <div class="news-ticker whitespace-nowrap flex items-center"> | |
| <span class="mr-8">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</span> | |
| <span class="mr-8">Ngamubulala ngesende umama wase rank</span> | |
| <span class="mr-8">Ngangimthatha Kancane Kanti Angibuzanga</span> | |
| <span>Cishe Ngafa Fi yiDogstyle</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Left Column (Main Articles) --> | |
| <div class="lg:w-2/3"> | |
| <!-- Featured Article --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8 article-card transition duration-300"> | |
| <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"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">Funny</span> | |
| <span class="text-gray-500 text-sm ml-4"><i class="far fa-clock mr-1"></i> ULwesihlanu, Disemba 06, 2024</span> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-3">Ngangimthatha Kancane Kanti Angibuzanga</h2> | |
| <p class="text-gray-600 mb-4">Ngangimthatha Kancane Kanti Angibuzanga Ngicela ufihle igama lam pic yam iyeke angenandaba ohk ngiyintombazane esenca…</p> | |
| <a href="#" class="inline-flex items-center text-blue-600 hover:text-blue-800 font-medium"> | |
| Funda kabanzi <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Recent Articles Grid --> | |
| <h2 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-fire text-red-500 mr-2"></i> Okuthunyelwe Kwakamuva | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Article 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300"> | |
| <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"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span> | |
| <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> ULwesithathu, Disemba 04, 2024</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Cishe Ngafa Fi yiDogstyle</h3> | |
| <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> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a> | |
| </div> | |
| </div> | |
| <!-- Article 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300"> | |
| <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"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="category-tag bg-green-100 text-green-800 text-xs font-semibold px-2 py-1 rounded-full">lifestyle</span> | |
| <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMsombuluko, Disemba 02, 2024</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Wangikhwela ngangakholwa Umfana Kamekhelwane</h3> | |
| <p class="text-gray-600 text-sm mb-3">Wangikhwela ngangakholwa Umfana Kamekhelwane Ngangiphuma emsebenzini, ngezwa ngisindwa isithunzi somuntu owayengiland…</p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a> | |
| </div> | |
| </div> | |
| <!-- Article 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300"> | |
| <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"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span> | |
| <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMgqibelo, Novemba 30, 2024</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Yanginabisa Ingane Encane Yangikhipha uFakhini - Amahle</h3> | |
| <p class="text-gray-600 text-sm mb-3">Yanginabisa Ingane Encane Yangikhipha uFakhini Wake wakhaliswa ingane encane kunawe uzu bambe ikhanda ngaphenduka…</p> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a> | |
| </div> | |
| </div> | |
| <!-- Article 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden article-card transition duration-300"> | |
| <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"> | |
| <div class="p-4"> | |
| <div class="flex items-center mb-2"> | |
| <span class="category-tag bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-1 rounded-full">Funny</span> | |
| <span class="text-gray-500 text-xs ml-2"><i class="far fa-clock mr-1"></i> UMgqibelo, Novemba 30, 2024</span> | |
| </div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</h3> | |
| <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> | |
| <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-medium">Funda kabanzi →</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Load More Button --> | |
| <div class="text-center mt-8"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-medium px-6 py-3 rounded-full inline-flex items-center"> | |
| <i class="fas fa-plus-circle mr-2"></i> Thola Okwengeziwe | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Right Column (Sidebar) --> | |
| <div class="lg:w-1/3"> | |
| <!-- About Section --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-info-circle text-blue-500 mr-2"></i> Mayelana Nathi | |
| </h3> | |
| <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"> | |
| <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> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-blue-600 hover:text-blue-800"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-blue-400 hover:text-blue-600"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-pink-600 hover:text-pink-800"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-red-600 hover:text-red-800"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <!-- Popular Posts --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-star text-yellow-500 mr-2"></i> Okuthandwa Kakhulu | |
| </h3> | |
| <div class="space-y-4"> | |
| <!-- Popular Post 1 --> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-semibold text-gray-800">Ngangimthatha Kancane Kanti Angibuzanga</h4> | |
| <p class="text-xs text-gray-500">ULwesihlanu, Disemba 06, 2024</p> | |
| </div> | |
| </div> | |
| <!-- Popular Post 2 --> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-semibold text-gray-800">BangiBhebha Abafana</h4> | |
| <p class="text-xs text-gray-500">UMgqibelo, Novemba 30, 2024</p> | |
| </div> | |
| </div> | |
| <!-- Popular Post 3 --> | |
| <div class="flex items-start"> | |
| <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"> | |
| <div class="ml-3"> | |
| <h4 class="text-sm font-semibold text-gray-800">UGogo Owayazi Ukudansa | Awusoze Ukholelwe Okwenzekile Lapho Ngathola UGogo</h4> | |
| <p class="text-xs text-gray-500">UMgqibelo, Novemba 30, 2024</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-tags text-purple-500 mr-2"></i> Izigaba | |
| </h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <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> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="bg-blue-50 rounded-lg shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-envelope text-red-500 mr-2"></i> Bhalisela Izindaba | |
| </h3> | |
| <p class="text-gray-600 mb-4">Thola izindaba ezintsha ngqo ku-email yakho!</p> | |
| <form class="space-y-3"> | |
| <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"> | |
| <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"> | |
| <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> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="gradient-bg text-white py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <!-- Footer Column 1 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Mayelana Nathi</h4> | |
| <p class="text-gray-300 mb-4">"Bayede Zulu" yisayithi yezindaba ekhuluma ulimi lwesiZulu, egxile ekuletheni izindaba ezibucayi nezibalulekile.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-300 hover:text-yellow-300"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| <!-- Footer Column 2 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Amakhasi</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">Ekhaya</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">Mayelana Nathi</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">Xhumana Nathi</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">Inqubomgomo Yobumfihlo</a></li> | |
| </ul> | |
| </div> | |
| <!-- Footer Column 3 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Izigaba</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">Funny</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">lifestyle</a></li> | |
| <li><a href="#" class="text-gray-300 hover:text-yellow-300">relationship</a></li> | |
| </ul> | |
| </div> | |
| <!-- Footer Column 4 --> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Xhumana Nathi</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> info@bayedezulu.com</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2"></i> +27 12 345 6789</li> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> Johannesburg, South Africa</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-300"> | |
| <p>© 2024 Bayede Zulu. Wonke Amalungelo Agodliwe.</p> | |
| <p class="mt-2">Inikezwe amandla yi-<a href="https://www.blogger.com/" class="text-yellow-300 hover:underline">Blogger</a></p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if(mobileMenuButton && mobileMenu) { | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| } | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if(targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if(targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |