Web-Design-Challenge/clouds.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
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="UTF-8">
    <title>Cloudiness</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">Cloudiness</h2><br>
              <img id="bio-image1" src="lat_cld.png" alt="Lattitude">
            </section>
            <p>In this chart the cloudiness is basically the same amount in Northern and Southern Hemisphere, even though, the Northern Hemisphere there’s more clouds, maybe because of the time that the chart was plot (April showers). Getting close to the equator (0 Degrees of Latitude) we can notice there’s a little less cloud than both Hemispheres.</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>