diff --git a/index.html b/index.html index 9bc4c13..5122490 100644 --- a/index.html +++ b/index.html @@ -201,21 +201,26 @@ diff --git a/media/welle_unten_seite.svg b/media/welle_unten_seite.svg new file mode 100644 index 0000000..507edb4 --- /dev/null +++ b/media/welle_unten_seite.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/styles.css b/styles.css index 6108b34..93c7d39 100644 --- a/styles.css +++ b/styles.css @@ -101,8 +101,7 @@ button { } .hero, -.about, -.footer { +.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @@ -486,7 +485,19 @@ button { } .footer { + padding-bottom: clamp(4.5rem, 9vw, 8rem); +} + +.footer__inner { + position: relative; + z-index: 1; + display: grid; + grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); + gap: clamp(2rem, 5vw, 5rem); align-items: end; + min-height: clamp(320px, 31vw, 420px); + padding-top: clamp(3rem, 5vw, 4.5rem); + padding-bottom: clamp(2.5rem, 4vw, 4rem); } .footer__contact { @@ -494,51 +505,72 @@ button { flex-direction: column; gap: 1.05rem; justify-content: end; - padding-top: clamp(3rem, 5vw, 4.5rem); - padding-bottom: clamp(3rem, 5vw, 4.5rem); + align-self: end; + padding: 0; } .footer__contact a { width: fit-content; color: inherit; text-decoration: none; - font-size: clamp(1.2rem, 1.6vw, 2rem); + font-size: clamp(1.1rem, 1.75vw, 2rem); + font-weight: var(--font-weight-black); + line-height: 1.05; } .footer__claim { - position: relative; display: flex; flex-direction: column; align-items: flex-start; - gap: 0.35rem; - padding-top: clamp(3rem, 5vw, 4.5rem); - padding-bottom: clamp(3rem, 5vw, 4.5rem); + justify-self: end; + align-self: start; + width: min(100%, 36rem); + gap: 0.45rem; + padding: 0; } .section-title--claim { - font-size: clamp(3rem, 5vw, 5.4rem); - max-width: 8.2ch; + font-size: clamp(3.35rem, 5.7vw, 5.85rem); + max-width: 7.7ch; + line-height: 0.92; } .footer__claim p { + margin: 0; font-weight: var(--font-weight-bold); } +.footer__claim-meta { + display: flex; + flex-direction: column; + align-items: flex-end; + gap: 1.2rem; + width: 100%; + margin-top: 1.15rem; +} + .footer__claim span { - margin-top: 1.8rem; font-size: 1rem; + font-weight: var(--font-weight-bold); } .footer__accent { - position: absolute; - right: 2.2rem; - bottom: 3.6rem; - width: 230px; + width: clamp(220px, 22vw, 300px); + margin-left: auto; } .footer__accent img:last-child { - width: 58%; - margin: -0.8rem 0 0 auto; + width: 78%; + margin: -0.95rem 0 0 auto; +} + +.footer__wave { + position: absolute; + right: 0; + bottom: 0; + width: 100%; + height: auto; + pointer-events: none; } .contact-flyover { @@ -795,17 +827,33 @@ button { } .footer__claim { - padding-top: 0; + justify-self: start; + width: 100%; } .footer__claim h2 { font-size: clamp(3rem, 16vw, 4.8rem); } + .footer__inner { + grid-template-columns: 1fr; + align-items: start; + min-height: auto; + padding-bottom: 2rem; + } + + .footer__contact { + gap: 0.8rem; + } + + .footer__claim-meta { + align-items: flex-start; + } + .footer__accent { - position: static; width: 180px; margin-top: 0.5rem; + margin-left: 0; } .contact-flyover__panel {