New changes

index.html

@@ -30,6 +30,8 @@ <h1>FE-quiz</h1>
 
         <section class="section grid html-home">
             <div class="home__container container">
+                <span id="show-text" class="show__text">Remember to control Dark and Light mode fom this page</span>
+
                 <div class="home__hero">
                     <h1 class="home__title">Welcome to the <span>Frontend Quiz</span></h1>
                     <p class="home__description">
@@ -43,10 +45,11 @@ <h1 class="home__title">Welcome to the <span>Frontend Quiz</span></h1>
                         <span><i class="ri-html5-line"></i></span>
                         <p class="option__text html">Start Quiz</p>
                     </div>
-                 
+
                 </div>
             </div>
-            </div>
+
+
         </section>
     </main>
 

index.js

@@ -52,3 +52,15 @@ toggle.addEventListener('click', () => {
     localStorage.setItem('selected-icon', getCurrentIcon())
 })
 
+function displayAndHideText() {
+
+    const showText =  document.querySelector('#show-text')
+
+    showText.style.display= 'block'
+
+    setTimeout(() => {
+        showText.style.display = 'none'
+    }, 5000);
+}
+
+window.onload = displayAndHideText

styles.css

@@ -229,12 +229,19 @@ h4 {
 .toggle-icon {
     justify-content: flex-start;
 }
+#show-text {
+    background: #e93f3f;
+    padding: 1rem;
+    color: #fff;
+    border-radius: 1rem;
+    font-size: var(--normal-font-size);
 
+}
 @media screen and (max-width: 950px) {
 
     /**************** HOME *******************/
     .html-home {
-        margin-top: 5rem;
+        margin-top: 3rem;
     }
 
     .home__title {