diff --git a/src/css/game.css b/src/css/game.css index 00ea9ba..85ac9ae 100644 --- a/src/css/game.css +++ b/src/css/game.css @@ -131,6 +131,7 @@ display: flex; flex-direction: column; border: 10px solid white; + border-radius: 10px; } .container-first .content .quiz h2 { @@ -141,16 +142,23 @@ } .container-first #scoreAlert { - margin-bottom: 30px; + text-align: center; padding: 10px; color: #ffdf12; font-size: 40px; - bottom: 40px; + bottom: 22px; + background-color: #101010f5; left: 50%; transform: translateX(-50%); position: absolute; } +.container-first #scoreAlert.border { + width: 550px; + border: 6px solid white; + border-radius: 10px; +} + .container-first .content .quiz #btn-answer { color: #ffdf12; display: flex; diff --git a/src/css/style.css b/src/css/style.css index 665b703..b6d4b27 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -132,15 +132,11 @@ input:-webkit-autofill { justify-content: space-around; align-items: center; height: 100dvh; - /* Hapus properti background dari sini dan pindahkan ke ::before */ - - /* Tambahkan posisi relatif agar pseudo-element bisa diposisikan absolut di dalamnya */ position: relative; - /* Pastikan konten di dalam container ada di atas latar */ z-index: 1; } -/* Pseudo-element untuk menampung gambar latar transparan */ + .container-board::before { content: ""; position: absolute; @@ -148,19 +144,12 @@ input:-webkit-autofill { left: 0; right: 0; bottom: 0; - - /* Pindahkan properti background Anda ke sini */ background-image: url(/assets/Design/CampFire8WESFIX!-export.png); background-repeat: no-repeat; background-size: cover; background-position: center; image-rendering: pixelated; - - /* >>> INI KUNCINYA: Atur opasitasnya di sini <<< */ opacity: 1; - /* Contoh nilai 40% transparan */ - - /* Pindahkan latar ini ke lapisan paling bawah */ z-index: -1; } diff --git a/src/js/firstperson.js b/src/js/firstperson.js index fc13ea9..84080ae 100644 --- a/src/js/firstperson.js +++ b/src/js/firstperson.js @@ -129,6 +129,7 @@ function showScore(){ bgm.play() setTimeout(()=> { const alerts = document.getElementById("scoreAlert") + alerts.classList.add("border") alerts.textContent = `you scored ${score} out of 200 !`; }, 200); setTimeout(()=> {