Initial Commit

Shaw145 · Apr 28, 2024 · 9e9be2e · 9e9be2e
commit 9e9be2e
Show file tree

Hide file tree

Showing 14 changed files with 226 additions and 0 deletions.
diff --git a/app.js b/app.js
diff --git a/images/clear.png b/images/clear.png
diff --git a/images/clouds.png b/images/clouds.png
diff --git a/images/drizzle.png b/images/drizzle.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/humidity.png b/images/humidity.png
diff --git a/images/kolkata.jpg b/images/kolkata.jpg
diff --git a/images/mist.png b/images/mist.png
diff --git a/images/rain.png b/images/rain.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/snow.png b/images/snow.png
diff --git a/images/wind.png b/images/wind.png
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App - Find weather of any city</title>
+    <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
+    <link rel="stylesheet" href="style.css">
+    <script src="app.js" defer></script>
+</head>
+<body>
+    <img src="images/kolkata.jpg" alt="" id="city-img">
+    <div class="app-container">
+        <div class="search-box">
+            <input type="text" name="city" id="city-input" placeholder="Enter City Name" spellcheck="false">
+            <button id="search"><img src="images/search.png" alt=""></button>
+        </div>
+
+        <div class="weather">
+            <img src="images/snow.png" alt="">
+
+            <h1 id="temp">22°c</h1>
+            <h2 id="city">Kolkata</h2>
+
+            <div class="details">
+                <div class="col">
+                    <img src="images/humidity.png" alt="" class="weather-icon">
+
+                    <div>
+                        <p class="humidity">50%</p>
+                        <p>Humidity</p>
+                    </div>
+                </div>
+                <div class="col">
+                    <img src="images/wind.png" alt="">
+
+                    <div>
+                        <p class="wind">15 km/h</p>
+                        <p>Wind Speed</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</body>
+</html>
diff --git a/style.css 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;
+    }
+}