From 979a239c1b3de80e13a8bb5370b2e3138a0735a1 Mon Sep 17 00:00:00 2001
From: JoshuaChris01 <joshuachris000@gmail.com>
Date: Tue, 23 Jan 2024 07:39:22 +0100
Subject: [PATCH] New changes

---
 html quiz/html-quiz.css |  2 +-
 index.html              | 33 +++++++++++++++++----------------
 styles.css              | 25 ++++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css
index 4a171c0..5e16640 100644
--- a/html quiz/html-quiz.css	
+++ b/html quiz/html-quiz.css	
@@ -470,7 +470,7 @@ h4 {
     }
     .progress-and-options,
     .html__options {
-        width: 50%;
+        min-width: 50%;
     }
     .html__options-list {
         width: 100%;
diff --git a/index.html b/index.html
index 237465c..d8cf60b 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@ <h1>The-FE</h1>
 
         <section class="section container grid html-home">
             <div class="home__container container">
+                <div class="home__hero">
                     <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!
@@ -37,30 +38,30 @@ <h1 class="home__title">Welcome to the <span>Frontend Quiz</span></h1>
                         and level up your skills with each question.</p>
                 </div>
 
-
                 <div class="home__options">
                     <div class="option__list">
                         <span><i class="ri-html5-line"></i></span>
                         <p class="option__text html">Start Quiz</p>
                     </div>
                     <!--
-                <div class="option__list">
-                    <span><i class="ri-css3-line"></i></span>
-                    <p class="option__text css">CSS</p>
-                </div>
-
-                <div class="option__list">
-                    <span><i class="ri-code-s-slash-line"></i></span>
-                    <p class="option__text javascript">JavaScript</p>
-                </div>
-
-                <div class="option__list">
-                    <span><i class="ri-reactjs-line"></i></span>
-                    <p class="option__text react">React</p>
-                </div>
--->
+                                <div class="option__list">
+                                    <span><i class="ri-css3-line"></i></span>
+                                    <p class="option__text css">CSS</p>
+                                </div>
+                                
+                                <div class="option__list">
+                                    <span><i class="ri-code-s-slash-line"></i></span>
+                                    <p class="option__text javascript">JavaScript</p>
+                                </div>
+                                
+                                <div class="option__list">
+                                    <span><i class="ri-reactjs-line"></i></span>
+                                    <p class="option__text react">React</p>
+                                </div>
+                            -->
                 </div>
             </div>
+            </div>
         </section>
     </main>
 
diff --git a/styles.css b/styles.css
index 989c22e..6437303 100644
--- a/styles.css
+++ b/styles.css
@@ -437,5 +437,28 @@ h4 {
 }
 
 @media screen and (min-width: 1024px) {
-    
+    .home__container {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-inline: 2rem;
+    }
+    .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%;
+      
+    }
+}
\ No newline at end of file