refactored css

pull/1/head
spagb0l 2023-04-24 17:04:22 +02:00
parent 7995c20b88
commit b79ed30693
16 changed files with 111 additions and 547 deletions

BIN
public/.DS_Store vendored 100644

Binary file not shown.

View File

@ -1,28 +1,15 @@
#bild { * {
float: left;
margin-right: 0.5cm;
margin-bottom: -1pt;
}
header {
background-color: #9BB558;
box-sizing: border-box; box-sizing: border-box;
padding: 10pt; font-family: Helvetica, Arial, sans-serif;
position: relative;
width: 100%;
}
html {
height: 100%
} }
body { body {
min-height: 100%; min-height: 100vh;
margin: 0; padding: 0;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: 10px; width: 10px
} }
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
@ -33,11 +20,67 @@ body::-webkit-scrollbar-thumb {
background: #476B1C; background: #476B1C;
} }
.seite { header {
background-color: #9BB558;
}
header > h1 {
padding-top: 0.3em;
padding-left: 7em;
margin: 0;
font-size: 2.5em;
}
header > p {
padding-left: 17.6em;
margin-top: 0.5em;
margin-bottom: 0;
}
.header_logo {
float: left;
margin-left: 1em;
transform: scale(1.2);
}
.navbar {
background-color: #476B1C;
display: grid;
grid-template-columns: repeat(var(--items), 1fr);
width: 100%;
}
.navbar a {
text-align: center;
text-decoration: none;
color: white;
padding: 0.5em 0 0.5em 0;
}
.content {
position: relative; position: relative;
} }
.seite::before { .content p {
margin-top: 0.1em;
margin-bottom: 0.1em;
}
.content :not(h1, strong) {
margin-left: 3.5em;
}
.content h1 {
text-align: center;
font-size: 2.5em;
}
.content h2 {
text-align: center;
}
.content::before {
content: ""; content: "";
background-image: url('gemuese_transparent.png'); background-image: url('gemuese_transparent.png');
background-repeat: no-repeat; background-repeat: no-repeat;
@ -50,14 +93,6 @@ body::-webkit-scrollbar-thumb {
opacity: 0.2; opacity: 0.2;
} }
.schrift_website {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #606060;
text-align: justify;
margin-left: 8px;
}
#begrueßung { #begrueßung {
font-size: 2em; font-size: 2em;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
@ -68,6 +103,7 @@ body::-webkit-scrollbar-thumb {
#aktuelle_auswahl { #aktuelle_auswahl {
margin-left: 2.3em;
font-size: 1.5em; font-size: 1.5em;
} }
@ -93,15 +129,6 @@ body::-webkit-scrollbar-thumb {
cursor: pointer; cursor: pointer;
} }
#ueberschrift {
margin-top: 0.5cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
font-weight: bold;
text-align: left;
line-height: 0.5;
}
#unterueberschrift { #unterueberschrift {
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em; font-size: 0.8em;
@ -109,53 +136,6 @@ body::-webkit-scrollbar-thumb {
line-height: 0; line-height: 0;
} }
#nav_oben {
background-color: #476B1C;
width: 100%;
overflow: hidden;
margin-top: -2pt;
}
#nav_oben ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_oben li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#nav_unten {
background-color: #476B1C;
width: 100%;
overflow: hidden;
}
#nav_unten ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_unten li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#balken { #balken {
background-color: #9BB558; background-color: #9BB558;
height: 20px; height: 20px;

View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title> <title>Beschreibung der Seite</title>
<link rel="stylesheet" href="index_style.css"> <link rel="stylesheet" href="css/desktop.css">
</head> </head>
<body> <body>

View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title> <title>Beschreibung der Seite</title>
<link rel="stylesheet" href="impressum_style.css"> <link rel="stylesheet" href="css/desktop.css">
</head> </head>
<body> <body>

View File

@ -1,140 +0,0 @@
#bild {
float: left;
margin-right: 0.5cm;
margin-bottom: -1pt;
}
header {
background-color: #9BB558;
box-sizing: border-box;
padding: 10pt;
position: relative;
width: 100%;
}
html {
height: 100%
}
body {
min-height: 100%;
margin: 0;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: #476B1C;
}
.seite {
position: relative;
}
.seite::before {
content: "";
background-image: url('gemuese_transparent.png');
background-repeat: no-repeat;
background-position: 50% 10%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
}
.schrift_website {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #606060;
text-align: justify;
margin-left: 8px;
}
#ueberschrift {
margin-top: 0.5cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
font-weight: bold;
text-align: left;
line-height: 0.5;
}
#unterueberschrift {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: left;
line-height: 0;
}
#nav_oben {
background-color: #476B1C;
width: 100%;
overflow: hidden;
margin-top: -2pt;
}
#nav_oben ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_oben li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#nav_unten {
background-color: #476B1C;
width: 100%;
overflow: hidden;
}
#nav_unten ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_unten li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#balken {
background-color: #9BB558;
height: 20px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
}
#begrueßung {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #606060;
text-align: center;
margin-top: 0.5px;
}
#hinweis {
color: red;
font-style: italic;
}

View File

@ -4,38 +4,33 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title> <title>Second Harvest</title>
<link rel="stylesheet" href="index_style.css"> <link rel="stylesheet" href="css/desktop.css">
</head> </head>
<body> <body>
<header> <header>
<div id="bild"> <div class="header_logo">
<a id="backlink" href="index.html"> <a href="index.html">
<img src="logo_secondharvest_transparent.png" widht="100" height="75" alt="Startseite"></a> <img src="pictures/logo_secondharvest_transparent.png" width="200" alt="Second Harvest Logo"></a>
</div> </div>
<div id="ueberschrift"> <h1>Second Harvest</h1>
Second Harvest<br /> <p>Gib Lebensmitteln eine zweite Chance</p>
</div> <nav class="navbar" style="--items: 4;">
<div id="unterueberschrift"> <a href="ueber_uns.html">Über uns</a>
<p>gib Lebensmittel eine zweite Chance</p> <a href="produkte.html">Produkte</a>
</div>
</header>
<nav id="nav_oben">
<ul>
<li><a href="ueber_uns.html">Über uns</a></li>
<li><a href="produkte.html">Produkte</a></li>
<li><a href="warenkorb.html">Warenkorb</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<div class="seite"> <a href="warenkorb.html">Warenkorb</a>
<div class="schrift_website"> <a href="kontakt.html">Kontakt</a>
<p id="begrueßung">Herzlich Willkommen</p> </nav>
</header>
<div class="content">
<h1>Herzlich Willkommen</h1>
<p>Wir freuen uns über Deinen Besuch.</p> <p>Wir freuen uns über Deinen Besuch.</p>
<p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu <p>Es ist schön zu sehen, dass immer mehr Menschen sich bewusst entscheiden, keine Lebensmittel zu
verschwenden.</p> verschwenden.</p>
<br />
<p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p> <p>Alle Produkte auf unserer Seite sind mit drei Fähnchen gekennzeichnet.</p>
<p>muss sofort verarbeitet werden</p> <p>muss sofort verarbeitet werden</p>
<p>kann ein paar Tage liegen</p> <p>kann ein paar Tage liegen</p>
@ -43,24 +38,25 @@
<p>Damit kannst du deinen Einkauf perfekt an deinen Essensplan anpassen und weißt bereits vorher, wann Du <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 etwas verbrauchen musst.<br />Bestellungen, die <strong>bis 10 Uhr</strong> bei uns eingehen, werden
<strong>noch am selben Tag</strong> <strong>noch am selben Tag</strong>
ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.</p> ausgeliefert. <br />Bestellungen nach 10, liefern wir am nächsten Tag aus.
</p>
<p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p> <p id="aktuelle_auswahl">Aktuelle Auswahl aus unserem Angebot:</p>
</div>
</div> <a class="beispiel_produkte" href="produkte.html"><img src="pictures/karotten.png" width="250" height="250"
<a class="beispiel_produkte" href="produkte.html"><img src="karotten.png" width="250" height="250"
alt="Karotten"></a> alt="Karotten"></a>
<a class="beispiel_produkte" href="produkte.html"> <a class="beispiel_produkte" href="produkte.html">
<img src="sellerie.png" width="250" height="250" alt="Sellerie"></a> <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> <p><a class="button_produkte" href="produkte.html">zu den Produkten</a></p>
<h2>Viel Spaß bei Deinem Einkauf. Dein Second Harvest Team.</h2>
</div>
<footer> <footer>
<nav id="nav_unten"> <nav class="navbar" style="--items: 2;">
<ul> <a href="impressum.html">Impressum</a>
<li><a href="impressum.html">Impressum</a></li> <a href="datenschutz.html">Datenschutz</a>
<li><a href="datenschutz.html">Datenschutz</a></li>
</ul>
<div id="balken"></div>
</nav> </nav>
<div id="balken"></div>
</footer> </footer>
</body> </body>

View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title> <title>Beschreibung der Seite</title>
<link rel="stylesheet" href="kontakt_style.css"> <link rel="stylesheet" href="css/desktop.css">
</head> </head>
<body> <body>

View File

@ -1,136 +0,0 @@
#bild {
float: left;
margin-right: 0.5cm;
margin-bottom: -1pt;
}
header {
background-color: #9BB558;
box-sizing: border-box;
padding: 10pt;
position: relative;
width: 100%;
}
html {
height: 100%
}
body {
min-height: 100%;
margin: 0;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: #476B1C;
}
.seite {
position: relative;
}
.seite::before {
content: "";
background-image: url('gemuese_transparent.png');
background-repeat: no-repeat;
background-position: 50% 10%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
}
.schrift_website {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #606060;
text-align: justify;
margin-left: 8px;
}
#ueberschrift {
margin-top: 0.5cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
font-weight: bold;
text-align: left;
line-height: 0.5;
}
#unterueberschrift {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: left;
line-height: 0;
}
#nav_oben {
background-color: #476B1C;
width: 100%;
overflow: hidden;
margin-top: -2pt;
}
#nav_oben ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_oben li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#nav_unten {
background-color: #476B1C;
width: 100%;
overflow: hidden;
}
#nav_unten ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_unten li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#balken {
background-color: #9BB558;
height: 20px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
}
#begrueßung {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #606060;
text-align: center;
margin-top: 0.5px;
}

View File

Before

Width:  |  Height:  |  Size: 366 KiB

After

Width:  |  Height:  |  Size: 366 KiB

View File

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 540 KiB

View File

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 33 KiB

View File

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 36 KiB

View File

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

View File

@ -5,7 +5,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beschreibung der Seite</title> <title>Beschreibung der Seite</title>
<link rel="stylesheet" href="ueber_uns_style.css"> <link rel="stylesheet" href="css/desktop.css">
</head> </head>
<body> <body>

View File

@ -1,136 +0,0 @@
#bild {
float: left;
margin-right: 0.5cm;
margin-bottom: -1pt;
}
header {
background-color: #9BB558;
box-sizing: border-box;
padding: 10pt;
position: relative;
width: 100%;
}
html {
height: 100%
}
body {
min-height: 100%;
margin: 0;
}
body::-webkit-scrollbar {
width: 10px;
}
body::-webkit-scrollbar-track {
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: #476B1C;
}
.seite {
position: relative;
}
.seite::before {
content: "";
background-image: url('gemuese_transparent.png');
background-repeat: no-repeat;
background-position: 50% 10%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.2;
}
.schrift_website {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #606060;
text-align: justify;
margin-left: 8px;
}
#ueberschrift {
margin-top: 0.5cm;
font-family: Arial, Helvetica, sans-serif;
font-size: 2.5em;
font-weight: bold;
text-align: left;
line-height: 0.5;
}
#unterueberschrift {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
text-align: left;
line-height: 0;
}
#nav_oben {
background-color: #476B1C;
width: 100%;
overflow: hidden;
margin-top: -2pt;
}
#nav_oben ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_oben li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#nav_unten {
background-color: #476B1C;
width: 100%;
overflow: hidden;
}
#nav_unten ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
list-style: none;
margin: 0;
padding: 0;
}
#nav_unten li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
display: block;
text-align: center;
text-decoration: none;
color: white;
}
#balken {
background-color: #9BB558;
height: 20px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
}
#begrueßung {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
color: #606060;
text-align: center;
margin-top: 0.5px;
}