HTML_CSS_Weather_Data_Dashboard/Max_temp.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
<!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. Max. Temperature</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/Fig1.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;">There is a correlation between city latitude and temperature: We can observe that temperature increases as southern cities come closer ot the equator. More interestingly though is the drastic decrease in temperature of northern cities as further north they are located. </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>