gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer neu layouten

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-22 18:17:33 +01:00
parent ce402c693a
commit d9de4ab61f
3 changed files with 148 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -201,21 +201,26 @@
</section> </section>
<footer class="section section--light footer" id="kontakt"> <footer class="section section--light footer" id="kontakt">
<div class="section__content footer__contact"> <div class="section__content footer__inner">
<img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" /> <div class="footer__contact">
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a> <img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
<a href="tel:+41786001411">+41 78 600 14 11</a> <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
</div> <a href="tel:+41786001411">+41 78 600 14 11</a>
</div>
<div class="section__content footer__claim">
<h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2> <div class="footer__claim">
<p>Wer nicht losgeht bleibt stehen.</p> <h2 class="section-title section-title--claim">Wer losgeht, kommt an.</h2>
<div class="footer__accent" aria-hidden="true"> <p>Wer nicht losgeht bleibt stehen.</p>
<img src="./media/striche_blau_unter_wort.svg" alt="" /> <div class="footer__claim-meta">
<img src="./media/strichlein_rgruen_unter_wort.svg" alt="" /> <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>
<span>© 2026 Naurua GmbH</span>
</div>
</div> </div>
<span>© 2026 Naurua GmbH</span>
</div> </div>
<img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
</footer> </footer>
</main> </main>
</div> </div>

62
media/welle_unten_seite.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

88
styles.css
View File

@@ -101,8 +101,7 @@ button {
} }
.hero, .hero,
.about, .about {
.footer {
display: grid; display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
@@ -486,7 +485,19 @@ button {
} }
.footer { .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; 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 { .footer__contact {
@@ -494,51 +505,72 @@ button {
flex-direction: column; flex-direction: column;
gap: 1.05rem; gap: 1.05rem;
justify-content: end; justify-content: end;
padding-top: clamp(3rem, 5vw, 4.5rem); align-self: end;
padding-bottom: clamp(3rem, 5vw, 4.5rem); padding: 0;
} }
.footer__contact a { .footer__contact a {
width: fit-content; width: fit-content;
color: inherit; color: inherit;
text-decoration: none; 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 { .footer__claim {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: 0.35rem; justify-self: end;
padding-top: clamp(3rem, 5vw, 4.5rem); align-self: start;
padding-bottom: clamp(3rem, 5vw, 4.5rem); width: min(100%, 36rem);
gap: 0.45rem;
padding: 0;
} }
.section-title--claim { .section-title--claim {
font-size: clamp(3rem, 5vw, 5.4rem); font-size: clamp(3.35rem, 5.7vw, 5.85rem);
max-width: 8.2ch; max-width: 7.7ch;
line-height: 0.92;
} }
.footer__claim p { .footer__claim p {
margin: 0;
font-weight: var(--font-weight-bold); 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 { .footer__claim span {
margin-top: 1.8rem;
font-size: 1rem; font-size: 1rem;
font-weight: var(--font-weight-bold);
} }
.footer__accent { .footer__accent {
position: absolute; width: clamp(220px, 22vw, 300px);
right: 2.2rem; margin-left: auto;
bottom: 3.6rem;
width: 230px;
} }
.footer__accent img:last-child { .footer__accent img:last-child {
width: 58%; width: 78%;
margin: -0.8rem 0 0 auto; margin: -0.95rem 0 0 auto;
}
.footer__wave {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: auto;
pointer-events: none;
} }
.contact-flyover { .contact-flyover {
@@ -795,17 +827,33 @@ button {
} }
.footer__claim { .footer__claim {
padding-top: 0; justify-self: start;
width: 100%;
} }
.footer__claim h2 { .footer__claim h2 {
font-size: clamp(3rem, 16vw, 4.8rem); 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 { .footer__accent {
position: static;
width: 180px; width: 180px;
margin-top: 0.5rem; margin-top: 0.5rem;
margin-left: 0;
} }
.contact-flyover__panel { .contact-flyover__panel {