diff --git a/WebGames-master/WebGames-master/index.html b/WebGames-master/WebGames-master/index.html
index fe899019..064e8d8a 100644
--- a/WebGames-master/WebGames-master/index.html
+++ b/WebGames-master/WebGames-master/index.html
@@ -1,7 +1,6 @@
-
Web Games
@@ -23,11 +22,8 @@
--card-hover-text-light: #000000;
/* Shared Variables */
- --background-color: var(--background-color-light);
- --text-color: var(--text-color-light);
- --card-bg: var(--card-bg-light);
- --card-hover-bg: var(--card-hover-bg-light);
- --card-hover-text: var(--card-hover-text-light);
+ --title-shadow-dark: 0 0 20px #00ffcc, 0 0 30px #00ffcc;
+ --title-shadow-light: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
body {
@@ -49,7 +45,92 @@
font-size: 3rem;
text-transform: uppercase;
margin: 20px 0;
- text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+ animation: glow 1.5s infinite alternate;
+ text-shadow: var(--title-shadow-dark);
+ transition: text-shadow 0.3s, color 0.3s;
+ }
+
+ @keyframes glow {
+ from {
+ text-shadow: 0 0 10px var(--text-color), 0 0 20px var(--text-color), 0 0 30px var(--text-color), 0 0 40px var(--text-color);
+ }
+ to {
+ text-shadow: 0 0 20px var(--text-color), 0 0 30px var(--text-color), 0 0 40px var(--text-color), 0 0 50px var(--text-color);
+ }
+ }
+
+ .search-bar {
+ margin: 20px;
+ width: 80%;
+ max-width: 600px;
+ }
+
+ #searchBar {
+ width: 100%;
+ padding: 10px;
+ font-size: 1rem;
+ border: 2px solid var(--text-color);
+ border-radius: 5px;
+ background-color: var(--card-bg);
+ color: var(--text-color);
+ outline: none;
+ transition: border-color 0.3s;
+ }
+
+ #searchBar:focus {
+ border-color: var(--card-hover-bg);
+ }
+
+ .game-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+ gap: 20px;
+ padding: 20px;
+ width: 100%;
+ max-width: 1200px;
+ }
+
+ .game {
+ background-color: var(--card-bg);
+ border-radius: 10px;
+ overflow: hidden;
+ text-align: center;
+ transition: transform 0.3s, background-color 0.3s;
+ }
+
+ .game:hover {
+ transform: scale(1.05);
+ background-color: var(--card-hover-bg);
+ }
+
+ .game img {
+ width: 100%;
+ height: auto;
+ transition: transform 0.3s;
+ }
+
+ .game:hover img {
+ transform: scale(1.1);
+ }
+
+ .game-title {
+ padding: 10px;
+ font-size: 1rem;
+ color: var(--text-color);
+ text-transform: uppercase;
+ }
+
+ .no-results {
+ display: none;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 20px;
+ }
+
+ .no-results img {
+ width: 300px;
+ height: auto;
}
.toggle-mode {
@@ -93,11 +174,15 @@
background-color: var(--card-hover-text);
color: var(--card-hover-bg);
}
+
+ .button:active {
+ transform: scale(0.95);
+ }
Web Games
-
+
@@ -187,6 +272,14 @@
Fnaf Collection
+
+
+
+
+
+
+
+