-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (58 loc) · 3.26 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="input.css">
<title>Document</title>
</head>
<body>
<!--Navbar -->
<nav class="bg-white shadow-lg w-screen h-16">
<!-- Hamburger Menu Icon -->
<div class="fixed top-[21px] ml-5 text-[25px] cursor-pointer" onclick="Open(this)">
<svg xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z" />
</svg>
</div>
<!-- Main Menu -->
<div class="fixed bg-[#0bbbbb] w-0 text-white h-screen flex justify-center items-center text-[40px] tracking-[1px] overflow-hidden origin-left duration-500"
id="hamburger">
<ul>
<div class="flex"><img src="https://cdn1.iconfinder.com/data/icons/Mobile-Icons/128/07_note.png"
class="cursor-pointer opacity-[0.6] hover:opacity-[9] w-16" />
<li class="hover:text-green-300 hover:drop-shadow-xl hover:translate-y-[-5px]"><a href="#">New
Task</a>
</li>
</div><br />
<div class="flex"><img
src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/trash-128.png"
class="cursor-pointer opacity-[0.6] hover:opacity-[9] w-14" />
<li class="hover:text-green-300 hover:drop-shadow-xl hover:translate-y-[-5px]"><a href="#">Delete
Task</a></li>
</div>
</ul>
<!-- Close Button-->
<div class="absolute top-[13px] right-[20px] text-[40px] cursor-pointer" onclick="Close(this)">
<svg xmlns="http://www.w3.org/2000/svg" height="1em"
viewBox="0 0 384 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" />
</svg>
</div>
</div>
</nav>
<script>
let ham = document.getElementById('hamburger')
function Open() {
ham.classList.add('w-[25%]')
}
function Close() {
ham.classList.remove('w-[25%]')
}
</script>
<script src="https://kit.fontawesome.com/f6005253a1.js" crossorigin="anonymous"></script>
</body>
</html>