diff --git a/css/games.css b/css/games.css index e98da6e..cde21b3 100644 --- a/css/games.css +++ b/css/games.css @@ -1,3 +1,9 @@ +div.game-container { + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + div.game-container > a.game { display: inline-block; width: calc(460px * 0.8); @@ -6,7 +12,9 @@ div.game-container > a.game { background-position: center; background-repeat: no-repeat; transition: background-size 200ms; + margin: 5px; } + div.game-container > a.game:hover { background-size: calc(460px * 0.7) calc(215px * 0.7); } @@ -33,4 +41,8 @@ div.game-container > a.game.noita { div.game-container > a.game.sotf { background-image: url(../media/games/sotf.jpg); +} + +div.game-container > a.game.kcd { + background-image: url(../media/games/kcd.jpg); } \ No newline at end of file diff --git a/games.html b/games.html index 67c5a01..79e8f96 100644 --- a/games.html +++ b/games.html @@ -18,12 +18,14 @@ </header> <main> <div class="game-container"> - <a href="https://www.gog.com/de/game/cyberpunk_2077" target="_blank" class="game cyberpunk2077"></a> + <a href="https://www.gog.com/de/game/cyberpunk_2077" target="_blank" class="game cyberpunk2077"></a> <a href="https://store.steampowered.com/app/2054970/Dragons_Dogma_2/" target="_blank" class="game dd2"></a> <a href="https://store.steampowered.com/app/1203620/Enshrouded/" target="_blank" class="game enshrouded"></a> <a href="https://store.steampowered.com/app/377160/Fallout_4/" target="_blank" class="game fallout4"></a> + <a href="https://store.steampowered.com/app/379430/Kingdom_Come_Deliverance/" target="_blank" class="game kcd"></a> <a href="https://store.steampowered.com/app/881100/Noita/" target="_blank" class="game noita"></a> <a href="https://store.steampowered.com/app/1326470/Sons_Of_The_Forest/" target="_blank" class="game sotf"></a> + <a class="game"></a> </div> </main> </body> diff --git a/media/games/kcd.jpg b/media/games/kcd.jpg new file mode 100644 index 0000000..07d28a2 Binary files /dev/null and b/media/games/kcd.jpg differ