Skip to content

Commit fbccc2f

Browse files
ImrnwfiImrnwfi
authored
Add files via upload
1 parent f0c9c35 commit fbccc2f

File tree

3 files changed

+100
-0
lines changed

3 files changed

+100
-0
lines changed

‎index.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
8+
<!-- Link to the favicon -->
9+
<link rel="icon" href="notes.png" type="image/png">
10+
11+
<title>To Do List</title>
12+
<link rel="stylesheet" href="main.css">
13+
</head>
14+
<body>
15+
<div class="title">
16+
<h1>TO DO LIST</h1>
17+
</div>
18+
<div class="center container">
19+
<div class="todo">
20+
<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
21+
<input class="todo__checkbox" type="checkbox">
22+
</div>
23+
<div class="todo">
24+
<input class="todo__value" type="text" placeholder="(empty)">
25+
<input class="todo__checkbox" type="checkbox">
26+
</div>
27+
<div class="todo">
28+
<input class="todo__value" type="text" placeholder="(empty)">
29+
<input class="todo__checkbox" type="checkbox">
30+
</div>
31+
<div class="todo">
32+
<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
33+
<input class="todo__checkbox" type="checkbox">
34+
</div>
35+
<div class="todo">
36+
<input class="todo__value" type="text" placeholder="(empty)">
37+
<input class="todo__checkbox" type="checkbox">
38+
</div>
39+
<div class="todo">
40+
<input class="todo__value" type="text" placeholder="(empty)">
41+
<input class="todo__checkbox" type="checkbox">
42+
</div>
43+
<div class="todo">
44+
<input class="todo__value" type="text" placeholder="(empty)" value="Take the bins out">
45+
<input class="todo__checkbox" type="checkbox">
46+
</div>
47+
<div class="todo">
48+
<input class="todo__value" type="text" placeholder="(empty)">
49+
<input class="todo__checkbox" type="checkbox">
50+
</div>
51+
<div class="todo">
52+
<input class="todo__value" type="text" placeholder="(empty)">
53+
<input class="todo__checkbox" type="checkbox">
54+
</div>
55+
</div>
56+
</body>
57+
</html>

‎main.css

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.container {
2+
display: flex;
3+
4+
flex-direction: column;
5+
width: 300px;
6+
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.15);
7+
border-top: 5px solid #fa9a06;
8+
border-bottom: 5px solid #fa9a06;
9+
}
10+
11+
.todo {
12+
display: flex;
13+
justify-content: space-between;
14+
padding: 1em;
15+
}
16+
17+
.todo__value {
18+
background: transparent;
19+
border: none;
20+
outline: none;
21+
font-family: 'Quicksand', sans-serif;
22+
font-size: 1em;
23+
font-weight: bold;
24+
flex-grow: 1;
25+
}
26+
27+
.todo:has(.todo__checkbox:checked) {
28+
color: #555555;
29+
background: #eeeeee;
30+
text-decoration: line-through;
31+
order: 1;
32+
}
33+
34+
.center {
35+
margin: auto;
36+
width: 40%;
37+
border: 3px solid #fa9a06;
38+
padding: 10px;
39+
}
40+
41+
div.title {
42+
text-align: center;
43+
}

‎notes.png

14.3 KB
Loading

0 commit comments

Comments
 (0)