From a8e196f8ec44e16f1f6a1a556da8ebe52c93717b Mon Sep 17 00:00:00 2001 From: MrEidam Date: Tue, 20 Aug 2024 22:15:06 +0200 Subject: [PATCH] Grafical Games hub + home button :p --- Games/index.html | 11 ++++++---- Games/main.js | 24 +++++++++++++++++++++ Games/style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 2 +- 4 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 Games/main.js create mode 100644 Games/style.css diff --git a/Games/index.html b/Games/index.html index 2769277..2f8b871 100644 --- a/Games/index.html +++ b/Games/index.html @@ -3,12 +3,15 @@ + + + Games - 2048 - RockPaperScissors - NumberQuess - DiceWar +
+
+ + \ No newline at end of file diff --git a/Games/main.js b/Games/main.js new file mode 100644 index 0000000..e893488 --- /dev/null +++ b/Games/main.js @@ -0,0 +1,24 @@ +const games = [ + { + name: '2048', + link: '2048', + },{ + name: 'Dice War', + link: 'DiceWar', + },{ + name: 'Number Quess 6', + link: 'NumberQuess6', + },{ + name: 'Rock Paper Scissors', + link: 'RockPaperScissors', + }, +]; + +window.onload = () => { + for(let i=0; i + ${games[i].name} + ` + } +} \ No newline at end of file diff --git a/Games/style.css b/Games/style.css new file mode 100644 index 0000000..25fd64d --- /dev/null +++ b/Games/style.css @@ -0,0 +1,54 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + display: flex; + justify-content: center; + align-content: center; + align-items: center; + min-height: 100vh; + background: #333; + flex-wrap: wrap; +} + +#home{ + position: absolute; + right: 0; + bottom: 0; + height: 50px; + width: 50px; + border-radius: 25px 0 0 0; + background: #555; +} + +.game{ + z-index: 5; + display: flex; + justify-content: center; + align-items: center; + + width: 200px; + height: 150px; + + /*border: 5px red solid;*/ + border-radius: 10px; + margin: 1rem; + overflow: hidden; + + box-shadow: + inset 5px 5px 15px #aaa, + 5px 5px 15px #555; +} + +.game img{ + transition: .5s; + width: 200px; + height: 150px; +} + +.game:hover img{ + transition: .25s; + scale: 1.25; +} \ No newline at end of file diff --git a/style.css b/style.css index db5f014..80b51f4 100644 --- a/style.css +++ b/style.css @@ -92,7 +92,7 @@ span p{ display: block; } -.Lime{color: lime;}.Yellow{color: yellow;}.Orange{color: orange;}.Red{color: red;}.DarkRed{color: darkred;} +.Lime{color: lime; user-select: none;}.Yellow{color: yellow; user-select: none;}.Orange{color: orange; user-select: none;}.Red{color: red; user-select: none;}.DarkRed{color: darkred; user-select: none;} .cash{ position: absolute;