-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathto-do-list-4.html
136 lines (126 loc) · 6.85 KB
/
to-do-list-4.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/bootstrap-to-do-list.min.css" />
</head>
<body>
<!-- Start your project here-->
<style>
.gradient-custom {
background: radial-gradient(50% 123.47% at 50% 50%, #00ff94 0%, #720059 100%),
linear-gradient(121.28deg, #669600 0%, #ff0000 100%),
linear-gradient(360deg, #0029ff 0%, #8fff00 100%),
radial-gradient(100% 164.72% at 100% 100%, #6100ff 0%, #00ff57 100%),
radial-gradient(100% 148.07% at 0% 0%, #fff500 0%, #51d500 100%);
background-blend-mode: screen, color-dodge, overlay, difference, normal;
}
</style>
<section class="vh-100 gradient-custom">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col col-xl-10">
<div class="card">
<div class="card-body p-5">
<form class="d-flex justify-content-center align-items-center mb-4">
<div class="form-outline flex-fill">
<input type="text" id="form2" class="form-control" />
<label class="form-label" for="form2">New task...</label>
</div>
<button type="submit" class="btn btn-info ms-2">Add</button>
</form>
<!-- Tabs navs -->
<ul class="nav nav-tabs mb-4 pb-2" id="ex1" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="ex1-tab-1" data-mdb-toggle="tab" href="#ex1-tabs-1" role="tab"
aria-controls="ex1-tabs-1" aria-selected="true">All</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex1-tab-2" data-mdb-toggle="tab" href="#ex1-tabs-2" role="tab"
aria-controls="ex1-tabs-2" aria-selected="false">Active</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="ex1-tab-3" data-mdb-toggle="tab" href="#ex1-tabs-3" role="tab"
aria-controls="ex1-tabs-3" aria-selected="false">Completed</a>
</li>
</ul>
<!-- Tabs navs -->
<!-- Tabs content -->
<div class="tab-content" id="ex1-content">
<div class="tab-pane fade show active" id="ex1-tabs-1" role="tabpanel" aria-labelledby="ex1-tab-1">
<ul class="list-group mb-0">
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
<s>Cras justo odio</s>
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
<s>Dapibus ac facilisis in</s>
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Morbi leo risus
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Porta ac consectetur ac
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-0 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Vestibulum at eros
</li>
</ul>
</div>
<div class="tab-pane fade" id="ex1-tabs-2" role="tabpanel" aria-labelledby="ex1-tab-2">
<ul class="list-group mb-0">
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Morbi leo risus
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Porta ac consectetur ac
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-0 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." />
Vestibulum at eros
</li>
</ul>
</div>
<div class="tab-pane fade" id="ex1-tabs-3" role="tabpanel" aria-labelledby="ex1-tab-3">
<ul class="list-group mb-0">
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
<s>Cras justo odio</s>
</li>
<li class="list-group-item d-flex align-items-center border-0 mb-2 rounded" style="background-color: #f4f6f7;">
<input class="form-check-input me-2" type="checkbox" value="" aria-label="..." checked />
<s>Dapibus ac facilisis in</s>
</li>
</ul>
</div>
</div>
<!-- Tabs content -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</body>
</html>