need image on need list

1 files changed, 22 insertions, 3 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 622b64a..5cfa479 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -20,18 +20,34 @@
     font-size: 10pt;
 }
 
+.need-image {
+    height: 130px;
+    width: 200px;
+    margin: -10px 0 0 -10px;
+    object-fit: cover;
+    border-radius: 5px;
+    mask-image: linear-gradient(to right, rgb(255,255,255) 0, rgb(255,255,255,.1) 60%, rgb(255,255,255,0) 100%);
+}
+
 .split {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-
-
+   
     .left {
+        width: 15%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .middle {
+        width: 42.5%;
         display: flex;
+        align-items: start;
         flex-direction: column;
     }
 
     .right {
+        width: 42.5%;
         display: flex;
         flex-direction: column;
         align-items: end;
@@ -47,8 +63,11 @@
 }
 
 .prog {
+    width: 85%;
     display: flex;
     flex-direction: column;
+    align-self: end;
+    margin-top: -5.25%;
 }
 
 .clickable {