File size: 8,366 Bytes
99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 8f200ff 99e3611 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TechPulse Chronicles Clone | Latest in Technology</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="components/news-card.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8 bg-gradient-to-b from-gray-900 to-black">
<!-- Hero Section -->
<section class="mb-16">
<div class="bg-gradient-to-r from-green-600 to-green-800 rounded-2xl p-8 md:p-12 text-white">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Stay Ahead with TechPulse Chronicles</h1>
<p class="text-xl mb-8 max-w-2xl">Your daily dose of cutting-edge technology news, trends, and innovations.</p>
<div class="flex flex-col sm:flex-row gap-4">
<input type="text" placeholder="Search tech news..." class="px-4 py-3 rounded-lg flex-grow text-gray-800">
<button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Search</button>
</div>
</div>
</section>
<!-- Featured Playlists -->
<section class="mb-16">
<div class="flex justify-between items-center mb-8">
<h2 class="text-2xl font-bold">Featured Playlists</h2>
<a href="#" class="text-green-500 hover:underline flex items-center">
View all <i data-feather="chevron-right" class="ml-1"></i>
</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<custom-news-card
image="http://static.photos/music/1024x576/1"
category="Today's Top Hits"
title="Blinding Lights"
excerpt="The Weeknd, Dua Lipa, Justin Bieber and more"
date="Updated daily"
></custom-news-card>
<custom-news-card
image="http://static.photos/music/1024x576/2"
category="Chill Hits"
title="Relaxing Vibes"
excerpt="Khalid, Billie Eilish, Ed Sheeran"
date="Updated weekly"
></custom-news-card>
<custom-news-card
image="http://static.photos/music/1024x576/3"
category="Rock Classics"
title="Greatest Rock Songs"
excerpt="Queen, Led Zeppelin, The Rolling Stones"
date="Updated monthly"
></custom-news-card>
</div>
</section>
<!-- Trending Now -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">Trending Now</h2>
<div class="bg-white rounded-xl shadow-md overflow-hidden">
<div class="grid grid-cols-1 lg:grid-cols-2">
<div class="p-6 lg:p-8">
<span class="inline-block bg-red-100 text-red-800 px-3 py-1 rounded-full text-sm font-medium mb-4">Hot Topic</span>
<h3 class="text-2xl font-bold mb-4">The Future of Web Development in 2023</h3>
<p class="text-gray-600 mb-6">Explore the emerging technologies and frameworks that will dominate web development this year and beyond.</p>
<div class="flex items-center">
<img src="http://static.photos/people/200x200/1" alt="Author" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-medium">Sarah Johnson</p>
<p class="text-gray-500 text-sm">Tech Editor</p>
</div>
</div>
</div>
<div class="bg-gray-100 flex items-center justify-center p-6">
<img src="http://static.photos/technology/640x360/4" alt="Web Development" class="rounded-lg max-h-64">
</div>
</div>
</div>
</section>
<!-- Categories -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">Browse by Category</h2>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="cpu" class="text-blue-600"></i>
</div>
<span class="font-medium">AI & ML</span>
</a>
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="code" class="text-green-600"></i>
</div>
<span class="font-medium">Development</span>
</a>
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="shield" class="text-purple-600"></i>
</div>
<span class="font-medium">Cybersecurity</span>
</a>
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="cloud" class="text-yellow-600"></i>
</div>
<span class="font-medium">Cloud</span>
</a>
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-red-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="smartphone" class="text-red-600"></i>
</div>
<span class="font-medium">Mobile</span>
</a>
<a href="#" class="bg-white p-4 rounded-lg shadow-sm hover:shadow-md transition text-center">
<div class="bg-indigo-100 w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">
<i data-feather="database" class="text-indigo-600"></i>
</div>
<span class="font-medium">Data Science</span>
</a>
</div>
</section>
<!-- Newsletter -->
<section class="bg-gradient-to-r from-blue-500 to-blue-700 rounded-2xl p-8 text-white mb-16">
<div class="max-w-2xl mx-auto text-center">
<h2 class="text-2xl md:text-3xl font-bold mb-4">Stay Updated</h2>
<p class="mb-6">Subscribe to our newsletter and never miss the latest tech news and updates.</p>
<div class="flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Your email address" class="px-4 py-3 rounded-lg flex-grow text-gray-800">
<button class="bg-white text-blue-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">Subscribe</button>
</div>
</div>
</section>
</main>
<music-player></music-player>
<custom-footer></custom-footer>
<script src="components/music-player.js"></script>
<script>
feather.replace();
</script>
<script src="script.js"></script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |