Merge pull request #5067 from Siwanikaushik/main

Updated background color, text appearance, balloons colors, alignment…
kunjgit · Aug 4, 2024 · ad1eb7f · ad1eb7f
2 parents df9b145 + 89bcd25
commit ad1eb7f
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 22 deletions.
diff --git a/Games/Balloon_Popup/Balloon_Popup.png b/Games/Balloon_Popup/Balloon_Popup.png
diff --git a/Games/Balloon_Popup/app.js b/Games/Balloon_Popup/app.js
@@ -4,7 +4,7 @@ document.addEventListener('mouseover', function(e){
 
     if (e.target.className === "balloon"){
 
-                e.target.style.backgroundColor = "#ededed";
+                e.target.style.backgroundColor = "rgb(227, 107, 163)";
                 e.target.textContent = "POP!";
                 popped++;
                 removeEvent(e);

diff --git a/Games/Balloon_Popup/ballon.png b/Games/Balloon_Popup/ballon.png
diff --git a/Games/Balloon_Popup/balloon_pop.png b/Games/Balloon_Popup/balloon_pop.png
diff --git a/Games/Balloon_Popup/index.html b/Games/Balloon_Popup/index.html
@@ -9,8 +9,8 @@
 </head>
 <body>
     <div class="wrapper">
-        <h1>Pop the balloons by moving</br>your mouse over them</h1>
-        <div id="yay-no-balloons"><span class="blue">Wow!</span> All balloons popped!</div>
+        <img src="pop.png"; style="height: 200px;width: 250px;background-color:rgb(227, 107, 163) ;margin-left: 220px;"><h1>Pop the balloons by moving<br> your mouse over the them !!  </h1>
+        <div id="yay-no-balloons"><img src="ballon.png"; style="height: 200px;width: 200px;"><span class="blue">!!Wow!!<img src="ballon.png"; style="height: 200px;width: 200px;"><br></span> All balloons popped!</div>
         <div id="balloon-gallery">
             <div class="balloon"></div>
             <div class="balloon"></div>
@@ -36,6 +36,7 @@ <h1>Pop the balloons by moving</br>your mouse over them</h1>
             <div class="balloon"></div>
             <div class="balloon"></div>
             <div class="balloon"></div>
+
         </div>
 
     </div>

diff --git a/Games/Balloon_Popup/pop.png b/Games/Balloon_Popup/pop.png
diff --git a/Games/Balloon_Popup/style.css b/Games/Balloon_Popup/style.css
@@ -1,26 +1,30 @@
 body{
     font-family:sans-serif;
-    padding: 30px;
-    background:#ededed;
+    padding: 50px;
+    background:rgb(227, 107, 163);
 }
 
 .wrapper{
-    max-width: 690px;
-    margin: 0 auto;
+    max-width: 800px;
+    margin-left: 180px;
 }
 
 .blue {
-    color:#3f7abe;
+    color:#b53811;
+    margin-left: 10px;
+   font-size: larger;
 }
 
 h1{
     margin: auto;
-    margin-top: 50px;
+    margin-top: 10px;
     margin-bottom: 50px;
-    color: #08a3d9;
+    margin-left: 120px;
     text-transform: uppercase;
     font-size: 30px;
-    color: #000380;
+    color: #050648;
+    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-weight:bolder;
 }
 
 #balloon-gallery div{
@@ -39,23 +43,23 @@ h1{
 }
 
 #balloon-gallery div:nth-child(3n){
-    background: #ffce00;
-    color: #ffce00;
+    background: #6c0c65;
+    color: #6c0c65;
 }
 
 #balloon-gallery div:nth-child(3n-1){
-    background:#3f7abe;
-    color:#3f7abe;
+    background:#059434;
+    color:#059434;
 }
 
 #balloon-gallery div:nth-child(5n){
-    background:#8e7a8e;
-    color:#8e7a8e;
+    background:#3d1ee8;
+    color: #3d1ee8;
 }
 
 #balloon-gallery div:nth-child(13){
-    background:#8e7a8e;
-    color:#8e7a8e;
+    background:#3d1ee8;
+    color: #3d1ee8;
 }
 
 #balloon-gallery div:nth-child(10n){
@@ -64,11 +68,13 @@ h1{
 }
 
 #balloon-gallery div:nth-child(4n){
+    background:#cdb010;
+    color: #cdb010;
     clear:right;
 }
 
 #yay-no-balloons {
     display:none;
-    color:#ff3300;
-    font-size:100px;
-}
+    color:#0f0f10;
+    font-size:80px;
+}