Merge pull request #3568 from Swati-in/feature/fix-button-alignment

Fixed the Alignment of buttons

index.html

@@ -776,7 +776,9 @@
     text-align: center;
 }
 .button-container {
-    text-align: center;
+  text-align: center;
+    margin-top: 1rem;
+
 }
 
 .donate-button {
@@ -789,7 +791,13 @@
     border-radius: 0.5rem;
     border: 0.2rem solid #a60606; /* Same red color for border */
 }
-
+.card-body {
+  display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 250px; /* Ensure cards have a consistent height */
+    padding: 1rem;
+}
 .donate-button:hover {
     background-color: #cc0000; /* Darker red for hover effect */
     border-color: #cc0000; /* Darker red for border on hover */
@@ -820,6 +828,8 @@
     margin: 1rem; /* Optional margin around each card */
 }
 
+
+
 .card img {
     width: 100%;
     height: auto;
@@ -2169,9 +2179,18 @@
     text-align: center;
 }
 .button-container {
-    text-align: center;
+  text-align: center;
+    margin-top: 1rem;
+
 }
 
+.card-body {
+  display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    min-height: 250px; /* Ensure cards have a consistent height */
+    padding: 1rem;
+}
 .donate-button {
     display: inline-block;
     padding: 0.9rem 1.8rem;
@@ -2197,6 +2216,8 @@
 .donate-books-section img {
     border-top-left-radius: 2.5rem;
     border-top-right-radius: 2.5rem;
+    width: 100%; /* Ensure consistent image size */
+    height: auto;
 }
 
 .container {
@@ -4888,27 +4909,27 @@ <h1 style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', '
           <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: 1rem; margin-bottom: 1rem; ">
+              <div class="button-container">
                   <a href="./assets/html/donate.html" class="donate-button">Donate to Libraries</a>
               </div>
           </div>
       </div>
-      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; height: auto;">
-          <img src="./assets/images/images/sc.jpg" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto;">
+          <img src="./assets/images/images/school.png" alt="School Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Schools</h3>
               <p class="card-text" style="font-style: italic;">Support children's education by donating books to nearby schools for students of all ages.</p>
-              <div class="button-container" style="text-align: center; margin-top: 1rem;">
+              <div class="button-container">
                   <a href="./assets/html/school.html" class="donate-button">Donate to Schools</a>
               </div>
           </div>
       </div>
-      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; height: auto;">
+      <div class="card" style=" margin: 1.5rem; border-bottom: 0.5rem solid #A30F17; border-radius: 1rem; transition: transform 0.3s ease; padding-bottom: 1rem; height: auto;">
           <img src="./assets/images/images/ngo.jpeg" alt="Organization Image" style="display: block; width: 100%; height: auto; border-radius: 1rem 1rem 0 0;">
           <div class="card-body">
               <h3 class="card-sty" style="text-align: center;">Organizations</h3>
-              <p class="card-text" style="font-style: italic;">Help NGOs and other organizations by donating books to support their educational programs.</p>
-              <div class="button-container" style="text-align: center; margin-top: 1rem;">
+              <p class="card-text" style="font-style: italic;">Donate books to support educational programs of NGOs and other organizations.</p>
+              <div class="button-container">
                   <a href="./assets/html/ngo.html" class="donate-button">Donate to Organizations</a>
               </div>
           </div>