templates/index.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

<div id="main">

  <div id="date">{{ now.time }}</div>

  <div id="current">
    <img src="{{ ds.img_url }}/{{ now.icon }}.{{ ds.img_ext }}" alt="{{ now.icon }}" />
    <div id="temp">{{ now.temperature | int }}&deg;</div>
    <div id="highlow">{{ now.high | int }}&deg;&nbsp;H<br />{{ now.low | int }}&deg;&nbsp;L</div>
  </div>
  <div id="conditions">
    <div id="text">{{ now.hour }}</div>
    <div id="detail">Feels like:&nbsp;{{ now.apparentTemperature | int }}&deg;&nbsp;
                     &nbsp;&nbsp;Wind:&nbsp;{{ now.windSpeed | int }}&nbsp;mph&nbsp;{{ now.windDir }}
                     <br />
                     Humidity:&nbsp;{{ now.humidity | int }}%&nbsp;&nbsp;
                     UV&nbsp;Index:&nbsp;{{ now.uvIndex | int }}&nbsp;&nbsp;
                     Pressure:&nbsp;{{ now.pressure | int }}&nbsp;mb</div>
  </div>

  <div class="forecast">
    {% for item in hourly %}
    <span class="next">
      {{ item.time }}
      <img src="{{ ds.img_url }}/{{ item.icon }}.{{ ds.img_ext }}" />
      {{ item.temp | int }}&deg;
    </span>
    {% endfor %}
  </div>

  <div id="week">{{ now.forecast }}</div>

  <div class="forecast">
    {% for item in daily %}
    <span class="next">
      {{ item.day }}
      <br />
      {{ item.date }}
      <img src=" {{ ds.img_url }}/{{ item.icon }}.{{ ds.img_ext }}" />
      {{ item.high | int }}&deg;<br />{{ item.low | int }}&deg;
    </span>
    {% endfor %}
  </div>

  <div id="footer">{{ now.city }}<p />Last Updated: {{ now.timestamp }}</div>

</div>
</body>
</html>