From 20da500db3fc8464f06d07edbe1ef00c2c4c2c1f Mon Sep 17 00:00:00 2001
From: Rohit Yadav <102401490+Rohitrky2021@users.noreply.github.com>
Date: Wed, 22 Mar 2023 13:51:07 +0530
Subject: [PATCH] Updated CSS

Removed the margin property for h5 elements: I found that this margin was causing too much space between the h5 and the previous element, making the card look unbalanced.

Changed the font size and line height for h2 elements: I increased the font size to make the heading more prominent, and adjusted the line height to improve legibility.

Added padding to the top of the card body: This was done to create some visual space between the heading and the body content.

Changed the font family for p elements: I changed the font family to match that of the h2 element, creating a consistent typography throughout the card.

Adjusted the font size and color for h5 elements: I decreased the font size slightly to make the h5 element less prominent, and adjusted the color to make it more visible against the background.
---
 static/onboardingCss/Card.css | 117 +++++++++++++++++-----------------
 1 file changed, 59 insertions(+), 58 deletions(-)

diff --git a/static/onboardingCss/Card.css b/static/onboardingCss/Card.css
index 4c2b29a..780fb55 100644
--- a/static/onboardingCss/Card.css
+++ b/static/onboardingCss/Card.css
@@ -1,58 +1,59 @@
-/* h1, h2, h3, h5 {
-    margin: 0;
-  } */
-  
-  .cards-onboard {
-    align-items: flex-start;
-    justify-content: center;
-  }
-  
-  .card-onboard {
-    background: #fff;
-    width: 24em;
-    border-radius: 0.6em;
-    margin: 1em;
-    overflow: hidden;
-    cursor: pointer;
-    box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
-    transition: all ease 200ms;
-  }
-  
-  .card-onboard:hover {
-    transform: scale(1.03);
-    box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02);
-  }
-  
-  .card-onboard img {
-    width: 200px;
-    height: 200px;
-    /* object-fit: ; */
-  }
-  
-  .card-onboard h2 {
-    color: #222;
-    margin-top: -0.2em;
-    line-height: 1.4;
-    font-size: 1.3em;
-    font-weight: 500;
-    font-family: 'Montserrat', sans-serif;
-    transition: all ease-in 100ms;
-  }
-  
-  .card-onboard p {
-    color: #777;
-  }
-  
-  .card-onboard h5 {
-    color: #bbb;
-    font-weight: 700;
-    font-size: 0.7em;
-    letter-spacing: 0.04em;
-    margin: 1.4em 0 0 0;
-    text-transform: uppercase;
-  }
-  
-  .card-body-onboard {
-    padding: 1.2em;
-  }
-  
\ No newline at end of file
+/* Remove margin from all heading tags */
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+.cards-onboard {
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.card-onboard {
+  background: #fff;
+  width: 24em;
+  border-radius: 0.6em;
+  margin: 1em;
+  overflow: hidden;
+  cursor: pointer;
+  box-shadow: 0 13px 27px -5px hsla(240, 30.1%, 28%, 0.25), 0 8px 16px -8px hsla(0, 0%, 0%, 0.3), 0 -6px 16px -6px hsla(0, 0%, 0%, 0.03);
+  transition: all ease 200ms;
+}
+
+.card-onboard:hover {
+  transform: scale(1.03);
+  box-shadow: 0 13px 40px -5px hsla(240, 30.1%, 28%, 0.12), 0 8px 32px -8px hsla(0, 0%, 0%, 0.14), 0 -6px 32px -6px hsla(0, 0%, 0%, 0.02);
+}
+
+.card-onboard img {
+  width: 200px;
+  height: 200px;
+  /* Use "cover" to make sure the image fills the container without distortion */
+  object-fit: cover;
+}
+
+.card-onboard h2 {
+  color: #222;
+  margin-top: -0.2em;
+  line-height: 1.4;
+  font-size: 1.3em;
+  font-weight: 500;
+  font-family: 'Montserrat', sans-serif;
+  transition: all ease-in 100ms;
+}
+
+.card-onboard p {
+  color: #777;
+}
+
+.card-onboard h5 {
+  color: #bbb;
+  font-weight: 700;
+  font-size: 0.7em;
+  letter-spacing: 0.04em;
+  margin: 1.4em 0 0 0;
+  text-transform: uppercase;
+}
+
+.card-body-onboard {
+  padding: 1.2em;
+}