File size: 8,493 Bytes
bff980a 6f00a0c bff980a 6f00a0c bff980a | 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 | <!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodeDex | Learn to Code</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
500: '#6366f1',
},
secondary: {
500: '#8b5cf6',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="mb-16">
<div class="text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">Learn, Build, Share</h1>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">The interactive platform to learn coding through challenges and projects</p>
<div class="mt-8 flex justify-center gap-4">
<a href="/challenges" class="px-6 py-3 bg-primary-500 hover:bg-primary-600 rounded-lg font-medium transition">Start Coding</a>
<a href="/projects" class="px-6 py-3 border border-gray-700 hover:bg-gray-800 rounded-lg font-medium transition">View Projects</a>
</div>
</div>
</section>
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">Popular Learning Paths</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="/python" class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-lg bg-indigo-900 flex items-center justify-center">
<i data-feather="code" class="text-indigo-400"></i>
</div>
<h3 class="text-xl font-semibold">Python</h3>
</div>
<p class="text-gray-400">Learn the most versatile programming language</p>
</a>
<a href="/javascript" class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-lg bg-yellow-900 flex items-center justify-center">
<i data-feather="globe" class="text-yellow-400"></i>
</div>
<h3 class="text-xl font-semibold">JavaScript</h3>
</div>
<p class="text-gray-400">Build interactive web applications</p>
</a>
<a href="/web-dev" class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-lg bg-blue-900 flex items-center justify-center">
<i data-feather="layout" class="text-blue-400"></i>
</div>
<h3 class="text-xl font-semibold">Web Development</h3>
</div>
<p class="text-gray-400">Master frontend and backend development</p>
</a>
</div>
</section>
<section class="mb-16">
<h2 class="text-2xl font-bold mb-8">Featured Challenges</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
<img src="http://static.photos/technology/640x360/1" alt="Challenge" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">30 Days of Code</h3>
<p class="text-gray-400 mb-4">Complete one coding challenge every day for 30 days</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-gray-700 rounded-full text-sm">Beginner</span>
<a href="/challenges" class="text-primary-500 hover:underline">View Challenge</a>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
<img src="http://static.photos/technology/640x360/2" alt="Challenge" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Monthly Challenge</h3>
<p class="text-gray-400 mb-4">Build a complete project in one month</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-gray-700 rounded-full text-sm">Intermediate</span>
<a href="/community/monthly-challenge" class="text-primary-500 hover:underline">Join Now</a>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
<img src="http://static.photos/technology/640x360/3" alt="Challenge" class="w-full h-48 object-cover">
<div class="p-6">
<h3 class="text-xl font-semibold mb-2">Question of the Week</h3>
<p class="text-gray-400 mb-4">Solve this week's algorithmic problem</p>
<div class="flex justify-between items-center">
<span class="px-3 py-1 bg-gray-700 rounded-full text-sm">Advanced</span>
<a href="/community/question-of-the-week" class="text-primary-500 hover:underline">Try It</a>
</div>
</div>
</div>
</div>
</section>
<section>
<h2 class="text-2xl font-bold mb-8">Community Highlights</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<a href="/community/project-showcase" class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-lg bg-purple-900 flex items-center justify-center">
<i data-feather="star" class="text-purple-400"></i>
</div>
<h3 class="text-xl font-semibold">Project Showcase</h3>
</div>
<p class="text-gray-400 mb-4">See what our community members have built and get inspired</p>
<span class="text-primary-500 hover:underline">View Projects →</span>
</a>
<a href="/community/leaderboards" class="bg-gray-800 p-6 rounded-xl hover:bg-gray-700 transition">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-lg bg-green-900 flex items-center justify-center">
<i data-feather="award" class="text-green-400"></i>
</div>
<h3 class="text-xl font-semibold">Leaderboards</h3>
</div>
<p class="text-gray-400 mb-4">Check out the top coders in our community</p>
<span class="text-primary-500 hover:underline">View Leaderboard →</span>
</a>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |