Weather-Forecast-WebApp/index.html at main · Allwina/Weather-Forecast-WebApp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather Forecasting</title>
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<script src="./func.js" defer></script>
</head>
<body>
   <div class="head"><h1>WEATHER FORECASTING</h1><br></div><br>

    <div class="main">

        <div class="search">
            <input type="text" class="search-bar" placeholder="search your place">
            <button><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
              </svg></button>
        </div>
        <div class="weather loading">
            <div class="city">Delhi</div>
            <div class="temp">22 °C</div>
           <img src="https://openweathermap.org/img/wn/04n.png" alt="" class="icon" />
           <div class="description">Rainy </div>
            <div class="humidity">Humidity: 60%</div>
            <div class="wind">Wind Speed :4 km/h</div>
            <div class="date">Date: 2022-03-25</div>
        </div>
      </div>

    </div>


</body>
<div class="hour"><a href="hourly.html" target="blank">Click here hor Hourly details</a>
<div class="hour"><a href="day.html" target="blank">Click here hor Daily details</a>

</html>