diff --git a/othercss/games.css b/othercss/games.css new file mode 100644 index 0000000..374a726 --- /dev/null +++ b/othercss/games.css @@ -0,0 +1,96 @@ +@import url(image-container.css); + +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; + background-color: #171717; + background-size: cover; + background-position: center; + background-attachment: fixed; + color: #fff; +} + +.header { + background-color: #0f0f0f; + color: #fff; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-weight: bold; + font-size: 24px; +} + +.menu { + display: flex; +} + +.menu-item { + background-color: transparent; + color: #fff; + border: none; + padding: 10px 20px; + text-decoration: none; + font-size: 18px; + cursor: pointer; + transition: background-color 0.2s; +} + +.menu-item:hover { + background-color: #000; + color: #fff; +} + +.content { + text-align: center; + padding: 50px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +h1 { + color: #fff; + font-size: 40px; +} + +button { + border-radius: 100px; +} + +.game-card { + border-radius: 18%; + display: inline-block; + text-align: center; + cursor: pointer; + transition: all 0.2s; +} + +.game-card h3 { + justify-content: center; + display: flex; + font-size: 12px; + align-items: center; +} + +.game-card:hover { + background-color: #4287f5; + box-shadow: 12px 12px 12px rgba(0, 0, 0, 0.5); +} + +.game-container { + text-align: center; + display: grid; + grid-template-columns: repeat(auto-fill, 175px); + justify-content: space-between; + margin-left: 30px; + margin-right: 30px; + margin-top: 30px; + grid-gap: 32px; + padding: 0; +}