From 42dc98e3aaaa36bf2eb93b828b641b0f8f24946f Mon Sep 17 00:00:00 2001 From: MANAS SANKHLA Date: Tue, 23 Jan 2024 15:54:24 +0530 Subject: [PATCH 1/2] done --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index eef7d86..b261aac 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Quiz App - +
Question
@@ -20,7 +20,7 @@
- +
From 5713c70143d52c23893955e5a8a1c071043af1d9 Mon Sep 17 00:00:00 2001 From: MANAS_VIVOBOOK Date: Wed, 24 Jan 2024 10:45:13 +0530 Subject: [PATCH 2/2] done --- index.html | 6 +++--- script.js | 1 + style.css | 41 +++++++++++++++++++++++++++++++++++------ 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index b261aac..a2fe08e 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ Quiz App - +
Question
@@ -20,9 +20,9 @@
- + - +
diff --git a/script.js b/script.js index 91c52a5..0fce1f5 100644 --- a/script.js +++ b/script.js @@ -108,5 +108,6 @@ const questions = [ { text: '6', correct: false }, { text: '8', correct: true } ] + } ] diff --git a/style.css b/style.css index f38f043..d6a1456 100644 --- a/style.css +++ b/style.css @@ -10,6 +10,10 @@ } body { + background-image: url(https://png.pngtree.com/background/20210712/original/pngtree-cute-hand-drawn-style-math-education-green-pink-background-picture-image_1176712.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; --hue: var(--hue-neutral); padding: 0; margin: 0; @@ -18,9 +22,9 @@ height: 100vh; justify-content: center; align-items: center; - background-color: hsl(var(--hue), 100%, 20%); } + body.correct { --hue: var(--hue-correct); } @@ -32,7 +36,7 @@ .container { width: 800px; max-width: 80%; - background-color: white; + background-color:rgba(210, 180, 140, 0.717); border-radius: 5px; padding: 10px; box-shadow: 0 0 10px 2px; @@ -56,7 +60,10 @@ } .btn:hover { - border-color: black; + background-color:lightblue; + color:black; + font-size: large; + cursor: pointer; } .btn.correct { @@ -68,11 +75,23 @@ --hue: var(--hue-wrong); } - .start-btn, .next-btn { + .start-btn { font-size: 1.5rem; font-weight: bold; padding: 10px 20px; } + .start-btn:hover{ + background-color: springgreen; + font-size: 35px; + cursor: pointer; + border: none; + } + .next-btn:hover{ + background-color: springgreen; + font-size: 35px; + cursor: pointer; + border: none; + } .controls { display: flex; @@ -85,6 +104,16 @@ } /* change font size of questions and style=italic by Sweety*/ #question{ - font-size: large; - font-style: italic; + font-style: bold; + font-size: 200%; + text-align: center; + } + .answer { + font-size: 16px; + margin-bottom: 10px; + cursor: pointer; } + + .wrong-answer { + background-color: rgba(255, 0, 0, 0.5); /* Transparent red background */ + } \ No newline at end of file