Download Cards

download-cards.markdown

Download Cards

The cards also flip around to show a dynamically generated QR code.

UPDATE: This pen now supports all modern browsers including IE 10 and up!

A Pen by Evan Wieland on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <section class="card-holder">
      <!-- Begin iOS -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container manual-flip">
          <div class="card">
            <div class="front">
              <div class="cover">
                <img src="https://bilbo.surge.sh/codepen/download-cards/apple.png" />
              </div>
              <div class="branded">
                <span class="fa fa-apple"></span>
              </div>
              <div class="content">
                <div class="main">
                  <h3 class="use-for faint">Download For</h3>
                  <button type="button" class="btn btn-default btn-block btn-download">iOS</button>
                </div>
                <div class="footer">
                  <button class="btn btn-flip btn-qr" onclick="rotateCard(this)">
                    <i class="fa fa-mail-forward"></i> Get QR Code
                  </button>
                </div>
              </div>
            </div>
            <div class="back">
              <div class="header">
                <h3 class="use-for faint">QR Code</h3>
              </div>
              <div class="content">
                <div id="qrIos" class="qr text-center"></div>
              </div>
              <div class="footer">
                <button class="btn btn-flip" onclick="rotateCard(this)">
                  <i class="fa fa-reply"></i> Back
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- End iOS -->
      <!-- Begin Android -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container manual-flip">
          <div class="card">
            <div class="front">
              <div class="cover">
                <img src="https://bilbo.surge.sh/codepen/download-cards/android.png" />
              </div>
              <div class="branded">
                <span class="fa fa-android"></span>
              </div>
              <div class="content">
                <div class="main">
                  <h3 class="use-for faint">Download For</h3>
                  <button type="button" class="btn btn-default btn-block btn-download">Android</button>
                </div>
                <div class="footer">
                  <button class="btn btn-flip btn-qr" onclick="rotateCard(this)">
                    <i class="fa fa-mail-forward"></i> Get QR Code
                  </button>
                </div>
              </div>
            </div>
            <!-- end front panel -->
            <div class="back">
              <div class="header">
                <h3 class="use-for faint">QR Code</h3>
              </div>
              <div class="content">
                <div id="qrAndroid" class="qr text-center"></div>
              </div>
              <div class="footer">
                <button class="btn btn-flip" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
                  <i class="fa fa-reply"></i> Back
                </button>
              </div>
            </div>
            <!-- end back panel -->
          </div>
        </div>
      </div>
      <!-- End Android -->
      <!-- Begin Web -->
      <div class="col-md-4 col-sm-6">
        <div class="card-container manual-flip">
          <div class="card">
            <div class="front">
              <div class="cover">
                <img src="https://bilbo.surge.sh/codepen/download-cards/web.png" />
              </div>
              <div class="branded">
                <span class="fa fa-windows"></span>
              </div>
              <div class="content">
                <div class="main">
                  <h3 class="use-for faint">Download For</h3>
                  <button type="button" class="btn btn-default btn-block btn-download">Windows</button>
                </div>
                <div class="footer">
                  <button class="btn btn-flip btn-qr" onclick="rotateCard(this)">
                    <i class="fa fa-mail-forward"></i> Get QR Code
                  </button>
                </div>
              </div>
            </div>
            <!-- end front panel -->
            <div class="back">
              <div class="header">
                <h3 class="use-for faint">QR Code</h3>
              </div>
              <div class="content">
                <div id="qrWeb" class="qr text-center"></div>
              </div>
              <div class="footer">
                <button class="btn btn-flip" rel="tooltip" title="Flip Card" onclick="rotateCard(this)">
                  <i class="fa fa-reply"></i> Back
                </button>
              </div>
            </div>
            <!-- end back panel -->
          </div>
        </div>
      </div>
      <!-- End Web -->
    </section>
  </div>
</div>

script.js

$(document).ready(function() {
  $('#qrIos').qrcode({
    width: 200,
    height: 200,
    text: "iOS_URL_HERE"
  });
  $('#qrAndroid').qrcode({
    width: 200,
    height: 200,
    text: "DROID_URL_HERE"
  });
  $('#qrWeb').qrcode({
    width: 200,
    height: 200,
    text: "WINDOWS_URL_HERE"
  });
});

function rotateCard(btn) {
  var $card = $(btn).closest('.card-container');
  console.log($card);
  if ($card.hasClass('hover')) {
    $card.removeClass('hover');
  } else {
    $card.addClass('hover');
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bilbo.surge.sh/codepen/download-cards/jquery.qrcode.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/153256/credits.js"></script>

style.sass

@import compass/css3

$tundora: #444444
$white: #fff
$gallery: #eee
$de_york: #8c8
$mountain_mist: #999
$black_14: rgba(0, 0, 0, 0.14)
$bismark: #506a85
$storm_dust: #666666

*
    +box-sizing(border-box)

body
    padding-top: 50px
    padding-bottom: 20px
    background: #F2F2F2

.faint
    color: $mountain_mist

.fa
    font-size: 5em
    text-align: center
    padding: 20px

.btn
    &:hover
        outline: 0 !important
    &:focus
        outline: 0 !important
    &:active
        outline: 0 !important

.btn-download
    height: 50px
    text-align: center
    margin-top: 40px
    font-size: 1.7em

.btn-flip-extend
    background-color: transparent
    +box-shadow(none)
    opacity: 1

.btn-flip
    opacity: 0.8
    color: $storm_dust
    background-color: transparent
    &:hover
        @extend .btn-flip-extend
    &:focus
        @extend .btn-flip-extend
    i
        font-size: 16px

.card-holder
    margin-top: 50px

.card-container
    +perspective(800px)
    +transform-style(preserve-3d)
    +border-radius(4px)
    margin-bottom: 30px
    width: 100%
    height: 420px
    &:not(.manual-flip):hover
        .front
            +transform(rotateY(180deg))
        .back
            +transform(rotateY(0deg))
    &.hover.manual-flip
        .front
            +transform(rotateY(180deg))
        .back
            +transform(rotateY(0deg))

.card
    +transform-style(preserve-3d)
    +border-radius(4px)
    +transition(transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275))
    position: relative
    background: none repeat scroll 0 0 $white
    color: $tundora
    max-width: 320px
    margin: 0 auto
    .cover
        +border-radius(4px 4px 0 0)
        height: 105px
        overflow: hidden
        z-index: -2
        img
            width: 100%
    .branded
        position: relative
        background: $white
        +border-radius(50%)
        display: block
        height: 120px
        margin: (-55px) auto 0
        width: 120px
        text-align: center
    .content
        background-color: rgba(0, 0, 0, 0)
        +box-shadow(none)
        padding: 10px 20px 20px
        .main
            min-height: 140px
    .use-for
        font-size: 22px
        text-align: center
    h5
        margin: 5px 0
        font-weight: 400
        line-height: 20px
    .footer
        color: $mountain_mist
        padding: 10px 0 0
        text-align: center
        .btn-simple
            margin-top: -6px
    .header
        padding: 15px 20px
        height: 90px
    .back .content .main
        height: 215px

.front
    +backface-visibility(hidden)
    +transition(transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275))
    +transform-style(preserve-3d)
    +transform(rotateY(0deg))
    +box-shadow(0 1px 3px 0 $black_14)
    +border-radius(4px)
    position: absolute
    background-color: $white
    width: 100%
    height: 420px
    top: 0
    left: 0
    z-index: 2

.back
    +backface-visibility(hidden)
    +transition(transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275))
    +transform-style(preserve-3d)
    +transform(rotateY(-180deg))
    +box-shadow(0 1px 3px 0 $black_14)
    +border-radius(4px)
    position: absolute
    background-color: $white
    width: 100%
    height: 420px
    top: 0
    left: 0
    .btn-simple
        position: absolute
        left: 0
        bottom: 4px

.qr canvas
    +backface-visibility(hidden)
    margin: 0 auto

.title
    color: $bismark
    text-align: center
    font-weight: 300
    font-size: 44px
    margin-bottom: 90px
    line-height: 90%

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />