New changes

innocentmisheck · Jan 23, 2024 · 979a239 · 979a239
1 parent 1a88d8e
commit 979a239
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 18 deletions.
diff --git 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
@@ -30,37 +30,38 @@ <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!
                         Test your HTML, CSS, and JavaScript prowess,
                         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
@@ -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%;
+
+    }
+}