[Update]
This commit is contained in:
parent
579f1c21b5
commit
bdcd09edf8
@ -24,11 +24,24 @@
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-blue-500/10 via-purple-600/20 to-pink-500/10 blur-3xl"></div>
|
||||
|
||||
<!-- ✨ Cahaya lembut di tengah -->
|
||||
<div class="absolute w-[500px] h-[500px] bg-yellow-200/10 blur-[200px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
<div class="absolute w-[600px] h-[600px] bg-yellow-200/10 blur-[250px] rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"></div>
|
||||
|
||||
<!-- 🕌 Gambar pojok kiri BESAR -->
|
||||
<img
|
||||
src="/kiri.png"
|
||||
alt="Dekorasi Kiri"
|
||||
class="absolute bottom-[-60px] left-[-80px]
|
||||
w-[500px] sm:w-[650px] md:w-[800px] lg:w-[900px]
|
||||
opacity-75 drop-shadow-[0_0_50px_rgba(255,255,255,0.2)]
|
||||
pointer-events-none select-none animate-float-slow
|
||||
blur-[0.5px]"
|
||||
/>
|
||||
|
||||
<!-- 💖 Isi konten -->
|
||||
<div class="relative z-10 max-w-2xl mx-auto space-y-6 animate-fade-in">
|
||||
<h2 class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]">
|
||||
<h2
|
||||
class="text-4xl sm:text-5xl font-extrabold text-yellow-300 drop-shadow-[0_0_25px_rgba(255,255,255,0.3)]"
|
||||
>
|
||||
Terima Kasih 💖
|
||||
</h2>
|
||||
|
||||
@ -53,7 +66,9 @@
|
||||
</div>
|
||||
|
||||
<!-- 💫 Ornamen bawah -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"></div>
|
||||
<div
|
||||
class="absolute bottom-0 left-0 right-0 h-[200px] bg-gradient-to-t from-indigo-900 via-purple-800/20 to-transparent"
|
||||
></div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@ -102,6 +117,19 @@ onMounted(() => generateStars())
|
||||
animation: twinkle 3.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* 🌙 Gambar mengambang lembut */
|
||||
@keyframes float-slow {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
.animate-float-slow {
|
||||
animation: float-slow 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ✨ Fade-in lembut */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
@ -134,6 +162,13 @@ onMounted(() => generateStars())
|
||||
|
||||
/* 📱 Responsif */
|
||||
@media (max-width: 640px) {
|
||||
img[alt="Dekorasi Kiri"] {
|
||||
bottom: -40px;
|
||||
left: -60px;
|
||||
width: 400px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
BIN
proyek-frontend/public/baru.png
Normal file
BIN
proyek-frontend/public/baru.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
proyek-frontend/public/kiri.png
Normal file
BIN
proyek-frontend/public/kiri.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Loading…
Reference in New Issue
Block a user