-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
232 lines (224 loc) · 9.12 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!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="CSS/indexstyle.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="assets/logo.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="JAVASCRIPT/headerscript.js" defer></script>
<title>EvoQuire - Home</title>
</head>
<body>
<header class="navbar">
<div class="logo">
<img src="assets/logoonly.png" alt="EvoQuire" class="EvoQuire" />
<p class="header">EvoQuire</p>
</div>
<div class="links">
<i class="fa fa-bars icon" id="icon" onclick = toggler()></i>
<ul class="link-right">
<li><a href="index.html" class="header-link" id="current">Home</a></li>
<li><a href="about.html" class="header-link">Our Vision</a></li>
<li><a href="quiz.html" class="header-link">Quiz</a></li>
<li><a href="feedback.html" class="header-link">Feedback</a></li>
<li><a href="support.html" class="header-link">Support</a></li>
</ul>
</div>
</header>
<div id="dropdown">
<ul>
<li><a href="index.html" id="current" class="header-link">Home</a></li>
<li><a href="about.html" class="header-link">Our Vision</a></li>
<li><a href="quiz.html" class="header-link">Quiz</a></li>
<li><a href="feedback.html" class="header-link">Feedback</a></li>
<li><a href="support.html" class="header-link">Support</a></li>
</ul>
</div>
<!--no change above -->
<main class="content">
<section class="daisy-1">
<div class="area-1 area">
<img src="assets/daisy/daisy_02.jpg" alt="daisy" class="image-1 diagimage">
<div class="dialogue-1">
<p class="dialogue-daisy-1">Hi! I'm Daisy!</p>
<p class="dialogue-daisy-1" id="daisy">Cheep! Cheep!</p>
</div>
</div>
</section>
<section class="daisy-2">
<div class="area-2 area">
<img src="assets/kiki/kiki_01.jpg" alt="Kiki" class="image-2 diagimage">
<div class="dialogue-2">
<p class="dialogue-daisy-2">And I'm Kiki! Hey there,curious minds!<i>Ribbit!</i></p>
</div>
</div>
</section>
<section class="daisy-3">
<div class="area-3 area">
<img src="assets/daisy/daisy_06.jpg" alt="daisy" class="image-3 diagimage">
<div class="dialogue-3">
<p class="dialogue-daisy-3">We're here to help you understand something super important - your legal rights!
</p>
</div>
<img src="assets/kiki/kiki_05.jpg" alt="kiki" class="image-4 diagimage">
</div>
</section>
<section class="upper-upper">
<div class="text">
<p class="heading">Welcome to EvoQuire!</p>
<p class="heading">
Daisy and Kiki are your awesome guides on the adventure!
</p>
</div>
</section>
<section class="upper-lower">
<div class="image">
<img src="assets/indexquestion.jpg" alt="Do you know your rights" class="image-holder" />
</div>
</section>
<section class="daisy-1">
<div class="area-1 area">
<img src="assets/daisy/daisy_01.jpg" alt="daisy" class="image-1 diagimage">
<div class="dialogue-1">
<p class="dialogue-daisy-1">Uh-oh, feeling a bit puzzled?<br>Let us clear things up!</p>
<p class="dialogue-daisy-1" id="daisy">Cheep! Cheep!</p>
</div>
</div>
</section>
<section class="daisy-5">
<div class="area-5 area">
<img src="assets/kiki/kiki_04.jpg" alt="Kiki" class="image-5 diagimage">
<div class="dialogue-5">
<p class="dialogue-daisy-5">Did you know you have the right to speak your mind?</p>
<p class="dialogue-daisy-5" id="daisy">Ribbit,ribbit!</p>
</div>
</div>
</section>
<section class="daisy-6">
<div class="area-6 area">
<img src="assets/daisy/daisy_04.jpg" alt="daisy" class="image-6 diagimage">
<div class="dialogue-6">
<p class="dialogue-daisy-6">Yup, it's called freedom of speech! <br>You also have the right to stay safe!</p>
<p class="dialogue-daisy-6" id="daisy">Cheep! Cheep!</p>
</div>
</div>
</section>
<section class="daisy-7">
<div class="area-7 area">
<img src="assets/kiki/kiki_03.jpg" alt="Kiki" class="image-7 diagimage">
<div class="dialogue-7">
<p class="dialogue-daisy-7">Nobody should hurt you. And if you're ever ensure, just walk to a grown-up you
trust.</p>
</div>
</div>
</section>
<section class="daisy-8">
<div class="area-8 area">
<img src="assets/daisy/daisy_06.jpg" alt="daisy" class="image-8 diagimage">
<div class="dialogue-8">
<p class="dialogue-daisy-8">So, ready yo start learning? Tap that 'Play Now!' button below</p>
</div>
<img src="assets/kiki/kiki_05.jpg" alt="kiki" class="image-9 diagimage">
</div>
</section>
<div class="button-1">
<div class="play-btn"><a href="quiz.html" class="play">Play Now!</a></div>
<p id="btn">Alternatively, continue reading if you're a grown-up seeking to enlighten your child!</p>
</div>
</main>
<section class="middle-upper">
<div class="middle-dark">
<p class="intro-text" id="text">Introducing</p>
<p id="title">EvoQuire</p>
<p class="intro-text">
Welcome to EvoQuire, where adults can use an interactive quiz format
to educate kids about their legal rights.Through questions and
answers, EvoQuire empowers children with essential knowledge in a
fun and engaging way. Build their understanding, confidence, and
awareness about rights with each quiz session, helping them navigate
the world around them.
</p>
</div>
<div class="middle-light"></div>
</section>
<div class="button-2">
<div class="play-btn-2"><a href="about.html" class="play">Let's Go -></a></div>
</div>
<div class="kiki-n-chicken">
<div>
<img src="assets/daisy/daisy_04.jpg" alt="Daisy" class="chicken-only">
<img src="assets/kiki/kiki_03.jpg" alt="Kiki" class="frog">
</div>
<p id="photo">Kiki, the cheerful frog, and Daisy, the chirpy chick, are your vibrant companions on a journey to
understanding legal rights. With their playful personalities, they make learning about rights engaging and
memorable for kids aged 10 to 15.</p>
</div>
<section class="middle-upper-2">
<div class="middle-light-2"></div>
<div class="middle-dark-2">
<p id="title-2">Know Your Constitution. Know your Rights.</p>
<p class="intro-text-2" id="text-2">Dive into legal insights while keeping it cool!</p>
<div class="button-3">
<div class="play-btn-3"><a href="quiz.html" class="play-3">Play Now!</a></div>
</div>
</div>
</section>
<section class="lower">
<div>
<p class="credit">Hackathon Project</p>
<p>Created at InterHacktive 2023</p>
<p>Organised By SC-CSE</p>
<p>
<i class="fa-solid fa-building-columns"></i> Academy of Technology
</p>
<p>AdiSaptagram</p>
</div>
<div class="credits">
<p class="credit">Credits</p>
<p class="team-name">Team Limitless</p>
<div class="name">
<ul class="members">
<li class="our-name">
Trisha Seal
<a href="https://github.com/EmberTSeal" class="name">
<i class="fa-brands fa-github"></i></a>
<a href="https://www.linkedin.com/in/trisha-seal/" class="name">
<i class="fa-brands fa-linkedin"></i></a>
</li>
<li class="our-name">
Arnab Bose
<a href="https://github.com/Arnab-129" class="name">
<i class="fa-brands fa-github"></i></a>
<a href="www.linkedin.com/in/arnab-bose-440622255" class="name">
<i class="fa-brands fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="navigation">
<p id="nav">Navigation</p>
<ul class="link-bottom">
<li class="links"><a href="index.html" class="footer-link">Home</a></li>
<li class="links">
<a href="about.html" class="footer-link">Our Vision</a>
</li>
<li class="links"><a href="quiz.html" class="footer-link">Quiz</a></li>
<li class="links">
<a href="feedback.html" class="footer-link">Feedback</a>
</li>
<li class="links">
<a href="support.html" class="footer-link">Support</a>
</li>
</ul>
</div>
</section>
</body>
</html>