commit 96001fa1c6dd0977f8b80fe50e400d72e94b1566 Author: Gustavo L de Mello (Guz) Date: Sat Oct 26 23:20:13 2024 -0300 initial commit diff --git a/index.html b/index.html new file mode 100644 index 0000000..5aa4653 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + My first website! + + + + +
+

Hello, world!

+

This is my first website! I hope you like it ;)

+ +

You can find my projects here!

+
+
+
+ +
+ + diff --git a/script.js b/script.js new file mode 100644 index 0000000..2786aea --- /dev/null +++ b/script.js @@ -0,0 +1,32 @@ +let player = document.querySelector("#player") + +player.setAttribute("data-coordinates", JSON.stringify({ + x: 45, + y: 20, +})) +player.setAttribute("style", `left:${45}%; bottom:${20}%; width:5rem; height:5rem; position:absolute; z-index: 3;`) + +function onKeyDown(event) { + let coordinates = JSON.parse(player.getAttribute("data-coordinates")) + + if (event.key == "d") { + coordinates.x = coordinates.x + 1 + } + + if (event.key == "a") { + coordinates.x = coordinates.x - 1 + } + + if (event.key == "w") { + coordinates.y = coordinates.y + 1 + } + + if (event.key == "s") { + coordinates.y = coordinates.y - 1 + } + + player.setAttribute("style", `left:${coordinates.x}%; bottom:${coordinates.y}%; width:5rem; height:5rem; position:absolute; z-index: 3;`) + player.setAttribute("data-coordinates", JSON.stringify(coordinates)) +} + +document.addEventListener("keydown", onKeyDown) diff --git a/style.css b/style.css new file mode 100644 index 0000000..19c3dc1 --- /dev/null +++ b/style.css @@ -0,0 +1,42 @@ + +#background { + width: 100vw; + height: 100vh; + + background-color: black; + background-image: url(https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); + background-repeat: no-repeat; + background-size: cover; + + opacity: 0.2; + + filter: blur(5px); + + position: fixed; + top: 0; + left: 0; + + z-index: 1; +} + +body { + display: flex; + background-color: black; + + justify-content: center; + align-items: center; + + min-height: 100vh; + + overflow-y: hidden; +} + +main { + color: white; + font-family: sans-serif; + z-index: 2; +} + +a { + color: aqua; +}