-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearn-content.html
More file actions
135 lines (125 loc) · 6.25 KB
/
learn-content.html
File metadata and controls
135 lines (125 loc) · 6.25 KB
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Learn — CodeScoop.dev</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white text-gray-800 font-sans antialiased">
<!-- Header -->
<header class="bg-white border-b border-gray-200 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 py-4 flex justify-between items-center">
<h1 class="text-2xl font-extrabold text-blue-600 tracking-tight">CodeScoop<span class="text-gray-800">.dev</span></h1>
<nav class="hidden md:flex space-x-6 font-medium text-gray-700">
<a href="/" class="hover:text-blue-600">Home</a>
<a href="/resources.html" class="hover:text-blue-600">Resources</a>
<a href="/learn.html" class="text-blue-600 font-semibold">Learn</a>
</nav>
</div>
</header>
<!-- Hero Section -->
<section class="bg-gray-50 py-16 text-center">
<div class="max-w-3xl mx-auto px-6">
<h2 class="text-4xl font-extrabold text-gray-900 mb-4">Practice Interview Questions</h2>
<p class="text-lg text-gray-600">Sharpen your skills across DSA, System Design, Frontend, and more.</p>
</div>
</section>
<!-- Filter Bar -->
<section class="bg-white border-b border-gray-200">
<div class="max-w-7xl mx-auto px-4 py-6 grid grid-cols-1 md:grid-cols-6 gap-4">
<input type="text" placeholder="Search..." class="col-span-2 border border-gray-300 px-4 py-2 rounded-md w-full" />
<select class="border border-gray-300 px-3 py-2 rounded-md w-full">
<option>Sort by</option>
<option>Default</option>
<option>Most Solved</option>
<option>Recently Added</option>
</select>
<select class="border border-gray-300 px-3 py-2 rounded-md w-full">
<option>Language</option>
<option>JavaScript</option>
<option>Python</option>
<option>Java</option>
</select>
<select class="border border-gray-300 px-3 py-2 rounded-md w-full">
<option>Difficulty</option>
<option>Beginner</option>
<option>Intermediate</option>
<option>Advanced</option>
</select>
<select class="border border-gray-300 px-3 py-2 rounded-md w-full">
<option>Status</option>
<option>Solved</option>
<option>Unsolved</option>
</select>
</div>
</section>
<!-- Questions Grid -->
<main class="max-w-7xl mx-auto px-4 py-16">
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Card -->
<div class="border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-200">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-blue-600 font-semibold">DSA</span>
<span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">Beginner</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Two Sum Problem</h3>
<p class="text-sm text-gray-600 mb-4">Find indices of two numbers in an array that add up to a target.</p>
<div class="flex flex-wrap gap-2 text-xs mb-4">
<span class="bg-gray-100 px-2 py-1 rounded-full">Array</span>
<span class="bg-gray-100 px-2 py-1 rounded-full">HashMap</span>
<span class="bg-gray-100 px-2 py-1 rounded-full">LeetCode</span>
</div>
<div class="flex justify-between items-center">
<a href="/online-complier.html" class="text-sm font-medium text-blue-600 hover:underline">Solve Now →</a>
<span class="text-xs text-gray-500">Google</span>
</div>
</div>
<!-- Repeat card template with different data -->
<div class="border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-200">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-purple-600 font-semibold">System Design</span>
<span class="text-xs bg-yellow-100 text-yellow-700 px-2 py-1 rounded-full">Intermediate</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Design a URL Shortener</h3>
<p class="text-sm text-gray-600 mb-4">Plan how to build scalable services like Bitly or TinyURL.</p>
<div class="flex flex-wrap gap-2 text-xs mb-4">
<span class="bg-gray-100 px-2 py-1 rounded-full">Architecture</span>
<span class="bg-gray-100 px-2 py-1 rounded-full">Database</span>
</div>
<div class="flex justify-between items-center">
<a href="online-complier.html" class="text-sm font-medium text-blue-600 hover:underline">Solve Now →</a>
<span class="text-xs text-gray-500">Meta</span>
</div>
</div>
<div class="border border-gray-200 rounded-2xl p-6 hover:shadow-lg transition-all duration-200">
<div class="flex justify-between items-center mb-2">
<span class="text-sm text-pink-600 font-semibold">Frontend</span>
<span class="text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full">Advanced</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 mb-2">Virtual Scrolling List</h3>
<p class="text-sm text-gray-600 mb-4">Implement a performant scrollable list with React.</p>
<div class="flex flex-wrap gap-2 text-xs mb-4">
<span class="bg-gray-100 px-2 py-1 rounded-full">React</span>
<span class="bg-gray-100 px-2 py-1 rounded-full">Rendering</span>
</div>
<div class="flex justify-between items-center">
<a href="#" class="text-sm font-medium text-blue-600 hover:underline">Solve Now →</a>
<span class="text-xs text-gray-500">Netflix</span>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200 text-sm text-gray-600 py-6">
<div class="max-w-6xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center">
<p class="mb-2 md:mb-0">© 2025 CodeScoop.dev. All rights reserved.</p>
<div class="space-x-4">
<a href="#" class="hover:underline">Privacy</a>
<a href="#" class="hover:underline">Terms</a>
<a href="mailto:hello@codescoop.dev" class="hover:underline">Contact</a>
</div>
</div>
</footer>
</body>
</html>