add responsive web design to the cards

index.html

@@ -25,8 +25,8 @@
   <section>
     <div class="container">
       <div class="row">
-        <div class="col">
-          <div class="card">
+        <div class="col-md-6">
+          <div class="card mb-3">
             <img class="card-img-top" src="./images/fortune_generator_example.png">
             <!-- <video src="#" autoplay></video> -->
             <div class="card-body">
@@ -36,7 +36,7 @@
             </div>
           </div>
         </div>
-        <div class="col">  
+        <div class="col-md-6">  
           <div class="card">
             <img class="card-img-top" src="./images/quote_generator_example_(2).png">
             <!-- <video src="#" autoplay></video> -->
@@ -50,8 +50,10 @@
       </div>
     </div>
   </section>
-  <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>
+    <div class="row text-muted py-3 me-3 float-end" style="text-align: right;">
+      <h5>made by <b>LifeAdventurer</b> <img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></h5>
+    </div>
   </footer>
 </body>
 </html>

styles.css

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