add some messy footer content

This commit is contained in:
elisejakob
2024-05-10 13:25:47 +02:00
parent e1a4f3233e
commit e772441558
2 changed files with 79 additions and 4 deletions

View File

@ -12,7 +12,73 @@ export const Footer = () => {
return (
<footer className={styles.footer}>
<p>Footer med kontaktinfo og sånt</p>
<div className={styles.contact}>
<ul className={styles.contactList}>
<li className={styles.contactItem}>
<h2>Følg oss</h2>
<ul>
<li>
<a href="#" target="_blank">
Instagram
</a>
</li>
<li>
<a href="#" target="_blank">
Facebook
</a>
</li>
<li>
<a href="#" target="_blank">
Twitter
</a>
</li>
<li>
<a href="#" target="_blank">
Flickr
</a>
</li>
</ul>
</li>
<li className={styles.contactItem}>
<h2>Kontakt oss</h2>
<p>
Generell kontaktinfo
<br />
Billetter
<br />
Hittegods
<br />
Telefon/mail?
<br />
Lenke til kontakt/ansatte?
</p>
</li>
<li className={styles.contactItem}>
<h2>Besøk oss</h2>
<p>
Det Norske Studentersamfund
<br />
Slemdalsveien 15
<br />
0369 Oslo
<br />
<a href="#" target="_blank">
Vis i Google Maps
</a>
</p>
</li>
<li className={styles.contactItem}>
<h2>Åpningstider</h2>
<p>
Glassbaren
<br />
Andre lokaler?
<br />
Generelle åpningstider?
</p>
</li>
</ul>
</div>
<button onClick={scrollToTop}>Til toppen</button>
</footer>
);

View File

@ -4,8 +4,17 @@
align-items: flex-end;
padding: var(--spacing-sitepadding);
background: #ccc;
}
a {
text-decoration: none;
.contactList {
width: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: var(--spacing-gap-column);
row-gap: var(--spacing-gap-column);
}
.contactItem {
list-style: none;
grid-column: span 3;
}