<!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title><%= it.siteTitel %></title>
  <meta name="description" content="<%= it.desc %>">
  <meta name="author" content="<%= it.author %>">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/barebones.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="images/favicon-16.png">


  <script async defer src="/js/site.js"></script>
  <script src="https://kit.fontawesome.com/<%= it.fontawesomeKey %>.js" crossorigin="anonymous"></script>

</head>
<body>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="grid-container thirds" style="margin-top: 5%;">
    <div></div>
      <div>
        <h1>The Elevator map</h1>
        <p>Some of you might have heard of trainspotters. There are also elevator spotters, more then you might expect. This map is dedicated to all the elevator spotters.</p>
      </div>
    </div>
  </div>

  <div class="grid-container thirds" style="margin-top: 5%;">
    <div></div>
    <div>
      <h5>
        Check it out now <br>
        <a href= "/map" ><button class="button-primary">Visit the map <i class="fas fa-arrow-right"></i> </button></a>
        <a href= "/createElevator" ><button class="button-primary">Create a new elevator <i class="fas fa-arrow-right"></i> </button></a>
      </h5>
      
    </div>
  </div>

  <div class="grid-container thirds" style="margin-top: 5%;">
    <div>
      <h3> <i class="fas fa-rocket"></i><br>
      Simply fast</h3>
    </div>
      <div>
        <h3> <i class="fas fa-hands"></i><br>
          Comunity driven</h3>
      </div>
      <div>
        <h3> <i class="fab fa-node-js"></i><br>
          Built on node.js</h3>
      </div>
    </div>
  </div>

  

  <div class="grid-container thirds" style="margin-top: 5%;">
    <div></div>
    <div>
      <h3>
        <i class="fas fa-atlas"></i><br>
        With currently <%= it.elevatorCount %> elevators in the map
      </h3>
    </div>
  </div>

<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
</html>
