add index background image on small screens
All checks were successful
deploy / build-and-deploy (push) Successful in 22s

This commit is contained in:
2025-12-17 14:01:01 +01:00
parent 3ebf1cfb2a
commit 217c622fb3

View File

@@ -33,7 +33,7 @@ const information = [
<WebsiteLayout title="CraftAttack 8"> <WebsiteLayout title="CraftAttack 8">
<div class="bg-base-100 flex flex-col min-h-screen relative"> <div class="bg-base-100 flex flex-col min-h-screen relative">
<div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full"> <div class="flex items-center xl:w-1/2 px-6 sm:px-10 min-h-screen h-full z-1">
<div class="flex flex-col items-center xl:items-start w-full xl:h-3/4 my-10"> <div class="flex flex-col items-center xl:items-start w-full xl:h-3/4 my-10">
<img src={Craftattack.src} alt="CraftAttack 8" /> <img src={Craftattack.src} alt="CraftAttack 8" />
<div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full"> <div class="flex flex-col w-full mt-2 lg:mt-5 lg:w-10/12 h-full">
@@ -60,6 +60,9 @@ const information = [
</div> </div>
</div> </div>
</div> </div>
<div class="xl:hidden absolute top-0 left-0 h-full w-full blur-xs brightness-25">
<img src={Background.src} alt="" loading="lazy" class="h-full w-full object-none" />
</div>
<div <div
class="hidden xl:block absolute top-0 left-0 h-full w-full" class="hidden xl:block absolute top-0 left-0 h-full w-full"
style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);" style="clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);"