feat(ui): ✨ add footer
This commit is contained in:
parent
f8d7cfdb34
commit
e1a7686992
29
components/Footer.css
Normal file
29
components/Footer.css
Normal file
|
@ -0,0 +1,29 @@
|
|||
footer {
|
||||
height: fit-content;
|
||||
width: 100%;
|
||||
padding: var(--_gap);
|
||||
display: flex;
|
||||
gap: var(--_gap);
|
||||
justify-content: space-around;
|
||||
background-color: var(--_translucent);
|
||||
}
|
||||
|
||||
.footer__badges {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--_gap-half);
|
||||
padding-top: var(--_gap);
|
||||
}
|
||||
|
||||
.footer__badges__item {
|
||||
text-decoration: none;
|
||||
background-color: var(--_translucent);
|
||||
color: var(--_font-color);
|
||||
padding: var(--_gap-half);
|
||||
border-radius: var(--radius-5);
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: var(--_accent-color);
|
||||
}
|
||||
}
|
87
components/Footer.tsx
Normal file
87
components/Footer.tsx
Normal file
|
@ -0,0 +1,87 @@
|
|||
export function Footer() {
|
||||
return (
|
||||
<footer>
|
||||
<section>
|
||||
<h3>Contact</h3>
|
||||
<p>
|
||||
<a href='tel:+33556847961'>
|
||||
<i class='ri-phone-line'></i> 05 56 84 79 61
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href='mailto:fablab@iut.u-bordeaux.fr'>
|
||||
<i class='ri-mail-line'></i> fablab@iut.u-bordeaux.fr
|
||||
</a>
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Nous rencontrer</h3>
|
||||
<p>
|
||||
<a
|
||||
href='https://www.openstreetmap.org/search?whereami=1&query=44.79115%2C-0.60810#map=19/44.79115/-0.60810'
|
||||
target='_blank'
|
||||
>
|
||||
<i class='ri-road-map-line'></i>{' '}
|
||||
IUT de Bordeaux, Bâtiment 10A, 15 rue Naudet, 33170 GRADIGNAN
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
<i class='ri-time-line'></i> Mardi - Vendredi (10h - 18h)
|
||||
</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Réseaux</h3>
|
||||
<div class='footer__badges'>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://tube.aquilenet.fr/c/cohabit_fablab/videos'
|
||||
target='_blank'
|
||||
title='Peertube'
|
||||
>
|
||||
<i class='ri-play-line'></i>
|
||||
</a>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://www.facebook.com/people/Fablab-Cohabit/100069798301175/'
|
||||
target='_blank'
|
||||
title='Facebook'
|
||||
>
|
||||
<i class='ri-facebook-line'></i>
|
||||
</a>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://www.instagram.com/fablabcohabit/'
|
||||
target='_blank'
|
||||
title='Instagram'
|
||||
>
|
||||
<i class='ri-instagram-line'></i>
|
||||
</a>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://www.linkedin.com/company/fablab-cohabit/about/'
|
||||
target='_blank'
|
||||
title='LinkedIn'
|
||||
>
|
||||
<i class='ri-linkedin-line'></i>
|
||||
</a>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://toot.aquilenet.fr/@cohabitfablab'
|
||||
target='_blank'
|
||||
title='Mastodon'
|
||||
>
|
||||
<i class='ri-mastodon-line'></i>
|
||||
</a>
|
||||
<a
|
||||
class='footer__badges__item'
|
||||
href='https://matrix.to/#/!thtlRrlXFrbifqMNCG:matrix.org?via=matrix.org'
|
||||
target='_blank'
|
||||
title='Matrix'
|
||||
>
|
||||
[m]
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
)
|
||||
}
|
|
@ -1 +1,2 @@
|
|||
@import url('../../components/Header.css');
|
||||
@import url('../../components/Footer.css');
|
||||
|
|
Loading…
Reference in a new issue