From 401604d8d5d4443c87caeb610eed6d9ce3777950 Mon Sep 17 00:00:00 2001
From: Joshua <joshuachris000@gmail.com>
Date: Wed, 31 Jan 2024 00:13:07 +0100
Subject: [PATCH] New changes

---
 html quiz/html-quiz.css | 27 +++++++++++++++++++--
 html-quiz.html          | 44 ++++++++++++++++++----------------
 index.html              |  2 +-
 styles.css              | 53 ++++++++++++++++++++++++++++++-----------
 4 files changed, 88 insertions(+), 38 deletions(-)

diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css
index 7dbd678..f8b4c6d 100644
--- a/html quiz/html-quiz.css	
+++ b/html quiz/html-quiz.css	
@@ -325,6 +325,11 @@ h4 {
 }
 
 .html__options {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1.5rem;
+}
+.html__options-container {
     display: flex;
     flex-direction: column;
     row-gap: .5rem;
@@ -389,6 +394,7 @@ h4 {
 .btn,
 .skip {
     padding: .5rem 1rem;
+
     background: #9d25d0;
     outline: none;
     border: none;
@@ -617,7 +623,7 @@ h4 {
     }
 
     .nav {
-        margin-inline: 4.5rem;
+        margin-inline: 7.5rem;
     }
 
     .the__game-container {
@@ -628,9 +634,26 @@ h4 {
     .progress-and-options,
     .html__options {
         min-width: 50%;
+        
     }
 
     .html__options-list {
-        width: 100%;
+        width: 95%;
+      
     }
+
+.html__options {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1.5rem;
+}
+.html__options-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: .5rem;
+}
+.skip {
+    margin-right: 2rem;
+}
+
 }
\ No newline at end of file
diff --git a/html-quiz.html b/html-quiz.html
index ac6746c..8c01147 100644
--- a/html-quiz.html
+++ b/html-quiz.html
@@ -47,32 +47,34 @@ <h1 class="html__title" id="html-question">A portrait that comically exaggerates
                     </div>
                 </div>
                 <div class="html__options">
-                    <div class="html__options-list">
-                        <p class="html__choice-prefix">A</p>
-                        <p class="html__choice-text" data-number="1"></p>
-                    </div>
+                    <div class="html__options-container">
+                        <div class="html__options-list">
+                            <p class="html__choice-prefix">A</p>
+                            <p class="html__choice-text" data-number="1"></p>
+                        </div>
 
-                    <div class="html__options-list">
-                        <p class="html__choice-prefix">B</p>
-                        <p class="html__choice-text" data-number="2"></p>
-                    </div>
+                        <div class="html__options-list">
+                            <p class="html__choice-prefix">B</p>
+                            <p class="html__choice-text" data-number="2"></p>
+                        </div>
 
-                    <div class="html__options-list">
-                        <p class="html__choice-prefix">C</p>
-                        <p class="html__choice-text" data-number="3"></p>
-                    </div>
+                        <div class="html__options-list">
+                            <p class="html__choice-prefix">C</p>
+                            <p class="html__choice-text" data-number="3"></p>
+                        </div>
 
-                    <div class="html__options-list">
-                        <p class="html__choice-prefix">D</p>
-                        <p class="html__choice-text" data-number="4"></p>
+                        <div class="html__options-list">
+                            <p class="html__choice-prefix">D</p>
+                            <p class="html__choice-text" data-number="4"></p>
+                        </div>
+                    </div>
+                    <div class="button">
+                        <button class="btn">
+                            Back to menu
+                        </button>
+                        <button class="skip">Skip to Score </button>
                     </div>
                 </div>
-            </div>
-            <div class="button">
-                <button class="btn">
-                    Back to menu
-                </button>
-                <button class="skip">Skip to Score </button>
 
             </div>
         </section>
diff --git a/index.html b/index.html
index 6fccce8..886b4dc 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@ <h1>FE-quiz</h1>
                     <h1 class="home__title">Welcome to the <span>Frontend Quiz</span></h1>
                     <p class="home__description">
                         Unlock the secrets of frontend skill in our quick quiz!
-                        Test your HTML, CSS, and JavaScript prowess,
+                        Test your HTML, CSS, JavaScript and React prowess,
                         and level up your skills with each question.</p>
                 </div>
 
diff --git a/styles.css b/styles.css
index 68751db..be2a0d0 100644
--- a/styles.css
+++ b/styles.css
@@ -53,6 +53,7 @@
     --z-tooltip: 10;
     --z-fixed: 100;
 }
+
 /*=============== VARIABLE DARK THEME ===============*/
 body.dark-theme {
     --title-color: #020520d0;
@@ -63,26 +64,31 @@ body.dark-theme {
     --white-color: hsl(0, 0%, 15%);
     --first-color: #f4f4f4;
 }
+
 .dark-theme .option__list {
     background-color: var(--text-color);
     color: #000;
-   
+
 }
+
 .dark-theme .home__description {
     color: #766f6f;
 }
-.dark-theme 
-.option__list span {
+
+.dark-theme .option__list span {
     color: var(--title-color);
 
-   
+
 }
+
 .dark-theme .option__list:hover {
     background: var(--text-color);
 }
+
 .dark-theme .option__list:hover span {
     background: var(--first-color);
 }
+
 .dark-theme .toggle__box {
     border: 3px solid var(--text-color);
 }
@@ -222,13 +228,15 @@ h4 {
     border-radius: 50%;
 }
 
-.toggle__icons i,
+
 .toggle__box {
     cursor: pointer;
 }
+
 .toggle-icon {
     justify-content: flex-start;
 }
+
 #show-text {
     background: #e93f3f;
     padding: 1rem;
@@ -237,6 +245,7 @@ h4 {
     font-size: var(--normal-font-size);
 
 }
+
 @media screen and (max-width: 950px) {
 
     /**************** HOME *******************/
@@ -259,6 +268,7 @@ h4 {
         flex-direction: column;
         row-gap: 1rem;
     }
+
     .home__container {
         display: flex;
         flex-direction: column;
@@ -276,7 +286,7 @@ h4 {
         border-radius: 1rem;
         cursor: pointer;
         transition: .3s;
-        
+
     }
 
     .option__list:hover {
@@ -418,7 +428,7 @@ h4 {
 }
 
 @media screen and (min-width: 540px) {
-  
+
 
     .option__list {
         display: flex;
@@ -470,26 +480,30 @@ h4 {
 }
 
 @media screen and (min-width: 778px) {
-   
+
 
     .html-home {
         margin-top: 7rem;
-       text-align: center;
+        text-align: center;
     }
+
     .home__title {
         font-size: 4rem;
     }
+
     .home__description {
         font-size: var(--h2-font-size);
     }
+
     .home__options {
         width: 800px;
         display: flex;
         margin-top: 2rem;
         align-items: center;
         justify-content: center;
-        
+
     }
+
     .option__list {
         width: 300px;
         justify-content: center;
@@ -532,22 +546,33 @@ h4 {
         justify-content: center;
         margin-inline: 2rem;
     }
-    .home__hero,.home__options {
+
+    .home__hero,
+    .home__options {
         width: 50%;
     }
+
     .option__list {
         width: 90%;
-      
+
     }
 }
+
 @media screen and (min-width: 1424px) {
     .home__container {
-        
+
         column-gap: 3rem;
     }
+
     .option__list {
         width: 60%;
-      
+
+    }
+
+    .home__hero {
+        display: flex;
+        flex-direction: column;
+       row-gap: 3rem;
     }
 
     .end__heading {