DutchEllie
/
svelte-testing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animation on title!!!
continuous-integration/drone/push Build is passing Details

This commit is contained in:
DutchEllie 2022-07-02 19:05:48 +02:00
parent fc93a19f82
commit 31e0b07113
Signed by: DutchEllie
SSH Key Fingerprint: SHA256:dKq6ZSgN5E3Viqrw/+xAdf2VdR6hdRGNyrYqXXwfjTY
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/homepage/content.svelte
View File

@ -1,6 +1,6 @@
<div class="px-5 md:px-0 col-span-7 md:col-span-5"> <div class="px-5 md:px-0 col-span-7 md:col-span-5">
<h1 <h1
class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold" class="font-roboto_slab text-center text-2xl lg:text-6xl xl:text-7xl w-auto md:w-max mt-10 lg:mt-32 mx-auto font-bold h1-shadow"
> >
Welcome to my website Welcome to my website
</h1> </h1>
@ -35,3 +35,15 @@
</div> </div>
</div> </div>
</div> </div>
<!-- How to do the animation and reverse it: https://stackoverflow.com/a/44742399 -->
<style>
.h1-shadow {
text-shadow: 2px 2px gray;
transition: text-shadow 1s cubic-bezier(0.075, 0.82, 0.165, 1) ;
}
.h1-shadow:hover {
text-shadow: 5px 5px gray;
transition: text-shadow 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) ;
}
</style>