<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>ding weather</title>
    
    <script src="openweathermaplib.js"></script>
    <script src="app.js" defer></script>

    
    <link href="/style/fxbuildingblocks/input_areas.css" rel="stylesheet" type="text/css">

    <link href="/style/main.css" rel="stylesheet" type="text/css">
    
  </head>

  <body>
    <h1 id=#city>Random City</h1>
    
    <form role="search">
      <p>
        <input placeholder="Search..." type="text">
        <button type="reset">Clear</button>
      </p>
   </form>
  </body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">

    <title>ding weather</title>
    
    <script src="openweathermaplib.js"></script>
    <script src="app.js" defer></script>

    
    <link href="/style/fxbuildingblocks/input_areas.css" rel="stylesheet" type="text/css">
    <link href="/style/fxbuildingblocks/headers.css" rel="stylesheet" type="text/css">
    <link href="/style/fxbuildingblocks/layout.css" rel="stylesheet" type="text/css">

    <link href="/style/main.css" rel="stylesheet" type="text/css">
    
  </head>

  <body>
    
    <section role="region" class="vbox fit">
      <header>
        <h1 id=#city>Random City</h1>
      </header>
      
      <section class="fit scroll sticky">
        
      </section>
      
      <footer class="gaia-footer">
        <form role="search">
          <p>
            <input placeholder="Search..." type="text">
            <button type="reset">Clear</button>
          </p>
        </form>
      </footer>
    </section>
  
  </body>

</html>
Use building blocks layout, header and footer
Use building blocks layout, header and footer
