HTML_CSS_Weather_Data_Dashboard/Wind_Speed.html at master · JorgeArV/HTML_CSS_Weather_Data_Dashboard · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Web_Design_Challenge</title>
  <link rel="stylesheet" href="reset.css">
  <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' type='text/css' href="style.css">
</head>

<body>

<!--Top bar-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="index.html">Latitude </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#"> <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Plots
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="Max_temp.html">Max. Temperature</a>
                <a class="dropdown-item" href="Humidity.html">Humidity</a>
                <a class="dropdown-item" href="Cloudiness.html">Cloudiness</a>
                <a class="dropdown-item" href="Wind_Speed.html">Wind Speed</a>
              </div>
            <li class="nav-item">
              <a class="nav-link" href="Comparison.html">Comparison</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="data1.html">Data</a>
            </li>
            </li>
          </ul>
        </div>
      </nav>

  <div class="container">

    <!--Titles-->
    <p>
    <div class="row">
        <div class="col-md-5 p-3 mb-2 bg-info text-white" ><h2><center>Summary: Latitude vs. Wind Speed</center></h2></div>
        <div class="col-md-1" style="background-color:#d0d0e1;"></div>
        <div class="col-md-6 p-3 mb-2 bg-info text-white"><h2><center>Visualizations</center></h2></div>
      </div>
    </p>

    <!--Top three graphs-->
      <div class="row">
        <div class="col-md-4" style="background-color:#ffffff;"><img src = 'Resources/assets/images/Fig4.png' style="width:460px;height:350px;"> </div>
        <div class="col-md-1"> </div>
        <div class="col-md-1"> </div>
        <div class="col-md-3" style="background-color:#ffffff;"><a href="Max_temp.html"><img src = 'Resources/assets/images/Fig1.png' style="width:275px;height:250px;" id =left-up2></a> </div>
        <div class="col-md-1" style="background-color:#ffffff;"></div>
        <div class="col-md-2" style="background-color:#ffffff;"><a href="Humidity.html"><img src = 'Resources/assets/images/Fig2.png' style="width:275px;height:250px;" id =right-up2></a></div>
      </div>

    <!--Text in left section & bottom two graphs-->
        <div class="row">
          <div class="col-md-5" style="background-color:#ffffff;">We can not find a visible correlation between city latitude and wind speed. Both cities in the north and south have varying wind speeds. It is worth noting though that wind speeds beyond 25mph are only found in the northern hemisphere. </div>
          <div class="col-md-1"> </div>
          <div class="col-md-2" style="background-color:#ffffff;"><a href="Cloudiness.html"><img src = 'Resources/assets/images/Fig3.png' style="width:275px;height:250px;" id =left-down2></a></div>
          <div class="col-md-1" ></div>
          <div class="col-md-2" style="background-color:#ffffff;"><a href="Wind_Speed.html"><img src = 'Resources/assets/images/Fig4.png' style="width:275px;height:250px;" id =right-down2></a></div>
        </div>

    <!--Aditional row to ensure that white section of the page is uniform-->
      <div class="row">
        <div class="col-md-5 text-white" style="background-color:#ffffff;">empty row</div>
        <div class="col-md-1 text-white" ></div>
        <div class="col-md-2" style="background-color:#ffffff;" ></div>
        <div class="col-md-1" style="background-color:#ffffff;"></div>
        <div class="col-md-2" style="background-color:#ffffff;"></div>
       </div>


  <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>
</html>