-
Notifications
You must be signed in to change notification settings - Fork 1
/
home.html
393 lines (346 loc) · 17.2 KB
/
home.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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quizzer Educaional Website</title>
<!-- ICONSCOUT CDN -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
<!--GOOGLE FONT (MONTSEERAT)-->
<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=Montserrat:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
<!-- SWIPER JS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<link rel="stylesheet" href="./css/style.css">
<style>
body { background-image: url("images/bg-texture.png"); }
</style>
</head>
<body>
<nav>
<div class="container nav__container">
<a href="home.html"><h4>QuiZzeR</h4></a>
<ul class="nav__menu">
<li><a href="home.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Course</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button id="open-menu-btn"><i class="uil uil-bars"></i></button>
<button id="close-menu-btn"><i class="uil uil-multiply"></i></button>
</div>
</nav>
<header>
<div class="container header__container">
<div class="header__left">
<h1>Grow your skill to advance your career path.</h1>
<p>Welcome to Quizzer, your ultimate destination to expand your knowledge about the dynamic world of technology.</p>
<a href="courses.html" class="btn btn-primary">Get Started</a>
</div>
<div class="header__right">
<div class="header__right-image"><img src="./images/header.svg">
</div>
</div>
</div>
</header>
<!-- END OF HEADER-->
<section class="categories">
<div class="container categories__container">
<div class="container__left">
<h1>Categories</h1>
<p>Welcome to Quizzer, your tech knowledge hub. Dive into the ever-evolving world of technology through our quizzes. Whether you're an enthusiast or a professional, our curated content keeps you informed and engaged. Explore coding, AI, cybersecurity, and more. Join us in mastering the tech universe, one quiz at a time.</p>
<a href="a" class="btn">Learn More</a>
</div>
<div class="container__right">
<article class="category">
<span class="category__icon">
<i class="uil uil-bitcoin-circle"></i>
</span>
<h5>Blockchain</h5>
<p>Discover blockchain's innovation and security fusion in our captivating category.</p>
</article>
<article class="category">
<span class="category__icon">
<i class="uil uil-palette"></i>
</span>
<h5>Graphic Design</h5>
<p>Immerse yourself in the captivating world of graphic design, where innovation and creativity converge.</p>
</article>
<article class="category">
<span class="category__icon">
<i class="uil uil-usd-circle"></i>
</span>
<h5>Finance</h5>
<p>Explore the synergy of innovation and security in finance with our captivating category.</p>
</article>
<article class="category">
<span class="category__icon">
<i class="uil uil-megaphone"></i>
</span>
<h5>Marketing</h5>
<p>Explore the captivating intersection of innovation and strategy in the realm of marketing on Quizzer.</p>
</article>
<article class="category">
<span class="category__icon">
<i class="uil uil-music"></i>
</span>
<h5>Music</h5>
<p>Dive into the captivating world of music on Quizzer, where innovation and creativity fuse.</p>
</article>
<article class="category">
<span class="category__icon">
<i class="uil uil-puzzle-piece"></i>
</span>
<h5>Business</h5>
<p>Uncover the dynamic fusion of innovation and strategy in our captivating business category.</p>
</article>
</div>
</div>
</section>
<!--*************** END OF CATEGORIES ***************-->
<section class="courses">
<h2>Our Popular Courses</h2>
<div class="container courses__container">
<article class="course">
<div class="course__image">
<img src="./images/course1.jpg">
</div>
<div class="course__info">
<h4>Learn How To Code For Beginners</h4>
<p>Dive into coding with our beginner course on QuiZzeR. Discover coding languages, syntax, and problem-solving techniques. Build projects and gain confidence to tackle challenges. Start your coding journey today!.</p>
<a href="course.html" class="btn btn-primary">Learn More</a>
</div>
</article>
<article class="course">
<div class="course__image">
<img src="./images/course2.jpg">
</div>
<div class="course__info">
<h4>Create a Responsive SmartHome Website Design</h4>
<p>Master the art of crafting responsive SmartHome website designs with our course on Quizzer. Explore the fusion of technology and aesthetics in creating user-friendly interfaces for the connected homes of the future.</p>
<a href="course.html" class="btn btn-primary">Learn More</a>
</div>
</article>
<article class="course">
<div class="course__image">
<img src="./images/course3.jpg">
</div>
<div class="course__info">
<h4>HTML Tutorial for Beginners</h4>
<p>Get started in web development with our beginner-friendly HTML tutorial on QuiZzeR. Learn the basics of HTML, create web content, and format text. Join now and kickstart your journey to becoming a skilled web developer!.</p>
<a href="course.html" class="btn btn-primary">Learn More</a>
</div>
</article>
</div>
</section>
<!--*************** END OF COURSES ***************-->
<section class="faqs">
<h2>Frequently Asked Questions</h2>
<div class="container faqs__container">
<article class="faq">
<div class="faq__title">
<h4>What is Quizzer?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Quizzer is an educational platform designed to help individuals expand their knowledge through interactive quizzes and informative resources.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>How do I get started on Quizzer?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Simply create an account, browse our categories, and choose quizzes that pique your interest. You'll be on your way to learning in no time.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Are the quizzes suitable for all levels of knowledge?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Yes, Quizzer offers quizzes ranging from beginner to advanced levels, ensuring there's something for everyone.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Can I track my progress and achievements?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Absolutely! Your profile keeps a record of completed quizzes and earned badges, allowing you to track your learning journey.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Are there quizzes available for specific industries or fields?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Yes, Quizzer covers a wide range of categories including finance, music, business, graphic design, marketing, and more.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Are the quizzes time-limited?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Most quizzes are self-paced, allowing you to learn at your own speed. However, certain quizzes might have time constraints for added challenge.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Can I retake quizzes to improve my scores?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Yes, you can retake quizzes to reinforce your understanding and aim for better results.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Are there resources beyond quizzes?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Absolutely, Quizzer also provides informative articles, tutorials, and guides to supplement your learning experience.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>How can I interact with other learners?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Join discussion forums on discord and engage with fellow learners to share insights, ask questions, and exchange knowledge.</p>
</article>
<article class="faq">
<div class="faq__title">
<h4>Are there any rewards for completing quizzes?</h4>
<i class="uil uil-plus faq__icon"></i>
</div>
<p class="faq__desc">Yes, Quizzer offers badges and certificates for completing quizzes, allowing you to showcase your achievements and progress.</p>
</article>
</div>
</section>
<!--*************** END OF FAQs ***************-->
<section class="container testimonials__container swiper mySwiper">
<h2>Student Testimonials</h2>
<div class="swiper-wrapper">
<article class="testimonial swiper-slide">
<div class="avatar">
<img src="images/avatar1.jpg">
</div>
<div class="testimonial__info">
<h5>Diana Ayi</h5>
<small>Student</small>
</div>
<div class="testimonial__body">
<p>"Quizzer has transformed my learning experience. The diverse range of quizzes helped me enhance my knowledge across various subjects. It's not just about passing quizzes, but truly understanding concepts. Thank you, Quizzer!"</p>
</div>
</article>
<article class="testimonial swiper-slide">
<div class="avatar">
<img src="images/avatar2.jpg">
</div>
<div class="testimonial__info">
<h5>Ernest Acheiver</h5>
<small>Web Developer</small>
</div>
<div class="testimonial__body">
<p>"As a web developer, staying updated is crucial. Quizzer's web development quizzes have been a game-changer for me. They cover the latest trends and technologies, helping me sharpen my skills. A must for any tech enthusiast!"</p>
</div>
</article>
<article class="testimonial swiper-slide">
<div class="avatar">
<img src="images/avatar3.jpg">
</div>
<div class="testimonial__info">
<h5>Eden Quist</h5>
<small>Student</small>
</div>
<div class="testimonial__body">
<p>"Quizzer is my go-to platform for quick and engaging learning. The quizzes are well-structured and challenging, making studying enjoyable. With Quizzer, I'm not just learning; I'm thriving."</p>
</div>
</article>
<article class="testimonial swiper-slide">
<div class="avatar">
<img src="images/avatar4.jpg">
</div>
<div class="testimonial__info">
<h5>Hajia Bintu</h5>
<small>Web Developer</small>
</div>
<div class="testimonial__body">
<p>"Being a web developer means constant learning. Quizzer's web development section is like a treasure trove of knowledge. The quizzes are comprehensive, and the resources provided are invaluable. Highly recommended for professionals."</p>
</div>
</article>
<article class="testimonial swiper-slide">
<div class="avatar">
<img src="images/avatar5.jpg">
</div>
<div class="testimonial__info">
<h5>Jane King</h5>
<small>Student</small>
</div>
<div class="testimonial__body">
<p>"Quizzer has made learning an adventure for me. The quizzes are interactive and informative, and they've helped me grasp complex topics with ease. It's my secret weapon for acing exams!"</p>
</div>
</article>
</div>
<div class="swiper-pagination"></div>
</section>
<!--*************** END OF Testimonials ***************-->
<footer>
<div class="container footer__container">
<div class="footer1">
<a href="home.html" class="footer__logo"><h4>QuiZzeR</h4></a>
<p>Empower your tech journey with QuiZzeR. Explore our diverse range of courses to master the ever-evolving world of technology. Join us and unlock endless learning possibilities!.</p>
</div>
<div class="footer2">
<h4>Permalinks</h4>
<ul class="permalinks">
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="courses.html">Courses</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="footer3">
<h4>Primacy</h4>
<ul class="privacy">
<li><a href="a">Privacy Policy</a></li>
<li><a href="a">Terms and Conditions</a></li>
<li><a href="a">Refund Policy</a></li>
</ul>
</div>
<div class="footer4">
<h4>Contact Us</h4>
<div>
<p>+234 9068216597</p>
<p>[email protected]</p>
</div>
<ul class="footer__socials">
<li>
<a href="https://facebook.com"><i class="uil uil-facebook-f"></i></a>
</li>
<li>
<a href="https://instagram.com"><i class="uil uil-instagram"></i></a>
</li>
<li>
<a href="https://twitter.com"><i class="uil uil-twitter"></i></a>
</li>
</ul>
</div>
</div>
<div class="footer__copyright">
<small>Copyright © QuiZzeR Educational Website</small>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script src="./main.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// when window width is >= 600px
breakpoints: {
600: {
slidesPerView: 2,
}
}
});
</script>
</body>
</html>