WEB-Team-A4/public/css/desktop.css

130 lines
1.9 KiB
CSS
Raw Normal View History

2023-04-24 17:04:22 +02:00
* {
2023-04-21 09:31:06 +02:00
box-sizing: border-box;
2023-04-24 17:04:22 +02:00
font-family: Helvetica, Arial, sans-serif;
2023-04-21 09:31:06 +02:00
}
body {
2023-04-24 17:04:22 +02:00
min-height: 100vh;
padding: 0;
2023-04-21 09:31:06 +02:00
}
body::-webkit-scrollbar {
2023-04-24 17:04:22 +02:00
width: 10px
2023-04-21 09:31:06 +02:00
}
body::-webkit-scrollbar-track {
background-color: white;
}
body::-webkit-scrollbar-thumb {
background: #476B1C;
}
2023-04-24 17:04:22 +02:00
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 {
2023-04-21 09:31:06 +02:00
position: relative;
}
2023-04-24 17:04:22 +02:00
.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 {
2023-04-21 09:31:06 +02:00
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;
}
#aktuelle_auswahl {
2023-04-24 17:04:22 +02:00
margin-left: 2.3em;
2023-04-21 09:31:06 +02:00
font-size: 1.5em;
}
.beispiel_produkte {
margin: 10px;
margin-left: 8px;
}
.beispiel_produkte img {
border: #606060 1px solid;
}
.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;
margin: 4px 2px;
cursor: pointer;
}
#balken {
background-color: #9BB558;
height: 20px;
position: relative;
left: 0;
bottom: 0;
width: 100%;
}