Max
100 lines
1.7 KiB
CSS
100 lines
1.7 KiB
CSS
body {
|
|
margin: 0 auto;
|
|
height: 100vh;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
}
|
|
|
|
header {
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 1em 0 3em;
|
|
background: linear-gradient(to top, deepskyblue, ivory);
|
|
}
|
|
|
|
footer {
|
|
margin: 0;
|
|
text-align: center;
|
|
padding: 3em 0 1em;
|
|
background-color: ivory;
|
|
}
|
|
|
|
footer > *, header > * {
|
|
padding: .5rem;
|
|
}
|
|
button {
|
|
border: none;
|
|
background-color: inherit;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: deepskyblue;
|
|
border-radius: 0.5em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
color: white;
|
|
background-color: dodgerblue;
|
|
border-radius: 0.5em;
|
|
font-weight: 800;
|
|
}
|
|
|
|
main {
|
|
background: linear-gradient(to bottom, deepskyblue, ivory);
|
|
padding: 3rem 5vw;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
main section{
|
|
margin: auto;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
grid-gap: 5rem;
|
|
place-items: center;
|
|
}
|
|
|
|
.content-img{
|
|
width: clamp(200px, 30vw, 500px);
|
|
}
|
|
|
|
main section .left{
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
main section .right{
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.content-img img {
|
|
max-width: 100%;
|
|
transition: .5s ease;
|
|
border: 2px solid dodgerblue;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.content-img img:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.content-img.left img:hover {
|
|
transform-origin: top left;
|
|
}
|
|
|
|
.content-img.right img:hover {
|
|
transform-origin: top right;
|
|
}
|
|
|
|
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 */
|
|
}
|