From 4fb7d2ea042b1b543ec12b027c04626f3fedd165 Mon Sep 17 00:00:00 2001
From: CyberSphinxxx <johnlemargonzales@gmail.com>
Date: Sun, 22 Sep 2024 23:31:32 +0800
Subject: [PATCH] added on hover transitions

---
 index.html | 12 +++++-------
 styles.css |  9 ++++++---
 2 files changed, 11 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index af48fd5..3a2d2ee 100644
--- a/index.html
+++ b/index.html
@@ -10,11 +10,11 @@
 <body>
     <div id="containerWrapper">
         <div id="bg_container">
-            <h1 style="text-align: center;">Weather App☀️</h1>
+            <h1 style="text-align: center;">WeatherNow</h1> <!-- Title -->
     
             <input type="text" id="cityInput" placeholder="Enter city name">
             <button id="getWeatherBtn">Get Weather</button>
-    
+            
             <div class="weather-info">
                 <div class="info_container">
                     <h2 id="cityName"></h2>
@@ -25,16 +25,13 @@ <h2 id="cityName"></h2>
                 <div class="info_container">
                     <p id="weatherDescription"></p>
                 </div>
-
-                <div id="weatherType"></div>
-
-
+                
             </div>
     
             <button id="showMoreBtn">Show More Info</button>
         </div>
     
-        <!-- New Detailed Weather Info Container -->
+        <!-- Detailed Weather Info Container -->
         <div id="moreInfoContainer" style="display: none;">
             <h2>More Weather Info</h2>
             <div class="info_container">
@@ -46,6 +43,7 @@ <h2>More Weather Info</h2>
     </div>
     
 
+    <!-- Footer buttons -->
     <a href="https://github.com/CyberSphinxxx">
         <div class="footer">
             App by: @John Lemar Gonzales
diff --git a/styles.css b/styles.css
index 59ee259..5b53305 100644
--- a/styles.css
+++ b/styles.css
@@ -12,7 +12,6 @@ body {
     background-size: cover;
 }
 
-/* Universal Box Sizing */
 * {
     box-sizing: border-box; /* Ensures padding and border are included in width */
 }
@@ -27,7 +26,7 @@ body {
 
 /* Main Container */
 #bg_container {
-    background-color: rgba(255, 255, 255, 0.85);
+    background-color: rgba(255, 255, 255, 0.80);
     padding: 40px 30px;
     border-radius: 15px;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
@@ -36,6 +35,11 @@ body {
     margin-right: 20px; /* Space between containers */
     border: 1px, rgb(0, 0, 0);
     border-style: solid;
+    transition: background-color 0.5s ease-in-out;
+}
+
+#bg_container:hover{
+    background-color: rgba(185, 185, 185, 0.8);
 }
 
 /* More Info Container */
@@ -98,7 +102,6 @@ button:hover {
     margin-top: 5px;
 }
 
-/* Footer Styles */
 .footer {
     position: fixed;
     bottom: 10px; 
