Update public/index.html

public/index.html

@@ -124,6 +124,52 @@
   font-size: 0.95rem;
   color: #555;
 }
+
+.publication-card {
+  display: flex;
+  align-items: center;
+  background: #fff;
+  border: 1px solid #ddd;
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.publication-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+.publication-card img {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+  margin-right: 16px;
+  flex-shrink: 0;
+}
+
+.publication-info h4 {
+  margin: 0 0 4px 0;
+  font-size: 1rem;
+}
+
+.publication-info h4 a {
+  text-decoration: none;
+  color: #007bff;
+}
+
+.publication-info h4 a:hover {
+  text-decoration: underline;
+}
+
+.publication-info p {
+  margin: 0;
+  font-size: 0.9rem;
+  color: #555;
+}
+
 </style>
 
   <!-- =======================================================
@@ -372,7 +418,14 @@
         <!-- Publikationen -->
         <!-- Paper 1 -->
         <div class="col-lg-4 col-md-6 portfolio-item isotope-item filter-publikationen">
-          <div class="portfolio-content h-100">
+          <div class="publication-card">
+              <img src="ausschreibung/img/pado1.PNG" alt="Paper 1">
+              <div class="publication-info">
+              <h4><a href="https://doi.org/10.1007/s40593-023-00383-w" target="_blank">Short-Answer Grading for German</a></h4>
+              <p>Padó et al. (2023) – Addressing the Challenges</p>
+              </div>
+          </div>
+         <!-- <div class="portfolio-content h-100">
             <img src="ausschreibung/img/pado1.PNG" class="img-fluid" alt="Paper 1">
             <div class="portfolio-info">
               <h4>Paper 1</h4>
@@ -381,7 +434,7 @@
               <a href="https://doi.org/10.1007/s40593-023-00383-w" class="details-link" title="Padó et al. (2023)"><i class="bi bi-link-45deg"></i></a>
             </div>
           </div>
-        </div>
+          </div> -->
         <!-- End Paper 1 -->
 
         <!-- Paper 2 -->