änderungen für näher ans mockup

public/css/desktop.css

@@ -26,22 +26,25 @@ header {
 }
 
 header > h1 {
-    padding-top: 0.3em;
+    padding-top: 0.1em;
     padding-left: 7em;
     margin: 0;
-    font-size: 2.5em;
+    font-size: 1.875em;
 }
 
 header > p {
     padding-left: 17.6em;
-    margin-top: 0.5em;
-    margin-bottom: 0;
+    margin-top: 0em;
+    margin-bottom: 0.5em;
+    font-size: 0.75em;
 }
 
 .header_logo {
     float: left;
-    margin-left: 1em;
-    transform: scale(1.2);
+    margin-top: -18px;
+    margin-bottom: -20px;
+    margin-left: -20px;
+    transform: scale(0.8);
 }
 
 .navbar {
@@ -63,6 +66,7 @@ header > p {
 
 .content {
     position: relative;
+    color: black;
 }
 
 .content p {
@@ -72,16 +76,23 @@ header > p {
 
 .content :not(h1, strong) {
     margin-left: 3.5em;
+    color: #606060;
 }
 
 .content h1 {
     text-align: center;
-    font-size: 2.5em;
+    font-size: 1.875em;
+    font-weight: normal;
+    margin-top: 0;
 }
 
 .content h2 {
+    font-size: 1em;
     text-align: center;
 }
+.content a {
+    margin-left: 0em;
+}
 
 html body.index .content::before,
 html body.datenschutz .content::before,
@@ -103,20 +114,22 @@ html body.impressum .content::before{
 }
 
 #aktuelle_auswahl {
-    margin-left: 2.3em;
-    font-size: 1.5em;
+    margin-left: 2.7em;
+    margin-bottom: -0.5em;
+    font-size: 1em;
 }
 
-.beispiel_produkte {
-    margin: 10px;
-    margin-left: 8px;
-}
 
 .beispiel_produkte img {
     border: #606060 1px solid;
+    height: 160px;
+    width: 150px;
+    margin-top: 1em;
+    margin-left: 2em;
+
 }
 
-.button_produkte {
+#button_produkte {
     background-color: #476B1C;
     color: white;
     padding: 5px 20px;
@@ -125,8 +138,8 @@ html body.impressum .content::before{
     text-decoration: none;
     display: inline-block;
     font-size: 1em;
-    margin: 4px 2px;
     cursor: pointer;
+    margin-left: -1em;
 }
 
 #balken {
@@ -322,3 +335,28 @@ label {
 a:hover{ 
     color: #f4eb49;
 }
+.gesamtbetrag{
+    position: absolute;
+    font-size: 1em;
+    bottom: 15px;
+    right: 15px;
+}
+.foodampel {
+    display: flex;
+    align-items: top;
+
+  }
+  
+  .foodampel img {
+    height: 120px;
+    margin-left: -0.7em;
+  }
+  
+  .foodampel p {
+    margin-left: 0.65em;
+    margin-top: 0.8em;
+    
+  }
+  #hinweis{
+    color: red;
+  }

public/impressum.html

@@ -26,21 +26,21 @@
     </header>
 
     <div class="content">
-        <div class="schrift_website">
-            <p id="begrueßung">Impressum</p>
+
+        <h1>Impressum</h1>
         <p><strong>Angaben gemäß § 5 TMG</strong><br />WEB-A4-Gruppe<br />Paul-Wittsack-Straße 10<br />68163
-                Mannheim</p>
+            Mannheim</p> </br>
         <p><strong>Vertreten durch:</strong><br />Sellmann, Kai<br />Rahmani, Mohammad<br />Schumann,
-                Robin<br />Wieduwilt, Marvin<br />Steinbrecher, Eline<br />Dal, Mustafa</p>
-            <p><strong>Kontakt</strong><br />Telefon: +49(0) 123 456 78<br />E-Mail: info@secondharvest.com</p>
+            Robin<br />Wieduwilt, Marvin<br />Steinbrecher, Eline<br />Dal, Mustafa</p></br>
+        <p><strong>Kontakt</strong><br />Telefon: +49(0) 123 456 78<br />E-Mail: <a href="kontakt.html">info@secondharvest.com</a></p></br>
         <p><strong>Verantwortlich für den Inhalt nach § 55 Abs. 2
-                    RStV</strong><br />WEB-A4-Gruppe<br />Paul-Wittsack-Straße<br />68163 Mannheim</p>
+                RStV</strong><br />WEB-A4-Gruppe<br />Paul-Wittsack-Straße<br />68163 Mannheim</p></br>
         <p><strong>Haftungsausschluss</strong><br />Wir übernehmen keine Haftung für Inhalte externer Links. Für den
             Inhalt der verlinkten Seiten sind ausschließlich deren Betreiber verantwortlich.</p>
         <p id="hinweis">Hinweis: Diese Website ist Teil eines Studienprojekts und hat rein hypothetischen Charakter.
             Alle Inhalte, Produkte und Angebote sind fiktiv und dienen ausschließlich zu Demonstrationszwecke im
-                Rahmen der Studienarbeit.</p>
-        </div>
+            Rahmen der Studienarbeit.</p></br>
+
     </div>
 
 

public/index.html

@@ -32,21 +32,23 @@
             verschwenden.</p>
         <br />
         <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
-        <p>muss sofort verarbeitet werden</p>
-        <p>kann ein paar Tage liegen</p>
-        <p>lange Haltbarkeit</p>
+        <div class="foodampel">
+            <img src="pictures/Foodampel_transparent.png">
+            <p class="foodampel">muss sofort verarbeitet werden</br></br>kann ein paar Tage liegen</br></br>lange
+                Haltbarkeit</p>
+        </div>
         <p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du
             etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
             <strong>noch am selben Tag</strong>
             ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
         </p>
+        </br>
         <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
 
-        <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" width="250" height="250"
-                alt="Karotten"></a>
+        <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" alt="Karotten"></a>
         <a class="beispiel_produkte" href="produkte.html">
-            <img src="pictures/sellerie.png" width="250" height="250" alt="Sellerie"></a>
-        <p><a class="button_produkte" href="produkte.html">zu den Produkten</a></p>
+            <img src="pictures/sellerie.png" alt="Sellerie"></a>
+        <p><a id="button_produkte" href="produkte.html">zu den Produkten</a></p>
 
         <h2>Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
     </div>

public/kontakt.html

@@ -26,18 +26,18 @@
     </header>
 
     <div class="content">
-        <div class="schrift_website">
-            <p id="begrueßung">Kontakt</p>
+
+        <h1>Kontakt</h1>
         <p>Du brauchst Hilfe oder hast ein anderes Anliegen? <br /><strong>Sehr gern.</strong> Wir freuen uns immer
-                auf Emails, Anrufe oder Post von Dir.</p>
-            <p><strong>Unsere Kontaktdaten</strong></p>
-            <p><strong>Postanschrift:</strong><br />WEB A4-Team<br />Paul-Wittsack-Straße 10<br />68163 Mannheim</p>
-            <p><strong>E-Mail-Adresse:</strong> info@secondharvest.com<br /><strong>Telefon:</strong> +49(0) 1234 567
-                890 00</p>
+            auf Emails, Anrufe oder Post von Dir.</p></br>
+        <p><strong>Unsere Kontaktdaten</strong></p></br>
+        <p><strong>Postanschrift:</strong><br />WEB A4-Team<br />Paul-Wittsack-Straße 10<br />68163 Mannheim</p></br>
+        <p><strong>E-Mail-Adresse:</strong> <a href="kontakt.html">info@secondharvest.com</a><br /><strong>Telefon:</strong> +49(0) 1234 567
+            890 00</p></br>
         <p>Wir sind von Montag bis Freitag zwischen 9.00 Uhr und 16.00 Uhr erreichbar.</p>
 
-        </div>
-    </div>
+
+</div>
 
     <footer>
         <nav class="navbar" style="--items: 2;">

public/produkte.html

@@ -24,8 +24,9 @@
         </nav>
     </header>
 
-    <h1 class = produktueberschrift> Produkte</h1>
-    
+    <div class="content">
+    <h1> Produkte</h1>
+    </div>
     <div class="parent">
         <div class="produkte">
           <img src="pictures/karotten.png" width = "300" height="300" alt="Karotten">

public/ueber_uns.html

@@ -26,27 +26,25 @@
     </header>
 
     <div class="content">
-        <div class="schrift_website">
-            <p id="begrueßung">Wer wir sind</p>
+        
+        <h1>Wer wir sind</h1>
         <p>Second Harvest ist eine gemeinnützige Organisationm die sich der Rettung von Lebensmitteln verschrieben
             hat.<br />
             Wir glauben daran, dass jedes Lebensmittel einen Wert hat und dass es unser Ziel ist,
-                Lebensmittelverschwendung zu minimieren.</p>
+            Lebensmittelverschwendung zu minimieren.</p></br>
         <p><strong>Seit unserer Gründung im Jahr 2019 haben wir mehr als 31 Tonnen Lebensmittel gerettet und an
-                    Bedürftige weitergegeben.</strong></p>
+                Bedürftige weitergegeben.</strong></p></br>
         <p>Unser Team besteht aus engagierten Freiwilligen und Fachleuten, die unsere Mission unterstützen und
-                vorantreiben.</p>
+            vorantreiben.</p></br>
         <p>Wir arbeiten eng mit lokalen Supermärkten, Restaurants und anderen Unternehmen zusammen, um überschüssige
             Lebensmittel abzufangen und zu verteilen.<br />Unsere Arbeit hat einen positiven Einfluss auf die Umwelt
             und die Gesellschaft, indem wir Lebensmittelverschwendung reduzieren und gleichzeitig Menschen in Not
             helfen.<br />Wir sind stolz darauf, ein wichtiger Teil der Gemeinschaft zu sein und dazu beitragen, eine
-                nachhaltige und gerechte Zukunft zu schaffen.</p>
+            nachhaltige und gerechte Zukunft zu schaffen.</p></br>
         <p>Wir liefern selbst und regional immer frisch und zügig. <br />Unser hauseigener Lieferdienst bringt Deine
             Waren noch am selben Tag (wenn die Bestellung uns bis 10 Uhr am gleichen Tag vorliegt). Aber selbst wenn
             nicht, dann liefern wir am nächsten Tag aus.</p>
-
-        </div>
-    </div>
+</div>