process.html

---
layout: page-layout
tagline: "Scaling a company isn’t easy. What is easy is working with Edify to ship learning solutions that make your company even more amazing."
title: Process

meta_title: Edify Learning Design Process is data-driven & human-focused
meta_tag: >-
  At Edify, we believe that great learning design means; designing for people
  first, practicing empathy, anticipating needs, honoring diverse approaches,
  and providing scaffolding and offer accessible options.
published: true
---
<!-- Page Title
============================================= -->
<section id="page-title" class="page-title">

  <div class="container clearfix">
    <h1>{{ page.title }}</h1>
    <span>{{ site.data.headers.process_page_tagline }}</span>
  </div>

</section>
<!-- #page-title end -->

<!--
Flip Cards based on  post by CSS Tricks
 https://css-tricks.com/forums/topic/rotate-on-click-css-card-flip/
 -->

<div class="bottommargin-lg" id="process">

  <div class="heading-block title-center topmargin-lg nobottommargin section nobg">
    <h2>{{ site.data.headers.process_page_header }}</h2>
    <span>{{ site.data.headers.process_page_sub_header }}</span>
  </div>

  <div class="clear"></div>

  <div class="container clearfix bottommargin-lg">

    {% for question in site.data.questions %}
      <div class="col-md-4 col-sm-6 col-xs-12 bottommargin-lg topmargin-sm flip">
        <div class="card">

          <!-- START FRONT -->
          <div class="face front" data-cardNameFront="{{ question.card_name }}" >
            <div class="feature-box center media-box fbox-bg">
              <div class="fbox-media">
                <img src="/img/{{ question.card_image }}" alt="flip card process question">
              </div>
              <div class="fbox-desc">
                <img class="fliplogo" src="/img/edify-logos/logo-media.png">
                <h4 class="flip-front">
                  {{ question.question }}
                </h4>
                <div class="flip-arrow">
                  <span class="hidden-xs" style="font-size: 16px;">Click to flip the card over</span>
                  <span class="visible-xs" style="font-size: 16px;">Tap to flip the card over</span> <i class="icon-line-square-plus"></i>

                </div>
              </div>
            </div>
          </div>
          <!-- END FRONT -->

          <!-- START BACK -->
          <div class="face back" >
            <div class="feature-box center media-box fbox-bg">
              <div class="fbox-desc fbox-desc-back ">
                <h4 class="flip-back">
                  {{ question.answer }}
                </h4>
                <!-- <div class="about-button">
                  <a href="/contact" data-cardNameButton="{{ question.card_name }}" target="_blank" class="button button-light">Contact me <i class="icon-line-arrow-right"></i></a>
                </div> -->
                <div class="about-button">
                  <a href="/{{ question.button_link }}" target="_blank" class="button button-light">Learn more <i class="icon-line-arrow-right"></i></a>
                </div>
              </div>
            </div>
          </div>
          <!-- END BACK -->

        </div>
      </div>

    {% endfor %}

    <div class="clear"></div>
  </div>
</div>

<script type="text/javascript">
    $('.flip').on('click', function(event) {
      $(event.target).parents('.card').toggleClass('flipped');
    });
</script>