diff --git a/public/index.html b/public/index.html
index b7dbac3d554aede06302b763c0962ce397c9c115..5907ee4a13b4e8b90ae2bb08741d941114b6af56 100644
--- a/public/index.html
+++ b/public/index.html
@@ -80,10 +80,9 @@
   
 
 
-<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
-<!-- ÄNDERUNGEN NUR AB HIER VORNEHMEN -->
 
-  <!-- 1 ZEILE DER PROJEKTÃœBERSICHT -->
+
+  <!-- 1. ZEILE DER PROJEKTÃœBERSICHT -->
       <div class="album py-5 bg-light topDownPadding">
         <div class="container">
           <div class="row">
@@ -109,6 +108,9 @@
               </div>
             </div>
 
+<!-- ------------------------------------------------------------------------------------------------------------------------------- -->
+<!-- ÄNDERUNGEN NUR AB HIER VORNEHMEN -->
+
             <!-- BITTE HIER BEISPIELDATEN DURCH IHRE DATEN ERSETZEN -->
             <div class="col-md-4">
               <div class="card mb-4 shadow-sm extension">
@@ -151,8 +153,78 @@
                 </div>
               </div>
             </div>
+  
+  
+   <!-- 2. ZEILE DER PROJEKTÃœBERSICHT -->
+      <div class="album py-5 bg-light topDownPadding">
+        <div class="container">
+          <div class="row">
+
+            <!-- BITTE HIER BEISPIELDATEN DURCH IHRE DATEN ERSETZEN -->
+            <div class="col-md-4">
+              <div class="card mb-4 shadow-sm extension">
+                <h5>Titel Beispielprojekt</h5>
+                <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
+                <!-- BITTE QUELLCODE UND BILDER JEWEILS IN EINEM EIGENEN PROJEKTORDNER ABLEGEN -->
+                <img class="thumbimg" src="beispielprojekt/imgs/thumbnails/hft_beispielbild.jpg" alt="">
+                <div class="card-body">
+                  <p class="card-text">Beschreibungstext hier einfügen...</p>                
+                </div>
+                <div class="d-flex justify-content-between align-items-center btnGroupDiv">
+                  <div class="btn-group">
+                    <form action="beispielprojekt/src/beispiel.html" class="form-signin" method="GET">
+                      <button type="submit" class="btn btn-sm btn-outline-secondary">Details</button>
+                    </form>                   
+                  </div>
+                  <!-- <small class="text-muted">9 mins</small> -->
+                </div>
+              </div>
+            </div>
 
 
+            <!-- BITTE HIER BEISPIELDATEN DURCH IHRE DATEN ERSETZEN -->
+            <div class="col-md-4">
+              <div class="card mb-4 shadow-sm extension">
+                <h5>Titel Beispielprojekt</h5>
+                <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
+                <!-- BITTE QUELLCODE UND BILDER JEWEILS IN EINEM EIGENEN PROJEKTORDNER ABLEGEN -->
+                <img class="thumbimg" src="beispielprojekt/imgs/thumbnails/hft_beispielbild.jpg" alt="">
+                <div class="card-body">
+                  <p class="card-text">Beschreibungstext hier einfügen...</p>                
+                </div>
+                <div class="d-flex justify-content-between align-items-center btnGroupDiv">
+                  <div class="btn-group">
+                    <form action="beispielprojekt/src/beispiel.html" class="form-signin" method="GET">
+                      <button type="submit" class="btn btn-sm btn-outline-secondary">Details</button>
+                    </form>                   
+                  </div>
+                  <!-- <small class="text-muted">9 mins</small> -->
+                </div>
+              </div>
+            </div>
+
+
+            <!-- BITTE HIER BEISPIELDATEN DURCH IHRE DATEN ERSETZEN -->
+  <div class="col-md-4">
+              <div class="card mb-4 shadow-sm extension">
+                <h5>Titel Beispielprojekt</h5>
+                <!-- <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Thumbnail"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"/><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg> -->
+                <!-- BITTE QUELLCODE UND BILDER JEWEILS IN EINEM EIGENEN PROJEKTORDNER ABLEGEN -->
+                <img class="thumbimg" src="beispielprojekt/imgs/thumbnails/hft_beispielbild.jpg" alt="">
+                <div class="card-body">
+                  <p class="card-text">Beschreibungstext hier einfügen...</p>                
+                </div>
+                <div class="d-flex justify-content-between align-items-center btnGroupDiv">
+                  <div class="btn-group">
+                    <form action="beispielprojekt/src/beispiel.html" class="form-signin" method="GET">
+                      <button type="submit" class="btn btn-sm btn-outline-secondary">Details</button>
+                    </form>                   
+                  </div>
+                  <!-- <small class="text-muted">9 mins</small> -->
+                </div>
+              </div>
+            </div>
+