diff --git a/chrome_biiJhomyx0.png b/chrome_biiJhomyx0.png
new file mode 100644
index 0000000..5def781
Binary files /dev/null and b/chrome_biiJhomyx0.png differ
diff --git a/ui.html b/ui.html
new file mode 100644
index 0000000..5cf0a52
--- /dev/null
+++ b/ui.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title style="font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif">UI</title>
+    </head>
+    <style>
+        #bd{
+            background-image: url(https://i.pinimg.com/originals/0e/48/3f/0e483f808ad06b1bf4f140b7148668e8.png);
+            background-size: cover;
+        }
+        .di{
+            background-color: burlywood;
+            position: absolute;
+            height:600px;
+            width: 420px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            border-radius: 15px;
+            box-shadow: 0 4px 8px 0 rgba(0, 0,0, 0.2) , 0 6px 20px 0 rgba(0,0,0,0.19);
+        }
+        input[type=text]{
+           
+            background-color:  burlywood;
+            position:absolute;
+            outline: none;
+            top:47%;
+            color: rgb(43, 104, 127);
+            left: 9.5%;
+            width: 80%;
+            padding: 8px 0;
+            border:none;
+            border-bottom: 2px solid rgb(16, 85, 107);
+            font-size: 20px;
+            -webkit-transition: 0.5s;
+            transition: 0.5s;
+  transition: 0.5s;
+        }
+        input[type=password]{ 
+            background-color:  burlywood;
+            position:absolute;
+            outline: none;
+            top:60%;
+            color: rgb(43, 104, 127);
+            left: 9.5%;
+            width: 80%;
+            padding: 8px 0;
+            border:none;
+            border-bottom: 2px solid rgb(16, 85, 107);
+            font-size: 20px;
+            -webkit-transition: 0.5s;
+            transition: 0.5s;
+        }
+        input[type=password]:hover{border-bottom-color: antiquewhite;}
+        input[type=text]:hover{border-bottom-color: antiquewhite;}
+        button[type=submit]{
+            position: absolute;
+            width:20%;
+            top:75%;
+            left:37%;
+            font-size: 17px;
+            padding:6px 0;
+            border:none;
+            border-radius:10px;
+            background:linear-gradient(to right, rgb(88,112,86),rgb(127,152,71) );
+            cursor: pointer;
+        }
+
+        #sp{position: absolute;
+        top:89%;
+        left: 9.5%; 
+        font-family: 'Times New Roman', Times, serif;
+        font-size: 17px;  
+        color:  rgb(16, 85, 107);
+        }
+        #span{
+            color:rgb(37, 119, 69);
+            font-size: 20px;
+        }
+    </style>
+    <body id="bd" >
+        <div class="di">
+            <image style="background-color: burlywood;width:120px;position: absolute;left:35%;top:15%" src="https://i.pinimg.com/originals/15/6d/f3/156df304c6ffc6f3affbd5f78f722c4e.png">
+                <form>
+                    <input type="text" placeholder="Email">
+                    <input type="password" placeholder="Password">
+                    <button type="submit" value="login">LOGIN</button>
+                </form>
+                <span id="sp" style="cursor: context-menu; ">Don't have an account? <span id="span" style="cursor: pointer;">Sign Up</span></span>
+        </div>
+
+    </body>
+    </html>
+
+
+</html>
\ No newline at end of file
diff --git a/weather.css b/weather.css
new file mode 100644
index 0000000..1fe4efb
--- /dev/null
+++ b/weather.css
@@ -0,0 +1,127 @@
+*{
+    padding:0px;
+    margin:0px;
+}
+body{
+    font-family: 'Oswald',sans-seriff;
+    background-image: url('https://github.com/Subhash2807/test1/blob/master/ian-tuck-lieECYO-yTo-unsplash.jpg?raw=true');
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color:rgba(170, 183, 197, 0.959);
+    
+}
+
+@media screen and (min-width: 500px){
+#WeatherContent {
+    
+    height: 500px;
+    width :400px;
+    background-color:#769BBE;
+    position:absolute;
+    left:50%;
+    top:50%;
+   transform: translate(-50%,-50%);
+   border-radius:50px;
+   box-shadow:  12px 12px 15px #444141;
+   font-size: 20px;
+   
+  
+}
+input{
+    height:30px;
+    width:300px;
+    /* border-radius:20px; */
+    background:transparent;
+    border:0px;
+    outline:0px;
+    border-bottom:3px solid rgba(1,1,11,1);
+    text-align: center;
+    font-size: 25px;
+}
+::placeholder{
+color:black;
+font-size:20px;
+text-align: center;
+}
+#dis{
+padding-top:50px;
+
+}
+button{
+    margin-top:30px;
+    height:40px;
+    width:120px;
+    font-size:20px;
+    border-radius: 12px;
+    border:0;
+    box-shadow: 3px 3px 3px rgba(1,1,11,1);
+    outline:none;
+}
+
+}
+@media screen and (max-width: 500px)
+{
+    
+#WeatherContent {
+    
+    height: 300px;
+    width :200px;
+    background-color:#769BBE;
+    position:absolute;
+    left:50%;
+    top:50%;
+   transform: translate(-50%,-50%);
+   border-radius:25px;
+   box-shadow:  6px 6px 8px #444141;
+   font-size: 20px;
+   
+   
+  
+}
+input{
+
+    height:15px;
+    width:150px;
+    /* border-radius:20px; */
+    background:transparent;
+    border:0px;
+    outline:0px;
+    border-bottom:1.5px solid rgb(28, 32, 39);
+    text-align: center;
+    font-size: 12px;
+    margin-top:-12px;
+}
+::placeholder{
+color:black;
+font-size:10px;
+text-align: center;
+/* font-weight: ; */
+}
+#dis{
+padding-top:50px;
+
+}
+button{
+    margin-top:15px;
+    height:20px;
+    width:60px;
+    font-size:10px;
+    border-radius: 6px;
+    border:0;
+    box-shadow: 1.5px 1.5px 1.5px rgba(1,1,11,1);
+    outline:none;
+    margin-top:25px
+}
+#temp{
+    font-size:13px;
+}
+img{
+    height: 50px;
+}
+#dis{
+    font-size:12.5px;
+    margin-top:-15px;
+}
+}
diff --git a/weather.html b/weather.html
new file mode 100644
index 0000000..0fb98e6
--- /dev/null
+++ b/weather.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+    <head>
+            <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
+            <meta charset="UTF-8">
+            <meta name="discription" content="get the latest weather updates">
+            <meta name="Keywords" content="Weather,HTML,CSS,JavaScript,">
+            <meta name="author" content="Subhash">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <link rel="icon" href="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRZZvVnYYC2dzQ5EzgdJl1sR-raQOF74DouXQzzl4-7_xYcJTZz" type="image/gif" sizes="16x16">
+            <link rel="stylesheet" href="weather.css" type="text/css">
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+            <title>
+            Weather app using api.
+             </title>
+        <script src="tese.js" type="text/javascript"></script>
+    </head>
+    <body onload="defult()">
+        <div id="WeatherContent" align="center">
+            <div id="inpt">
+                <div  id="dis"><H3>WEATHER APPLICATION<br><br></H3></div>
+                <input id="city" placeholder="Enter the city name"><br>
+                <button onclick="weathr()">
+                    WEATHER
+                </button>
+                <p id ="temp"></p> 
+                <img src="" id="img">          
+            </div>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/weather.js b/weather.js
new file mode 100644
index 0000000..8a75ea6
--- /dev/null
+++ b/weather.js
@@ -0,0 +1,45 @@
+function weathr(){
+    
+    var    city1 = document.getElementById('city').value;
+    var  link_api='http://api.openweathermap.org/data/2.5/weather?q='+city1+'&appid=e8cde246c8e175455f7354975fd34a4a&units=metric';
+    fetch(link_api)
+   .then(
+     function(valu) {
+     if (valu.status !== 200) {
+      document.getElementById('temp').innerHTML='<br>Please enter correct city';
+     return;
+    } 
+
+valu.json().then(function(data) {
+document.getElementById('temp').innerHTML='<br><p>City : ' + city1 + ' <p>Temperature : '+ (data.main.temp) + '&#8451;</p><p>Humidity : '+data.main.humidity+'%</p>';
+document.getElementById('img').src='https://raw.githubusercontent.com/Subhash2807/Weather-App-JavaScript/master/icons/' + data.weather[0].icon+'.png';
+// imge(data.weather[0].main);
+});
+}
+)
+;
+}
+
+function defult(){
+    
+    var  link_api='http://api.openweathermap.org/data/2.5/weather?q=lucknow&appid=e8cde246c8e175455f7354975fd34a4a&units=metric';
+    fetch(link_api)
+   .then(
+     function(valu) {
+
+valu.json().then(function(data) {
+document.getElementById('temp').innerHTML='<br><p>City : Lucknow <p>Temperature : '+ Math.floor(data.main.temp) +'&#8451;</p><p>Humidity : '+data.main.humidity+' %</p>';
+document.getElementById('img').src='https://raw.githubusercontent.com/Subhash2807/Weather-App-JavaScript/master/icons/' + data.weather[0].icon+'.png';
+imge(data.weather[0].main);
+
+});
+}
+)
+.catch(function(err) {
+console.log('Fetch Error :-S', err);
+});
+}
+
+
+
+