Leuchtturm Stand 08.Juli

Leuchtturm/style.css

@@ -0,0 +1,99 @@
+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 */
+}