diff --git a/README.md b/README.md index f0fd008..700ed01 100644 --- a/README.md +++ b/README.md @@ -1 +1,7 @@ -Made by Mudzip, Directory, and Yeet +
+
+
+
+
Unblocked Games for Free, From the Creators of GameCat!
diff --git a/games.html b/games.html index fe1f956..a06ff27 100644 --- a/games.html +++ b/games.html @@ -23,6 +23,18 @@ background: linear-gradient(to bottom, #1e90ff, #0c3d99); z-index: 0; } + + .fixed-header { + position: fixed; + top: 0; + left: 50%; + transform: translateX(-50%); + z-index: 10; + color: white; + font-size: 24px; + font-weight: bold; + padding: 10px; + } .menu { position: relative; @@ -34,26 +46,44 @@ } .menu-item { - margin: 15px; + margin: 5px; text-align: center; color: white; cursor: pointer; + position: relative; } - + .menu-item img { - width: 90px; - height: 90px; - border-radius: 10px; + width: 205px; + height: 110px; + border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .menu-item:hover img { - transform: scale(1.1); + transform: scale(1.05); box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.7); } .menu-item:hover p { - text-shadow: 0 0 5px rgba(255, 255, 255, 0.8); + opacity: 1; + transform: translateY(0); + transition: opacity 0.3s ease, transform 0.3s ease; + } + + .menu-item p { + position: absolute; + bottom: 10px; + left: 0; + right: 0; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s ease, transform 0.3s ease; + font-size: 18px; + color: white; + background-color: rgba(0, 0, 0, 0.7); + padding: 5px; + border-radius: 8px; } .search-bar { @@ -81,19 +111,18 @@ color: rgba(255, 255, 255, 0.6); } - /* Sidebar (Navigation) styling */ .nav-bar { position: fixed; left: 0; top: 0; height: 100%; width: 80px; - background-color: rgba(0, 0, 0, 0.8); + background-color: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; align-items: center; - padding-top: 20px; - z-index: 2; /* Ensure it appears above other content */ + padding-top: 15px; + z-index: 2; } .nav-bar a { @@ -116,19 +145,20 @@ color: #ffffff; } - /* Remove default margin and padding */ * { margin: 0; padding: 0; box-sizing: border-box; } - + + +