diff --git a/html quiz/html-quiz.css b/html quiz/html-quiz.css index 5e16640..09954e7 100644 --- 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 index d8cf60b..da75477 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@

The-FE

-
+
diff --git a/index.js b/index.js index 210a21d..545af52 100644 --- 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 index 6437303..9efe192 100644 --- 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 {