From efb560e0d3ed0edb3c7e1fa1f4c874251d89d3e2 Mon Sep 17 00:00:00 2001
From: lifeadventurer <life0adventurer@gmail.com>
Date: Fri, 24 Nov 2023 00:19:20 +0800
Subject: [PATCH] add responsive web design to the cards

---
 index.html | 12 +++++++-----
 styles.css |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index ec7f542..f4052a9 100644
--- a/index.html
+++ b/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>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 59d38a5..f61608e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,5 @@
 body {
-  background-color: #FFFFFF;
+  background-color: #ffffff;
   overflow: hidden;
 }