diff --git a/public/index.html b/public/index.html
index 5907ee4a13b4e8b90ae2bb08741d941114b6af56..6725f18daf2333c5d3b1718f952db6c1bbf99d40 100644
--- a/public/index.html
+++ b/public/index.html
@@ -225,20 +225,88 @@
               </div>
             </div>
 
+<!-- 3. 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>
+
+ 
+ 
+ 
+ 
+ 
+ <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->  
+ <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
             
           </div>
         </div>
       </div>
   
-              
-              
-  
-
-      
-  <!-- KEINE ÄNDERUNGEN NACH DIESER ZEILE -->  
-  <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
       <!-- <br>
       <div class="d-flex justify-content-between align-items-center btnGroupDiv">
       <div class="btn-group">