<?php include("../../includes/layouts/header.php"); ?>   
<?php include("../../includes/layouts/topnavbar.php"); ?>   
<?php include("../../includes/layouts/leftnavbar.php"); ?>

<!-- ** ALL CONTENT CONTAINER for side navbar, carousel and all pages **-->

<!--Start of primary contianer for main row-->

<!--****Place All content in here****-->

<div class="row">
  <div class = "container col-sm-offset-3">
    <h2 style="margin-top: 10px;">Dayton's Auto Service Experts</h2>
  </div>
</div>


<!-- ** CAROUSEL START ** -->
<div class="row">
  <div class="container col-sm-offset-3 col-sm-8 col-md-offset-3 col-md-8 col-lg-offset-3 col-lg-8">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../images/shopfrontcenter2.jpg" alt="...">
          <div class="carousel-caption">
          Jay's Garage
          </div>
        </div>
        <div class="item">
          <img src="../images/goodyearsign.jpg" alt="...">
          <div class="carousel-caption">
          We Got Tires!
          </div>
        </div>
        <div class="item">
          <img src="../images/frontroom.jpg" alt="Comfortable Waiting Room">
          <div class="carousel-caption">
          Comfortable Waiting Room
          </div>
        </div>
        Do we want text here?
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</div>
  <!-- END carousel -->

<div class="row" id="home-page-text">
  <div class="container ten-column-width col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10" id="promise">
    <div class="container ten-column-width">
      <div class="row">
        <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">Our business is to keep your vehicle safe, reliable, economical. Quality repairs. Friendly service. Every job done right. Every customer served fairly and left with confidence in their vehicle's operation. Your safety on the road.
        </p>
        <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">The best workmanship possible. Determining the root cause of your problem first, communicating that issue with you, then taking the appropriate steps to get your vehicle back in shape - all while saving you the most time. 
        </p>
      </div><!--row-->   
    </div><!--end content container-->
  </div>
</div>

<div class="row" id="first-text">
  <div class = "container col-sm-offset-3">
    <h1>Jay's Service Offerings. Check it out!</h1>
  </div>
</div>

<div class="row" id="home-page-text">
  <div class="container ten-column-width col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10" id="promise">
    <div class="container ten-column-width">
      <div class="row">
        <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">Our business is to keep your vehicle safe, reliable, economical. Quality repairs. Friendly service. Every job done right. Every customer served fairly and left with confidence in their vehicle's operation. Your safety on the road. Repair and service that meets or exceed the manufacturer's standards. 
        </p>
        <p class="col-xs-12 col-sm-6 col-md-6 col-lg-6">The best workmanship possible. Determining the root cause of your problem first, communicating that issue with you, then taking the appropriate steps to get your vehicle back in shape - all while saving you the most time and money. 
        </p>
      </div><!--row--> 

      <!-- One Row of two services -->
      <div class="row">
        <div class="container col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <div class ="row"><!-- Inner row with, icon, title/descitiption, and click more icon. -->
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <img class="service-icon align-left" src="../images/car10.svg">
              <div style="clear: both;">
              </div>      
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 click-for-more-div align-left">
                <button class="click-for-more-button-fat align-left"type="button">
                  <div class="small-text">Learn More!
                  </div>
                </button> 
              </div>
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 service-text">
              <div class="service-title"><strong>Oil Change</strong>
              </div>                   
              <div class="service-description"> &nbsp&nbsp&nbsp<strong>This</strong> ia a service description example.
                I want to make sure i get the length, size, color, and pizza sauce right.
                Perpahs the lengh will be this long. There is a lot more text, here it is. Even a bit more.
              </div>                             
            </div>
          </div> <!-- Inner row with, icon, title/descitiption, and click more icon. -->
        </div> <!-- container with first item -->
        <div class="container col-xs-6 col-sm-6 col-md-6 col-lg-6">
          <div class ="row"><!-- Inner row with, icon, title/descitiption, and click more icon. -->
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <img class="service-icon align-left" src="../images/car10.svg">
              <div style="clear: both;">
              </div>      
              <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 click-for-more-div align-left">
                <button class="click-for-more-button-fat align-left"type="button">
                  <div class="small-text">Learn More!
                  </div>
                </button> 
              </div>
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10 service-text">
              <div class="service-title"><strong>Oil Change</strong>
              </div>                   
              <div class="service-description"> &nbsp&nbsp&nbsp<strong>This</strong> ia a service description example.
                I want to make sure i get the length, size, color, and pizza sauce right.
                Perpahs the lengh will be this long. There is a lot more text, here it is. Even a bit more.
              </div>                             
            </div>
          </div> <!-- Inner row with, icon, title/descitiption, and click more icon. -->
        </div> <!-- container with first item -->
      </div>
      <!-- END One Row of two services -->

    </div><!--end content container-->
  </div>
</div>

  <!-- ** PAGES Start **-->



  <!-- ***** Responsive Test row ***-->
<div class="row">
  <div class="container ten-column-width col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10" id="promise">
    <div class="container ten-column-width">
      <h2>Container Test Row</h2> 
      <div class="row">
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3">This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 hidden-md col-lg-3">This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
      </div><!--row-->   
    </div><!--end content container-->
  </div>
</div>

  <!-- ***** END Responsive Test row ***-->
    <!-- ***** Responsive Test row ***-->
<div class="row">
  <div class="container-fluid ten-column-width col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10" id="promise">
    <div class="container-fluid ten-column-width">
      <h2>Container fluid Test Row</h2> 
      <div class="row">
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3">This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
        <p class="col-xs-12 col-sm-6 hidden-md col-lg-3">This is a responsive rest row. This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.This is a responsive rest row.
        </p>
      </div><!--row-->   
    </div><!--end content container-->
  </div>
</div>

  <!-- ***** END Responsive Test row ***-->


  <!--testimonials page-->
<div class="row">
  <div class="container ten-column-width col-sm-offset-2 col-sm-10 col-md-offset-2 col-md-10 col-lg-offset-2 col-lg-10">
    <div class="page" id="testimonials">
      <div class="content container ten-column-width">
        <h2>Testimonials</h2>
        <div class="row">
          <!--Testimonial quotes-->
          <!--Testimonial 1-->
          <blockquote class="col-xs-12 col-sm-6 col-md-4 col-lg-6" id="Mike">
            <div class="quote">
            <span class="intro">Driving down the highway, and out of nowhere, an elephant jumped out in front of me!I qucikly got control of the car and pulled over. he tire was in shreds, I qucikly got control of the car and pulled over. he tire was in shreds, I qucikly got control of the car and pulled over. he tire was in shreds, I qucikly got control of the car and pulled over. he tire was in shreds, </span>
            <span class="more">Luckily I wasn't hurt, but my Ford truck sure was...</span>   
            <span class="customer">Mike</span>
            </div> <!--quote-->
          </blockquote> 
          <!--Testimonial 2-->     
          <blockquote class="col-xs-12 col-sm-6 col-md-4 col-lg-6" id="Jerry">      
            <div class="quote">
              <span class="intro">On my way to my cousins BBQ in Walla Walla I got a blow out.</span>
              <span class="more">I qucikly got control of the car and pulled over.The tire was in shreds, there was no chance of patching that one upot me moiving quick with a new set of wheels for a very fair price. I qucikly got control of the car and pulled over. The tire was in shreds, there was no chance of patching that one up. Jay got me moiving quick with a new set of wheels for a very fair price. I qucikly got control of the car and pulled over. he tire was in shreds, there was no chance of patching that one up. Jay got me moiving quick with a new set of wheels for a very fair price.</span>
              <span class="customer">Jerry</span>
            </div><!--quote-->
          </blockquote>   
          <!--Testimonial 3-->   
          <blockquote class="col-xs-12 col-sm-6 col-md-4 col-lg-6" id="Steve">      
            <div class="quote">
              <span class="intro">Here is another story.</span>
              <span class="more"> I  got control of the car and pulled over.The tire was in shreds,  FAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT FAKE CONTENT FAKE CONTENT of wheels for a very fair price.I qucikly got control of the car and pulled over. The tire was in shreds,  FAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT AKE CONTENT FAKE CONTENT of wheels for a very fair price. I qucikly got control of the car and pulled over. he tire was in shreds,  FAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT FAKE CONTENT FAKE CONTENT of wheels for a very fair price.</span>
              <span class="customer">Steve</span>
            </div><!--quote-->
          </blockquote>
          <!--Testimonial 4-->
          <blockquote class="col-xs-12 col-sm-6 hidden-md col-lg-6" id="Phil">     
            <div class="quote">
              <span class="intro">I want food. I break down.</span>
              <span class="more">YES, i got food. YES, i got food. 123 YES, i got food. more randome text YES, i got food. YES, i got food. YES, i got food. 123 YES, i got food. more randome text YES, i got food.I qucikly got control of the car and pulled over.The tire was in shreds  FAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT FAKE CONTENT FAKE CONTENT of wheels for a very fair price.qucikly got control of the car and pulled over. he tire was in shreds,  FAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT of wheels for a very fair price.I qucikly got control of the car and pulled over. he tire was in shreds, AKE CONTENT FAKE CONTENTFAKE CONTENT FAKE CONTENT     FAKE CONTENT FAKE CONTENT of wheels for a very fair price.</span>
              <span class="customer">Phil</span>
            </div><!--quote-->
          </blockquote> 
        </div><!--row-->
      </div><!--container-->
    </div><!--END testimonials page-->
  </div><!-- End container for all col-x-12's -->
</div><!-- End container for Testimonials page -->    


<!--****End All content*******-->
<!-- </div> --><!--End 10 columes of the row-->

<?php include("../../includes/layouts/footer.php"); ?>