event.hbs

<style>
  nav ul {
    list-style-type:none;
  }
  li h3 {
    color: black;
    font-family: "Open Sans Condensed",sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 50px;
    line-height: 50px;
    margin-top: 4px;
    margin-bottom: 4px;
  }
  li h3 a, li h3 a:visited{
    text-decoration: underline;
    color: black;
  }
  div.events-container {
    background-color: #F2F2F2;
    background-image: none;
  }
  div.events-container div.row p img {
    max-width:300px;
    max-height:80px;
    cursor:pointer;
  }
  /*npm logo*/
  div.events-container h2 img {
    position: relative;
    bottom: -10px;
    max-height:40px;
    cursor:pointer;
  }
  @media screen and (max-width: 600px) {
    div.side-navigation {
      visibility: collapse !important;
      display: none !important;
    }
  }
</style>

<div class="row">
  <div class="column column-40 side-navigation">
    <nav>
      <ul>
        <li><h3><a href="los-angeles.html">Los Angeles</a></h3></li>
        <li><h3><a href="bangalore.html">Bangalore</a></h3></li>
        <li><h3><a href="paris.html">Paris</a></h3></li>
        <li><h3><a href="beijing.html">Beijing</a></h3></li>
        <li><h3><a href="chicago.html">Chicago</a></h3></li>
        <li><h3><a href="london.html">London</a></h3></li>
        <li><h3><a href="boston.html">Boston</a></h3></li>
        <li><h3><a href="washington.html">Wash. DC</a></h3></li>
      </ul>
    </nav>
  </div>
  <div class="column">
    {{{content}}}
    <h2 id="conduct">Code of Conduct</h2>
    <p>
      All attendees, speakers, staff and sponsors are expected to follow the <a href="http://confcodeofconduct.com/">Code of Conduct.</a>
    <p>
  </div>
</div>

<script>
  var elementList = document.querySelectorAll('div.events-container div.row img')
  for (var i=0;i<elementList.length;i++) {
    ;(function () {
      var elem = elementList[i]
      elem.addEventListener('click', function () {
        window.location = elem.alt
      })
    })()
  }
</script>