index.html

<!doctype <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="main.js"></script>
    <title>HW Pames</title>
  </head>



  <body>
        <nav class="navbar navbar-toggleable-sm bg-light navbar-inverse">
                <div class="container">
                    <button class="navbar-toggler" data-toggle="collapse" data-target="#mainNav">
                        <span class="navbar-toggler-text text-secondary">Latitude Plots</span>
                    </button>
                    <div class="collapse navbar-collapse" id="mainNav">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link active text-secondary" href="Data Table bootstraps.html">Data Table</a>
                            <a class="nav-item nav-link text-secondary" href="cloudiness.html">Cloudiness</a>
                            <a class="nav-item nav-link text-secondary" href="humidity.html">Humidity</a>
                            <a class="nav-item nav-link text-secondary" href="max_temp.html">Max Temperature</a>
                            <a class="nav-item nav-link text-secondary" href="wind_speed.html">Wind Speed</a>
                            
                        </div>
                    </div>
                </div>
        
        </nav>
            <br>







       <!-- <section class="jumbotron text-center">-->
                <div class="container" style="position: absolute; left: 100px; top: 275px;">
                        <h1 class="jumbotron-heading text-center">Latitude Plots</h1>
                  <p class="lead text-muted text-center">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.

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. This site provides the source data and visualizations created as part of the analysis, as well as explanations and descriptions of any trends and correlations witnessed.</p>
                  <p>
                    <a href="Data Table bootstraps.html" class="btn btn-primary my-2">Data Table</a>
                    <a href="wind_speed.html" class="btn btn-secondary my-2">vs. Wind Speed</a>
                    <a href="cloudiness.html" class="btn btn-secondary my-2">vs. Cloudiness</a>
                    <a href="humidity.html" class="btn btn-secondary my-2">vs. Humidity </a>
                    <a href="max_temp.html" class="btn btn-secondary my-2">vs. Max Temperature</a>
                  </p>
                </div>
        <!--</section>-->




        

                <div class="container" style="position: absolute; left: 75px;  top: 400px;">
                        <div class="row">

                          <div class="col" style="position: absolute; left: 500px; top: 600px;"><a target="_blank" href="assets/images/Fig1.png">
                            <img src="assets/images/Fig1.png" style="width: 500px; height: 400px;" class="rounded float-left" alt="...">
                          </a></div>
                          
                          <div class="col" style="position: absolute; left: 0px; top: 600px;"><a target="_blank" href="assets/images/Fig2.png">
                            <img src="assets/images/Fig2.png" style="width: 500px; height: 400px;" class="rounded float-left" alt="...">
                          </a></div>
                          
                          <div class="w-200"></div>
                          
                          <div class="col" style="position: absolute; left: 500px; top: 200px;"><a target="_blank" href="assets/images/Fig3.png">
                            <img src="assets/images/Fig3.png" style="width: 500px; height: 400px;" class="rounded float-left" alt="...">
                          </a></div>
                          
                          
                          <div class="col" style="position: absolute; left: 0px; top: 200px;"><a target="_blank" href="assets/images/Fig4.png">
                            <img src="assets/images/Fig4.png" style="width: 500px; height: 400px;" class="rounded float-left" alt="...">
                          </a></div>
                        </div>
                </div>
               
                <!--<figure class="figure">
                        <img src="https://www.mathsisfun.com/data/images/bar-graph-fruit.svg" class="rounded float-left" alt="...">
                        <img src="https://www.mathsisfun.com/data/images/bar-graph-fruit.svg" class="rounded float-right" alt="...">
                        <img src=".../400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
                        <figcaption class="figure-caption">A caption for the above image.</figcaption>
                </figure>-->
        
        













    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>