diff --git a/weather.css b/weather.css index fac26bd8..d09a2c00 100644 --- a/weather.css +++ b/weather.css @@ -1,55 +1,111 @@ -html, -body { + + +* { margin: 0; padding: 0; - overflow-x: hidden; + box-sizing: border-box; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + sans-serif; + transition: background-color 0.3s ease, color 0.3s ease, + border-color 0.3s ease; +} + +:root { + --primary-green: #2e7d32; + --light-green: #4caf50; + --dark-green: #2e7d32; + --accent-green: #4caf50; + --bg-primary: #f0f4f7; + --bg-secondary: #ffffff; + --text-primary: #333; + --text-secondary: #616161; + --border-light: #e0e0e0; + --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); + --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1); } -/* Existing styles */ body { - margin: 0 auto; - padding: 0; - background-image: url("https://www.transparenttextures.com/patterns/clean-textile.png"); + background-color: var(--bg-secondary, #f0f4f7); + color: var(--text-primary, #333); display: flex; flex-direction: column; + min-height: 100vh; + line-height: 1.6; } -/* Weather card */ -.box { - background-color: #ceecf7; - opacity: 1; - width: 60%; - max-width: 1100px; - height: 600px; - margin: 50px auto; - /* remove left margin that caused overflow */ - /* margin-left: 22%; */ +header { + background: linear-gradient(to right, #2e7d32, #4caf50); + color: white; + padding: 1.5rem 0; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + position: relative; +} - border-radius: 20px; - box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.389); +.header-content { + max-width: 1200px; + margin: 0 auto; + padding: 0 1.5rem; display: flex; - flex-direction: row; - backdrop-filter: blur(10px); - background-color: rgba(255, 255, 255, 0.5); + justify-content: space-between; + align-items: center; } -/* Make sure inner content never exceeds box */ -.weather-box { - box-sizing: border-box; +.logo { + display: flex; + align-items: center; + gap: 12px; +} + +.logo i { + font-size: 2rem; + color: white; + animation: gentle-bounce 3s ease-in-out infinite; +} + +@keyframes gentle-bounce { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-3px); + } } -/* Left side */ -.box .left { +.logo h1 { + font-size: 1.8rem; + font-weight: 600; + color: white; +} + +.nav-back { + color: white; + background-color: rgba(255, 255, 255, 0.2); + padding: 10px 20px; + border-radius: 50px; + font-size: 1rem; + cursor: pointer; + text-decoration: none; + transition: all 0.3s ease; + border: none; display: flex; - flex-direction: column; - justify-content: space-evenly; - width: 400px; - max-width: 100%; - height: 100%; + align-items: center; + gap: 8px; } -.box .left .main { - text-align: center; +.nav-back:hover { + background-color: rgba(255, 255, 255, 0.3); + transform: translateY(-2px); +} + +body{ + margin: 0 auto; + padding: 0; + background-image: url("https://www.transparenttextures.com/patterns/clean-textile.png"); + display: flex; + flex-direction: column; } .box .left .main input { diff --git a/weather.html b/weather.html index 8f5436d8..9a78b849 100644 --- a/weather.html +++ b/weather.html @@ -1,55 +1,50 @@ - - - - + + + + + + + - - - - - - - - - - Weather Check System - - -
-
-
- -
- -
+ + + + Weather Check System + + +
+
+ +
+ -
-

City

-

Region

-
Country
-

-
mostly ---
-

40

- + + Back to Home + +
-
- -
-
-
-

Hourly forecast

+
+
+
+
+ +
+
@@ -65,60 +60,83 @@
mostly ---
-
- - - - - - - - - - +
© 2025 AgriTech • Made for farmers
+ + + + + + +