-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
136 lines (122 loc) · 4.51 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
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 http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="quotely.css">
<script src="index.js" defer></script>
<title>QUOTELY</title>
</head>
<body>
<div id="animation" class="loading">
<h1><span class="span">QUOTE.</span><span class="span1">LY</span><span class="dot1">.</span><span class="dot2">.</span><span class="dot3">.</span></h1>
<div class="container">
<div class="dash one"></div>
<div class="dash two"></div>
<div class="dash three"></div>
<div class="dash four"></div>
</div>
</div>
<main id="main">
<header>
<div class="search">
<img id="search-img" src="/images/search.png" alt="">
<label id="remove-searh-bar" for="search-bar">×</label>
<input id="search" class="search-bar" type="search" placeholder="search">
</div>
<div class="categories">
<h1 >Categories</h1>
</div>
<button id="open-menu" class="hamburger">
<span class="bar"></span>
<span class="bar1"></span>
<span class="bar2"></span>
</button>
</header>
<nav id="display-nav-bar">
<a id="exit">×</a>
<ul>
<li><a href="index.html">Quotes</a></li>
<li><a href="">Jokes</a></li>
<li><a href="">Riddles</a></li>
<li><a href="">Poems</a></li>
<li><a href="">Random</a></li>
</ul>
<hr>
<ul class="toggle">
<li class="dark-mode">Dark mode
<span>
<form>
<input onclick="toggle(this.form)" id="checkbox" name="checkbox" type="checkbox" /><label for="checkbox">Toggle</label>
</form>
</span>
</li>
</ul>
</nav>
<section>
<div class="cont joy">
<h1>happy</h1>
<a href="happy.html">
<img src="/images/joy.jpg" alt="">
</a>
</div>
<div class="cont love">
<h1>love</h1>
<a href="love.html">
<img src="/images/love.jfif" alt="">
</a>
</div>
<div class="cont mental">
<h1>mental health</h1>
<a href="mental.html">
<img src="/images/mental.jfif" alt="">
</a>
</div>
<div class="cont productive">
<h1>productivity</h1>
<a href="productivity.html">
<img src="/images/productivity.jpg" alt="">
</a>
</div>
<div class="cont emotional">
<h1>emotional</h1>
<a href="/emotinal.html">
<img src="/images/emotional.webp" alt="">
</a>
</div>
<div class="cont inspirational">
<h1>inspirational</h1>
<a href="inspirational.html">
<img src="/images/inspiration.jpg" alt="">
</a>
</div>
<div class="cont leadership">
<h1>leadership</h1>
<a href="leadership.html">
<img src="/images/Leadership.jpg" alt="">
</a>
</div>
<div class="cont tech">
<h1>technology</h1>
<a href="tech.html">
<img src="/images/tech.webp" alt="">
</a>
</div>
<div class="cont peace">
<h1>peace</h1>
<a href="peace.html">
<img src="/images/peace.webp" alt="">
</a>
</div>
<div class="cont mom">
<h1>mom</h1>
<a href="mom.html">
<img src="/images/mom1.jpg" alt="">
</a>
</div>
</section>
</main>
</body>
</html>