New changes

innocentmisheck · Jan 24, 2024 · c030ae7 · c030ae7
1 parent 979a239
commit c030ae7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css
@@ -239,7 +239,7 @@ h4 {
 .html__options {
     display: flex;
     flex-direction: column;
-    row-gap: 1rem;
+    row-gap: .5rem;
 }
 
 .html__options-list {
@@ -326,6 +326,8 @@ h4 {
     border: none;
     color: var(--title-color);
     border-radius: .5rem;
+    position: fixed;
+    bottom: 1.5rem;
 }
 
 .correct {
@@ -352,9 +354,9 @@ h4 {
 
 @media screen and (max-width: 320px) {
     .html__title {
-        font-size: var(--h1-font-size);
+        font-size: var(--h2-font-size);
         font-weight: var(--font-weight-bold);
-        margin-top: 1rem;
+        margin-top: .5rem;
     }
 
     /**Html Progress */
@@ -389,7 +391,10 @@ h4 {
     .html__options {
         display: flex;
         flex-direction: column;
-        row-gap: 1rem;
+        row-gap: .5rem;
+    }
+    .html__choice-text {
+        font-size: var(--smaller-font-size);
     }
 
     .html__options-list {

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@ <h1>The-FE</h1>
                 </div>
                 <div class="toggle__icons container">
                     <i class="ri-sun-line sun"></i>
-                    <div class="toggle__box left">
+                    <div class="toggle__box left" id="toggle-box">
                         <div class="toggle__circle"></div>
                     </div>
                     <i class="ri-moon-line moon"></i>

diff --git a/index.js b/index.js
@@ -7,3 +7,16 @@ function handleClick() {
 }
 
 optionListItem.addEventListener('click', handleClick)
+
+/*=============== SHOW MENU ===============*/
+const showMenu = (toggleId) => {
+    const toggle = document.getElementById(toggleId)
+
+    toggle.addEventListener('click', () => {
+        // Add show-menu class to nav menu
+        toggle.classList.toggle('show-menu')
+        // Add show-icon to show and hide menu icon
+
+    })
+}
+showMenu('toggle-box')
diff --git a/styles.css b/styles.css
@@ -191,6 +191,9 @@ h4 {
 .toggle__box {
     cursor: pointer;
 }
+.show-menu {
+    justify-content: flex-start;
+}
 
 @media screen and (max-width: 950px) {
 
@@ -214,6 +217,11 @@ h4 {
         flex-direction: column;
         row-gap: 1rem;
     }
+    .home__container {
+        display: flex;
+        flex-direction: column;
+        row-gap: 1rem;
+    }
 
 
     .option__list {