Web-Design-Challenge/temperature.html at master · subilu84/Web-Design-Challenge · 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
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Temperatute</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <body>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid navbar-custom">
          <a class="navbar-brand" href="index.html"><h1>Latitude</h1></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Plots
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <a class="dropdown-item" href="temperature.html">Max Temperature</a>
                      <a class="dropdown-item" href="humidity.html">Humidity</a>
                      <a class="dropdown-item" href="clouds.html">Cloudiness</a>
                      <a class="dropdown-item" href="wind.html">Wind Speed</a>
                      </div>
                  </li>
                  <li class="nav-item active"><a class="nav-link" href="comparison.html">Comparison </a>
                  </li>
                  <li class="nav-item"><a class="nav-link" href="data.html">Data</a>
                  </li>
               </ul>
          </div>
        </div>
      </nav>


    <main class="main-bio">
        <section id="main-bio">
            <section id="figure">
              <h2 id="bio-name">Max Temperature</h2><br>
              <img id="bio-image1" src="lat_temp.png" alt="Lattitude">
            </section>
            <p>The temperature gets warmer as close we get from the equator (0 Degrees of Latitude). We can notice the weather in the Southern Hemisphere is getting colder (Fall) and surprisingly still pretty cold in the Northern Hemisphere, considering that now it’s spring, we were supposed to get higher temperature.</p>
        </section>

    <div class="visualization">
      <h2>Visualization</h2>
      <hr>
      <section id="visual">
        <a href="temperature.html">
          <img alt="temp" src="lat_temp.png" width="120" height="130">
        </a>
        <a href="clouds.html">
          <img alt="cld" src="lat_cld.png" width="120" height="130">
        </a>
        <a href="humidity.html">
          <img alt="hum" src="lat_hum.png" width="120" height="130">
        </a>
        <a href="wind.html">
          <img alt="wind" src="lat_wind.png" width="120" height="130">
      </a>
      </section>
    </div>

    </main>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
  </head>
</html>