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.
56 lines
2.0 KiB
56 lines
2.0 KiB
<script>
|
|
import CalculatorHeader from "$lib/calculator/CalculatorHeader.svelte";
|
|
import Footer from "$lib/footer/Footer.svelte";
|
|
import "../../app.css";
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://sivkyne.xyz" />
|
|
<meta property="og:image" content="https://sivkyne.xyz/pic.png" />
|
|
<meta name="theme-color" content="rgb(244 63 94)">
|
|
</svelte:head>
|
|
|
|
<main class="bg-black text-white relative w-screen">
|
|
<div class="absolute inset-0 w-full h-full bg-cover bg-fixed bg-bottom" style="background-image: url('/commissions/complex1.jpg')"></div>
|
|
<div class="absolute inset-0 h-[800px] bg-gradient-to-tr from-[#4d9937] via-[#57a940]"></div>
|
|
<div class="absolute inset-0 z-0 overflow-y-hidden mt-60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
|
|
<path fill="rgb(244 63 94)" fill-opacity="1" d="M0,0L80,37.3C160,75,320,149,480,181.3C640,213,800,203,960,170.7C1120,139,1280,85,1360,58.7L1440,32L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z"></path>
|
|
</svg>
|
|
<div class="bg-gradient-to-b from-rose-500 via-pink-800 to-slate-900 -mt-1 z-10 h-screen"></div>
|
|
<div class="bg-slate-900 h-full">
|
|
<div style="background-image: url('/bg3.png')" class="h-full bg-cover bg-opacity-1 blur-xl"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<article class="px-3 lg:px-0 py-0 flex flex-col gap-10 h-full">
|
|
<div class="flex flex-col justify-start gap-10 min-h-screen z-50">
|
|
<CalculatorHeader/>
|
|
<span class="loadanim">
|
|
<slot />
|
|
<Footer />
|
|
</span>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<style>
|
|
.loadanim {
|
|
animation: loadanim;
|
|
animation-duration: 0.4s;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes loadanim {
|
|
0% {
|
|
transform: translateY(50vh);
|
|
}
|
|
50% {
|
|
transform: translateY(-1vh);
|
|
}
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style> |