diff --git a/mainboard.css b/mainboard.css index 6759e35..c7c7d86 100644 --- a/mainboard.css +++ b/mainboard.css @@ -1,5 +1,5 @@ /* ================================ - 🌈 GLOBAL THEME (SAMA DENGAN LOGIN/REGISTER) +BODY & BACKGROUND STYLES ================================== */ body { @@ -15,6 +15,7 @@ body { position: relative; } + /* Glow Background Floating */ .bg-circle { position: absolute; @@ -34,7 +35,7 @@ body { } /* ================================ - 🌟 CONTAINER CARD + CONTAINER CARD ================================== */ .container { @@ -54,7 +55,7 @@ body { } /* ================================ - 👤 HEADER PROFILE + HEADER PROFILE ================================== */ .header { @@ -171,3 +172,34 @@ body { display: block; margin-bottom: 12px; } + +.fruit { + position: absolute; + width: 95px; + opacity: .85; + animation: float 6s infinite ease-in-out, drift 15s infinite linear; + pointer-events: none; +} + +.f1 { top: 8%; left: 10%; animation-delay: .3s; } +.f2 { top: 65%; right: 12%; animation-delay: .7s; } +.f3 { top: 22%; right: 55%; animation-delay: 1.1s; } +.f4 { bottom: 15%; left: 28%; animation-delay: .9s; } +.f5 { bottom: 10%; right: 30%; animation-delay: 1.4s; } +.f6 { top: 40%; left: 50%; animation-delay: .5s; } +.f7 { bottom: 30%; left: 15%; animation-delay: 1.2s; } +.f8 { top: 75%; right: 40%; animation-delay: .8s; } +.f9 { top: 50%; left: 80%; animation-delay: 1s; } +.f10 { bottom: 20%; right: 5%; animation-delay: 1.3s; } + +@keyframes float { + 0% { transform: translateY(0) rotate(0deg); } + 50% { transform: translateY(-20px) rotate(6deg); } + 100% { transform: translateY(0) rotate(0deg); } +} + +@keyframes drift { + 0% { transform: translateX(0); } + 50% { transform: translateX(15px); } + 100% { transform: translateX(0); } +} \ No newline at end of file diff --git a/mainboard.html b/mainboard.html index 9372ce9..cfcc102 100644 --- a/mainboard.html +++ b/mainboard.html @@ -10,6 +10,18 @@
+ + + + + + + + + + + +