ishapathak19/roadmap-wizardry
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>Roadmap Wizardry 🧙♂️</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10</head>11<body class="bg-gray-50">12 <custom-navbar></custom-navbar>13 14 <main class="container mx-auto px-4 py-12">15 <div class="text-center mb-16">16 <h1 class="text-5xl font-bold text-indigo-800 mb-4">Roadmap Wizardry 🧙♂️</h1>17 <p class="text-xl text-gray-600 max-w-2xl mx-auto">Your magical guide to mastering any subject through structured learning paths</p>18 </div>19 20 <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">21 <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">22 <div class="text-indigo-600 mb-4">23 <i data-feather="book" class="w-12 h-12"></i>24 </div>25 <h3 class="text-2xl font-bold mb-3">Theory</h3>26 <p class="text-gray-600 mb-4">Master concepts with our structured learning materials</p>27 <a href="theory.html" class="btn-primary">Explore Theory</a>28 </div>29 30 <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">31 <div class="text-indigo-600 mb-4">32 <i data-feather="edit-3" class="w-12 h-12"></i>33 </div>34 <h3 class="text-2xl font-bold mb-3">Practice</h3>35 <p class="text-gray-600 mb-4">Test your knowledge with interactive questions</p>36 <a href="practice.html" class="btn-primary">Start Practicing</a>37 </div>38 39 <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow">40 <div class="text-indigo-600 mb-4">41 <i data-feather="video" class="w-12 h-12"></i>42 </div>43 <h3 class="text-2xl font-bold mb-3">Resources</h3>44 <p class="text-gray-600 mb-4">Curated video tutorials from top educators</p>45 <a href="resources.html" class="btn-primary">View Resources</a>46 </div>47 </div>48 49 <div class="bg-white p-8 rounded-xl shadow-lg">50 <h2 class="text-3xl font-bold text-indigo-800 mb-6">Featured Roadmaps</h2>51 <div id="roadmap-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">52 <!-- Roadmaps will be loaded dynamically from JSON -->53 </div>54 </div>55 </main>56 57 <custom-footer></custom-footer>58 59 <script src="components/navbar.js"></script>60 <script src="components/footer.js"></script>61 <script src="script.js"></script>62 <script>63 feather.replace();64 </script>65<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>66</body>67</html>