service.html

---
layout: default
title: service
js: service
---

<div id="loading" class="row">
    <img class="image-responsive col-lg-offset-5" src="img/loading.gif">
</div>

<section id="main" class="row">
  <div id="left-column" class="col-sm-4 col-sm-offset-1">
    <div class="service-header">
        <img id="service-icon" >
        <h1 id="service-name"></h1>
    </div>
    <br/>
    <div id="service-description">
    </div>
    <br/>

    <p class="bold">Keep in Mind</p>
    <ul id="tips">
    </ul>
    <br/>
    <p class="bold">Additional Resources</p>
    <ul id="additional-resources">
    </ul>
    <br/>
    <div id="share-service">
    </div>
  </div>
  <div id="right-column" class="col-sm-6">
    <div id="service-media"></div>
    <table class="table">
      <thead>
        <tr>
          <th>Lessons</th>
          <th>Learners</th>
        </tr>
      </thead>
      <tbody id="tbody">
      </tbody>
    </table>
    <div class="alert alert-danger hidden"></div>
    <div id="teach-callout" class="col-sm-7 right">
        <img src="img/teach_gray.png" class="left">
        <p>Already using <span class="service-name"></span> for your business? <a href="teach.html">Help teach other business owners!</a></p>
    </div>
  </div>

</section>

<!-- Modal -->
<div class="modal fade" id="instructionsModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <img src="img/close-btn.png" class="close" data-dismiss="modal">
      <h4 class="modal-title">Time to start learning!</h4>
    </div>
    <div class="modal-body">
        <p>Follow along with the lesson steps in the helper window to the right.</p>
        <img src="img/look-right.gif">
    </div>
  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->