From 272de2493c58b76d632dd8aba72a509acb754cf5 Mon Sep 17 00:00:00 2001
From: matt <matt@creative-crafter.de>
Date: Mon, 24 Feb 2025 20:11:21 +0100
Subject: [PATCH] neu

---
 index.html | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index f3d5f0e..1883b43 100644
--- a/index.html
+++ b/index.html
@@ -21,9 +21,10 @@
         header {
             display: flex;
             justify-content: space-between;
-            width: 80%;
+            width: 100%;
             padding: 20px;
             align-items: center;
+            max-width: 1200px;
         }
         .left, .right {
             display: flex;
@@ -44,6 +45,9 @@
             top: 20px;
             left: 20px;
         }
+        .social-links a {
+            font-size: 1.5em; /* Default size for larger screens */
+        }
         .loading-overlay {
             position: fixed;
             top: 0;
@@ -77,15 +81,24 @@
             align-items: center;
             justify-content: center;
             text-align: left;
-            width: 80%;
+            width: 100%;
+            max-width: 1200px;
+            padding: 20px;
+            box-sizing: border-box;
         }
         .text {
             flex: 1;
+            margin-right: 20px;
         }
         .image {
             flex: 1;
             text-align: right;
         }
+        .image img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 8px; /* Optional: Für abgerundete Ecken */
+        }
         .divider {
             width: 100%;
             height: 2px;
@@ -102,6 +115,7 @@
             transition: box-shadow .5s, transform .5s;
             border-radius: 8px;
             display: inline-block;
+            margin: 10px;
         }
         .card:hover {
             transform: translate(-2px, -4px);
@@ -130,11 +144,20 @@
         @media (max-width: 600px) {
             .content {
                 flex-direction: column;
+                align-items: center;
             }
             .text, .image {
                 flex: none;
                 width: 100%;
                 text-align: center;
+                margin-right: 0;
+            }
+            .card {
+                max-width: 90%;
+                margin: 10px 0;
+            }
+            .social-links a {
+                font-size: 1.2em; /* Kleinere Icons auf mobilen Geräten */
             }
         }
     </style>
@@ -152,10 +175,10 @@
         </div>
         <div class="social-links">
             <a href="https://www.instagram.com/so.mach.ich.das/" target="_blank" rel="noopener noreferrer">
-                <i class="fa-brands fa-instagram" style="font-size: 2em;"></i>
+                <i class="fa-brands fa-instagram"></i>
             </a>
             <a href="https://youtube.com/@somachtstefaniedasstefanie435?feature=shared" target="_blank" rel="noopener noreferrer">
-                <i class="fa-brands fa-youtube" style="font-size: 2em;"></i>
+                <i class="fa-brands fa-youtube"></i>
             </a>
         </div>
     </header>
@@ -171,12 +194,12 @@
             hier findest du Inspiration und Anleitungen für jede Gelegenheit.</p>
         </div>
         <div class="image">
-            <img src="/obstteller1.png" alt="Bild" width="400">
+            <img src="obstteller1.png" alt="Obstteller mit frischen Früchten">
         </div>
     </div>
     <div class="divider"></div>
     <div class="card">
-        <img src="/johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
+        <img src="johannesbeeressig.png" width="100%" alt="Johannesbeeressig">
         <div class="title">Johannesbeeressig</div>
         <p class="description">Verleihe deinem Salat eine außergewöhnliche 
         Note mit selbstgemachtem Johannisbeeressig.<br>