| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>NewsPulse - Stay Informed</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> |
| |
| .news-card:hover .news-image { |
| transform: scale(1.05); |
| transition: transform 0.3s ease; |
| } |
| |
| .breaking-news-ticker { |
| animation: ticker 30s linear infinite; |
| } |
| |
| @keyframes ticker { |
| 0% { transform: translateX(100%); } |
| 100% { transform: translateX(-100%); } |
| } |
| |
| .category-tab.active { |
| border-bottom: 3px solid #3b82f6; |
| color: #3b82f6; |
| } |
| |
| .weather-widget { |
| background: linear-gradient(135deg, #60a5fa, #3b82f6); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center py-3"> |
| <div class="flex items-center space-x-4"> |
| <button class="md:hidden text-gray-700"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| <h1 class="text-2xl font-bold text-blue-600">News<span class="text-gray-800">Pulse</span></h1> |
| </div> |
| |
| <div class="hidden md:flex items-center space-x-6"> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Home</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Politics</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Business</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Technology</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Sports</a> |
| <a href="#" class="text-gray-700 hover:text-blue-600">Entertainment</a> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-700"> |
| <i class="fas fa-search"></i> |
| </button> |
| <button class="bg-blue-600 text-white px-4 py-1 rounded-full hover:bg-blue-700"> |
| Subscribe |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="bg-red-600 text-white py-2 overflow-hidden"> |
| <div class="container mx-auto px-4"> |
| <div class="flex items-center"> |
| <span class="font-bold mr-4 whitespace-nowrap">BREAKING:</span> |
| <div class="breaking-news-ticker whitespace-nowrap"> |
| <span class="mr-8">Global leaders meet to discuss climate change initiatives</span> |
| <span class="mr-8">Stock markets reach all-time high amid economic recovery</span> |
| <span class="mr-8">Major tech company announces revolutionary AI breakthrough</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <main class="container mx-auto px-4 py-6"> |
| |
| <section class="mb-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-2 bg-white rounded-lg shadow-md overflow-hidden"> |
| <div class="relative h-96 overflow-hidden"> |
| <img src="https://source.unsplash.com/random/800x500/?politics" alt="Featured News" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> |
| <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded uppercase">Politics</span> |
| <h2 class="text-3xl font-bold text-white mt-2">Global Summit Addresses Climate Change Crisis</h2> |
| <p class="text-gray-200 mt-2">World leaders gather to discuss urgent measures against rising global temperatures...</p> |
| <div class="flex items-center mt-4 text-gray-300 text-sm"> |
| <span>By John Smith</span> |
| <span class="mx-2">•</span> |
| <span>2 hours ago</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden h-48 relative"> |
| <img src="https://source.unsplash.com/random/400x300/?technology" alt="Tech News" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> |
| <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded uppercase">Technology</span> |
| <h3 class="text-lg font-bold text-white mt-1">New AI Model Outperforms Humans in Creative Tasks</h3> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden h-48 relative"> |
| <img src="https://source.unsplash.com/random/400x300/?sports" alt="Sports News" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> |
| <span class="bg-green-600 text-white text-xs px-2 py-1 rounded uppercase">Sports</span> |
| <h3 class="text-lg font-bold text-white mt-1">Underdog Team Wins Championship Against All Odds</h3> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="mb-8"> |
| <div class="flex overflow-x-auto scrollbar-hide space-x-6 pb-2"> |
| <button class="category-tab active px-4 py-2 font-medium whitespace-nowrap">All News</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">World</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Politics</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Business</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Technology</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Science</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Health</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Entertainment</button> |
| <button class="category-tab px-4 py-2 font-medium whitespace-nowrap">Sports</button> |
| </div> |
| </section> |
|
|
| |
| <section class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| <h2 class="text-2xl font-bold mb-6">Latest News</h2> |
| |
| <div class="space-y-6"> |
| |
| <div class="news-card bg-white rounded-lg shadow-md overflow-hidden flex flex-col md:flex-row"> |
| <div class="md:w-1/3 h-48 md:h-auto overflow-hidden"> |
| <img src="https://source.unsplash.com/random/400x300/?economy" alt="News" class="news-image w-full h-full object-cover"> |
| </div> |
| <div class="p-6 md:w-2/3"> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded uppercase">Economy</span> |
| <h3 class="text-xl font-bold mt-2">Central Banks Announce Coordinated Interest Rate Hikes</h3> |
| <p class="text-gray-600 mt-2">Major central banks around the world have agreed to raise interest rates simultaneously to combat inflation...</p> |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> |
| <span>By Sarah Johnson</span> |
| <span class="mx-2">•</span> |
| <span>4 hours ago</span> |
| <span class="mx-2">•</span> |
| <span>3 min read</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="news-card bg-white rounded-lg shadow-md overflow-hidden flex flex-col md:flex-row"> |
| <div class="md:w-1/3 h-48 md:h-auto overflow-hidden"> |
| <img src="https://source.unsplash.com/random/400x300/?health" alt="News" class="news-image w-full h-full object-cover"> |
| </div> |
| <div class="p-6 md:w-2/3"> |
| <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded uppercase">Health</span> |
| <h3 class="text-xl font-bold mt-2">Breakthrough in Cancer Treatment Shows Promise in Clinical Trials</h3> |
| <p class="text-gray-600 mt-2">Researchers report significant progress in a new immunotherapy approach that could revolutionize cancer care...</p> |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> |
| <span>By Dr. Michael Chen</span> |
| <span class="mx-2">•</span> |
| <span>6 hours ago</span> |
| <span class="mx-2">•</span> |
| <span>4 min read</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="news-card bg-white rounded-lg shadow-md overflow-hidden flex flex-col md:flex-row"> |
| <div class="md:w-1/3 h-48 md:h-auto overflow-hidden"> |
| <img src="https://source.unsplash.com/random/400x300/?space" alt="News" class="news-image w-full h-full object-cover"> |
| </div> |
| <div class="p-6 md:w-2/3"> |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded uppercase">Science</span> |
| <h3 class="text-xl font-bold mt-2">Astronomers Discover Earth-Like Planet in Nearby Star System</h3> |
| <p class="text-gray-600 mt-2">The newly found exoplanet orbits within the habitable zone of its star, raising possibilities of liquid water...</p> |
| <div class="flex items-center mt-4 text-gray-500 text-sm"> |
| <span>By Prof. Alan Rodriguez</span> |
| <span class="mx-2">•</span> |
| <span>8 hours ago</span> |
| <span class="mx-2">•</span> |
| <span>5 min read</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="text-center mt-8"> |
| <button class="bg-white border border-gray-300 text-gray-700 px-6 py-2 rounded-full hover:bg-gray-100"> |
| Load More Stories |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="space-y-6"> |
| |
| <div class="weather-widget text-white rounded-lg p-6 shadow-md"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="font-bold text-lg">New York, NY</h3> |
| <p class="text-sm opacity-80">Wednesday, June 14</p> |
| </div> |
| <div class="text-right"> |
| <p class="text-4xl font-bold">72°F</p> |
| <p class="text-sm opacity-80">Partly Cloudy</p> |
| </div> |
| </div> |
| <div class="flex justify-between mt-6 text-center"> |
| <div> |
| <p class="text-sm opacity-80">Today</p> |
| <i class="fas fa-cloud-sun text-2xl my-2"></i> |
| <p class="font-medium">68°-75°</p> |
| </div> |
| <div> |
| <p class="text-sm opacity-80">Thu</p> |
| <i class="fas fa-sun text-2xl my-2"></i> |
| <p class="font-medium">70°-78°</p> |
| </div> |
| <div> |
| <p class="text-sm opacity-80">Fri</p> |
| <i class="fas fa-cloud-showers-heavy text-2xl my-2"></i> |
| <p class="font-medium">65°-72°</p> |
| </div> |
| <div> |
| <p class="text-sm opacity-80">Sat</p> |
| <i class="fas fa-cloud-sun text-2xl my-2"></i> |
| <p class="font-medium">68°-76°</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-fire text-red-500 mr-2"></i> |
| Trending Now |
| </h3> |
| <div class="space-y-4"> |
| <div class="flex items-start"> |
| <span class="bg-gray-200 text-gray-800 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-1">1</span> |
| <div> |
| <h4 class="font-medium hover:text-blue-600 cursor-pointer">Major Social Media Platform Announces New Privacy Features</h4> |
| <p class="text-gray-500 text-sm mt-1">12,458 shares</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <span class="bg-gray-200 text-gray-800 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-1">2</span> |
| <div> |
| <h4 class="font-medium hover:text-blue-600 cursor-pointer">Celebrity Couple Announces Surprise Engagement</h4> |
| <p class="text-gray-500 text-sm mt-1">9,872 shares</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <span class="bg-gray-200 text-gray-800 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-1">3</span> |
| <div> |
| <h4 class="font-medium hover:text-blue-600 cursor-pointer">New Study Reveals Benefits of Mediterranean Diet</h4> |
| <p class="text-gray-500 text-sm mt-1">7,541 shares</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <span class="bg-gray-200 text-gray-800 font-bold rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3 mt-1">4</span> |
| <div> |
| <h4 class="font-medium hover:text-blue-600 cursor-pointer">Tech Giant Unveils Revolutionary Smartphone Technology</h4> |
| <p class="text-gray-500 text-sm mt-1">6,329 shares</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-blue-50 rounded-lg shadow-md p-6"> |
| <h3 class="font-bold text-lg mb-2">Stay Updated</h3> |
| <p class="text-gray-600 text-sm mb-4">Get the latest news delivered to your inbox</p> |
| <form class="space-y-3"> |
| <input type="email" placeholder="Your email address" class="w-full px-4 py-2 rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <button type="submit" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Subscribe</button> |
| </form> |
| <p class="text-gray-500 text-xs mt-3">We respect your privacy. Unsubscribe at any time.</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md p-6"> |
| <h3 class="font-bold text-lg mb-4 flex items-center"> |
| <i class="fas fa-play-circle text-blue-500 mr-2"></i> |
| Video Spotlight |
| </h3> |
| <div class="relative pt-[56.25%] rounded overflow-hidden bg-black"> |
| <img src="https://source.unsplash.com/random/400x300/?interview" alt="Video" class="absolute top-0 left-0 w-full h-full object-cover"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <button class="bg-white bg-opacity-80 rounded-full p-4 hover:bg-opacity-100"> |
| <i class="fas fa-play text-blue-600"></i> |
| </button> |
| </div> |
| </div> |
| <h4 class="font-medium mt-3 hover:text-blue-600 cursor-pointer">Exclusive Interview With Nobel Prize Winner</h4> |
| <p class="text-gray-500 text-sm mt-1">2.4M views • 3 days ago</p> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <h4 class="text-xl font-bold mb-4">NewsPulse</h4> |
| <p class="text-gray-400">Delivering accurate, timely news from around the world since 2005.</p> |
| </div> |
| <div> |
| <h5 class="font-bold mb-4">Categories</h5> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white">World</a></li> |
| <li><a href="#" class="hover:text-white">Politics</a></li> |
| <li><a href="#" class="hover:text-white">Business</a></li> |
| <li><a href="#" class="hover:text-white">Technology</a></li> |
| <li><a href="#" class="hover:text-white">Science</a></li> |
| </ul> |
| </div> |
| <div> |
| <h5 class="font-bold mb-4">Company</h5> |
| <ul class="space-y-2 text-gray-400"> |
| <li><a href="#" class="hover:text-white">About Us</a></li> |
| <li><a href="#" class="hover:text-white">Careers</a></li> |
| <li><a href="#" class="hover:text-white">Advertise</a></li> |
| <li><a href="#" class="hover:text-white">Contact</a></li> |
| <li><a href="#" class="hover:text-white">Ethics Policy</a></li> |
| </ul> |
| </div> |
| <div> |
| <h5 class="font-bold mb-4">Connect With Us</h5> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600"> |
| <i class="fab fa-facebook-f"></i> |
| </a> |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-400"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-pink-600"> |
| <i class="fab fa-instagram"></i> |
| </a> |
| </div> |
| <div class="flex space-x-2"> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-apple text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-400 hover:text-white"> |
| <i class="fab fa-google-play text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| <div class="border-t border-gray-800 pt-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 NewsPulse. All rights reserved.</p> |
| <div class="flex space-x-6 text-sm"> |
| <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a> |
| <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a> |
| <a href="#" class="text-gray-400 hover:text-white">Cookie Policy</a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| const tabs = document.querySelectorAll('.category-tab'); |
| tabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| tabs.forEach(t => t.classList.remove('active')); |
| this.classList.add('active'); |
| |
| }); |
| }); |
| |
| |
| const ticker = document.querySelector('.breaking-news-ticker'); |
| ticker.addEventListener('animationiteration', function() { |
| |
| }); |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| }); |
| </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=SenerK/haber" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
