Merge pull request #2825 from Saksham2k3s/enhance-donate-cards

Solved issue 2803

index.html

@@ -2768,17 +2768,17 @@ <h2 class="h2 section-title has-underline" style="margin-bottom: 0px;">
   <h1 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;">Donate Books</h1>
   <br>
   <div class="container">
-      <div class="card" style="overflow: hidden; margin: 15px; border: 1px solid #ccc; border-radius: 10px; transition: transform 0.3s ease;">
+    <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; padding-bottom: 10px; height: auto; ">
           <img src="./lib.jpg" alt="Library Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Library</h3>
               <p class="card-text" style="font-style: italic;">Donate your books to local libraries and help foster a love for reading in your community.</p>
-              <div class="button-container" style="text-align: center; margin-top: 10px;">
+              <div class="button-container" style="text-align: center; margin-top: 10px; margin-bottom: 10px; ">
                   <a href="./assets/html/donate.html" class="donate-button">Donate to Libraries</a>
               </div>
           </div>
       </div>
-      <div class="card" style="overflow: hidden; margin: 15px; border: 1px solid #ccc; border-radius: 10px; transition: transform 0.3s ease;">
+      <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; height: auto;">
           <img src="./sc.jpg" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Schools</h3>
@@ -2788,7 +2788,7 @@ <h3 class="card-sty" style="text-align: center;">Schools</h3>
               </div>
           </div>
       </div>
-      <div class="card" style="overflow: hidden; margin: 15px; border: 1px solid #ccc; border-radius: 10px; transition: transform 0.3s ease;">
+      <div class="card" style=" margin: 15px; border-bottom: 5px solid #A30F17; border-radius: 10px; transition: transform 0.3s ease; height: auto;">
           <img src="./n.jpg" alt="Organization Image" style="display: block; width: 100%; height: auto; border-radius: 10px 10px 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Organizations</h3>