Mirage54/undefined
0
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>WheelWisdom - Articles</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11</head>12<body class="font-sans bg-gray-50">13 <!-- Navigation -->14 <nav class="bg-white shadow-lg sticky top-0 z-50">15 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">16 <div class="flex justify-between h-16">17 <div class="flex items-center">18 <div class="flex-shrink-0 flex items-center">19 <img class="h-8 w-auto" src="/static/logo.png" alt="WheelWisdom logo">20 <span class="ml-2 text-xl font-bold text-gray-900">WheelWisdom</span>21 </div>22 <div class="hidden sm:ml-6 sm:flex sm:space-x-8">23 <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>24 <a href="articles.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Articles</a>25 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Reviews</a>26 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">History</a>27 <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Contact</a>28 </div>29 </div>30 <div class="hidden sm:ml-6 sm:flex sm:items-center">31 <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-all">Subscribe</button>32 </div>33 <div class="-mr-2 flex items-center sm:hidden">34 <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">35 <i data-feather="menu"></i>36 </button>37 </div>38 </div>39 </div>40 </nav>41 42 <!-- Articles Section -->43 <div class="py-12 bg-white">44 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">45 <h2 class="text-3xl font-extrabold text-gray-900 mb-8">Featured Articles</h2>46 <div class="grid gap-8 lg:grid-cols-3">47 <!-- Article 1 -->48 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-xl">49 <img class="w-full h-48 object-cover" src="http://static.photos/automotive/640x360/1" alt="Electric cars">50 <div class="p-6">51 <div class="flex items-center text-sm text-gray-500 mb-2">52 <span>May 15, 2023</span>53 <span class="mx-2">•</span>54 <span>8 min read</span>55 </div>56 <h3 class="text-xl font-semibold text-gray-900 mb-2">The Future of Electric Vehicles</h3>57 <p class="text-gray-600 mb-4">Exploring the latest advancements in EV technology and what to expect in the coming years.</p>58 <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500">Read more →</a>59 </div>60 </div>61 62 <!-- Article 2 -->63 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-xl">64 <img class="w-full h-48 object-cover" src="http://static.photos/automotive/640x360/2" alt="Classic car">65 <div class="p-6">66 <div class="flex items-center text-sm text-gray-500 mb-2">67 <span>April 28, 2023</span>68 <span class="mx-2">•</span>69 <span>12 min read</span>70 </div>71 <h3 class="text-xl font-semibold text-gray-900 mb-2">Classic Cars That Defined Generations</h3>72 <p class="text-gray-600 mb-4">A nostalgic journey through the most iconic vehicles that shaped automotive history.</p>73 <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500">Read more →</a>74 </div>75 </div>76 77 <!-- Article 3 -->78 <div class="bg-white rounded-lg shadow-md overflow-hidden transition-all hover:shadow-xl">79 <img class="w-full h-48 object-cover" src="http://static.photos/automotive/640x360/3" alt="Car engine">80 <div class="p-6">81 <div class="flex items-center text-sm text-gray-500 mb-2">82 <span>April 10, 2023</span>83 <span class="mx-2">•</span>84 <span>10 min read</span>85 </div>86 <h3 class="text-xl font-semibold text-gray-900 mb-2">Understanding Modern Engine Technologies</h3>87 <p class="text-gray-600 mb-4">Breaking down the complex engineering behind today's most efficient powerplants.</p>88 <a href="#" class="text-indigo-600 font-medium hover:text-indigo-500">Read more →</a>89 </div>90 </div>91 </div>92 </div>93 </div>94 95 <script>96 feather.replace();97 </script>98</body>99</html>