WeatherApp/index.html at main · imcody7/WeatherApp · 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Weather App</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
      rel="stylesheet"
    />
    <link rel="shortcut icon" href="data:image/png;base64,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">
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.0.7/css/all.css"
    />
    <link rel="stylesheet" href="./styles.css" />

  </head>

  <body>
    <div class="card">
      <div class="search">
        <input type="text" class="search-bar" placeholder="Search" />
        <button>
          <svg
            stroke="currentColor"
            fill="currentColor"
            stroke-width="0"
            viewBox="0 0 1024 1024"
            height="1.5em"
            width="1.5em"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0 0 11.6 0l43.6-43.5a8.2 8.2 0 0 0 0-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
            ></path>
          </svg>
        </button>
      </div>
      <div class="weather loading">
        <h2 class="city">Weather in Dehradun</h2>
        <h1 class="temp">26°C</h1>
        <div class="flex">
          <img
            src="https://openweathermap.org/img/wn/04n.png"
            alt=""
            class="icon"
          />
          <div class="description">Cloudy</div>
        </div>
        <div class="humidity">Humidity: 30%</div>
        <div class="wind">Wind speed: 6.2 km/h</div>
      </div>
      <br><br>
      <div id="my-info">
        Designed & developed by <span>Anurag Rawat</span>
        <a href="https://github.com/imcody7" target="_blank">
          <i class="fab fa-github"></i
        ></a>
        <a href="https://www.linkedin.com/in/anuragrawat7/" target="_blank">
          <i class="fab fa-linkedin-in"></i
        ></a>
      </div>
    </div>
     <script src="./script.js"></script>
  </body>
</html>