64 lines
1.3 KiB
Text
64 lines
1.3 KiB
Text
|
<footer class="photo-footer">
|
||
|
|
<div class="photo-footer-inner">
|
||
|
|
<div class="photo-footer-links">
|
||
|
|
<a href="/a-propos">À propos</a>
|
||
|
|
<a href="mailto:jalil@arfaoui.net">Contact</a>
|
||
|
|
<a href="https://instagram.com/l.i.l.a.j" target="_blank" rel="noopener noreferrer">Instagram</a>
|
||
|
|
</div>
|
||
|
|
<div class="photo-footer-copy">
|
||
|
|
© Jalil Arfaoui <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener noreferrer">Creative Commons CC-BY-NC 4.0</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.photo-footer {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
z-index: 40;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
backdrop-filter: blur(8px);
|
||
|
|
transition: transform 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.photo-footer-inner {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 20px;
|
||
|
|
height: 54px;
|
||
|
|
font-size: 16px;
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
}
|
||
|
|
|
||
|
|
.photo-footer-links {
|
||
|
|
display: flex;
|
||
|
|
gap: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.photo-footer-links a,
|
||
|
|
.photo-footer-copy,
|
||
|
|
.photo-footer-copy a {
|
||
|
|
color: rgba(255, 255, 255, 0.7);
|
||
|
|
text-decoration: none;
|
||
|
|
transition: color 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.photo-footer-links a:hover,
|
||
|
|
.photo-footer-copy a:hover {
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 640px) {
|
||
|
|
.photo-footer-inner {
|
||
|
|
flex-direction: column;
|
||
|
|
height: auto;
|
||
|
|
padding: 10px 20px;
|
||
|
|
gap: 4px;
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|