index.html

---
layout: default
---

<!-- background image -->
<div class="home-splash"></div>

<!-- search and -->
<!-- where to start -->
<section class="search_form">

  <form id="search-form" is="search-form"
    autocomplete="false"
    action="{{ site.baseurl }}/search/" method="GET">

    <input type="hidden" name="under_investigation">

    <div class="container search-form-intro">

      <legend>Find Schools</legend>
      <h1 class="large_heading">Find Schools</h1>
      <p>Compare schools now</p>

    </div>

  {% include search-form.html %}

  </form>

  <section class="section section-home-start">

    <!-- <div class="container section-home-start-group">

      <h1 class="light_on_dark section-home-start-group-left">Not Sure Where to Start?</h1>

      <button class="button button-wizard section-home-start-group-right">
        Help me find schools <br>best suited to me
      </button>

    </div> -->

  </section>

</section>

<!-- by the numbers -->
<div>
  <section class="section section-home-facts">

    <div class="container">

      <h1>By The Numbers</h1>

      <ul>
        <li>
          <img src="{{ site.baseurl }}/img/money.svg" alt="Dollar bills">
          <div>
            On average, college graduates earn
            <strong>$1 million</strong>
            <strong>more</strong>
            <div class="fact-words">over their lifetimes than
            high school graduates.</div>
          </div>
        </li>
        <li>
          <img src="{{ site.baseurl }}/img/application.svg" alt="Application">
          You could be eligible for up to
          <strong>$5,775</strong>
          <strong>for free</strong>
          <div class="fact-words">in Pell grants to help pay
          for college. <span>No repayment needed!</span></div>
        </li>
        <li>
          <img src="{{ site.baseurl }}/img/cap.svg" alt="Graduation cap">
          Did you know that
          <strong>30%</strong>
          <strong>of college students</strong>
          <div class="fact-words">started college at <span>age 25 or older</span>.</div>
        </li>
      </ul>

    </div>

  </section>
</div>

<!-- check out these schools -->
<!-- and paying for college -->
<div class="home-bg-gray">

  <div class="container">

    <section class="section section-home-numbers">

      <div>

        <div>

          <h1>Check Out These Schools</h1>

          <ul class="section-home-numbers-group">
            <li>
              <div class="section-home-numbers-group-left"><img src="{{ site.baseurl }}/img/education.svg" alt="Education"></div>
              <a href="http://www.ed.gov/blog/2015/09/schools-with-low-costs-and-high-incomes" class="section-home-numbers-group-right"><div>23 four-year schools with <strong>low costs that lead to high incomes</strong></div></a>
            </li>
            <li>
              <div class="section-home-numbers-group-left"><img src="{{ site.baseurl }}/img/education.svg" alt="Education"></div>
              <a href="http://www.ed.gov/blog/2015/09/colleges-where-students-earn-high-salaries" class="section-home-numbers-group-right"><div>By state, two-year colleges where students earn <strong>high salaries after graduation</strong></div></a>
            </li>
            <li>
              <div class="section-home-numbers-group-left"><img src="{{ site.baseurl }}/img/education.svg" alt="Education"></div>
              <a href="http://www.ed.gov/blog/2015/09/schools-with-high-graduation-rates-low-costs" class="section-home-numbers-group-right"><div>30 four-year schools with <strong>high graduation rates and low costs</strong></div></a>
            </li>
            <li>
              <div class="section-home-numbers-group-left"><img src="{{ site.baseurl }}/img/education.svg" alt="Education"></div>
              <a href="http://www.ed.gov/blog/2015/09/colleges-with-high-graduation-rates-leading-to-high-incomes" class="section-home-numbers-group-right"><div>15 public four-year colleges with <strong>high graduation leading to high incomes</strong></div></a>
            </li>
          </ul>

        </div>

      </div>

    </section>

    <section class="section section-home-paying">

      <div>

        <div>

          <h1>Paying For College</h1>

          <div class="section-home-paying-content">

            <div class="u-align_c">

              <a href="https://studentaid.ed.gov/sa/types#aid-from-the-federal-government" class="button button-outline" target="_blank">
                Types of Financial Aid</a>
              <a href="https://fafsa.ed.gov/FAFSA/app/f4cForm" class="button button-outline" target="_blank">
                Calculate Your Aid</a>
              <a href=" https://department-of-veterans-affairs.github.io/gi-bill-comparison-tool/" class="button button-outline" target="_blank">
                GI Bill Benefits</a>

            </div>

          </div>

        </div>

      </div>

    </section>

  </div>

</div>

<!-- how I'm deciding -->
<!--  Removed for MVP -->
<!-- <div>
  <section class="section section-home-decision">

    <h1>How I'm Making My Decision About College</h1>

    <figure>
      <video></video>
      <figcaption>
        <h1>Karissa S.</h1>
        <p>17, High School Senior<br/>
        Hutchinson, MN</p>
      </figcaption>
    </figure>

  </section>
</div> -->

<script>
  picc.pages.index();
</script>