Untitled

<body onload="getLocation" class="back-img">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
      <h1>Show the Local Weather App</h1>

      <div id="result"></div>

      <i class="fa fa-globe" aria-hidden="true"></i>  <i class="fa fa-location-arrow" aria-hidden="true"></i>
      <div>Country: <b><span id="country"></span></b></div>
      <div>City: <b><span id="city"></span></b></div>

      <br>
      <i class="fa fa-compass" aria-hidden="true"></i> <i class="fa fa-map-marker" aria-hidden="true"></i>
      <div>Latitude: <b><span id="latitude"></span></b></div>
      <div>Longitude: <b><span id="longitude"></span></b></div>

      <br>
      <i class="fa fa-cloud" aria-hidden="true"></i> <i class="fa fa-snowflake-o" aria-hidden="true"></i>
      <div>Weather: <b><span id="weather-main"></span></b></div>
      <div> -<b><span id="weather-descrip"></span></b>-</div>
      <div> <span id="weather-icon"></span></div>

      <br>
      <i class="fa fa-thermometer-quarter" aria-hidden="true"></i> <i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i>
      <div>Temperature: <b><span id="temperature"></span></b>
      </div>

      <div><span id ="celsius" class="cel-fahr"><strong> °C</strong> </span>|<span id="fahrenheit" class="cel-fahr"><strong> °F</strong></span></div>

      <br>
      <i class="fa fa-sun-o" aria-hidden="true"></i> <i class="fa fa-moon-o" aria-hidden="true"></i>
      <div>Sunrise at <b><span id="sunrise"></span></b></div>
      <div>Sunset at <b><span id="sunset"></span></b></div>
          </div>
        </div>
    </div>
  </body>