From 5e713e2c4d8f840b7fd3b8c17d8a5702721f5985 Mon Sep 17 00:00:00 2001 From: Matthew Florentino Date: Tue, 25 Nov 2025 15:57:43 +0700 Subject: [PATCH] style: styling game.css --- src/css/game.css | 83 ++++++++++++++++++++++++++++-- src/game/firstperson.html | 20 ++++++- src/game/thirdperson.html | 2 +- src/js/firstperson.js | 0 src/js/{game.js => thirdperson.js} | 0 5 files changed, 98 insertions(+), 7 deletions(-) create mode 100644 src/js/firstperson.js rename src/js/{game.js => thirdperson.js} (100%) diff --git a/src/css/game.css b/src/css/game.css index de222db..f91ae51 100644 --- a/src/css/game.css +++ b/src/css/game.css @@ -1,9 +1,9 @@ -.container-third .bg{ +.container-third .bg { width: 100%; height: 100dvh; } -.container-third .bg{ +.container-third .bg { position: relative; } @@ -17,7 +17,7 @@ display: none; } -.container-third .bg img{ +.container-third .bg img { width: 100%; position: absolute; bottom: 0; @@ -26,7 +26,7 @@ background-size: cover; } -.container-third .hero img{ +.container-third .hero img { width: 150px; position: absolute; bottom: 100px; @@ -36,7 +36,7 @@ background-size: cover; } -.container-third .boss img{ +.container-third .boss img { width: 300px; position: absolute; bottom: 100px; @@ -44,4 +44,77 @@ image-rendering: pixelated; background-repeat: no-repeat; background-size: cover; +} + + +.container-first .content .boss { + width: 100%; + height: 100dvh; + position: relative; + animation: beat 2s infinite; + transform-origin: center; +} + +.container-first .content .boss img { + width: 500px; + position: absolute; + bottom: 140px; + left: 50%; + transform: translateX(-50%); + image-rendering: pixelated; + background-repeat: no-repeat; + background-size: cover; +} + +.container-first .content .text { + width: 1000px; + height: 200px; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + background-color: #101010f5; + position: absolute; + display: flex; + justify-content: start; + text-align: center; + align-content: center; + padding: 10px; + display: flex; + flex-direction: column; + border-radius: 10px; + border: 1px solid white; + z-index: 1; +} + +.container-first .content .text p { + margin-bottom: 30px; + padding: 20px; + color: #ffdf12; + font-size: 50px; +} + +.container-first .content .text .opt { + color: #ffdf12; + display: flex; + justify-content: center; +} + +.container-first .content .text .opt p { + padding: 20px; + color: #ffdf12; + font-size: 30px; +} + +@keyframes beat { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(0.95); + } + + 100% { + transform: scale(1); + } } \ No newline at end of file diff --git a/src/game/firstperson.html b/src/game/firstperson.html index 4c0e320..0b44c39 100644 --- a/src/game/firstperson.html +++ b/src/game/firstperson.html @@ -4,8 +4,26 @@ firstperson + + -

+
+
+
+ +
+
+

selamat datang di python games

+
+

a. panteks

+

b. anjas

+

c. hell nah

+

d. my kisah

+
+
+
+
+ \ No newline at end of file diff --git a/src/game/thirdperson.html b/src/game/thirdperson.html index a08fa71..af3e17e 100644 --- a/src/game/thirdperson.html +++ b/src/game/thirdperson.html @@ -23,6 +23,6 @@ - + \ No newline at end of file diff --git a/src/js/firstperson.js b/src/js/firstperson.js new file mode 100644 index 0000000..e69de29 diff --git a/src/js/game.js b/src/js/thirdperson.js similarity index 100% rename from src/js/game.js rename to src/js/thirdperson.js