fetching assignment with API

src/scss/components/_assignment.scss

@@ -297,3 +297,42 @@
       0 0 30px rgba(0, 191, 255, 0.9);
   }
 }
+
+
+.assignment-list-box {
+  margin-top: 40px;
+
+  h3 {
+    font-size: 1.5rem;
+    margin-bottom: 20px;
+  }
+
+  .assignment-cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+  }
+
+  .assignment-card {
+    background: #f5f5f5;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+
+    p {
+      margin: 6px 0;
+    }
+
+    a {
+      color: #2c7be5;
+      text-decoration: underline;
+      word-break: break-word;
+    }
+
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    }
+  }
+}