Pagination

Pricing Tables

  
        pricing tables
        
          
        

        <div class="row pricing-tables-list mvl" data-equalizer>
  <div class="medium-4 large-3 columns large-offset-1-and-half" data-equalizer-watch>
    <ul class="pricing-table">
      <li class="title">BASIC</li>
      <li class="price">19</li>
      <li class="bullet-item">Learn by doing with our proven curriculum, videos, and challenges.</li>
      <li class="bullet-item">Get help from our staff with priority Q&A</li>
      <li class="cta-button">
        <a class="button btn-green">Sign up today</a>
      </li>
    </ul>
  </div>
  <div class="medium-4 large-3 columns" data-equalizer-watch>
    <ul class="pricing-table focus">
      <li class="title">PRO</li>
      <li class="price">49</li>
      <li class="bullet-item">Learn by doing with our proven curriculum, videos, and challenges.</li>
      <li class="bullet-item">Get help from our staff with priority Q&A</li>
      <li class="bullet-item">Get Unstuck! Weekly staff-moderated Slack office hours</li>
      <li class="cta-button">
        <a class="button btn-green">Sign up today</a>
      </li>
    </ul>
  </div>
  <div class="medium-4 large-3 columns end" data-equalizer-watch>
    <ul class="pricing-table">
      <li class="title">ELITE</li>
      <li class="price">499</li>
      <li class="bullet-item">Learn by doing with our proven curriculum, videos, and challenges.</li>
      <li class="bullet-item">Get help from our staff with priority Q&A</li>
      <li class="bullet-item">Get 1-on-1 with weekly 50-minute sessions with our staff</li>
      <li class="cta-button">
        <a class="button btn-green">Sign up today</a>
      </li>
    </ul>
  </div>
</div>
      

    BASIC
19
Learn by doing with our proven curriculum, videos, and challenges.
Get help from our staff with priority Q&A

        Sign up today
      

  

    PRO
49
Learn by doing with our proven curriculum, videos, and challenges.
Get help from our staff with priority Q&A
Get Unstuck! Weekly staff-moderated Slack office hours

        Sign up today
      

  

    ELITE
499
Learn by doing with our proven curriculum, videos, and challenges.
Get help from our staff with priority Q&A
Get 1-on-1 with weekly 50-minute sessions with our staff

        Sign up today
      

  

Testimonials

I had some background knowledge of coding, but I didn't see a future in computer programming.

Person 1

Online Learner

2015

To get several blockquotes to be the same height, use Foundation's data equalizer:

testimonials with equal height

<div data-equalizer>
  <div class="columns small-4" data-equalizer-watch>
    <blockquote class="testimonial">
      <p>Launch's learn to code online program was the perfect stepping stone into the world of coding and making my future goals even more attainable!</p>
      <cite>
        <h6 class="name">Person 1</h6>
        <p class="title">Online Learner</p>
        <p class="date">2015</p>
      </cite>
    </blockquote>
  </div>

  <div class="columns small-4" data-equalizer-watch>
    <blockquote class="testimonial">
      <p>Launch Academy has taken me from a guy struggling on my own through various books and programs into a focused student. It has challenged me to think like a programmer.</p>
      <cite>
        <h6 class="name">Person 2</h6>
        <p class="title">Online Learner</p>
        <p class="date">2015</p>
      </cite>
    </blockquote>
  </div>

  <div class="columns small-4" data-equalizer-watch>
    <blockquote class="testimonial">
      <p>I had some background knowledge of coding, but I didn't see a future in computer programming.</p>
      <cite>
        <h6 class="name">Person 3</h6>
        <p class="title">Online Learner</p>
        <p class="date">2015</p>
      </cite>
    </blockquote>
  </div>
</div>

Launch's learn to code online program was the perfect stepping stone into the world of coding and making my future goals even more attainable!

Person 1

Online Learner

2015

Launch Academy has taken me from a guy struggling on my own through various books and programs into a focused student. It has challenged me to think like a programmer.

Person 2

Online Learner

2015

I had some background knowledge of coding, but I didn't see a future in computer programming.

Person 3

Online Learner

2015

Tooltips

Tooltips provide additional information on hover in a compact but noticeable visual style.

  
        tooltip
        
        .tooltip-wrapper
  %span.has-tip{ aria: { haspopup: "true" }, data: { tooltip: "" }, title: "Tooltips are even more awesome, you should in fact use them!" }
    ?
%span.tooltip
  content
  %span.nub
      
    ?
  
  content

For React, you need to structure things a little differently, and use the ReactTooltip node package to get the tooltip to display:

    <div className="tooltip-wrapper">
  <span className="has-tip"
    data-tip="This is a React tooltip.
    <br>It's even multi-line."
    data-multiline
  >?</span>
  <ReactTooltip place="top" />
</div>
  

(Currently, the React-generated tooltip will display a bit differently due to the different approach it uses to generate the upward or downward arrow on the tooltip box. We have not styled it to have the same pink border that the Haml-generated tooltip has.)

This documentation generated using Hologram