Next Train NJ

by dhavaljani

HTML

<div class="page-wrap">
  <header class="head-wrap">
    <img src="http://placehold.it/30x30" />
    <h1>
    Next Train NJ
    </h1>
  </header>
  <section class="summary-block">
    <div class="depart-summary">
      <span>Departs</span>
        <h2>11:02<span class="small-text">pm</span>         </h2>
      <span>Spring Lake, NJ</span>
    </div>
    <div class="arrive-summary">
      <span>Arrives</span>
        <h2>11:27<span class="small-text">pm</span>          </h2>
      <span>Long Branch Lake, NJ</span>
    </div>
    <hr>    
    <span class="summary-line">Transfers <strong>3</strong></span>
    <hr>    
    <span class="summary-line">Duration (minutes) <strong>158</strong></span>
    <hr>
  </section>
  <section class="transit-info">
    <h3 class="transit-name icon-train">
    North Jersey Coast Line
    </h3>
    <ul class="transit-stops">
      <li class="highlight-stop">Spring Lake <strong> Wed, 11:02pm</strong></li>
      <li>Belmar</li>
      <li>Bradley Beach</li>
      <li>Ausbury Park</li>
      <li>Allenhurst</li>
      <li>Elberon</li>
      <li class="highlight-stop">Long Branch <strong> Wed, 11:27pm</strong></li>
    </ul>
     <hr>
      <span class="centered">Transfer</span>
     <hr>
     <h3 class="transit-name icon-train">
    North Jersey Coast Line
    </h3>
     <ul class="transit-stops">
      <li class="highlight-stop">Spring Lake <strong> Wed, 11:02pm</strong></li>
      <li>Belmar</li>
      <li>Bradley Beach</li>
      <li>Ausbury Park</li>
      <li>Allenhurst</li>
      <li>Elberon</li>
      <li class="highlight-stop">Long Branch <strong> Wed, 11:27pm</strong></li>
    </ul>
    <hr>
      <span class="centered">Destination</span>
     <hr>
  </section>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
body {
  background: #f5f5f5;
  color: #666;  
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
}
.page-wrap {
  width: 640px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.head-wrap {
  display: block;
  background: #fff;
  border: 1px solid #ddd;
  margin: 0;
  padding: 5px;  
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
  .head-wrap img {
    display: inline-block;
    float: left;
    height: 40px;
    width: 40px;
  }
  .head-wrap h1 {
    display: inline;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
    margin: 0;
    padding-left: 10px;
  }
  .summary-block {
    display: block;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
  }
    .summary-block span {
      
    }
    .summary-block h2 {
      margin: 0;
    }
    .depart-summary, .arrive-summary {
      margin-top: 10px;
      margin-bottom: 10px;
      width: 45%;
      display: inline-block;
      vertical-align: top;
    }
    .summary-line {
      display: block;
      width: 100%;
      box-sizing: border-box;
    }
    span.summary-line strong {
      text-align: right;
      float: right;
    }
.transit-name {
  font-weight: 300;
}
.transit-stops {
  color: #999;  
}
.transit-stops li.highlight-stop {
  color: #666;
}
.transit-stops .highlight-stop strong {
  margin-left: 10px;
}
.centered {
  text-align: center;
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-style: italic;
}