2017 XSW

2017 XSW

by freedawirl

HTML

<script src="//limonte.github.io/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" href="//limonte.github.io/sweetalert2/dist/sweetalert2.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" data-role="page">

 <div id="main-body-content" class="main-body-content" role="main" tabindex="-1">

  <div class="lite-card">


   <div id="qualtrics-top-alert-container" class="hidden" aria-hidden="true"></div>

   <div class="hero clearfix" style="background-image:url(//capmetro.org/uploadedImages/New2016/_Shared/home-hero.jpg);background-size:cover;-ms-behavior:url(/css/backgroundsize.min.htc)">
    <div class="container">
     <div class="hero-inner row">
      <div id="hero-content-wrapper" class="col-xs-10">
       <div class="hero-content clearfix">
        <h1>SXSW is Almost Here</h1>
        <div class="hero-button first" style="display: block;">
         <p class="sub-heading">
         Take Metro Rail Downtown 
         </p>

         <p>
          <a href="/create-account" class="btn btn-lg btn-success hero-btn">
          MetroRail Shedules</a>
         </p>
        </div>

        <div class="hero-button" style="display: block;">
         <p class="sub-heading">
          Travel Late Night on CapMetro
         </p>

         <p>
         <a href="/login" class="btn btn-lg btn-success hero-btn">Late Night Service</a>
         </p>
        </div>

       </div>
      </div>
     </div>
    </div>
   </div>

   <div id="informationBar">
    <div class="container match-height">
     <div class="row">

      <div class="col-xs-12 col-sm-6 col-md-3 border">
       <a href="/lower-costs/">

        <div class="actionbar-item">
         <div aria-hidden="true" class="glyphicons usd"> </div>

         <h2>No Pay to Park</h2>
         <span></span>
         <div class="clearfix"></div>
        ...

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans") font;
@import url("https://fonts.googleapis.com/css?family=Bitter") font;

/* hero styles */
.hero {
  position: relative;
  color: #fff;
  margin-bottom: 0 !important;
  padding-top: 40px;
  padding-bottom: 10px;
  background-position: center top;
}
/*.hero a, .hero a:link, .hero a:visited { 
  color: @white; 
  text-decoration: none; 
  border: none;
}*/
.opaque-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.hero-inner {
  z-index: 999;
  position: relative;
}
.hero-inner h1 {
  font-family: 'Open Sans', sans-serif;
    font-family: 'Bitter', serif;
  color: #fff;
  font-size: 60px;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 67px;
  letter-spacing: -2px;
}
.hero-inner p {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 13px;
  margin-bottom: 20px;
  line-height: 18px;
}
.state-answer p {
  padding-top: 10px;
}
.hero-inner a {
  color: #fff;
  border-bottom: 1px solid #fff;
}
.hero-inner .sub-heading {
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 18px;
  line-height: 25px;
  margin-top: 0;
  margin-bottom: 20px;
}
.hero-inner .hero-btn {
  font-family: 'Open Sans', sans-serif;

  color: #fff;
  font-weight: bold;
  font-size: 20px;
  padding: 15px 35px;
  border-radius: 0;
  background-color: #12890E;
  text-decoration: none;
  border: none;
  margin-right: 35px;
}
.hero-inner .hero-btn:hover {
  background-color: #138F0E;
}
.hero-btn.btn-lg,
.hero-btn.btn-lg:hover {
  text-shadow: none;
}
.hero-inner .state-dropdown {
  margin-bottom: 20px;
}
.hero-inner .state-dropdown {
  width: 500px;
}
.hero-inner .answer p {
  font-size: 14px;
  margin-bottom: 0;
}
.hero-inner .hero-button {
  display: none;
  text-align: center;
  float: left;
  padding: 0...