Update public/index.html

public/index.html

@@ -28,74 +28,62 @@
     <link href="assets/css/main.css" rel="stylesheet">
     <!-- link to style.css  : added by Salam -->
     <style>
-    body {
-      background: #f5f5f5;
-      font-family: Arial, sans-serif;
-      padding: 40px;
-    }
-
-    .portfolio-container {
-      display: flex;
-      gap: 30px;
-      flex-wrap: wrap;
-      justify-content: center;
-    }
-
-    .portfolio-content {
-      width: 300px;
-      background: #fff;
-      border-radius: 20px;
-      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
-      overflow: hidden;
-      transition: all 0.3s ease-in-out;
-      display: flex;
-      flex-direction: column;
-    }
-
-    .portfolio-content:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
-    }
-
-    .portfolio-content img {
-      width: 100%;
-      height: auto;
-      object-fit: cover;
-      border-bottom: 1px solid #eee;
-    }
-
-    .portfolio-info {
-      padding: 20px;
-      text-align: left;
-    }
-
-    .portfolio-info h4 {
-      font-size: 1.1rem;
-      font-weight: 600;
-      margin-bottom: 5px;
-    }
-
-    .portfolio-info p {
-      font-size: 0.95rem;
-      color: #666;
-      margin-bottom: 10px;
-    }
-
-    .portfolio-info a {
-      margin-right: 12px;
-      color: #007bff;
-      text-decoration: none;
-    }
-
-    .portfolio-info a:hover {
-      color: #0056b3;
-    }
-
-    .portfolio-info i {
-      font-size: 1.3rem;
-    }
-  </style>
-
+  .portfolio-content {
+    background: #fff;
+    border-radius: 20px;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+    padding: 0;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .portfolio-content:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
+  }
+
+  .portfolio-content img {
+    width: 100%;
+    max-height: 180px; /* Bildhöhe begrenzen */
+    object-fit: contain; /* Inhalt einpassen, nicht beschneiden */
+    padding: 10px;
+    background: #f9f9f9;
+    border-bottom: 1px solid #eee;
+  }
+
+  .portfolio-info {
+    padding: 15px 20px;
+    text-align: left;
+  }
+
+  .portfolio-info h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 5px;
+  }
+
+  .portfolio-info p {
+    font-size: 0.95rem;
+    color: #666;
+    margin-bottom: 10px;
+  }
+
+  .portfolio-info a {
+    margin-right: 12px;
+    color: #007bff;
+    text-decoration: none;
+  }
+
+  .portfolio-info a:hover {
+    color: #0056b3;
+  }
+
+  .portfolio-info i {
+    font-size: 1.3rem;
+  }
+</style>
 
   <!-- =======================================================
   * Template Name: FlexStart