diff --git a/Games/Simon_Game_Challenge/index.html b/Games/Simon_Game_Challenge/index.html index 68bdb173de..938baf3125 100755 --- a/Games/Simon_Game_Challenge/index.html +++ b/Games/Simon_Game_Challenge/index.html @@ -24,11 +24,12 @@
+ padding: 2px; ">

Press Any Key to Start

Highest reached level : 0

+
@@ -43,7 +44,7 @@

Highest reached level : 0

Instructions

- Objective:To remember and repeat a sequence of colors shown by + Objective: To remember and repeat a sequence of colors shown by the game. The sequence will keep getting longer as you progress. Your goal is to replicate the sequence accurately to achieve the highest level possible. diff --git a/Games/Simon_Game_Challenge/styles.css b/Games/Simon_Game_Challenge/styles.css index 5b88d3aeec..3468071bc7 100755 --- a/Games/Simon_Game_Challenge/styles.css +++ b/Games/Simon_Game_Challenge/styles.css @@ -2,54 +2,62 @@ body { text-align: center; background-color: #011f3f; } - +h2{ + font-size: 1.7rem; +} #highest { color: #fef2bf; margin-right:320px; padding: 0px; - margin-bottom: 0px; + margin-top: 0s; } #level-title { font-family: "Press Start 2P", cursive; - font-size: 2.5rem; - margin-right:500px; - margin-left: 230px; + font-size: 2.3rem; + margin-right:535px; + margin-left:240px; color: #fef2bf; - margin-top: 0px; + top: 0; + position: relative; margin-bottom:5px; } #play-button { font-family: "Press Start 2P", cursive; - font-size: 5rem; + font-size: 4.5rem; color: #fef2bf; - margin-right: 360px; - margin-top:0px; + margin-left: 460px; + position:fixed; + margin-bottom:50px; } #play-button > i:hover { cursor: pointer; - transform: scale(1.1); + /* transform: scale(1.1); */ transition: .2s ease; color: #e90064; filter: drop-shadow(2px 2px 1px black); } .container { + position:sticky; display: flex; flex-wrap: wrap; - justify-content: center; + justify-content:start; + margin-left: 198px; } .game-section { display: flex; + position: sticky; flex-direction: column; - width: 70%; - margin: 30px; - margin-left: 50px; + width: 50%; + margin: 0 30px; + margin-left: 20px; } .instructions-section { background-color: #fef2bf; + position: fixed; font-size: medium; font-weight: bold; flex: 1; @@ -58,6 +66,10 @@ body { display: flex; flex-direction:column; justify-content: center; + height: 100vh; + width:300px; + top: 0; + right: 0; } @media only screen and (max-width: 768px) { @@ -72,7 +84,7 @@ body { } .game-section, .instructions-section { - width: 100%; + width:200px; margin-left:6px; /* margin: 10px auto; */ } @@ -80,11 +92,12 @@ body { .btn { display: inline-block; - height: 150px; - width: 150px; + height: 130px; + width: 130px; border: 5px solid black; border-radius: 10%; margin: 5px; + position: sticky; } .game-over { @@ -98,6 +111,7 @@ body { .green { background-color: #379237; + } .blue { @@ -106,6 +120,7 @@ body { .yellow { background-color: #ffea20; + } .pressed { @@ -116,18 +131,18 @@ body { @media only screen and (max-width: 1024px) { /* styles for tablet */ .container { - width: 80%; + width: 60%; } .btn { - height: 150px; - width: 150px; + height: 140px; + width: 140px; } #highest{ margin:0%; } #level-title, #play-button { - font-size: 5rem; + font-size: 4rem; margin:0%; } }