From 097b87a0b948a8f30179ed763ac0cc82347925b8 Mon Sep 17 00:00:00 2001 From: suhanachaudhary212 Date: Sat, 18 May 2024 07:44:01 +0530 Subject: [PATCH] Change in Simon_Says game --- Games/Simon_Game_Challenge/index.html | 7 ++-- Games/Simon_Game_Challenge/styles.css | 57 +++++++++++++++++---------- 2 files changed, 40 insertions(+), 24 deletions(-) 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%; } }