You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.2 KiB
51 lines
1.2 KiB
<script>
|
|
import { page } from "$app/stores";
|
|
console.log($page.url.pathname);
|
|
</script>
|
|
|
|
<header class="relative flex flex-col gap-10 max-w-[1400px] mx-auto my-20 dropanim">
|
|
<img src="/calculator/bannername.png" class="w-3/6 mb-10 lg:mb-0 mx-auto drop-shadow-2xl" alt="header siv kyne" />
|
|
<h1>
|
|
<img src="/calculator/banner.png" class="mb-10 lg:mb-0 mx-auto drop-shadow-2xl grow" alt="header siv kyne" />
|
|
</h1>
|
|
</header>
|
|
|
|
|
|
<style>
|
|
.dropanim {
|
|
animation: dropanim;
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes dropanim {
|
|
0% {
|
|
transform: translateY(-50vh);
|
|
}
|
|
50% {
|
|
transform: translateY(1vh);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.grow {
|
|
animation: grow;
|
|
animation-duration: 4s;
|
|
animation-timing-function: ease-in-out;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes grow {
|
|
0% {
|
|
transform: rotate3d(0, 20, 0, 20deg);
|
|
}
|
|
50% {
|
|
transform: rotate3d(0, 20, 0, -20deg);
|
|
}
|
|
100% {
|
|
transform: rotate3d(0, 20, 0, 20deg);
|
|
}
|
|
}
|
|
</style> |