From b4ab83ff1605f42d0f1da2139aa2e2322d38568d Mon Sep 17 00:00:00 2001 From: Suma Date: Mon, 13 May 2024 18:30:47 +0530 Subject: [PATCH] changes to UI --- Games/Snake_Game/index.html | 59 ++++++++++++++++--------------------- Games/Snake_Game/style.css | 45 ++++++++++++++++++---------- 2 files changed, 56 insertions(+), 48 deletions(-) diff --git a/Games/Snake_Game/index.html b/Games/Snake_Game/index.html index 1a2629090a..03fbc1f153 100644 --- a/Games/Snake_Game/index.html +++ b/Games/Snake_Game/index.html @@ -1,45 +1,38 @@ - - - - - Snake Game - - - - - - - -
+ + + Snake Game + + + + + + + + +
- -

Snake Game

-
-
+ "> + +

Snake Game

+
+
+
Score: 0
HighScore: 0
-
- - - +
+
+ + + + \ No newline at end of file diff --git a/Games/Snake_Game/style.css b/Games/Snake_Game/style.css index 3fe510d25b..406b9409d8 100644 --- a/Games/Snake_Game/style.css +++ b/Games/Snake_Game/style.css @@ -22,9 +22,9 @@ button{ button { - position: absolute; - top: 5rem; - left: 42rem; + /* position: absolute; */ + /* top: 5rem; */ + /* left: 42rem; */ padding: 0.5rem 1rem; font-size: 2rem; @@ -44,34 +44,34 @@ button:hover { #scoreBox{ border-radius: 1rem; border: 2px solid #9E9E9E; - position: absolute; + /* position: absolute; */ font-size: 30px; - right: 40px; - top: 75px; + /* right: 40px; */ + /* top: 75px; */ font-family: math; - padding: 3px 12px; + padding: 8px 12px; } #HiScore{ border-radius: 1rem; - position: absolute; + /* position: absolute; */ font-size: 30px; - right: 25px; + /* right: 25px; */ border: 2px solid #9E9E9E; - top: 125px; + /* top: 125px; */ font-family: math; - padding: 3px 12px; + padding: 8px 12px; } #board{ - margin-top: 4%; - border-radius: 1rem; + position: absolute; + top: 23%; + border-radius: 1.5rem; background: #0c4522; width: 75vmin; height: 75vmin; border: 2px solid black; display: grid; - border-radius: 50px; grid-template-rows: repeat(18, 1fr); grid-template-columns: repeat(18, 1fr); } @@ -113,4 +113,19 @@ a{ position: relative; font-size: 30px; -} \ No newline at end of file +} +.scores{ + display: flex; + width: 70vw; + position: absolute; + top: 4rem; + justify-content: space-evenly; +} +body{ + height: 100%; + overflow-y: hidden; +} + +.fas{ + margin-left: 20px; +}