-
diff --git a/public/css/desktop.css b/public/css/desktop.css
index 42cc7c6..eeccd96 100644
--- a/public/css/desktop.css
+++ b/public/css/desktop.css
@@ -1,517 +1,514 @@
-/* DESKTOP Version T4Web 0.1 */
-
-/* NONE FROM MOBILE */
-
-.header_mobile {
- display: none;
-}
-
-.header_mobilelogo {
- display: none;
-}
-
-.navbar-mobile {
- display: none;
-}
-
-/* ALL-FORMAT */
-
-* {
- box-sizing: border-box;
- font-family: Helvetica, Arial, sans-serif;
-}
-
-#hinweis {
- color: red;
-}
-
-/* BACKGROUND-IMAGE-FORMAT-DESKTOP */
-
-html body.index .content::before,
-html body.datenschutz .content::before,
-html body.ueberuns .content::before,
-html body.kontakt .content::before,
-html body.impressum .content::before {
- content: "";
- background-image: url('../pictures/gemuese_transparent.png');
- background-repeat: no-repeat;
- background-position: center top;
- background-size: 470px;
- position: absolute;
- overflow: auto;
- top: 20px;
- right: 0px;
- bottom: 0px;
- left: 0px;
- opacity: 0.2;
- pointer-events: none;
-}
-
-/* NAV-DESKTOP-FORMAT */
-
-.navbar-desktop {
- background-color: #476B1C;
- display: grid;
- grid-template-columns: repeat(var(--items), 1fr);
- width: 100%;
-}
-
-.navbar-desktop a {
- text-align: center;
- text-decoration: none;
- color: white;
- padding: 0.5em 0 0.5em 0;
-}
-
-.navbar-desktop a:hover {
- color: #f4eb49;
-}
-
-/* BODY-FORMAT */
-
-body {
- min-height: 100vh;
- padding: 0;
-}
-
-body::-webkit-scrollbar {
- width: 10px
-}
-
-body::-webkit-scrollbar-track {
- background-color: white;
-}
-
-body::-webkit-scrollbar-thumb {
- background: #476B1C;
-}
-
-/* HEADER-FORMAT */
-
-header {
- background-color: #9BB558;
-
-}
-
-.header_desktop>h1 {
- padding-top: 0.1em;
- padding-left: 7em;
- margin: 0;
- font-size: 1.875em;
-}
-
-.header_desktop>p {
- padding-left: 17.6em;
- margin-top: 0em;
- margin-bottom: 0.5em;
- font-size: 0.75em;
-}
-
-.header_logo {
- float: left;
- margin-top: -18px;
- margin-bottom: -20px;
- margin-left: -20px;
- transform: scale(0.8);
-}
-
-/* CONTENT-FORMAT */
-
-.content {
- position: relative;
- color: black;
-}
-
-.content p {
- margin-top: 0.1em;
- margin-bottom: 0.1em;
-}
-
-.content :not(h1, strong, a) {
- margin-left: 3.5em;
- color: #606060;
-}
-
-.content h1 {
- text-align: center;
- font-size: 1.875em;
- font-weight: normal;
- margin-top: 0;
-}
-
-.content h2 {
- font-size: 1em;
- text-align: center;
-}
-
-.content a {
- margin-left: 0em;
-}
-
-/* PRODUKTE-FORMAT */
-
-#aktuelle_auswahl {
- margin-left: 2.7em;
- margin-bottom: -0.5em;
- font-size: 1em;
-}
-
-
-.beispiel_produkte img {
- border: #606060 1px solid;
- height: 160px;
- width: 150px;
- margin-top: 1em;
- margin-left: 2em;
-
-}
-
-.button_produkte {
- background-color: #476B1C;
- color: #fff;
- padding: 5px 20px;
- border-radius: 15px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 1em;
- cursor: pointer;
- margin-left: -1em;
-}
-
-a:hover {
- color: #f4eb49;
-}
-
-
-/* FOOTER-FORMAT */
-
-#balken {
- background-color: #9BB558;
- height: 20px;
- position: relative;
- left: 0;
- bottom: 0;
- width: 100%;
-}
-
-/* BESTELLUNG-FORMAT */
-
-input {
- font-family: Arial, Helvetica, sans-serif;
- color: #606060
-}
-
-
-label {
- font-weight: normal;
- border: none;
-}
-
-#anrede,
-#titel,
-#vorname,
-#name,
-#straße,
-#hausnummer,
-#plz,
-#wohnort,
-#email {
- border: none;
- width: 600px;
-}
-
-.bestellung_tabelle {
- font-family: Arial, Helvetica, sans-serif;
- font-size: 0.8em;
- color: #606060;
- text-align: left;
- margin-top: 30px;
- margin-left: 50px;
- border: thin solid #606060;
- border-collapse: collapse;
-}
-
-.bestellung_tabelle th {
- border: thin solid #606060;
-}
-
-.bestellung_tabelle td {
- border: thin solid #606060;
- width: 600px;
-}
-
-.bestellung_tabelle tr {
- height: 25px;
-}
-
-.stern {
- width: 30px;
- text-align: center;
-}
-
-.feld_vorn {
- width: 115px;
-}
-
-#tabellenbeschreibung {
- font-size: 0.8em;
- margin-top: 6px;
- margin-left: 60px;
-}
-
-#gesamtkosten {
- font-size: 1em;
- color: black;
- margin-top: 40px;
- margin-left: 50px;
-}
-
-.checkboxen {
- display: inline-block;
- font-size: 0.8em;
- text-align: justify;
-}
-
-.checkbox_ausrichtung {
- margin-left: 50px;
-}
-
-#begrueßung_bestellung_abschließen {
- font-size: 2em;
- font-family: Arial, Helvetica, sans-serif;
- color: black;
- text-align: center;
- margin-top: 0.5px;
-}
-
-.button_abschließen {
- background-color: #476B1C;
- color: white;
- padding: 3px 10px;
- border-radius: 6px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 0.8em;
- margin: 4px 2px;
- cursor: pointer;
- font-weight: normal;
-}
-
-.button_abschließen_position {
- margin-left: 100px;
-}
-
-.produktueberschrift {
- text-align: center;
- margin: 50px;
-}
-
-.parent {
- display: flex;
- justify-content: space-around;
- flex-wrap: wrap;
- align-content: center;
-}
-
-.produkte {
- display: flex;
- border: #606060 3px solid;
- display: inline-block;
- margin: 25px;
-}
-
-.produktbottom {
- justify-content: space-between;
- display: flex;
- margin: 10px;
-}
-
-.produktbottom a {
- position: relative;
-}
-
-.produkte_warenkorb {
- position: relative;
- max-width: 88%;
- height: 165px;
- border: thin solid #606060;
- margin-top: 22.5px;
- margin-bottom: 22.5px;
- display: flex;
- align-items: center;
-}
-
-.produkte_warenkorb img {
- margin-right: 0px;
- height: 60%;
-
-}
-
-.content .produkte_details {
- color: black;
- font-weight: bold;
- width: 150px;
- display: block;
- font-size: 0.8em;
- margin-top: -40px;
-}
-
-.button_mit_menue {
- display: flex;
- align-items: center;
- position: absolute;
- bottom: 50px;
- right: 30px;
-
-}
-
-.button_entfernen {
- background-color: #ebebeb;
- border: thin solid black;
- color: black;
- width: 115px;
- height: 31px;
- padding: 6px;
- border-radius: 3px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 0.8em;
- margin: 4px 2px;
- cursor: pointer;
- font-weight: normal;
-
-}
-
-#menue {
- width: 35px;
- height: 25px;
- margin-left: 10px;
-}
-
-.content .gesamtbetrag {
- font-weight: bold;
- color: black;
- position: absolute;
- font-size: 1em;
- bottom: 15px;
- right: 15px;
-}
-
-.gesamtbetrag {
- position: absolute;
- font-size: 1em;
- bottom: 15px;
- right: 15px;
-}
-
-.button_hinzufuegen {
- background-color: #9BB558;
- color: white;
- padding: 10px;
- border-radius: 50%;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 0.8em;
- cursor: pointer;
- width: 35px;
- height: 35px;
- position: relative;
- box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
- margin-top: 0.5em;
-}
-
-.button_hinzufuegen::before {
- content: "+";
- position: absolute;
- transform: translate(-50%, -40%);
- font-size: 3em;
- font-weight: normal;
-}
-
-#notification {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- background-color: #4CAF50;
- color: white;
- text-align: center;
- padding: 10px;
- z-index: 999;
-}
-
-.content .äußererContainer {
- position: relative;
- bottom: 0;
- width: 400px;
- padding-left: 50px;
- margin-top: 22.5px;
- margin-left: auto;
- margin-bottom: 22.5px;
- display: grid;
- grid-template-rows: auto auto;
-}
-
-.content .kostenContainer {
-
- position: relative;
- width: 300px;
- height: 60px;
- font-weight: bold;
- font-size: 0.9em;
- display: inline-block;
- margin-left: 0px;
-}
-
-.content .lieferkosten_text {
- color: black;
- display: inline-block;
- margin-left: 0px;
- margin-right: 110px;
- text-align: right;
-}
-
-.content .lieferkosten_preis {
- color: black;
- display: inline-block;
-}
-
-.content .gesamtkosten_text {
- color: black;
- display: inline-block;
- text-align: left;
- margin-left: 0;
- margin-right: 63px;
-}
-
-.content .gesamtpreis {
- color: black;
- display: inline-block;
- margin-left: 0;
-
-}
-
-.content .button_bestellung_abschließen {
- background-color: #476B1C;
- color: white;
- padding: 3px 10px;
- border-radius: 6px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 0.8em;
- margin: 4px 2px;
- cursor: pointer;
- font-weight: normal;
-}
-
-#fehlerbox {
- text-align: center;
- display: none;
- color: red;
-}
\ No newline at end of file
+
+ /* DESKTOP Version T4Web 0.1 */
+
+ /* NONE FROM MOBILE */
+
+ .header_mobile {
+ display:none;
+ }
+ .header_mobilelogo {
+ display:none;
+ }
+ .navbar-mobile{
+ display:none;
+ }
+
+ #greeting-mobile {
+ display:none;
+ }
+
+ /* ALL-FORMAT */
+
+ * {
+ box-sizing: border-box;
+ font-family: Helvetica, Arial, sans-serif;
+ }
+
+ #hinweis {
+ color: red;
+ }
+
+ /* BACKGROUND-IMAGE-FORMAT-DESKTOP */
+
+ html body.index .content::before,
+ html body.datenschutz .content::before,
+ html body.ueberuns .content::before,
+ html body.kontakt .content::before,
+ html body.impressum .content::before {
+ content: "";
+ background-image: url('../pictures/gemuese_transparent.png');
+ background-repeat: no-repeat;
+ background-position: center top;
+ background-size: 470px;
+ position: absolute;
+ overflow: auto;
+ top: 20px;
+ right: 0px;
+ bottom: 0px;
+ left: 0px;
+ opacity: 0.2;
+ pointer-events: none;
+ }
+
+ /* NAV-DESKTOP-FORMAT */
+
+ .navbar-desktop {
+ background-color: #476B1C;
+ display: grid;
+ grid-template-columns: repeat(var(--items), 1fr);
+ width: 100%;
+ }
+
+ .navbar-desktop a {
+ text-align: center;
+ text-decoration: none;
+ color: white;
+ padding: 0.5em 0 0.5em 0;
+ }
+
+ .navbar-desktop a:hover {
+ color: #f4eb49;
+ }
+
+ /* BODY-FORMAT */
+
+ body {
+ min-height: 100vh;
+ padding: 0;
+ }
+
+ body::-webkit-scrollbar {
+ width: 10px
+ }
+
+ body::-webkit-scrollbar-track {
+ background-color: white;
+ }
+
+ body::-webkit-scrollbar-thumb {
+ background: #476B1C;
+ }
+
+ /* HEADER-FORMAT */
+
+ header {
+ background-color: #9BB558;
+
+ }
+
+ .header_desktop > h1 {
+ padding-top: 0.1em;
+ padding-left: 7em;
+ margin: 0;
+ font-size: 1.875em;
+ }
+
+ .header_desktop > p {
+ padding-left: 17.6em;
+ margin-top: 0em;
+ margin-bottom: 0.5em;
+ font-size: 0.75em;
+ }
+
+ .header_logo {
+ float: left;
+ margin-top: -18px;
+ margin-bottom: -20px;
+ margin-left: -20px;
+ transform: scale(0.8);
+ }
+
+ /* CONTENT-FORMAT */
+
+ .content {
+ position: relative;
+ color: black;
+ }
+
+ .content p {
+ margin-top: 0.1em;
+ margin-bottom: 0.1em;
+ }
+
+ .content :not(h1, strong, a) {
+ margin-left: 3.5em;
+ color: #606060;
+ }
+
+ .content h1 {
+ text-align: center;
+ font-size: 1.875em;
+ font-weight: normal;
+ margin-top: 0;
+ }
+
+ .content h2 {
+ font-size: 1em;
+ text-align: center;
+ }
+
+ .content a {
+ margin-left: 0em;
+ }
+
+ /* PRODUKTE-FORMAT */
+
+ #aktuelle_auswahl {
+ margin-left: 2.7em;
+ margin-bottom: -0.5em;
+ font-size: 1em;
+ }
+
+
+ .beispiel_produkte img {
+ border: #606060 1px solid;
+ height: 160px;
+ width: 150px;
+ margin-top: 1em;
+ margin-left: 2em;
+
+ }
+
+ .button_produkte {
+ background-color: #476B1C;
+ color: #fff;
+ padding: 5px 20px;
+ border-radius: 15px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 1em;
+ cursor: pointer;
+ margin-left: -1em;
+ }
+
+ a:hover {
+ color:#f4eb49;
+ }
+
+
+ /* FOOTER-FORMAT */
+
+ #balken {
+ background-color: #9BB558;
+ height: 20px;
+ position: relative;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ }
+
+ /* BESTELLUNG-FORMAT */
+
+ input {
+ font-family: Arial, Helvetica, sans-serif;
+ color: #606060
+ }
+
+
+ label {
+ font-weight: normal;
+ border: none;
+ }
+
+ #anrede,
+ #titel,
+ #vorname,
+ #name,
+ #straße,
+ #hausnummer,
+ #plz,
+ #wohnort,
+ #email {
+ border: none;
+ width: 600px;
+ }
+
+ .bestellung_tabelle {
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 0.8em;
+ color: #606060;
+ text-align: left;
+ margin-top: 30px;
+ margin-left: 50px;
+ border: thin solid #606060;
+ border-collapse: collapse;
+ }
+
+ .bestellung_tabelle th {
+ border: thin solid #606060;
+ }
+
+ .bestellung_tabelle td {
+ border: thin solid #606060;
+ width: 600px;
+ }
+
+ .bestellung_tabelle tr {
+ height: 25px;
+ }
+
+ .stern {
+ width: 30px;
+ text-align: center;
+ }
+
+ .feld_vorn {
+ width: 115px;
+ }
+
+ #tabellenbeschreibung {
+ font-size: 0.8em;
+ margin-top: 6px;
+ margin-left: 60px;
+ }
+
+ #gesamtkosten {
+ font-size: 1em;
+ color: black;
+ margin-top: 40px;
+ margin-left: 50px;
+ }
+
+ .checkboxen {
+ display: inline-block;
+ font-size: 0.8em;
+ text-align: justify;
+ }
+
+ .checkbox_ausrichtung {
+ margin-left: 50px;
+ }
+
+ #begrueßung_bestellung_abschließen {
+ font-size: 2em;
+ font-family: Arial, Helvetica, sans-serif;
+ color: black;
+ text-align: center;
+ margin-top: 0.5px;
+ }
+
+ .button_abschließen {
+ background-color: #476B1C;
+ color: white;
+ padding: 3px 10px;
+ border-radius: 6px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 0.8em;
+ margin: 4px 2px;
+ cursor: pointer;
+ font-weight: normal;
+ }
+
+ .button_abschließen_position {
+ margin-left: 100px;
+ }
+
+ .produktueberschrift {
+ text-align: center;
+ margin: 50px;
+ }
+
+ .parent {
+ display: flex;
+ justify-content: space-around;
+ flex-wrap: wrap;
+ align-content: center;
+ }
+
+ .produkte {
+ display: flex;
+ border: #606060 3px solid;
+ display: inline-block;
+ margin: 25px;
+ }
+
+ .produktbottom {
+ justify-content: space-between;
+ display: flex;
+ margin: 10px;
+ }
+
+ .produktbottom a {
+ position: relative;
+ }
+
+ .produkte_warenkorb {
+ position: relative;
+ max-width: 88%;
+ height: 165px;
+ border: thin solid #606060;
+ margin-top: 22.5px;
+ margin-bottom: 22.5px;
+ display: flex;
+ align-items: center;
+ }
+
+ .produkte_warenkorb img {
+ margin-right: 0px;
+ height: 60%;
+
+ }
+
+ .content .produkte_details {
+ color: black;
+ font-weight: bold;
+ width: 150px;
+ display: block;
+ font-size: 0.8em;
+ margin-top: -40px;
+ }
+
+ .button_mit_menue {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ bottom: 50px;
+ right: 30px;
+
+ }
+
+ .button_entfernen {
+ background-color: #ebebeb;
+ border: thin solid black;
+ color: black;
+ width: 115px;
+ height: 31px;
+ padding: 6px;
+ border-radius: 3px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 0.8em;
+ margin: 4px 2px;
+ cursor: pointer;
+ font-weight: normal;
+
+ }
+
+ #menue {
+ width: 35px;
+ height: 25px;
+ margin-left: 10px;
+ }
+
+ .content .gesamtbetrag {
+ font-weight: bold;
+ color: black;
+ position: absolute;
+ font-size: 1em;
+ bottom: 15px;
+ right: 15px;
+ }
+
+ .gesamtbetrag {
+ position: absolute;
+ font-size: 1em;
+ bottom: 15px;
+ right: 15px;
+ }
+
+ .button_hinzufuegen {
+ background-color: #9BB558;
+ color: white;
+ padding: 10px;
+ border-radius: 50%;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 0.8em;
+ cursor: pointer;
+ width: 35px;
+ height: 35px;
+ position: relative;
+ box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
+ margin-top: 0.5em;
+ }
+
+ .button_hinzufuegen::before {
+ content: "+";
+ position: absolute;
+ transform: translate(-50%, -40%);
+ font-size: 3em;
+ font-weight: normal;
+ }
+
+ #notification {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ background-color: #4CAF50;
+ color: white;
+ text-align: center;
+ padding: 10px;
+ z-index: 999;
+ }
+
+ .content .äußererContainer {
+ position: relative;
+ bottom: 0;
+ width: 400px;
+ padding-left: 50px;
+ margin-top: 22.5px;
+ margin-left: auto;
+ margin-bottom: 22.5px;
+ display: grid;
+ grid-template-rows: auto auto;
+ }
+
+ .content .kostenContainer {
+
+ position: relative;
+ width: 300px;
+ height: 60px;
+ font-weight: bold;
+ font-size: 0.9em;
+ display: inline-block;
+ margin-left: 0px;
+ }
+
+ .content .lieferkosten_text {
+ color: black;
+ display: inline-block;
+ margin-left: 0px;
+ margin-right: 110px;
+ text-align: right;
+ }
+
+ .content .lieferkosten_preis {
+ color: black;
+ display: inline-block;
+ }
+
+ .content .gesamtkosten_text{
+ color: black;
+ display: inline-block;
+ text-align: left;
+ margin-left: 0;
+ margin-right: 63px;
+ }
+
+ .content .gesamtpreis{
+ color: black;
+ display: inline-block;
+ margin-left: 0;
+
+ }
+
+ .content .button_bestellung_abschließen {
+ background-color: #476B1C;
+ color: white;
+ padding: 3px 10px;
+ border-radius: 6px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 0.8em;
+ margin: 4px 2px;
+ cursor: pointer;
+ font-weight: normal;
+ }
diff --git a/public/css/mobile.css b/public/css/mobile.css
index d1ba3e1..4f08706 100644
--- a/public/css/mobile.css
+++ b/public/css/mobile.css
@@ -19,6 +19,22 @@
display:none;
}
+ #aktuelle_auswahl {
+ display:none;
+ }
+
+ .beispiel_produkte {
+ display:none;
+ }
+
+ .button_produkte {
+ display:none;
+ }
+
+ #greeting-desktop {
+ display:none;
+ }
+
/* ALL-FORMAT */
* {
@@ -63,14 +79,9 @@
/* NAV-MOBILE-FORMAT */
.navbar-mobile {
- display: grid;
- grid-template-columns: 380px auto;
- background-image: url('../pictures/mobile_header.png');
- background-repeat: no-repeat;
- background-position: center;
- background-size: cover;
- position: sticky;
- height: 60px;
+ display:grid;
+ grid-template-columns: 60px auto auto;
+ grid-template-rows: 60px;
}
.navbar-mobile .nav-container a {
@@ -86,16 +97,15 @@
color: #f4eb49;
}
- /*.nav-container {
-
- }*/
+ .nav-container {
+ background-color: #476B1C;
+ }
.nav-container .checkbox {
position: absolute;
display: flex;
height: 60px;
width: 60px;
- background: #476B1C;
top: 0px;
left: 0px;
z-index: 3;
@@ -104,10 +114,10 @@
}
.nav-container .hamburger-lines {
- height: 26px;
- width: 32px;
+ height: 30px;
+ width: 36px;
position: absolute;
- top: 17px;
+ top: 20px;
left: 20px;
z-index: 0;
display: flex;
@@ -117,7 +127,7 @@
.nav-container .hamburger-lines .line {
display: block;
- height: 6px;
+ height: 7px;
width: 100%;
border-radius: 0px;
background: #fff;
@@ -142,7 +152,7 @@
padding-top: 15px;
background-color: #476B1C;
height: 35vh;
- width: 80%;
+ width: 380%;
transform: translate(-150%);
display: flex;
flex-direction: column;
@@ -189,10 +199,27 @@
/* HEADER-FORMAT */
- header {
+ #header-mobile-farbe {
background-color: #9BB558;
}
+ .header-mobile-text h1 {
+ margin-left: 2%;
+ font-size:1.0em;
+ margin-top:0.5em;
+
+ }
+
+ .header-mobile-text p {
+ margin-left: 2%;
+ font-size:0.8em;
+ margin-top:-0.5em;
+ }
+
+ .header-mobile-logo {
+ background-position: center;
+ }
+
/* CONTENT-FORMAT */
.content {
@@ -246,19 +273,6 @@
margin-left: 2em;
}
-
- .button_produkte {
- background-color: #476B1C;
- color: white;
- padding: 5px 20px;
- border-radius: 15px;
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 1em;
- cursor: pointer;
- margin-left: -1em;
- }
a:hover {
color:#f4eb49;
diff --git a/public/datenschutz.html b/public/datenschutz.html
index ab9d8ec..a3b9053 100644
--- a/public/datenschutz.html
+++ b/public/datenschutz.html
@@ -15,21 +15,31 @@