WEATHER-VISUALIZATION-DASHBOARD---Web-Design-HTML-CSS/humidity.html at main · kfmatovic716/WEATHER-VISUALIZATION-DASHBOARD---Web-Design-HTML-CSS · 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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Humidity vs Latitude</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style_visual.css">
</head>

<body class="background-img">
    <nav class="navbar navbar-light">
        <div class="container-fluid">
          <span class="navbar-brand mb-0 h1"><h1><a href="index.html"><img src=http://www.westcoastweathervanes.com/wp-content/uploads/2014/05/Arabian-Horse-Weathervane-High-Stepping-P1.jpg alt="weather vane" width="100" height="100" style="border: whitesmoke 3px solid"/></a>Latitude</h1>
          </span>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                         <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                          Plots
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                          <li><a class="dropdown-item" href="temperature.html">Max Temperature</a></li>
                          <li><a class="dropdown-item" href="humidity.html">Humidity</a></li>
                          <li><a class="dropdown-item" href="cloudcover.html">Cloudiness</a></li>
                          <li><a class="dropdown-item" href="windspeed.html">Wind Speed</a></li>
                        </ul>
                    <li class="nav-item">
                        <a class="nav-link" href="comparison.html">Comparison</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="datasource.html">Data</a>
                    </li>
                </ul>
            </div>
        </div>
      </nav>

  <div class='container'>

    <div class="row">

        <div id="humid_visual" class="col-md-8">
          <h2>Humidity</h2>
        <hr>
          <p><img src="WebVisualizations/assets/images/Fig2.png" alt=humidity_visual class="align-left small"/>
          This figure shows that there is no strong relationship between latitude and humidity. However, Northern Hemisphere showed higher percentage of humidity
          levels compared to the Southern Hemisphere. Most cities are located in the Northern Hemisphere and are surrounded by bodies of water like lakes, rivers and
          beaches that help increase the supply of water consumed by people. Therefore, increases the amount of water vapor in the atmosphere.</p>
        </div>

      <div id="visuals" class="col-md-4">
        <h2>Visualizations</h2>

        <div class="row">
          <figure class="visual_left"><a href="temperature.html"><img src="WebVisualizations/assets/images/Fig1.png" alt="Fig1" width="90%"/></a></figure>
          <figure class="visual_right"><a href="humidity.html"><img src="WebVisualizations/assets/images/Fig2.png" alt="Fig2" width="90%" style="border: rgb(0, 153, 153) 3px solid;"/></a></figure>
          <figure class="visual_left"><a href="cloudcover.html"><img src="WebVisualizations/assets/images/Fig3.png" alt="Fig3" width="90%" /></a></figure>
          <figure class="visual_right"><a href="windspeed.html"><img src="WebVisualizations/assets/images/Fig4.png" alt="Fig4" width="90%" /></a></figure>
        </div>

      </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>