Max
114 lines
1.8 KiB
CSS
114 lines
1.8 KiB
CSS
/*
|
|
* Seitenaufbau allgemein
|
|
*/
|
|
|
|
body {
|
|
margin: 0 auto;
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 1rem 0 1.5rem;
|
|
background: linear-gradient(to top, deepskyblue, ivory);
|
|
}
|
|
|
|
main {
|
|
background: linear-gradient(to bottom, deepskyblue, ivory);
|
|
padding: 3rem 5vw;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
footer {
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 1.5rem 0 1rem;
|
|
background-color: ivory;
|
|
}
|
|
|
|
footer > *, header > * {
|
|
padding: .5rem;
|
|
}
|
|
|
|
/*
|
|
* Darstellung Buttons und Links
|
|
*/
|
|
|
|
button {
|
|
border: none;
|
|
background-color: inherit;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: deepskyblue;
|
|
border-radius: .5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
color: white;
|
|
background-color: dodgerblue;
|
|
border-radius: .5rem;
|
|
font-weight: 800;
|
|
}
|
|
|
|
a{
|
|
text-decoration: none; /* Entfernt die Unterstreichung von Links */
|
|
font-weight: bolder; /* Macht den Text fett */
|
|
color: grey; /* Setzt die Textfarbe auf grau */
|
|
}
|
|
|
|
a:hover{
|
|
color: black; /* Ändert die Textfarbe auf schwarz beim Hover */
|
|
}
|
|
|
|
/*
|
|
* Aufbau Main-Content
|
|
*/
|
|
main section{
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-gap: 5rem;
|
|
place-items: center;
|
|
}
|
|
|
|
main section {
|
|
.left{
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.right{
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.content-img{
|
|
width: clamp(200px, 30vw, 500px);
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
transition: .5s ease;
|
|
border: 2px solid dodgerblue;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
img:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.left img:hover {
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.right img:hover {
|
|
transform-origin: top right;
|
|
}
|
|
}
|