123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img1"></div>
      <div class="info">
        <h2>Super S</h2>
        <p>A stand-on with an exceptional compact stance. Great for tight spaces and trailering.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
        <div class="reviews">
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <defs><path d="M0 0h24v24H0V0z" id="a"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)" d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4V6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/>
          </svg>
          <p>23 Reviews</p>
        </div>
        <ul>
          <li>Manage backyard gates with ease with the 36" deck option</li>
          <li>Your choice of deck sizes ranging from 36", 48", 52" and 60"</li>
          <li>Updated hip bolstering offers superior operator comfort and positioning</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>Super Z HyperDrive</h2>
        <p>A high-performance zero-turn with unsurpassed strength, speed &amp; reliability with a warranty to match.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
        <div class="reviews">
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <p>39 Reviews</p>
        </div>
        <ul>
          <li>Your choice of VX4 decks ranging from 60 to 72 inches</li>
          <li>The 37hp Vanguard BigBlock EFI makes short work out of big jobs enabling speeds up to 16mph</li>
          <li>Massive 24" drive tires and 13" front caster tires</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img3"></div>
      <div class="info">
        <h2>Vanguard Power</h2>
        <p>If you need a tough, commercial grade engine that makes you more productive, look to Vanguard.</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>At a glance</h2>
        <div class="reviews">
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <svg fill="#FFC324" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M22 9.24l-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03L22 9.24zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28L12 15.4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
          <p>26 Reviews</p>
        </div>
        <ul>
          <li>V-Twin OHV Technology provides superior balance, low vibration, lower emissions, better fuel economy and higher HP/Weight</li>
          <li>Advanced Debris Management keeps engine clean and cool for enhanced durability and performance</li>
        </ul>
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
        </div>
      </div>
    </div>
  </div>
</div>

            
          
!
            
              
// --------------
// Global styles
// --------------

*, *:after, *:before
  box-sizing: border-box

// Color Variables
$l1: hsla(0, 0%, 100%, 1)
$l2: hsla(223, 13%, 87%, 1)
$l3: hsla(0, 0%, 77%, 1)
$d1: hsla(0, 0%, 20%, 1)
$d2: #555
$p1: #FFC324
$g1: #FFB714
$g2: #FFE579

// Mixins
=size($x, $y)
  width: $x
  height: $y

// Text
h2, h4, p, ul, li
  margin: 0
  padding: 0

h2, h4
  font-family: 'Oswald', sans-serif
  text-transform: uppercase
  color: $d1

h2
  font-size: 27px
  font-weight: 500
  letter-spacing: -0.2px
  margin-bottom: 10px

p, li
  font-family: "Roboto", sans-serif
  font-weight: 400
  color: $d2
  line-height: 22px

ul, li
  text-decoration: none
  list-style: disc outside

ul
  padding-left: 20px

svg
  margin: 0px
  min-width: 24px
  min-height: 24px



// --------------
// Main styles begin
// --------------

body
  background-color: $l2
  background-image: linear-gradient(140deg, $l1, $l2)
  margin: 0
  width: 100vw
  min-height: 450px
  height: 100vh
  display: flex
  align-items: center
  justify-content: center



// --------------
// Overall card
// --------------

.cardContainer
  position: relative
  +size(300px, 400px)
  min-width: 300px
  min-height: 400px
  margin: 4px
  perspective: 1000px

// .active is applied to .card when .card is clicked.
.active
  transform: translateZ(0px) rotateY(180deg) !important
  &:after
    display: none
  // &:hover:after
  //   opacity: 0 !important

.card
  display: inline-block
  +size(100%, 100%)
  cursor: pointer
  -moz-backface-visibility: hidden
  transform-style: preserve-3d
  transform: translateZ(-100px)
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1)
  // :after allows for a more performant box-shadow because only opacity is being animated.
  &:after
    content: ''
    position: absolute
    z-index: -1
    +size(100%, 100%)
    border-radius: 5px
    box-shadow: 0 14px 50px -4px hsla(0, 0%, 0%, 0.15)
    opacity: 0
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4)
  &:hover
    transform: translateZ(0px)
  &:hover:after
    opacity: 1

  .side
    -webkit-backface-visibility: hidden
    backface-visibility: hidden
    position: absolute
    +size(100%, 100%)
    border-radius: 5px
    background-color: $l1

  .front
    z-index: 2
  .back
    transform: rotateY(180deg)

  .info
    padding: 16px



// --------------
// Front of card
// --------------

.front

  .img
    background-color: $l2
    background-position: center
    background-size: cover
    border-radius: 5px 5px 0 0
    +size(100%, 250px)

  .img1
    background-image: url(http://i.imgur.com/1aE1nMA.jpg)
  .img2
    background-image: url(http://i.imgur.com/2p9VXAn.jpg)
  .img3
    background-image: url(http://i.imgur.com/I5ABT2v.jpg)



// --------------
// Back of card
// --------------

.back
  position: relative

  h2
    margin-top: 6px
    margin-bottom: 18px

  .reviews
    display: flex
    align-items: center
    margin-bottom: 12px
    cursor: pointer
    p
      color: $l3
      font-weight: 300
      margin: 1px 0 0 6px
      transition: 0.3s ease-in-out
    &:hover
      p
        color: $d2

  li
    line-height: 22px
    margin: 2px 0 6px 0

  .btn
    // positioning
    position: absolute
    bottom: 16px
    +size(calc(100% - 32px), 56px)
    display: flex
    align-items: center
    justify-content: center
    // style
    background-color: $p1
    background-image: linear-gradient(-90deg, $g1, $g2)
    border-radius: 5px
    cursor: pointer

    &:hover
      h4
        transform: translateX(0px)
      svg
        transform: translateX(0px)
        opacity: 1

    h4
      transform: translateX(12px)
      transition: transform 0.3s ease-out
    svg
      margin: 1px 0 0 4px
      transform: translateX(-8px)
      opacity: 0
      transition: all 0.3s ease-out

            
          
!
            
              
const cards = document.querySelectorAll('.card');

function transition() {
  if (this.classList.contains('active')) {
    this.classList.remove('active')
  } else {
    this.classList.add('active');
  }
}

cards.forEach(card => card.addEventListener('click', transition));
 
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console