setup a gallery for all existing generators

index.html

@@ -25,12 +25,33 @@
   <section>
     <div class="container">
       <div class="row">
-        
+        <div class="col">
+          <div class="card">
+            <img class="card-img-top" src="./images/fortune_generator_example.png">
+            <!-- <video src="#" autoplay></video> -->
+            <div class="card-body">
+              <h5 class="card-title">Fortune Generator</h5>
+              <p class="card-text">Get your daily fortune by clicking the check in button</p>
+              <a href="./fortune_generator/" class="btn btn-dark">Check this out</a>
+            </div>
+          </div>
+        </div>
+        <div class="col">  
+          <div class="card">
+            <img class="card-img-top" src="./images/quote_generator_example_(2).png">
+            <!-- <video src="#" autoplay></video> -->
+            <div class="card-body">
+              <h5 class="card-title">Quote Generator</h5>
+              <p class="card-text">Get your daily quote by clicking a button</p>
+              <a href="./quote_generator/" class="btn btn-dark">Check this out</a>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </section>
-  <footer>
-    Footer
+  <footer class="float-end py-3 me-3" style="text-align: right;">
+    <h5>made by <b>LifeAdventurer</b> <img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></h5>
   </footer>
 </body>
 </html>

styles.css

@@ -1,5 +1,6 @@
 body {
   background-color: #FFFFFF;
+  overflow: hidden;
 }
 
 h1 {