Adds Hind Font for P Texts and Fixes Cards Styling

src/app/home/stack-slider/stack-card/stack-card.component.css

@@ -5,12 +5,11 @@
 }
 
 .stack-card-image {
-    width: 100%;
+    width: 250px;
-    border-top-left-radius: 15px !important;
+    height: 250px;
-    border-top-right-radius: 15px !important;
+    position: relative;
-    background-size: cover;
+    display: flex;
-    background-position: center;
+    align-items: center;
-    background-repeat: no-repeat;
 }
 
 .stack-card-body {
@@ -22,9 +21,18 @@
     inline-size: 250px;
 }
 
+.stack-card-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
 .stack-card-text {
     word-break: break-all !important;
     white-space: normal !important;
+    font-size: 1rem;
+    font-weight: 400 !important;
+    font-family: 'Hind', sans-serif !important;
 }
 
 
@@ -35,6 +43,7 @@
 }
 
 .inactive {
-    opacity: 0.85;
+    opacity: 0.7;
-    width: 275px;
+    width: 300px;
+    height: 410px;
 }

src/app/home/stack-slider/stack-card/stack-card.component.html

@@ -1,5 +1,10 @@
 <div class="card stack-card inactive" [@cardAnimation]="cardState">
-    <img class="card-img-top stack-card-image" [src]="stack.image" alt="Stack Image">
+    <div class="card-img-top stack-card-image">
+        <img [ngSrc]="stack.image"
+             width="200"
+                height="200"
+             alt="Stack Image" priority>
+    </div>
     <div class="card-body stack-card-body">
         <h5 class="card-title stack-card-title">{{stack.name}}</h5>
         <p class="card-text stack-card-text">{{stack.description}}</p>

src/app/home/stack-slider/stack-card/stack-card.component.ts

@@ -10,11 +10,13 @@ import {animate, state, style, transition, trigger} from "@angular/animations";
         trigger('cardAnimation', [
             state('active', style({
                 opacity: 1,
-                width: '300px',
+                width: '350px',
+                height: '425px',
             })),
             state('inactive', style({
-                opacity: 0.85,
+                opacity: 0.7,
-                width: '275px',
+                width: '300px',
+                height: '410px',
             })),
             transition('* => *', [
                 animate('0.1s')

src/styles.css

@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
 @import "font-montserrat.css";
 
 * {
@@ -21,3 +22,7 @@ h5,
 h6 {
     font-family: "Montserrat", sans-serif;
 }
+
+p {
+    font-family: "Hind", sans-serif;
+}