mobil-Warenkorb angepasst, überschriften angepasst

master
Robin Schumann 2023-06-05 10:16:08 +02:00
parent 5bc9bf7767
commit ef2cae3dfe
4 changed files with 63 additions and 29 deletions

View File

@ -146,6 +146,11 @@
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
} }
.content h3{
color: black;
margin-bottom: 0.2em;
}
.content a { .content a {
margin-left: 0em; margin-left: 0em;

View File

@ -233,7 +233,7 @@
} }
.content :not(h1, strong, a) { .content :not(h1, strong, a) {
margin-left: 3.5em; margin-left: 0em;
color: #606060; color: #606060;
} }
@ -248,6 +248,14 @@
font-size: 1em; font-size: 1em;
text-align: center; text-align: center;
} }
.content_mobile {
position:static;
}
.content h3{
color: black;
margin-bottom: 0.2em;
}
.content a { .content a {
margin-left: 0em; margin-left: 0em;
@ -415,32 +423,42 @@
position: relative; position: relative;
} }
.produkte_warenkorb { .content .produkte_warenkorb {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
border: thin solid black; border: thin solid black;
margin-left: -55px; margin-left: 4em;
margin-top: 20px; margin-top: 20px;
align-items: center; align-items: center;
justify-items: left; justify-items: left;
position: relative;
} }
.content .produkte_warenkorb .bild_mobil img { .content .produkte_warenkorb .bild_mobil img {
margin-left: -50px;
align-items: center; align-items: center;
} }
.content .produkte_details { .content .produkte_details {
display: block; display: flex;
margin-left: 0; flex-direction: column;
font-size: 0.8em; font-size: 0.8em;
justify-content: left; margin-top: -25px;
justify-content: space-between;
width: 95%;
}
.content .produkte_details p {
display: inline-block;
}
.content .produkte_warenkorb .produkte_details .eingabefeld_entfernen {
align-self: flex-end;
margin-top: -30px;
} }
.content .produkte_details p{
margin-left: 0;
}
.button_mit_menue { .button_mit_menue {
display: flex; display: flex;
@ -448,7 +466,7 @@
} }
.button_mit_menue p{ .button_mit_menue p{
margin-left: -45px; margin-left: 10px;
} }
#menue1, #menue1,
@ -459,8 +477,10 @@
#menue6 { #menue6 {
width: 35px; width: 35px;
height: 25px; height: 25px;
margin-left: 10px; margin-left: 10px;
} }
.button_entfernen { .button_entfernen {
background-color: #ebebeb; background-color: #ebebeb;
@ -594,8 +614,10 @@
cursor: pointer; cursor: pointer;
font-weight: normal; font-weight: normal;
} }
.content .mobile_ansicht{ .content .mobile_ansicht{
position: relative;
z-index: -10;
margin-left: -55px; margin-left: -55px;
} }

View File

@ -80,13 +80,13 @@
</p> </p>
<p>Stand: 6. April 2023</p> <p>Stand: 6. April 2023</p>
<h3>Verantwortlicher</h3> <h3>Verantwortlicher</h3>
<ul> <p>
WEB A4 -Team</br> WEB A4 -Team</br>
Paul-Wittsack-Straße 10</br> Paul-Wittsack-Straße 10</br>
68163 Mannheim</br> 68163 Mannheim</br>
E-Mail-Adresse:</br> E-Mail-Adresse:</br>
info@secondharvest.com</br> info@secondharvest.com</br>
</ul> </p>
<h3>Übersicht der Verarbeitungen</h3> <h3>Übersicht der Verarbeitungen</h3>
<p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die <p>Die nachfolgende Übersicht fasst die Arten der verarbeiteten Daten und die
Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen. Zwecke ihrer Verarbeitung zusammen und verweist auf die betroffenen Personen.

View File

@ -67,6 +67,7 @@
<div class="content"> <div class="content">
<h1>Warenkorb</h1> <h1>Warenkorb</h1>
<div id="notification"></div> <div id="notification"></div>
<div class="desktop_ansicht"> <div class="desktop_ansicht">
<div class="produkte_warenkorb"> <div class="produkte_warenkorb">
@ -79,7 +80,7 @@
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button1">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button1">Entfernen</a></p>
<input type="text" id="menue1" value="10"> <input type="text" id="menue1" value="10">
</div> </div>
<p class="gesamtbetrag1" id="gesamtbetrag1"></p> <p class="gesamtbetrag1" id="gesamtbetrag1"></p>
</div> </div>
@ -94,7 +95,7 @@
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button2">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button2">Entfernen</a></p>
<input type="text" id="menue2" value="10"> <input type="text" id="menue2" value="10">
</div> </div>
<p class="gesamtbetrag2" id="gesamtbetrag2"></p> <p class="gesamtbetrag2" id="gesamtbetrag2"></p>
</div> </div>
@ -109,7 +110,7 @@
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button3">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button3">Entfernen</a></p>
<input type="text" id="menue3" value="10"> <input type="text" id="menue3" value="10">
</div> </div>
<p class="gesamtbetrag3" id="gesamtbetrag3"></p> <p class="gesamtbetrag3" id="gesamtbetrag3"></p>
</div> </div>
@ -127,7 +128,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="mobile_ansicht"> <div class="mobile_ansicht">
<div class="produkte_warenkorb"> <div class="produkte_warenkorb">
<div class="bild_mobil"> <div class="bild_mobil">
@ -135,47 +136,52 @@
</div> </div>
<div class="produkte_details"> <div class="produkte_details">
<p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p> <p><strong>Karotten 1kg</br>Kosten: 0,95€</strong></p>
<span class="eingabefeld_entfernen">
<input type="text" id="menue4" value="10">
</span>
</br> </br>
<p>Auf Lager: 250</p> <p>Auf Lager: 250</p>
</div> </div>
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button4">Entfernen</a></p>
<input type="text" id="menue4" value="10">
</div> </div>
<p class="gesamtbetrag4" id="gesamtbetrag4"></p> <p class="gesamtbetrag4" id="gesamtbetrag4"></p>
</div> </div>
<div class="produkte_warenkorb"> <div class="produkte_warenkorb">
<div class="bild_mobil"> <div class="bild_mobil">
<img src="pictures/aepfel_ohne_preis.png.avif" width="100" height="100" alt="aepfel"> <img src="pictures/aepfel_ohne_preis.png.avif" width="100" height="100" alt="aepfel">
</div> </div>
<div class="produkte_details"> <div class="produkte_details">
<p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p> <p><strong>Äpfel 1kg</br>Kosten: 2€</strong></p>
<span class="eingabefeld_entfernen"><input type="text"
id="menue5" value="10"></span>
</br> </br>
<p>Auf Lager: 500</p> <p>Auf Lager: 500</p>
</div> </div>
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button5">Entfernen</a></p>
<input type="text" id="menue5" value="10">
</div> </div>
<p class="gesamtbetrag5" id="gesamtbetrag5"></p> <p class="gesamtbetrag5" id="gesamtbetrag5"></p>
</div> </div>
<div class="produkte_warenkorb"> <div class="produkte_warenkorb">
<div class="bild_mobil"> <div class="bild_mobil">
<img src="pictures/sellerie_ohne_preis.webp" width="100" height="100" alt="sellerie"> <img src="pictures/sellerie_ohne_preis.webp" width="100" height="100" alt="sellerie">
</div> </div>
<div class="produkte_details"> <div class="produkte_details">
<p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p> <p><strong>Sellerie 1 Stück</br>Kosten: 1,10€</strong></p>
<span class="eingabefeld_entfernen"> <input type="text" id="menue6" value="10"></span>
</br> </br>
<p>Auf Lager: 1000</p> <p>Auf Lager: 1000</p>
</div> </div>
<div class="button_mit_menue"> <div class="button_mit_menue">
<p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p> <p><a class="button_entfernen" href="#" id="button6">Entfernen</a></p>
<input type="text" id="menue6" value="10">
</div> </div>
<p class="gesamtbetrag6" id="gesamtbetrag6"></p> <p class="gesamtbetrag6" id="gesamtbetrag6"></p>
</div> </div>
@ -187,7 +193,8 @@
<p class="gesamtpreis" id="gesamtpreis"></p> <p class="gesamtpreis" id="gesamtpreis"></p>
</div> </div>
<div> <div>
<a class="button_bestellung_abschließen" id="bestellbutton_mobil" href="bestellformular.html">Kostenpflichtig <a class="button_bestellung_abschließen" id="bestellbutton_mobil"
href="bestellformular.html">Kostenpflichtig
bestellen</a> bestellen</a>
</div> </div>
</div> </div>