Skip to content

Commit bd2671f

Browse files
aayush105aayush105
authored
Merge pull request #884 from Kulsum-ahmad/kanban-board
Kanban Board (Pure CSS Interactivity)
2 parents dfd65c8 + 3b41571 commit bd2671f

2 files changed

Lines changed: 521 additions & 0 deletions

File tree

‎CSS Kanban Board (Simplified Clone)/index.html‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
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>You Don't Need JavaScript Kanban</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
11+
<input type="checkbox" id="dark-mode-toggle" class="theme-controller">
12+
13+
<label for="dark-mode-toggle" class="dark-mode-label">
14+
<span class="light-icon">☀️</span>
15+
<span class="dark-icon">🌙</span>
16+
</label>
17+
18+
<header>
19+
<h1>Pure CSS Kanban Board</h1>
20+
<div class="header-right">
21+
<a href="#new-task-modal" class="add-button">
22+
+ Add New Task (Open Modal)
23+
</a>
24+
25+
<div class="user-menu">
26+
<input type="checkbox" id="user-menu-toggle" class="menu-toggle-control">
27+
<label for="user-menu-toggle" class="user-avatar-btn">
28+
<span>JD</span>
29+
</label>
30+
31+
<div class="dropdown-menu">
32+
<div class="menu-header">Logged in as **Jane Doe**</div>
33+
<ul>
34+
<li><a href="#">Profile & Settings</a></li>
35+
<li class="has-submenu">
36+
<a href="#">Notifications</a>
37+
<ul class="submenu">
38+
<li><a href="#">Email Settings</a></li>
39+
<li><a href="#">Browser Alerts</a></li>
40+
<li><a href="#">Manage Subscriptions</a></li>
41+
</ul>
42+
</li>
43+
<li><a href="#">Help & Feedback</a></li>
44+
<li class="menu-divider"></li>
45+
<li><a href="#">Log Out</a></li>
46+
</ul>
47+
</div>
48+
</div>
49+
</div>
50+
</header>
51+
52+
<main class="board">
53+
54+
<input type="radio" id="cardA-todo" name="cardA-state" checked class="card-controller todo-controller">
55+
<input type="radio" id="cardA-progress" name="cardA-state" class="card-controller progress-controller">
56+
<input type="radio" id="cardA-done" name="cardA-state" class="card-controller done-controller">
57+
58+
<div class="column todo-col">
59+
<h2>To Do</h2>
60+
61+
<div id="cardA-original" class="card card-A card-style-1">
62+
<h3>Design Landing Page</h3>
63+
<p>Focus on mobile-first approach. Add vibrant color palette.</p>
64+
<div class="move-controls">
65+
<label for="cardA-progress" class="move-btn">Move to Progress</label>
66+
</div>
67+
</div>
68+
69+
<div class="card card-style-2">
70+
<h3>Write Project Proposal</h3>
71+
<p>Finalize scope and budget.</p>
72+
</div>
73+
</div>
74+
75+
76+
<div class="column progress-col">
77+
<h2>In Progress</h2>
78+
79+
<div id="cardA-progress-target" class="card card-A card-target card-style-1">
80+
<h3>Design Landing Page</h3>
81+
<p>Focus on mobile-first approach. Add vibrant color palette.</p>
82+
<div class="move-controls">
83+
<label for="cardA-todo" class="move-btn">$\leftarrow$ Move to To Do</label>
84+
<label for="cardA-done" class="move-btn">Move to Done </label>
85+
</div>
86+
</div>
87+
</div>
88+
89+
90+
<div class="column done-col">
91+
<h2>Done</h2>
92+
93+
<div id="cardA-done-target" class="card card-A card-target card-style-1">
94+
<h3>Design Landing Page</h3>
95+
<p>Focus on mobile-first approach. Add vibrant color palette.</p>
96+
<div class="move-controls">
97+
<label for="cardA-progress" class="move-btn">Move to Progress</label>
98+
</div>
99+
</div>
100+
101+
<div class="card card-style-3">
102+
<h3>Setup Git Repo</h3>
103+
<p>Initialize project and push initial commit.</p>
104+
</div>
105+
</div>
106+
107+
</main>
108+
109+
<div id="new-task-modal" class="modal-wrapper">
110+
<div class="modal-content">
111+
<h2>Add New Task</h2>
112+
<form>
113+
<input type="text" placeholder="Task Title">
114+
<textarea placeholder="Description"></textarea>
115+
<select>
116+
<option>Select Column</option>
117+
<option>To Do</option>
118+
<option>In Progress</option>
119+
<option>Done</option>
120+
</select>
121+
<button type="submit">Create Task (Visual Only)</button>
122+
</form>
123+
<a href="#" class="modal-close-btn">&times;</a>
124+
</div>
125+
<a href="#" class="modal-backdrop"></a>
126+
</div>
127+
128+
</body>
129+
</html>

0 commit comments

Comments
 (0)