UnknownProbably/undefined
1
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>Courses - RevQ</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 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 500: '#6366f1',17 },18 secondary: {19 500: '#f43f5e',20 }21 }22 }23 }24 }25 </script>26</head>27<body class="bg-gray-900 min-h-screen text-gray-200 overflow-x-hidden">28 <div id="crystal-scene" class="fixed inset-0 pointer-events-none z-0">29 <div data-depth="0.1" class="absolute top-20 left-10 w-16 h-16 opacity-30">30 <div class="crystal crystal-1"></div>31 </div>32 <div data-depth="0.2" class="absolute top-1/3 right-20 w-12 h-12 opacity-40">33 <div class="crystal crystal-2"></div>34 </div>35 <div data-depth="0.3" class="absolute bottom-20 left-1/4 w-14 h-14 opacity-30">36 <div class="crystal crystal-3"></div>37 </div>38 <div data-depth="0.15" class="absolute bottom-1/3 right-1/3 w-10 h-10 opacity-35">39 <div class="crystal crystal-4"></div>40 </div>41 </div>42<nav class="bg-gray-800 shadow-sm py-3 px-6 rounded-full max-w-6xl mx-auto mt-6 sticky top-6 z-50 border border-gray-700 backdrop-blur-sm bg-opacity-80">43 <div class="max-w-6xl mx-auto flex justify-between items-center">44 <div class="flex items-center space-x-2">45 <div class="flex items-center space-x-2">46 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-primary-500">47 <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>48 <path d="M8 14C8 14 9.5 16 12 16C14.5 16 16 14 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>49 <path d="M15 9H15.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>50 <path d="M9 9H9.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>51 <path d="M12 12V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>52 <path d="M12 2L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>53 <path d="M19 5L17 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>54 <path d="M5 5L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>55 </svg>56 <h1 class="text-xl font-bold text-white">RevQ</h1>57 </div>58 </div>59 <div class="hidden md:flex space-x-6">60 <a href="index.html" class="text-gray-300 hover:text-primary-500">Home</a>61 <a href="courses.html" class="text-primary-500">Courses</a>62 <a href="leaderboard.html" class="text-gray-300 hover:text-primary-500">Leaderboard</a>63 <a href="about.html" class="text-gray-300 hover:text-primary-500">About</a>64 </div>65 <div class="flex items-center space-x-4">66 <button class="px-4 py-2 rounded-full text-primary-500 border border-primary-500 hover:bg-primary-500 hover:text-white transition">Login</button>67 <button class="px-4 py-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 transition">Sign Up</button>68 <button class="md:hidden">69 <i data-feather="menu"></i>70 </button>71 </div>72 </div>73 </nav>74 75 <section class="py-16 px-6">76 <div class="max-w-6xl mx-auto">77 <h1 class="text-4xl font-bold text-white mb-8">Our <span class="text-primary-500">Courses</span></h1>78 79 <div class="grid md:grid-cols-3 gap-6">80 <!-- Course 1 -->81 <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition">82 <img src="http://static.photos/education/640x360/1" alt="Programming course" class="w-full h-48 object-cover">83 <div class="p-6">84 <div class="flex justify-between items-center mb-4">85 <span class="px-3 py-1 bg-primary-500/20 text-primary-500 rounded-full text-sm">Beginner</span>86 <div class="flex items-center text-yellow-400">87 <i data-feather="star" class="w-4 h-4 fill-current"></i>88 <span class="ml-1">4.8</span>89 </div>90 </div>91 <h3 class="text-xl font-bold text-white mb-2">Introduction to Programming</h3>92 <p class="text-gray-300 mb-4">Learn the fundamentals of programming with Python.</p>93 <div class="flex justify-between items-center">94 <span class="text-sm text-gray-400"><i data-feather="book" class="w-4 h-4 inline mr-1"></i> 12 Modules</span>95 <button class="text-primary-500 hover:text-primary-400">Start Course</button>96 </div>97 </div>98 </div>99 100 <!-- Course 2 -->101 <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition">102 <img src="http://static.photos/science/640x360/2" alt="Data Science course" class="w-full h-48 object-cover">103 <div class="p-6">104 <div class="flex justify-between items-center mb-4">105 <span class="px-3 py-1 bg-primary-500/20 text-primary-500 rounded-full text-sm">Intermediate</span>106 <div class="flex items-center text-yellow-400">107 <i data-feather="star" class="w-4 h-4 fill-current"></i>108 <span class="ml-1">4.5</span>109 </div>110 </div>111 <h3 class="text-xl font-bold text-white mb-2">Data Science Fundamentals</h3>112 <p class="text-gray-300 mb-4">Explore data analysis, visualization, and machine learning.</p>113 <div class="flex justify-between items-center">114 <span class="text-sm text-gray-400"><i data-feather="book" class="w-4 h-4 inline mr-1"></i> 15 Modules</span>115 <button class="text-primary-500 hover:text-primary-400">Start Course</button>116 </div>117 </div>118 </div>119 120 <!-- Course 3 -->121 <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-primary-500 transition">122 <img src="http://static.photos/technology/640x360/3" alt="Web Development course" class="w-full h-48 object-cover">123 <div class="p-6">124 <div class="flex justify-between items-center mb-4">125 <span class="px-3 py-1 bg-primary-500/20 text-primary-500 rounded-full text-sm">Advanced</span>126 <div class="flex items-center text-yellow-400">127 <i data-feather="star" class="w-4 h-4 fill-current"></i>128 <span class="ml-1">4.7</span>129 </div>130 </div>131 <h3 class="text-xl font-bold text-white mb-2">Full Stack Web Development</h3>132 <p class="text-gray-300 mb-4">Build modern web applications with React and Node.js.</p>133 <div class="flex justify-between items-center">134 <span class="text-sm text-gray-400"><i data-feather="book" class="w-4 h-4 inline mr-1"></i> 20 Modules</span>135 <button class="text-primary-500 hover:text-primary-400">Start Course</button>136 </div>137 </div>138 </div>139 </div>140 </div>141 </section>142 143 <footer class="bg-gray-900 text-white py-12 px-6 border-t border-gray-700">144 <div class="max-w-6xl mx-auto grid md:grid-cols-4 gap-8">145 <div>146 <div class="flex items-center space-x-2 mb-4">147 <i data-feather="award" class="text-primary-500"></i>148 <h3 class="text-xl font-bold">RevQ</h3>149 </div>150 <p class="text-gray-300">Making learning fun, engaging, and rewarding through gamification.</p>151 </div>152 <div>153 <h4 class="text-lg font-semibold mb-4">Explore</h4>154 <ul class="space-y-2">155 <li><a href="index.html" class="text-gray-300 hover:text-white transition">Home</a></li>156 <li><a href="courses.html" class="text-gray-300 hover:text-white transition">Courses</a></li>157 <li><a href="leaderboard.html" class="text-gray-300 hover:text-white transition">Leaderboard</a></li>158 <li><a href="about.html" class="text-gray-300 hover:text-white transition">About</a></li>159 </ul>160 </div>161 <!-- Rest of footer same as index.html -->162 </div>163 </footer>164 <script>165 // Show loading screen before page fully loads166 window.addEventListener('load', function() {167 setTimeout(function() {168 document.querySelector('.loader-wrapper').style.display = 'none';169 }, 500);170 });171 feather.replace();172 173 // Initialize parallax scene for floating crystals174 const crystalScene = document.getElementById('crystal-scene');175 if (crystalScene) {176 new Parallax(crystalScene, {177 relativeInput: true,178 clipRelativeInput: true,179 hoverOnly: true180 });181 }182 183 // Add random floating animation184 document.querySelectorAll('.crystal').forEach(crystal => {185 const duration = Math.random() * 15 + 10;186 const delay = Math.random() * 5;187 crystal.style.animation = `float ${duration}s ease-in-out ${delay}s infinite alternate`;188 });189</script>190 <!-- Loading screen wrapper -->191 <div class="loader-wrapper fixed inset-0 bg-gray-900 z-50 flex items-center justify-center">192 <div class="text-center">193 <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-primary-500 mx-auto mb-4"></div>194 <p class="text-white">Loading...</p>195 </div>196 </div>197 </body>198</html>