Footer gemäss Vorlage neu aufgebaut
This commit is contained in:
28
index.html
28
index.html
@@ -202,21 +202,27 @@
|
||||
|
||||
<footer class="section section--light footer" id="kontakt">
|
||||
<div class="section__content footer__inner">
|
||||
<img class="brand brand--bottom footer__brand" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
|
||||
<div class="footer__column footer__column--left">
|
||||
<img
|
||||
class="brand brand--bottom footer__brand"
|
||||
src="./media/logo_unten.svg"
|
||||
alt="Fabienne Foehn"
|
||||
/>
|
||||
|
||||
<div class="footer__contact">
|
||||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||||
<a href="tel:+41786001411">+41 78 600 14 11</a>
|
||||
<div class="footer__contact">
|
||||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||||
<a href="tel:+41786001411">+41 78 600 14 11</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer__claim">
|
||||
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
|
||||
<p>Wer nicht losgeht bleibt stehen.</p>
|
||||
<div class="footer__column footer__column--right">
|
||||
<div class="footer__claim">
|
||||
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
|
||||
<p>Wer nicht losgeht bleibt stehen.</p>
|
||||
</div>
|
||||
|
||||
<div class="footer__claim-meta">
|
||||
<div class="footer__accent" aria-hidden="true">
|
||||
<img src="./media/striche_blau_unter_wort.svg" alt="" />
|
||||
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" />
|
||||
</div>
|
||||
<img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
|
||||
<span>© 2026 Naurua GmbH</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
85
styles.css
85
styles.css
@@ -485,63 +485,74 @@ button {
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
min-height: 320px;
|
||||
border-top: 18px solid var(--bg-lime);
|
||||
border-top: 12px solid var(--bg-lime);
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
position: relative;
|
||||
min-height: 302px;
|
||||
padding: 0 clamp(2.5rem, 6vw, 5rem);
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.95fr) minmax(420px, 1.15fr);
|
||||
align-items: end;
|
||||
gap: clamp(2rem, 7vw, 6rem);
|
||||
min-height: 325px;
|
||||
padding: clamp(2.8rem, 5vw, 4.6rem) clamp(2.5rem, 6vw, 5rem)
|
||||
clamp(2rem, 4vw, 3rem);
|
||||
}
|
||||
|
||||
.footer__column {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.footer__column--left {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.footer__column--right {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
position: absolute;
|
||||
top: 73px;
|
||||
left: clamp(2.9rem, 5vw, 5rem);
|
||||
width: clamp(240px, 22vw, 290px);
|
||||
width: clamp(240px, 23vw, 305px);
|
||||
}
|
||||
|
||||
.footer__contact {
|
||||
position: absolute;
|
||||
left: clamp(2.9rem, 5vw, 5rem);
|
||||
bottom: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2rem;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.footer__contact a {
|
||||
width: fit-content;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-size: clamp(1.05rem, 1.72vw, 1.15rem);
|
||||
font-size: clamp(1.2rem, 1.95vw, 1.55rem);
|
||||
font-weight: var(--font-weight-black);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.footer__claim {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
right: clamp(2.5rem, 5vw, 5rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
width: clamp(490px, 47vw, 610px);
|
||||
gap: 0.3rem;
|
||||
width: min(100%, 620px);
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.section-title--claim {
|
||||
font-size: clamp(4rem, 5.85vw, 5.85rem);
|
||||
font-size: clamp(4rem, 5.7vw, 5.8rem);
|
||||
max-width: none;
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.footer__claim p {
|
||||
margin: 0;
|
||||
font-size: clamp(1rem, 1.2vw, 1.15rem);
|
||||
font-size: clamp(1.05rem, 1.3vw, 1.55rem);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
@@ -549,26 +560,21 @@ button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 1rem;
|
||||
gap: 0.85rem;
|
||||
width: 100%;
|
||||
margin-top: 0.9rem;
|
||||
margin-top: 1.6rem;
|
||||
}
|
||||
|
||||
.footer__claim span {
|
||||
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
|
||||
font-size: clamp(1rem, 1.15vw, 1.1rem);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
.footer__accent {
|
||||
width: clamp(255px, 22vw, 300px);
|
||||
.footer__wave {
|
||||
width: clamp(240px, 24vw, 330px);
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.footer__accent img:last-child {
|
||||
width: 82%;
|
||||
margin: -0.85rem 0 0 auto;
|
||||
}
|
||||
|
||||
.contact-flyover {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
@@ -823,7 +829,6 @@ button {
|
||||
}
|
||||
|
||||
.footer__claim {
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -832,17 +837,16 @@ button {
|
||||
}
|
||||
|
||||
.footer__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.8rem;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2rem;
|
||||
min-height: auto;
|
||||
padding-top: 2.6rem;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.footer__brand,
|
||||
.footer__contact {
|
||||
position: static;
|
||||
.footer__column--left,
|
||||
.footer__column--right {
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.footer__brand {
|
||||
@@ -855,9 +859,10 @@ button {
|
||||
|
||||
.footer__claim-meta {
|
||||
align-items: flex-start;
|
||||
margin-top: 1.15rem;
|
||||
}
|
||||
|
||||
.footer__accent {
|
||||
.footer__wave {
|
||||
width: 180px;
|
||||
margin-top: 0.5rem;
|
||||
margin-left: 0;
|
||||
|
||||
Reference in New Issue
Block a user