<div class="nav-banner">
  <a href="#" title="back" class="button button--return">
    <i class="icon icon--arrow-left"></i>
  </a>

  <div class="search-bar">
    <input type="text" title="search_input" placeholder="Search" class="search-bar__text-field">
    <button class="button">
      <i class="icon icon--search"></i>
    </button>
  </div>

  <button class="button button--fav">
    <i class="icon icon--heart-o"></i>
  </button>
</div>

<div class="map-header"></div>

<div class="detail-header">
  <h1 class="detail-header__title">7th + Walnut</h1>
  <div class="detail-header__details">
    <span class="tag tag--blue"> 11 </span>
    <span class="tag tag--green"> 12x </span>
    <span class="tag tag--purple"> 17 </span>
    <span class="tag tag--red"> 74x </span>
  </div>
  <span class="deatil-header__distance"> 
    <i class="icon icon--walking-man"></i>
    0.5mi
  </span>
</div>

<div class="timeline">
  <div class="timeline__event">
    <div class="event__time"> 12:35p </div>
    <div class="event__marker"></div>
    <div class="event__event-details">
      <p><span class="tag tag--blue"> 11 </span> Hyde Park - Erie Ave </p>
      <p><span class="tag tag--green"> 12x </span> Madisonville Express </p>
      <div class="event-details__metadata">
        <span class="metadata__time">
          <i class="icon icon--clock"></i>
          25m
        </span>
        <span class="metadata__distance">
          <i class="icon icon--walking-man"></i>
          0.5mi
        </span>
      </div>
    </div>
  </div>
</div>

Stop detail page static markup
Stop detail page static markup
