Footer neu layouten
This commit is contained in:
31
index.html
31
index.html
@@ -201,21 +201,26 @@
|
||||
</section>
|
||||
|
||||
<footer class="section section--light footer" id="kontakt">
|
||||
<div class="section__content footer__contact">
|
||||
<img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
|
||||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||||
<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>
|
||||
<p>Wer nicht losgeht bleibt stehen.</p>
|
||||
<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 class="section__content footer__inner">
|
||||
<div class="footer__contact">
|
||||
<img class="brand brand--bottom" src="./media/logo_unten.svg" alt="Fabienne Foehn" />
|
||||
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
|
||||
<a href="tel:+41786001411">+41 78 600 14 11</a>
|
||||
</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__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>
|
||||
<span>© 2026 Naurua GmbH</span>
|
||||
</div>
|
||||
</div>
|
||||
<span>© 2026 Naurua GmbH</span>
|
||||
</div>
|
||||
<img class="footer__wave" src="./media/welle_unten_seite.svg" alt="" aria-hidden="true" />
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
62
media/welle_unten_seite.svg
Normal file
62
media/welle_unten_seite.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.2 MiB |
88
styles.css
88
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 {
|
||||
|
||||
Reference in New Issue
Block a user