infinimotion/frontend
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the look of the homepage

Browse Source
This commit is contained in:
Piet Ostendorp
2025-10-16 23:10:55 +02:00
parent 3684cf3cb2
commit b8f1d33b20
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/home-component/home-component.css
View File

@@ -0,0 +1,7 @@
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeUp { animation: fadeUp 1s ease forwards; }
.animate-fadeUp-delay { animation: fadeUp 1s 0.2s ease forwards; opacity: 0; }

20
src/app/home-component/home-component.html
View File

@@ -1,10 +1,18 @@
<div class="flex h-screen"> <div class="relative w-screen h-screen overflow-hidden flex items-center justify-center">
<div class="m-auto"> <div class="absolute -top-140 -left-120 w-[800px] h-[800px] bg-indigo-500/50 rounded-full filter blur-[250px] pointer-events-none animate-fadeUp-delay"></div>
<h1 class="text-6xl font-bold">InfiniMotion</h1> <div class="absolute -bottom-140 -right-120 w-[800px] h-[800px] bg-pink-600/40 rounded-full filter blur-[250px] pointer-events-none animate-fadeUp-delay"></div>
<h2
class="text-4xl font-bold bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent pb-10" <div class="content">
> <h1 class="text-6xl font-bold animate-fadeUp">InfiniMotion</h1>
<h2 class="text-4xl font-bold animate-fadeUp-delay bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent pb-10">
Absolut war gestern, Bewegung ist heute! Absolut war gestern, Bewegung ist heute!
</h2> </h2>
</div> </div>
<div class="absolute bottom-5 left-5 text-gray-400 z-10">
Informationsinfrastrukturen Unit 2 - FHDW Hannover
<br>
&copy; 2025 Marcel Anker, Lennart Heinrich, Piet Ostendorp, Kevin Szarafin
</div>
</div> </div>