Spaces:
Running
Running
File size: 8,775 Bytes
e774c95 f80bf7d e774c95 ba343fc e774c95 | 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 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Courses | Spadak Code Learn</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link rel="stylesheet" href="style.css">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#f97316',
},
secondary: {
500: '#f59e0b',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-gray-100">
<custom-navbar></custom-navbar>
<!-- Courses Section -->
<section class="pt-24 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<div class="text-center mb-16">
<h1 class="text-4xl font-extrabold text-white sm:text-5xl mb-4">
<span class="block">Our Comprehensive</span>
<span class="block text-orange-500 bg-gradient-to-r from-orange-500 to-amber-500 bg-clip-text text-transparent">Course Catalog</span>
</h1>
<p class="max-w-3xl mx-auto text-lg text-gray-300">
Choose from our structured learning paths designed to take you from beginner to job-ready developer.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Course 1 -->
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-orange-500 transition-all duration-300 hover:scale-[1.02]">
<div class="relative">
<img src="http://static.photos/technology/640x360/1" alt="Web Development" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full">
Beginner
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Complete Web Developer</h3>
<p class="text-gray-300 mb-4">Master HTML, CSS, JavaScript and build real-world projects.</p>
<div class="flex justify-between items-center">
<div class="flex items-center text-yellow-400">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<span class="ml-1 text-sm">4.9 (1.2k)</span>
</div>
<span class="text-sm text-gray-400">32 hours</span>
</div>
<a href="#" class="mt-6 w-full block text-center bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition-colors duration-200">
Enroll Now
</a>
</div>
</div>
<!-- Course 2 -->
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-orange-500 transition-all duration-300 hover:scale-[1.02]">
<div class="relative">
<img src="http://static.photos/technology/640x360/2" alt="React" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full">
Intermediate
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">Modern React Development</h3>
<p class="text-gray-300 mb-4">Build interactive UIs with React, Hooks, and Context API.</p>
<div class="flex justify-between items-center">
<div class="flex items-center text-yellow-400">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<span class="ml-1 text-sm">4.8 (890)</span>
</div>
<span class="text-sm text-gray-400">24 hours</span>
</div>
<a href="#" class="mt-6 w-full block text-center bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition-colors duration-200">
Enroll Now
</a>
</div>
</div>
<!-- Course 3 -->
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700 hover:border-orange-500 transition-all duration-300 hover:scale-[1.02]">
<div class="relative">
<img src="http://static.photos/technology/640x360/3" alt="JavaScript" class="w-full h-48 object-cover">
<div class="absolute top-4 right-4 bg-orange-500 text-white text-xs font-bold px-3 py-1 rounded-full">
Advanced
</div>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-white mb-2">JavaScript Mastery</h3>
<p class="text-gray-300 mb-4">Deep dive into advanced JavaScript concepts and patterns.</p>
<div class="flex justify-between items-center">
<div class="flex items-center text-yellow-400">
<i data-feather="star" class="w-4 h-4 fill-current"></i>
<span class="ml-1 text-sm">4.9 (1.5k)</span>
</div>
<span class="text-sm text-gray-400">40 hours</span>
</div>
<a href="#" class="mt-6 w-full block text-center bg-orange-500 hover:bg-orange-600 text-white px-4 py-2 rounded-md transition-colors duration-200">
Enroll Now
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="col-span-2">
<div class="flex items-center">
<i data-feather="code" class="text-amber-500"></i>
<span class="ml-2 text-xl font-bold text-orange-500">Spadak Code Learn</span>
</div>
<p class="mt-4 text-gray-300 text-sm">
Revolutionizing how developers learn. Join our community of passionate learners building the future with code.
</p>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
Learn
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="courses.html" class="text-base text-gray-300 hover:text-white">
Courses
</a>
</li>
<li>
<a href="tutorials.html" class="text-base text-gray-300 hover:text-white">
Tutorials
</a>
</li>
</ul>
</div>
<div>
<h3 class="text-sm font-semibold text-gray-200 tracking-wider uppercase">
Company
</h3>
<ul class="mt-4 space-y-4">
<li>
<a href="about.html" class="text-base text-gray-300 hover:text-white">
About
</a>
</li>
<li>
<a href="#" class="text-base text-gray-300 hover:text-white">
Careers
</a>
</li>
</ul>
</div>
</div>
<div class="mt-12 border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between">
<p class="text-gray-400 text-sm">
© 2023 Spadak Code Learn. All rights reserved.
</p>
</div>
</div>
</footer>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |