Update index.html

index.html

@@ -14,7 +14,7 @@
             align-items: flex-start;
             min-height: 100vh;
             margin: 0;
-            padding-top: 40px;
+            padding: 40px;
         }
         .container {
             width: 90%;
@@ -75,6 +75,18 @@
             </select>
         </div>
         <div id="chapter-links"></div>
+
+        <div style="margin-top: 40px; padding: 20px; border-top: 2px solid #eee; text-align: center;">
+            <h2>✨ How to Use This Magic Study Machine! ✨</h2>
+            <p>Tired of searching for notes? Just follow this super-easy recipe for success!</p>
+            <ol style="list-style: none; padding: 0;">
+                <li style="font-size: 18px; margin-bottom: 10px;"><b>Step 1️⃣:</b> Pick your exam (like FA2 or SA1) from the first box.</li>
+                <li style="font-size: 18px; margin-bottom: 10px;"><b>Step 2️⃣:</b> Choose your subject... are you a Biology brainiac 🧠 or a Physics pro ⚛️?</li>
+                <li style="font-size: 18px;"><b>Step 3️⃣:</b> BAM! 🚀 All the chapters will appear below. Just click to open!</li>
+            </ol>
+            <p style="font-weight: bold; margin-top: 20px;">Happy studying! You've got this! 😎</p>
+        </div>
+
     </div>
 
     <script>