diff --git a/app.js b/app.js new file mode 100644 index 0000000..e69de29 diff --git a/images/clear.png b/images/clear.png new file mode 100644 index 0000000..d2bc413 Binary files /dev/null and b/images/clear.png differ diff --git a/images/clouds.png b/images/clouds.png new file mode 100644 index 0000000..75ef047 Binary files /dev/null and b/images/clouds.png differ diff --git a/images/drizzle.png b/images/drizzle.png new file mode 100644 index 0000000..01cd0e7 Binary files /dev/null and b/images/drizzle.png differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..75aed28 Binary files /dev/null and b/images/favicon.png differ diff --git a/images/humidity.png b/images/humidity.png new file mode 100644 index 0000000..804ef0c Binary files /dev/null and b/images/humidity.png differ diff --git a/images/kolkata.jpg b/images/kolkata.jpg new file mode 100644 index 0000000..bb43d1c Binary files /dev/null and b/images/kolkata.jpg differ diff --git a/images/mist.png b/images/mist.png new file mode 100644 index 0000000..15ee1fd Binary files /dev/null and b/images/mist.png differ diff --git a/images/rain.png b/images/rain.png new file mode 100644 index 0000000..5c436c8 Binary files /dev/null and b/images/rain.png differ diff --git a/images/search.png b/images/search.png new file mode 100644 index 0000000..95ec64e Binary files /dev/null and b/images/search.png differ diff --git a/images/snow.png b/images/snow.png new file mode 100644 index 0000000..e03778d Binary files /dev/null and b/images/snow.png differ diff --git a/images/wind.png b/images/wind.png new file mode 100644 index 0000000..b9811a6 Binary files /dev/null and b/images/wind.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..51f4adc --- /dev/null +++ b/index.html @@ -0,0 +1,47 @@ + + + + + + Weather App - Find weather of any city + + + + + + +
+
+ + +
+ +
+ + +

22°c

+

Kolkata

+ +
+
+ + +
+

50%

+

Humidity

+
+
+
+ + +
+

15 km/h

+

Wind Speed

+
+
+
+
+ +
+ + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ef6a80e --- /dev/null +++ b/style.css @@ -0,0 +1,179 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + list-style: none; + text-decoration: none; + color: white; +} + +html, body{ + height: 100%; + width: 100%; + background-color: #222; + overflow: hidden; + font-family: "poppins", sans-serif; +} + +#city-img{ + width: 60%; + height: 100vh; + object-fit: cover; + position: relative; +} + +.app-container{ + position: absolute; + top: 30px; + right: 150px; + width: 90%; + max-width: 470px; + background: linear-gradient(135deg, hsla(354, 95%, 24%, 1) 0%, hsla(234, 70%, 24%, 1) 100%); + margin: 100px auto 0; /********/ + border-radius: 20px; + padding: 40px 35px; + text-align: center; +} + +.search-box{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.search-box input{ + height: 60px; + flex: 1; + font-size: 18px; + padding: 10px 25px; + border-radius: 25px; + color: #555; + background-color: #ebfffc; + border: none; + margin-right: 16px; + display: flex; + justify-content: center; +} +.search-box input:focus{ + outline: none; +} + +#search{ + background-color: #ebfffc; + border-radius: 50%; + border: none; + outline: none; + width: 60px; + height: 60px; + cursor: pointer; +} + +#search img{ + width: 20px; +} + +.weather-icon{ + width: 170px; + margin-top: 30px; +} + +#temp{ + font-size: 80px; + font-weight: 500; +} +#city{ + font-size: 45px; + font-weight: 400; + margin-top: -10px; +} + + +.details{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + margin-top: 50px; +} + +.col{ + display: flex; + align-items: center; + text-align: left; +} + +.col img{ + width: 40px; + margin-right: 10px; + margin-top: 0; +} + +.humidity, .wind{ + font-size: 28px; + margin-top: -6px; +} + + + +@media screen and (max-width:1000px) { + body{ + display: flex; + justify-content: center; + align-items: center; + } + #city-img{ + width: 100%; + height: 100vh; + } + .app-container{ + position: absolute; + top: 10px; + right: 100px; + width: 90%; + max-width: 470px; + } +} + +@media screen and (max-width:550px) { + body{ + display: flex; + justify-content: center; + align-items: center; + } + #city-img{ + width: 100%; + height: 100%; + object-fit: cover; + } + .app-container{ + top: 50px; + left: 20px; + right: 50px; + width: 90vw; + max-width: 470px; + height: 85vh; + margin: 0; + } + .details{ + display: flex; + justify-content: space-between; + align-items: center; + gap: 20px; + } + .search-box input{ + height: 60px; + width: 30%; + } + .col img{ + width: 30px; + } + .humidity, .wind{ + font-size: 15px; + } + .col div:last-child{ + font-size: 12px; + } +} \ No newline at end of file