From aa45cd402975adf2618ae25adbc6ad5f097409a0 Mon Sep 17 00:00:00 2001
From: JoshuaChris01 <joshuachris000@gmail.com>
Date: Mon, 22 Jan 2024 07:58:40 +0100
Subject: [PATCH] New changes

---
 html quiz/html-quiz.css | 29 +++++++++++++-----
 html-quiz.html          | 65 ++++++++++++++++++++---------------------
 2 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css
index 0accb96..50f2f7d 100644
--- a/html quiz/html-quiz.css	
+++ b/html quiz/html-quiz.css	
@@ -189,10 +189,7 @@ h4 {
         border-radius: 50%;
     }
 @media screen and (max-width: 950px) {
-
-  
-
-    .nav i {
+  .nav i {
         cursor: pointer;
     }
 
@@ -277,6 +274,11 @@ h4 {
 .hidden {
     display: none;
 }
+.progress-and-options {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+}
 
 .loader {
     border: 1.6rem solid var(--first-color-light);
@@ -302,7 +304,7 @@ h4 {
 }
 
 .the__game-container {
-    margin-top: -2rem;
+    margin-top: -6rem;
 }
 
 .html__choice-text {
@@ -455,6 +457,19 @@ h4 {
 
 }
 
-@media screen and (max-width: 1024px) {
-    
+@media screen and (min-width: 1024px) {
+    .nav {
+        margin-inline: 4.5rem;
+    }
+    .the__game-container {
+        display: flex;
+        column-gap: 2rem;
+    }
+    .progress-and-options,
+    .html__options {
+        width: 50%;
+    }
+    .html__options-list {
+        width: 100%;
+    }
 }
\ No newline at end of file
diff --git a/html-quiz.html b/html-quiz.html
index 0ea10fc..8006390 100644
--- a/html-quiz.html
+++ b/html-quiz.html
@@ -32,47 +32,46 @@ <h1>Html</h1>
         </div>
         <section class="section container grid">
             <div class="the__game-container section container grid hidden">
-                <div class="html__container container ">
-                    <div class="score__questions">
-                        <p class="html__question-counter"></p>
-                        <p class="html__score">Score: 0</p>
-                    </div>
+                <div class="progress-and-options">
+                    <div class="html__container container ">
+                        <div class="score__questions">
+                            <p class="html__question-counter"></p>
+                            <p class="html__score">Score: 0</p>
+                        </div>
 
-                    <h1 class="html__title" id="html-question">A portrait that comically exaggerates a person's physical
-                        traits is called a what?</h1>
-                </div>
-                <div class="progress__progress-questions">
-                    <div class="html__progress">
-                        <div class="html__progress-full"></div>
+                        <h1 class="html__title" id="html-question">A portrait that comically exaggerates a person's
+                            physical
+                            traits is called a what?</h1>
                     </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 class="progress__progress-questions">
+                        <div class="html__progress">
+                            <div class="html__progress-full"></div>
                         </div>
+                    </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-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>
+                    <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>
-                </div>
+
             </div>
         </section>
     </main>