diff --git a/2048Game/ANKUR2304/styles.css b/2048Game/ANKUR2304/styles.css index 0afdbfb1f..0e968a4ce 100644 --- a/2048Game/ANKUR2304/styles.css +++ b/2048Game/ANKUR2304/styles.css @@ -4,8 +4,6 @@ box-sizing:border-box; } p{ - - border-radius:10px; padding:5px; border:2px solid white; @@ -15,10 +13,16 @@ p{ } button{ font-family: 'Sniglet', cursive; + background: black; /* 🔹 Changed: button background */ + color: white; /* 🔹 Changed: button text color */ + border-radius: 8px; + padding: 8px 12px; + cursor: pointer; } body { - background: linear-gradient(45deg, rgba(189,245,152,1) 0%, rgba(50,87,81,1) 100%); + background: linear-gradient(45deg, #121212, #1e1e1e); /* 🔹 Changed: dark mode background */ height:100%; + color: white; /* 🔹 Changed: default text color */ } h1,h2{ text-align:center; @@ -26,104 +30,4 @@ h1,h2{ margin-top:10px; font-family: 'Londrina Outline', cursive; } -#control{width:200px;margin: 20px auto;} -#control h2{font-family: 'Sniglet', cursive;} -#control button{padding:5px;} -#container{ - width:400px; - height:500px; - background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(216,225,231,0.54) 49%, rgba(181,198,208,0.52) 51%, rgba(224,239,249,0.06) 100%); - border-radius: 16px 16px 16px 16px; - border: 1px solid #d6ced6; - box-shadow: 0px 14px 30px -9px rgba(0,0,0,0.74); - margin: 20px auto; - overflow:hidden; - z-index:5; -} -.screen{ - width:inherit; - height:inherit; -} -#splash{ - display:none; - text-align:center; -} - #splash h1{ - margin-top:70px; - font-size:80px; - } - #splash h1 .char1{ - color:#93C683; - } - #splash h1 .char2{ - color:rgb(75, 160, 108); - } - #splash #start{ - background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); - color:black; - border-radius: 10px; - margin-top:140px; - padding:10px; - font-size:50px; - } -#pause{ - display:none; - position:absolute; - background: rgba(50,50,50,0.4); - z-index:1; - border-radius: 16px 16px 16px 16px; - text-align:center; -} - #pause h1{ - margin-top:150px; - color:orange; - } - #pause button{ - display:block; - background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%); - border-radius: 10px; - padding:10px; - color:black; - margin:20px auto; - font-size:30px; - } -#end{ - display:none; -} -#game{ - padding:10px 10px; - position:relative; - display:none; -} -#game #info{ - padding:5px 10px; - background:gray; - margin:0 auto; - width:200px; -} -#game #info #pausebtn { - float:right; -} -#game #gamearea{ - position:absolute; - bottom:50px; - left:50px; - width:300px; - height:300px; - background:gray; -} -#game #gamearea .element { - width:75px; - height:75px; - background: transparent; - border: 1px solid #d6ced6; - display:inline-block; - margin-right:-4px; - margin-bottom:-4px; - overflow:hidden; - font-size:30px; - line-height:2.2; - text-align:center; - font-family: 'Sniglet', cursive; - color:white; -} \ No newline at end of file +#contr diff --git a/BubbleGame/AnuragC07/style.css b/BubbleGame/AnuragC07/style.css index b3bcadf2a..26ad2c58f 100644 --- a/BubbleGame/AnuragC07/style.css +++ b/BubbleGame/AnuragC07/style.css @@ -1,69 +1,91 @@ -*{ +* { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } + body { - background:rgb(181, 181, 255); + background: linear-gradient(135deg, #e0c3fc, #8ec5fc); /* soft gradient */ } + .outer-box { border: 0px solid red; - border-radius: 12px; + border-radius: 16px; height: 90vh; width: 80%; margin: auto; margin-top: 30px; + box-shadow: 0px 6px 18px rgba(0,0,0,0.2); /* soft shadow */ + background: rgba(255, 255, 255, 0.6); /* frosted effect */ + backdrop-filter: blur(6px); } + .panel-top { display: flex; flex-direction: row; padding: 20px 30%; justify-content: space-around; - border: 0px solid red; - background: rgb(33, 33, 88); + background: linear-gradient(90deg, #6a11cb, #2575fc); color: white; + border-radius: 16px 16px 0 0; + box-shadow: 0px 3px 6px rgba(0,0,0,0.2); } + .score { display: flex; flex-direction: row; - gap: 10px; + gap: 12px; } .score h2 { - font-size: 25px; + font-size: 24px; } -.score p{ - font-size: 25px; +.score p { + font-size: 22px; border: 2px solid white; - border-radius: 5px; + border-radius: 8px; background: white; - color: rgb(33, 33, 88); - font-weight: 400; - width: 50px; + color: #2575fc; + font-weight: 500; + width: 55px; display: flex; justify-content: center; + align-items: center; + transition: all 0.3s ease; } +.score p:hover { + background: #e0e7ff; + color: #6a11cb; +} + .panel-bottom { - background:rgb(255, 255, 255); + background: #ffffff; height: 90%; + border-radius: 0 0 16px 16px; + padding: 20px; + box-shadow: inset 0px 4px 10px rgba(0,0,0,0.1); } - +/* Bubble buttons */ .bubble { display: inline-block; padding-left: 18px; padding-top: 10px; - font-size: 25px; - background: rgb(26, 26, 98); + font-size: 22px; + background: linear-gradient(135deg, #ff758c, #ff7eb3); margin: 8px; color: white; border-radius: 50%; - height: 50px; - width: 50px; + height: 55px; + width: 55px; + box-shadow: 0px 4px 8px rgba(0,0,0,0.2); + transition: all 0.3s ease; } .bubble:hover { - background: rgb(11, 11, 60); - color: rgb(117, 117, 235); + background: linear-gradient(135deg, #43cea2, #185a9d); + color: #fff9c4; + transform: scale(1.1); cursor: pointer; } +