-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyle.html
90 lines (64 loc) · 3.43 KB
/
style.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ishmael Sunday | Web Development Portfolio</title>
<meta name="description" content="Front End Development and Graphic Design Portfolio">
<meta name="keywords" content="Front End Development, Graphic Design, Portfolio">
<meta name="author" content="Ishmael Sunday.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="quiz-app.css">
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_right_alt" />
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=close" />
</head>
<body>
<!-- Trivia Quiz -->
<main class="wrapper">
<div class="container">
<h1 class="h1-title">Mini Quiz <small> (6 questions)</small></h1>
<form id="quiz-form" class="content">
<div id="question-container"></div>
<button type="button" id="next-button" class="hidden">Next Question</button>
<div id="result" class="result hidden"></div>
</form>
</div>
<div class="container">
<h1 class="h1-title">Mini Quiz 2 <small> (6 questions)</small></h1>
<form id="quiz-form2" class="content">
<div id="question-container2"></div>
<button type="button" id="next-button" class="hidden">Next Question</button>
<div id="result" class="result hidden"></div>
</form>
</div>
<!-- <article class="container">
<h2 class="h2-title ">Project Overview</h2>
<div class="content">
<p class="p-content"> As an Entry Level Front End Developer, in age of Artificial Intelligence,
being able to leverage with AI can save you and the company time, and also money for the company. In
this
project I was able to do just that.</p>
<p class="p-content">Instead of coding <code>html</code>, <code>css</code> and
<code>JavaScript</code>, I used AI to
produce the interactive script for the project so I can only spend time on styling the app.
</p>
<p class="prompt p-content"><strong>The Prompt:</strong> <br>Build a 5 question multiple choice
quiz app. validate each question
when an answer is
selected and submit it before moving to the next question. style correct answer background color
with green and incorrect answer background color with red. give total score.</p>
<a href="index.html" class="link">See AI Version</a>
</div>
</article> -->
</main>
<!-- Scripts -->
<script src="./triva.js"></script>
<script src="./math.js"></script>
</body>
</html>