Skip to content

Commit 3ffd68d

Browse files
KrishLalakiyaKrishLalakiya
authored
Merge branch 'you-dont-need:master' into master
2 parents 9ec6e89 + 618fa39 commit 3ffd68d

File tree

24 files changed

+2633
-171
lines changed

24 files changed

+2633
-171
lines changed

‎Button/Delete-Button/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
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+
<link rel="stylesheet" href="style.css" />
7+
<title>Delete Button</title>
8+
</head>
9+
<body>
10+
<button class="noselect">
11+
<span class="text">Delete</span>
12+
<span class="icon">
13+
<svg
14+
width="24"
15+
height="24"
16+
viewBox="0 0 24 24"
17+
xmlns="http://www.w3.org/2000/svg"
18+
>
19+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
20+
<g
21+
id="SVGRepo_tracerCarrier"
22+
stroke-linecap="round"
23+
stroke-linejoin="round"
24+
></g>
25+
<g id="SVGRepo_iconCarrier">
26+
<path
27+
d="M0 14.545L1.455 16 8 9.455 14.545 16 16 14.545 9.455 8 16 1.455 14.545 0 8 6.545 1.455 0 0 1.455 6.545 8z"
28+
fill-rule="evenodd"
29+
></path>
30+
</g>
31+
</svg>
32+
</span>
33+
</button>
34+
</body>
35+
</html>

‎Button/Delete-Button/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* */
2+
3+
body{
4+
display: flex;
5+
justify-content: center;
6+
align-items: center;
7+
min-height: 100vh;
8+
background: #222
9+
}
10+
11+
button {
12+
width: 150px;
13+
height: 50px;
14+
cursor: pointer;
15+
display: flex;
16+
align-items: center;
17+
background: red;
18+
border: none;
19+
border-radius: 5px;
20+
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
21+
22+
}
23+
24+
/* for the animations duration */
25+
button, button span {
26+
transition: 200ms;
27+
}
28+
29+
button .text {
30+
/* move on the X axis or horizontal axis to the right */
31+
transform: translateX(35px);
32+
color: white;
33+
font-weight: bold;
34+
}
35+
36+
button .icon {
37+
position: absolute;
38+
border-left: 1px solid #c41b1b;
39+
transform: translateX(110px);
40+
41+
/* moved to the right on X Axis */
42+
43+
height: 40px;
44+
width: 40px;
45+
display: flex;
46+
align-items: center;
47+
justify-content: center;
48+
}
49+
50+
/* select the SVG */
51+
button svg {
52+
width: 15px;
53+
fill: #eee;
54+
}
55+
56+
/* Hover Effects (on button) */
57+
button:hover{
58+
background: #ff3636;
59+
}
60+
/* Text Disapears when we hover on the button */
61+
button:hover .text {
62+
color: transparent;
63+
}
64+
button:hover .icon {
65+
width: 150px;
66+
/* remove the border on the side */
67+
border-left: none;
68+
/* move to the left */
69+
transform: translate(0);
70+
}
71+
button:focus {
72+
outline: none;
73+
}
74+
/* click effect (make the svg smaller when clicked) */
75+
button:active icon svg {
76+
transform: scale(0.8);
77+
}

‎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)