eusouodavid262/eduflow-learning-made-smooth
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>Posts Feed - EduFlow</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <style>11 .post-card:hover {12 transform: translateY(-3px);13 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);14 }15 .post-image {16 height: 200px;17 object-fit: cover;18 transition: all 0.3s ease;19 }20 .post-card:hover .post-image {21 transform: scale(1.02);22 }23 .category-badge {24 position: absolute;25 top: 1rem;26 right: 1rem;27 }28 </style>29</head>30<body class="bg-gray-50 font-sans antialiased">31 <!-- Header -->32 <header class="bg-white shadow-sm">33 <div class="container mx-auto px-6 py-4">34 <div class="flex items-center justify-between">35 <div class="flex items-center">36 <h1 class="text-2xl font-bold text-gray-800">Edu<span class="text-blue-600">Flow</span></h1>37 </div>38 <div class="flex items-center space-x-4">39 <button class="px-4 py-2 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition">Create Post</button>40 <i data-feather="search" class="text-gray-700 hover:text-blue-600 cursor-pointer"></i>41 </div>42 </div>43 </div>44 </header>45 46 <!-- Main Content -->47 <main class="container mx-auto px-6 py-8">48 <div class="max-w-4xl mx-auto">49 <div class="flex justify-between items-center mb-8">50 <h2 class="text-3xl font-bold text-gray-800">Latest Posts</h2>51 <div class="flex space-x-2">52 <button class="px-4 py-2 bg-gray-200 text-gray-700 rounded-full hover:bg-gray-300 transition">All</button>53 <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition">Web Dev</button>54 <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition">Data</button>55 <button class="px-4 py-2 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition">Finance</button>56 </div>57 </div>58 59 <!-- Posts Feed -->60 <div class="space-y-8">61 <!-- Post 1 -->62 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">63 <div class="relative">64 <img src="http://static.photos/technology/1024x576/1" alt="Post image" class="w-full post-image">65 <span class="category-badge bg-blue-600 text-white text-xs font-semibold px-3 py-1 rounded-full">WEB DEVELOPMENT</span>66 </div>67 <div class="p-6">68 <div class="flex items-center text-sm text-gray-500 mb-3">69 <span>John Doe</span>70 <span class="mx-2">•</span>71 <span>May 15, 2023</span>72 </div>73 <h3 class="text-xl font-bold text-gray-800 mb-3">Getting Started with React in 2023</h3>74 <p class="text-gray-600 mb-4">Learn how to start building modern web applications with React, the most popular JavaScript library for building user interfaces...</p>75 <div class="flex items-center justify-between">76 <div class="flex items-center space-x-4 text-gray-500">77 <div class="flex items-center space-x-1">78 <i data-feather="eye" class="w-4 h-4"></i>79 <span>1.2k</span>80 </div>81 <div class="flex items-center space-x-1">82 <i data-feather="message-square" class="w-4 h-4"></i>83 <span>24</span>84 </div>85 </div>86 <button class="text-blue-600 hover:text-blue-700 font-medium">Read More →</button>87 </div>88 </div>89 </div>90 91 <!-- Post 2 -->92 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">93 <div class="relative">94 <img src="http://static.photos/science/1024x576/2" alt="Post image" class="w-full post-image">95 <span class="category-badge bg-purple-600 text-white text-xs font-semibold px-3 py-1 rounded-full">DATA SCIENCE</span>96 </div>97 <div class="p-6">98 <div class="flex items-center text-sm text-gray-500 mb-3">99 <span>Jane Smith</span>100 <span class="mx-2">•</span>101 <span>April 28, 2023</span>102 </div>103 <h3 class="text-xl font-bold text-gray-800 mb-3">Machine Learning Fundamentals Explained</h3>104 <p class="text-gray-600 mb-4">A comprehensive guide to understanding the basics of machine learning concepts and algorithms for beginners...</p>105 <div class="flex items-center justify-between">106 <div class="flex items-center space-x-4 text-gray-500">107 <div class="flex items-center space-x-1">108 <i data-feather="eye" class="w-4 h-4"></i>109 <span>890</span>110 </div>111 <div class="flex items-center space-x-1">112 <i data-feather="message-square" class="w-4 h-4"></i>113 <span>17</span>114 </div>115 </div>116 <button class="text-blue-600 hover:text-blue-700 font-medium">Read More →</button>117 </div>118 </div>119 </div>120 121 <!-- Post 3 -->122 <div class="post-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">123 <div class="relative">124 <img src="http://static.photos/finance/1024x576/3" alt="Post image" class="w-full post-image">125 <span class="category-badge bg-green-600 text-white text-xs font-semibold px-3 py-1 rounded-full">FINANCE</span>126 </div>127 <div class="p-6">128 <div class="flex items-center text-sm text-gray-500 mb-3">129 <span>Robert Johnson</span>130 <span class="mx-2">•</span>131 <span>April 10, 2023</span>132 </div>133 <h3 class="text-xl font-bold text-gray-800 mb-3">Personal Finance Tips for Young Professionals</h3>134 <p class="text-gray-600 mb-4">Essential financial advice to help you manage your money, build savings, and plan for the future...</p>135 <div class="flex items-center justify-between">136 <div class="flex items-center space-x-4 text-gray-500">137 <div class="flex items-center space-x-1">138 <i data-feather="eye" class="w-4 h-4"></i>139 <span>1.5k</span>140 </div>141 <div class="flex items-center space-x-1">142 <i data-feather="message-square" class="w-4 h-4"></i>143 <span>32</span>144 </div>145 </div>146 <button class="text-blue-600 hover:text-blue-700 font-medium">Read More →</button>147 </div>148 </div>149 </div>150 </div>151 152 <!-- Pagination -->153 <div class="flex justify-center mt-12">154 <nav class="flex items-center space-x-2">155 <button class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">156 <i data-feather="chevron-left" class="w-4 h-4"></i>157 </button>158 <button class="px-3 py-1 rounded-md bg-blue-600 text-white">1</button>159 <button class="px-3 py-1 rounded-md hover:bg-gray-200">2</button>160 <button class="px-3 py-1 rounded-md hover:bg-gray-200">3</button>161 <span class="px-3 py-1">...</span>162 <button class="px-3 py-1 rounded-md hover:bg-gray-200">8</button>163 <button class="px-3 py-1 rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300">164 <i data-feather="chevron-right" class="w-4 h-4"></i>165 </button>166 </nav>167 </div>168 </div>169 </main>170 171 <script>172 // Initialize feather icons173 feather.replace();174 </script>175</body>176</html>177