Weather_API/index.html at master · hanyang2019/Weather_API · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/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" href="css/land_style.css">
    <title>landing page</title>
</head>
<body>
    <div class="container-full">
        <div class="row">
          <!--Navibar  use code from bootstrap website-->
            <div class="col-md-12">
                <nav class="navbar navbar-expand-lg navbar-light bg-light">
                  <a class="navbar-brand" href="index.html">Lattitude</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="navbar-nav ml-auto">  <!-- ml-auto make plot, comparison ,data tab display in the right -->
                            <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="html/max_temp.html">Max Temperature</a>
                                <a class="dropdown-item" href="html/humidity.html">Humidity</a>
                                <a class="dropdown-item" href="html/cloudiness.html">Cloudiness</a>
                                <a class="dropdown-item" href="html/wind_speed.html">Wind Speed</a>
                              </div>
                             </li>
                               <li class="nav-item active">
                               <a class="nav-link" href="html/comparison.html">Comparison <span class="sr-only">(current)</span></a>
                               </li>
                              <li class="nav-item active">
                                <a class="nav-link" href="html/data.html">Data <span class="sr-only">(current)</span></a>
                               </li>
                           </ul>
                         </div>
                 </nav>
             </div>
         </div>
         <!-- another row 8 cloumns for summary and 4 columns for visualization-->
         <div class="row">
              <div class="col-md-8">
                  <div class="box white">
                     <h1 class="head">Summary: Latitude vs. X </h1>
                     <hr>
                     <img id="img_left" src="Images/earth.png" > <!--#img_left make pic a thumbnali pic and display at left of the text -->
                     <p align="justify">  The purpose of this project was to analyze how weather changes as you get closer to the equator. To accomplish this analysis, we first pulled data from the OpenWeatherMap API to assemble a dataset on over 500 cities.</p>
                     <br>
                     <br>
                     <p align="justify">After assembling the dataset, we used Matplotlib to plot various aspects of the weather vs. latitude. Factors we looked at included: temperature, cloudiness, wind speed, and humidity. The site provides the source dataq and visualiztions created as part of the analysis, as well as explanations and descriptions of any trends and correlations witnessed.</p>
                   </div>
                 </div>
                  <div class="col-md-4">
                      <div class="box white">
                          <h3 class="head">Visualizations</h3>
                          <hr>
                          <div id="img_list"> <!--#img_list set the width=2*img_size in order to display a 2x2 grid-->
                              <a href="html/cloudiness.html"><img src="Images/l_c.png" class="img_size"/></a>
                              <a href="html/humidity.html"><img src="Images/l_h.png" class="img_size" /></a>
                              <a href="html/max_temp.html"><img src="Images/l_mf.png" class="img_size" /></a>
                              <a href="html/wind_speed.html"><img src="Images/l_w.png" class="img_size"/></a>
                            </div>
                       </div>
                   </div>
           </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>