diff --git a/UI Snippets/Game interface/index.html b/UI Snippets/Game interface/index.html new file mode 100644 index 0000000..d0477fc --- /dev/null +++ b/UI Snippets/Game interface/index.html @@ -0,0 +1,27 @@ + + + + + + +
+
+

My Awesome Game

+
+
+
+

Player Info

+

Name: John Doe

+

Level: 5

+

Score: 1000

+
+
+ +
+
+
+ +
+
+ + diff --git a/UI Snippets/Game interface/style.css b/UI Snippets/Game interface/style.css new file mode 100644 index 0000000..126d44b --- /dev/null +++ b/UI Snippets/Game interface/style.css @@ -0,0 +1,55 @@ + +.game-interface { + max-width: 800px; + margin: 0 auto; + background-color: #333; + color: #fff; + border-radius: 10px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); +} + +.game-header { + text-align: center; + font-size: 24px; +} + +.game-content { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin-top: 20px; +} + +.game-info, .game-screen { + flex: 1; + padding: 20px; +} + +.game-info { + background-color: #444; + border-radius: 5px; +} + +.game-info h2 { + font-size: 18px; + margin: 0; +} + +.game-info p { + margin: 10px 0; +} + +.game-button { + background-color: #3498db; + color: #fff; + padding: 10px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.game-button:hover { + background-color: #2980b9; +} diff --git a/client/src/lib/snippets.json b/client/src/lib/snippets.json index cda78d7..a9faf21 100644 --- a/client/src/lib/snippets.json +++ b/client/src/lib/snippets.json @@ -112,6 +112,12 @@ "codepen-link":"https://codepen.io/rohancs127/pen/XWoOaoG", "image-link":"https://i.imgur.com/yNfGcdF.png", "author":"Rohan" + }, + { + "name":"Game Interface", + "codepen-link":"https://codepen.io/Nandan-aghera/pen/LYqYZjv", + "image-link":"https://imagetolink.com/ib/DIWEoDwgGu", + "author":"Nandan" } ]