index.html

---
tab: home
layout: default
---

<!-- Section 1: big green box -->
<div class="jumbotron parallax section1 mb-5">
  <p class="display-3 text-white"><span class="cap">n</span>eed a little help at home?</p>
  <p class="display-3 text-white line2"><span class="cap">h</span>ire a student volunteer</p>
  <p class="lead text-white">Your donation will fund the programs and activities that make our school amazing.</p>
  <a class="learn_more" href="/faq">Learn more about how it works</a>
  <a class="btn btn-dark mt-5 mr-5" href="/request_helper">Request a helper</a>
  <a class="btn btn-dark mt-5 ml-5" href="/volunteer">Volunteer to be a helper bee</a>
</div>

<!-- Section 2: yellow boxes with jobs -->
<div class="jumbotron parallax section2">
  <h1>Popular jobs</h1>
  <div class="jobs mb-4">
    <div class="row">
      <div class="col">Baby sitting</div>
      <div class="col">Baking</div>
      <div class="col">Cleaning/organizing</div>
    </div>
    <div class="row">
      <div class="col">Dog walking</div>
      <div class="col">Raking</div>
      <div class="col">Snow shoveling</div>
    </div>
  </div>
  <div class="row mx-auto">
    <div class="offset-md-4 lead mr-4">I need a helper for...</div>
    <select id="offer_type">
      <option class="choose">Select a job.......</option>
      <option class="hr" disabled>──────────</option>
    </select>
  </div>
</div>

<!-- Section 3: How it works -->
<div class="jumbotron parallax section3">
  <p class="display-3"><span class="cap">h</span>ow it works</p>
  <div class="row">
    <div class="col">
      <img src="/assets/images/students.svg"/>
      <p>Student volunteers list the jobs they will do</p>
    </div>
    <div class="col">
      <img src="/assets/images/dollar.svg"/>
      <p>You choose a job offered by a student.<br/>Donate $10.</p>
    </div>
    <div class="col">
      <img src="/assets/images/baker.svg"/>
      <p>Students and their parents will work with you to get the job done!</p>
    </div>
  </div>
  <a class="btn btn-dark mt-5 mr-5" href="/faq">Where will your donations go?</a>
</div>


<!-- Section 4: Our mission -->
<div class="jumbotron parallax section4">
  <div class="row">
    <div class="col">
      <p class="display-3"><span class="cap">o</span>ur mission</p>
      <p>Helperbees.org is an experiment run by the parents of the
        Florida Ruffin Ridley School in Brookline, Massachusetts.
	      Our mission is to to give students an opportunity to volunteer, to build
	      a strong community, and to raise money for student activities.</p>
      <p>Parents and students must raise money each year to fund
        everything from the school play to class events.
        As parents we challenged ourselves to imagine a way to do this in a way
        that involves the whole community.</p>
      <a class="btn btn-dark mt-5 mr-5" href="/faq">Learn more about us</a>
    </div>
    <div class="col">
      <img src="/assets/images/bee.svg"/>
    </div>
  </div>
</div>

<!-- Section 5: send us feedback -->
<div class="jumbotron parallax section5">
  <p class="display-3">
    <span class="cap">i</span>deas?
    <span class="cap">q</span>uestions?
    <span class="cap">c</span>omments?</p>
  <p>Helperbees is an experiment. We'd love to hear your ideas</p>
  <form>
    <div class="form-group">
    <textarea id="body" rows="6" class="form-control col-8 mt-4 mb-2 mx-auto" placeholder="your message"></textarea>
    <button type="submit" class="btn btn-dark mt-5 mr-5">Send</button>
    </div>
  </form>
</div>


<script src="assets/js/index.js"></script>