@@include("header.html")

<div class="l-page">
  <div class="mantle" style="background-image: url(images/uploads/mantle-atlanta-jazz-festival.jpg);">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
          <h2 class="mantle__heading">
            <div class="mantle__heading-slash mantle__heading-slash--blue"></div>
            <div class="mantle__heading-text">Atlanta Jazz Festival</div>
          </h2>
          <div class="mantle__content">
            <a class="mantle__cta button" href="#">Take MARTA</a>
            <div class="mantle__date-location">June 23<sup>rd</sup> at Piedmont Park</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-5 col-md-4">
        <div class="find-the-next-arrival">
          <h2 class="find-the-next-arrival__heading">Find the<br>Next Arrival</h2>
          <div class="find-the-next-arrival__form form">
            <form class="js-validate-form">
              <div class="form__group form__group--inputs">
                <div class="form__field">
                  <fieldset>
                    <legend class="sr-only">Service</legend>
                    <ul class="find-the-next-arrival__service-items">
                      <li class="find-the-next-arrival__service-item">
                        <label class="find-the-next-arrival__service-label">
                          <input type="radio" name="findTheNextArrivalService" checked required><span class="find-the-next-arrival__service-text find-the-next-arrival__service-text--train">Train</span>
                        </label>
                      </li>
                      <li class="find-the-next-arrival__service-item">
                        <label class="find-the-next-arrival__service-label">
                          <input type="radio" name="findTheNextArrivalService" required><span class="find-the-next-arrival__service-text find-the-next-arrival__service-text--bus">Bus</span>
                        </label>
                      </li>
                    </ul>
                  </fieldset>
                </div>
                <div class="form__field">
                  <label class="sr-only" for="stationStopRoute">Enter a station, stop, or route</label>
                  <input id="stationStopRoute" type="text" name="stationStopRoute" placeholder="Enter a station, stop, or route" required>
                </div>
              </div>
              <div class="form__group form__group--actions">
                <button class="button" type="submit">See Times</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-offset-1 col-sm-6 col-md-offset-3 col-md-5">
        <div class="plan-a-trip-box">
          <h2 class="plan-a-trip-box__heading">Plan a Trip</h2>
          <div class="form">
            <form class="js-validate-form" action="plan-a-trip.html">
              <div class="form__group form__group--inputs">
                <div class="form__field">
                  <label class="sr-only" for="departingFrom">Departing from</label>
                  <div class="address-autocomplete">
                    <input id="departingFrom" class="js-address-autocomplete-input" type="text" name="departingFrom" placeholder="Departing from" value="">
                  </div>
                </div>
                <div class="form__field">
                  <label class="sr-only" for="goingTo">Going to</label>
                  <div class="address-autocomplete">
                    <input id="goingTo" class="js-address-autocomplete-input" type="text" name="goingTo" placeholder="Going to" value="">
                  </div>
                </div>
                <div class="plan-a-trip-box__departure-time js-departure-time">
                  <div class="form__field">
                    <label class="sr-only" for="departureTime">Departure Time</label>
                    <select id="departureTime" class="js-departure-time-select" name="departureTime">
                      <option value="Departing Now" selected>Departing Now</option>
                      <option value="Departing At">Departing At</option>
                      <option value="Arrive By">Arrive By</option>
                    </select>
                  </div>
                  <div class="plan-a-trip-box__time-date js-departure-time-date">
                    <div class="row">
                      <div class="col-xs-6">
                        <div class="form__field">
                          <label class="sr-only" for="time">Time</label>
                          <div class="form__timepicker">
                            <input id="time" class="js-current-time" type="text" name="time" placeholder="Time" value="">
                          </div>
                        </div>
                      </div>
                      <div class="col-xs-6">
                        <div class="form__field">
                          <label class="sr-only" for="date">Date</label>
                          <div class="form__datepicker">
                            <input id="date" class="js-current-date js-datepicker" type="text" name="day" placeholder="Date" value="">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form__group form__group--actions">
                <button class="button" type="submit">Plan Trip</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="featured-events js-featured-events">
      <div class="row">
        <div class="col-xs-12 col-sm-4 col-lg-3">
          <h3 class="featured-events__heading">Featured Events</h3>
          <div class="featured-events__slides-nav js-featured-events__slides-nav">
            <ul>
              <li><a class="is-current" href="#">Candler Park Festival</a></li>
              <li><a href="#">MARTA Fresh Market Lorem Ipsum Dolor</a></li>
              <li><a href="#">Shaky Knees Festival in Midtown Atlanta</a></li>
            </ul>
          </div>
        </div>
        <div class="col-xs-12 col-sm-8 col-lg-9">
          <div class="featured-events__slides js-featured-events__slides">
            <div class="featured-events__slide" style="background-image: url('images/uploads/candler-park-festival.jpg');">
              <div class="featured-events__slide-inner-wrapper">
                <h2 class="featured-events__slide-heading">Family Fun &amp; Live Music</h2>
                <div class="featured-events__slide-content">
                  <a class="featured-events__slide-cta button" href="#">Learn More</a>
                  <div class="featured-events__slide-info">June 6<sup>th</sup> in Candler Park</div>
                </div>
              </div>
            </div>
            <div class="featured-events__slide" style="background-image: url('http://dev.neboagency.com/placeit/800x467/999/');">
              <div class="featured-events__slide-inner-wrapper">
                <h2 class="featured-events__slide-heading">Lorem Ipsum Dolor Sit</h2>
                <div class="featured-events__slide-content">
                  <a class="featured-events__slide-cta button" href="#">Learn More</a>
                  <div class="featured-events__slide-info">June 23<sup>rd</sup> at the Fresh Market</div>
                </div>
              </div>
            </div>
            <div class="featured-events__slide" style="background-image: url('http://dev.neboagency.com/placeit/800x467/999/');">
              <div class="featured-events__slide-inner-wrapper">
                <h2 class="featured-events__slide-heading">Music Festival Lorem Ipsum</h2>
                <div class="featured-events__slide-content">
                  <a class="featured-events__slide-cta button" href="#">Learn More</a>
                  <div class="featured-events__slide-info">August 10<sup>th</sup> in Midtown Atlanta</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-5">
        <div class="title-carousel">
          <h3 class="title-carousel__heading">Latest<br>News</h3>
          <div class="title-carousel__slides js-title-carousel__slides">
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">Lorem ipsum dolor sit amet, cons ectetur adipisicing elit, sed do eiusmod. Tempor incididunt ut labore et dolore.</a>
            </div>
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">News Article Title</a>
            </div>
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">Another News Article Title</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-offset-2 col-sm-5">
        <div class="title-carousel">
          <h3 class="title-carousel__heading">Did You<br>Know?</h3>
          <div class="title-carousel__slides js-title-carousel__slides">
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">MARTA keeps over 185,000 cars off the road everyday.</a>
            </div>
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">Interesting Fact</a>
            </div>
            <div class="title-carousel__slide js-title-carousel__slide">
              <a href="#">Another Interesting Fact</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="featured">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-3">
          <h2 class="featured__heading">Read, Relax &amp; Ride</h2>
        </div>
        <div class="col-xs-12 col-sm-offset-1 col-sm-8 col-md-offset-0 col-md-9">
          <div class="featured__items">
            <div class="row">
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="marta-police-join-the-force.html">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-bike.jpg"></div>
                  <div class="featured__item-name">Bikes on MARTA: Learn How to Ride</div>
                  <div class="featured__item-description">See how easy it is to bike with MARTA.</div>
                </a>
              </div>
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="marta-police-faqs.html">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-rail-map.jpg"></div>
                  <div class="featured__item-name">Get Rail Maps &amp; Facilities Info</div>
                  <div class="featured__item-description">Plan your trip, and check elevator </div>
                </a>
              </div>
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="#">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-breeze-card.jpg"></div>
                  <div class="featured__item-name">Breeze Card: Refill and Purchase</div>
                  <div class="featured__item-description">Check your balance, refill your card or purchase a new one.</div>
                </a>
              </div>
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="#">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-zoo.jpg"></div>
                  <div class="featured__item-name">Take MARTA to Zoo Atlanta</div>
                  <div class="featured__item-description">Ride MARTA to the Zoo and see lorem ipsum.</div>
                </a>
              </div>
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="#">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-fox-theater.jpg"></div>
                  <div class="featured__item-name">MARTA Tours the Fox Theater</div>
                  <div class="featured__item-description">Plan a trip to the Fox Theater for an evening of lorem.</div>
                </a>
              </div>
              <div class="featured__column col-xs-12 col-sm-6 col-md-4">
                <a class="featured__item" href="#">
                  <div class="featured__item-image"><img class="responsive-image" alt="" src="images/uploads/featured-streetcar.jpg"></div>
                  <div class="featured__item-name">Take the Streetcar</div>
                  <div class="featured__item-description">Lorem ipsum dolor sagit alta Streetcar in Atlanta ipsum sagit.</div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-offset-1 col-sm-8">
        <a class="sponsored" href="#" style="background-image: url(images/uploads/color-run.jpg);">
          <div class="sponsored__tag">Sponsored</div>
          <div class="sponsored__title">
            Experience the<br>
            Color Run at Night
          </div>
          <div class="sponsored__description">Join Us on Sep 19th for the Happiest 5K on the Planet</div>
        </a>
      </div>
    </div>
  </div>
</div>

@@include("footer.html")