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.
99 lines
2.8 KiB
99 lines
2.8 KiB
<script>
|
|
import Social from "../lib/socials/Social.svelte";
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>AlexArcher</title>
|
|
</svelte:head>
|
|
|
|
<main>
|
|
|
|
<section class="relative h-screen">
|
|
<div class="h-3/4 -z-1 absolute bg-zinc-800 shadow-xl w-screen slide"></div>
|
|
|
|
<div class="w-2/3 mx-auto py-32 flex gap-10" id="about">
|
|
<div class="flex flex-col gap-10 w-2/3 z-10 fade">
|
|
<h1 class="text-red-500 flex gap-5 items-end"><span class="font-bold text-6xl">Nya!</span> <span class="text-3xl">Welcome to the fire cat place!</span></h1>
|
|
|
|
<p class="w-3/4 text-xl text-gray-300">
|
|
It's really warm and cozy in here, wanna stay with me for a moment? I'm going to tell you a story about me... And I have cookies!
|
|
</p>
|
|
|
|
<br/>
|
|
|
|
<div class="flex gap-5">
|
|
<Social link="https://twitter.com/3D_AlexArcher" icon="🐦" text="Twitter"></Social>
|
|
<Social link="https://www.furaffinity.net/user/lazyfairy/" icon="🦊" text="FurAffinity"></Social>
|
|
<Social link="https://www.twitch.tv/3d_alexarcher" icon="📹" text="Twitch"></Social>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-1/3 fade">
|
|
<img src="/images/frontpage.png" alt="Alex Fursona" class="-mt-20 float scale-150" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <section class="grid grid-cols-2 gap-5 w-2/3 mx-auto h-screen">
|
|
<h1 class="font-bold text-right text-red-500 text-6xl">AlexArcher</h1>
|
|
|
|
<img src="/images/frontpage.png" alt="Alex Fursona" class="h-4/5 pushup" />
|
|
</section> -->
|
|
|
|
</main>
|
|
|
|
<style>
|
|
.float {
|
|
animation: float;
|
|
animation-duration: 3s;
|
|
animation-iteration-count: infinite;
|
|
animation-timing-function: ease-in-out;
|
|
}
|
|
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(-5px) scale(150%);
|
|
}
|
|
50% {
|
|
transform: translateY(5px) scale(150%);
|
|
}
|
|
100% {
|
|
transform: translateY(-5px) scale(150%);
|
|
}
|
|
}
|
|
|
|
.fade {
|
|
animation: fade;
|
|
animation-duration: 0.5s;
|
|
animation-timing-function: ease-in-out;
|
|
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0%;
|
|
}
|
|
50% {
|
|
opacity: 0%;
|
|
}
|
|
100% {
|
|
opacity: 100%;
|
|
}
|
|
}
|
|
|
|
.slide {
|
|
animation: slide;
|
|
animation-duration: 0.25s;
|
|
animation-timing-function: ease-in-out;
|
|
transform: skewY(-5deg);
|
|
}
|
|
|
|
@keyframes slide {
|
|
0% {
|
|
transform: translateX(-100vw) translateY(170px) skewY(-5deg);
|
|
}
|
|
100% {
|
|
transform: translateX(0) translateY(0) skewY(-5deg);
|
|
}
|
|
}
|
|
</style> |