From f7a355933aa8268f6840fd3897bf09ea1b68c49e Mon Sep 17 00:00:00 2001 From: Laxman6375 Date: Tue, 23 Jan 2024 15:52:08 +0530 Subject: [PATCH] changes the background image --- index.html | 55 +++++++++------- style.css | 186 +++++++++++++++++++++++++++-------------------------- 2 files changed, 127 insertions(+), 114 deletions(-) diff --git a/index.html b/index.html index eef7d86..ddc3824 100644 --- a/index.html +++ b/index.html @@ -1,29 +1,36 @@ - - - - - - - Quiz App - - -
-
-
Question
-
- - - - + + + + + + + Quiz App + + +
+
+
Question
+
+ + + + +
+
+
+ + +
-
- - - -
-
- + diff --git a/style.css b/style.css index f38f043..af4f70b 100644 --- a/style.css +++ b/style.css @@ -1,90 +1,96 @@ -*, *::before, *::after { - box-sizing: border-box; - font-family: Gotham Rounded; - } - - :root { - --hue-neutral: 200; - --hue-wrong: 0; - --hue-correct: 145; - } - - body { - --hue: var(--hue-neutral); - padding: 0; - margin: 0; - display: flex; - width: 100vw; - height: 100vh; - justify-content: center; - align-items: center; - background-color: hsl(var(--hue), 100%, 20%); - } - - body.correct { - --hue: var(--hue-correct); - } - - body.wrong { - --hue: var(--hue-wrong); - } - - .container { - width: 800px; - max-width: 80%; - background-color: white; - border-radius: 5px; - padding: 10px; - box-shadow: 0 0 10px 2px; - } - - .btn-grid { - display: grid; - grid-template-columns: repeat(2, auto); - gap: 10px; - margin: 20px 0; - } - - .btn { - --hue: var(--hue-neutral); - border: 1px solid hsl(var(--hue), 100%, 30%); - background-color: hsl(var(--hue), 100%, 50%); - border-radius: 5px; - padding: 5px 10px; - color: white; - outline: none; - } - - .btn:hover { - border-color: black; - } - - .btn.correct { - --hue: var(--hue-correct); - color: black; - } - - .btn.wrong { - --hue: var(--hue-wrong); - } - - .start-btn, .next-btn { - font-size: 1.5rem; - font-weight: bold; - padding: 10px 20px; - } - - .controls { - display: flex; - justify-content: center; - align-items: center; - } - - .hide { - display: none; - } - /* change font size of questions and style=italic by Sweety*/ - #question{ - font-size: large; - font-style: italic; - } +*, +*::before, +*::after { + box-sizing: border-box; + font-family: Gotham Rounded; +} + +:root { + --hue-neutral: 200; + --hue-wrong: 0; + --hue-correct: 145; +} + +body { + --hue: var(--hue-neutral); + padding: 0; + margin: 0; + display: flex; + width: 100vw; + height: 100vh; + justify-content: center; + align-items: center; + background-color: hsl(var(--hue), 100%, 20%); + background-repeat: no-repeat; + background-size: 100vw 100vh; + object-fit:contain; +} + +body.correct { + --hue: var(--hue-correct); +} + +body.wrong { + --hue: var(--hue-wrong); +} + +.container { + width: 800px; + max-width: 80%; + background-color: white; + border-radius: 5px; + padding: 10px; + box-shadow: 0 0 10px 2px; +} + +.btn-grid { + display: grid; + grid-template-columns: repeat(2, auto); + gap: 10px; + margin: 20px 0; +} + +.btn { + --hue: var(--hue-neutral); + border: 1px solid hsl(var(--hue), 100%, 30%); + background-color: hsl(var(--hue), 100%, 50%); + border-radius: 5px; + padding: 5px 10px; + color: white; + outline: none; +} + +.btn:hover { + border-color: black; +} + +.btn.correct { + --hue: var(--hue-correct); + color: black; +} + +.btn.wrong { + --hue: var(--hue-wrong); +} + +.start-btn, +.next-btn { + font-size: 1.5rem; + font-weight: bold; + padding: 10px 20px; +} + +.controls { + display: flex; + justify-content: center; + align-items: center; +} + +.hide { + display: none; +} +/* change font size of questions and style=italic by Sweety*/ +#question { + font-size: large; + font-style: italic; +}