firq-dev-website/src/layouts/customFooter.astro

---

---

<footer>
    <div>Disclaimer:
        “Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets © Aniplex Inc. used under fair
        use. | View <a class="linker" href="https://fate-go.us" target="_blank" rel="noopener noreferrer">the
            official website</a> for
        more
        information
    </div>
    <div>
        Thanks to <a href=" https://atlasacademy.io/" target="_blank" rel="noopener noreferrer">Atlas Academy</a> for
        providing the images.
    </div>
    <div>
        Thanks to <a href="https://mitsunee.com" target="_blank" rel="noopener noreferrer">Mitsunee</a> for the support when building this site.
        Check out <a href="https://fgo.mitsunee.com" target="_blank" rel="noopener noreferrer">FGO Timers here</a>
        <div class="sticky-image-wrapper">
            <img src="lurker.png" alt="">
        </div>
    </div>
    <div>
        Thanks to <a href="https://twitter.com/its_Anthony_J" target="_blank" rel="noopener noreferrer">AnthonyJ</a> for providing me with the custom Shishou favicon.
        <div class="sticky-image-wrapper">
            <img src="padoru.png" alt="">
        </div>
    </div>
</footer>

<style>
    footer {
        color: white;
        bottom:0;
    }
    footer > div > a {
        color: white
    }
    .sticky-image-wrapper {
        position: fixed;
        bottom: 0;
        right: 50%;
    }
    :hover>.sticky-image-wrapper>img {
        transform: translate(-50%, -100px);
    }
    .sticky-image-wrapper>img {
        display: block;
        position: absolute;
        bottom: -100px;
        height: 64px;
        width: 64px;
        transition: transform 1s ease-in-out;
        transform: translateX(-50%);
    }
</style>