From ead97c47147135abc7792c999012dcb5a7e04558 Mon Sep 17 00:00:00 2001 From: tomivt Date: Tue, 8 Oct 2024 14:23:41 +0200 Subject: [PATCH] update --- .DS_Store | Bin 0 -> 6148 bytes pages/.DS_Store | Bin 0 -> 6148 bytes pages/quiz.html | 38 +++++++- pages/quizz.html | 211 +++++++++++++++++++++++++++++++++++++++++++ styles/styleQuiz.css | 154 +++++++++++++++++++++++++++++++ 5 files changed, 400 insertions(+), 3 deletions(-) create mode 100644 .DS_Store create mode 100644 pages/.DS_Store create mode 100644 pages/quizz.html create mode 100644 styles/styleQuiz.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..1163199908eb5715d3278b9d7370dab36c09a1c1 GIT binary patch literal 6148 zcmeHKO>fgM7=GP$U9t(O2at9_io~@l-OzxEODNre1D6HC0Z>VrYKzF?DoN?4s#4DI zANUJg`6c`pPVl_8C-q~!A%rTw((A_`?_<}GYda<)(VN7FL@gq6;EatuB)1s1v#(jr z)VM&Q`WR91GL^$9mC;(Xt*{DM1^zb$c<(kTp-T$soR;@59}3Umo!`pTPv1jqMlm9< zs6!W2f|)MtdFFgy;q1`(_TI()&5_Zx7@KqCM>I~8qU?5midwy~)7*7-oqgv+a3QBb z8J3fx7v}G{^jgX^y2*#pn`AT{wC=u;Ss5nTC|86e9wFrY+a!zSv?nK7Tqtg!8yweh z2d#tI?9s_#+dF#lbl&!6Cr913_xSjDK6jma4<0@{8+=MHGxvO5NE;43l< zbN?LVSt_%0)H1`RGdhL7eR>7#K*xAlN5T9>?VD84kaDcRn97ydUn{Y7#O5?yj;it4 zt38%S0X`o*IHPZ{(x{FOB_e}uDfT%}P_keKUO gW%w#SfGb0r#~Gk+u+oScnEen?GT6i_@J|)^0}Q01MF0Q* literal 0 HcmV?d00001 diff --git a/pages/.DS_Store b/pages/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..9dac5932d1adb3250f349559352258ccd1aa7d3e GIT binary patch literal 6148 zcmeHKOHRWu5Peg+=m(@O*&yWvmAFBu%7Qf)fEFl~0^!rLV3j?0;0m0N6}<6SAx%g( zNC=^sYW$qBpQnDd;uwHT))$As2tbdn*y*$Q#9#u Wiki Fantasy : Quiz - + + -
coeur @@ -23,7 +38,24 @@ user
+ +

▶ Quiz ◀

+ +
+

Question 1

+

“Tu es un sorcier Harry”

+ + +
+ + + + +
+ +
+ +
-

Wiki Fantasy

diff --git a/pages/quizz.html b/pages/quizz.html new file mode 100644 index 0000000..6955adc --- /dev/null +++ b/pages/quizz.html @@ -0,0 +1,211 @@ + + + + + + + + Wiki Fantasy : Quizz + + + + + + + +
+
+
+ coeur + toggle theme + quizz +
+ +
+ user +
+
+
+ + +

▶ Quizz ◀

+ +
+

Question 1

+

“Tu es un sorcier Harry”

+ + +
+ + + + +
+ +
+ +
+
+ + + + + diff --git a/styles/styleQuiz.css b/styles/styleQuiz.css new file mode 100644 index 0000000..a457836 --- /dev/null +++ b/styles/styleQuiz.css @@ -0,0 +1,154 @@ +@import url(./style.css); + +@import url('https://fonts.googleapis.com/css2?family=Lemon&display=swap'); + +body, html { + height: 100%; + overflow: hidden; +} + +/* ====== DARK MODE ====== */ +body.dark-mode h1, body.dark-mode h2, body.dark-mode p { + color: white; + font-family: "Lemon", serif; + text-align: center; +} + +body.dark-mode .quiz { + background-color: black; + height: 60%; + width: 80%; + margin: 3% auto; + padding: 2%; + border-radius: 25px; + border: 2px solid transparent; +} + +body.dark-mode .answers { + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + + row-gap: 80px; +} + +body.dark-mode .answer { + background-color: #1b0048; + color: white; + border: none; + border-radius: 25px; + width: 35%; + padding: 35px; + font-size: 30px; + text-align: center; + cursor: pointer; +} + +body.dark-mode .answer:hover { + background-color: #6100ff; +} + +body.dark-mode .submit-button { + text-align: center; + margin-top: 80px; + +} + +body.dark-mode .buttonSudmite { + background: linear-gradient(90deg, #6100ff 0%, #1b0048 100%); + font-family: "Lemon", serif; + border: none; + color: white; + padding: 10px 20px; + border-radius: 25px; + font-size: 30px; + cursor: pointer; +} + +/* ====== LIGHT MODE ====== */ +body.light-mode h1, body.light-mode h2, body.light-mode p { + color: black; + font-family: "Lemon", serif; + text-align: center; +} + +body.light-mode .quiz { + background-color: white; + width: 50%; + height: 90%; + margin: 3% auto; + padding: 2%; + border-radius: 25px; + border: 2px solid black; +} + +body.light-mode .answers { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 1000px; + height: 90%; +} + +body.light-mode .answer { + background-color: #fff1f1; + color: black; + border: 1px solid black; + border-radius: 25px; + width: 45%; + padding: 10px; + font-size: 18px; + text-align: center; + cursor: pointer; +} + +body.light-mode .answer:hover { + background-color: #c7f6c4; +} + +body.light-mode .submit-button { + text-align: center; + margin-top: 20px; +} + +body.light-mode .buttonSudmite { + background: linear-gradient(180deg, rgba(187,211,249,1) 0%, rgba(199,246,196,1) 100%); + font-family: "Lemon", serif; + border: none; + color: black; + padding: 10px 20px; + border-radius: 25px; + font-size: 20px; + cursor: pointer; +} + +/* ====== OTHER ====== */ +.container { + width: 100%; + height: 100px; + background-color: transparent; + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 50px; +} + +.header { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; +} + +.nav img { + margin-right: 10px; +} + +.logo img { + display: block; + margin: 0 auto; +} + +.user img { + margin-left: 10px; +} \ No newline at end of file