Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container
  %form.board#board
    .card.card--assigned#card-assigned
      .card__front
    .slots
      - (0..23).each do |i|
        .slot
          %input.control(id="card-#{i}" type="checkbox")
          %label.card(class="card-#{i}" for="card-#{i}")
            .card__grips
            .card__front

    %footer.footer
      %h1.title 
        For playing in real life 
        %small.subtitle 
          Interact with people on the same room… while on keyboard :v

      %button.btn--rematch#btn-rematch(type="reset")
        %span.btn--rematch-front
          Rematch
          
.btn--mode
  %input.btn--mode__input#btn-mode(type='checkbox')
  %label.btn--mode__label(for='btn-mode')
    Special Mode
    %i(aria-hidden="true")
    
  
    
              
            
!

CSS

              
                \:root
  /* -- SETTINGS -- */

  /* -- Board Settings -- */
  --board-desktop-width: 80vmin
  --board-mobile-width: 95vmin
  --cols-desktop: 8
  --cols-mobile: 6
  --column-gap: .5vmin
  --row-gap: 1.5vmin
  --board-padding-horizontal: 2vmin
  --board-padding-b: 1vmin
  

  /* -- Card Settings -- */
  --card-padding: 0.6vmin
  --card-padding-top: 0.8vmin
  --card-padding-bottom: 2vmin
  --card-border-radius: .4vmin
  --slot-inset: .5vmin
  

  /* -- DYNAMIC DIMENSIONS (EDIT ON YOUR OWN RISK 👻) -- */
  /* -- Generals -- */
  --column-gaps-width: calc(var(--column-gap) * (var(--cols) - 1))
  --board-total-padding-horizontal: calc(var(--board-padding-horizontal) * 2)
  --board-whitespace-h: calc(var(--column-gaps-width) + var(--board-total-padding-horizontal))
  --card-padding-h: calc(var(--card-padding) * 2)
  --card-whitespace-h: calc(var(--card-padding-h) + var(--slot-inset))
  --slot-width: calc((var(--board-width) - var(--board-whitespace-h)) / var(--cols))
  --control: var(--board-total-padding-horizontal)

  /* -- Card Dimensions -- */
  // --card-width: 6.525vmin
  --card-holder-width: calc(var(--slot-width) - var(--slot-inset))
  --card-width: calc(var(--slot-width) - var(--card-whitespace-h))
  --card-width: calc(var(--card-holder-width) - var(--card-padding-h))
  --card-height: calc(var(--card-width) * 1.5)
  --cards: 24
  
  
/* -- Colors -- */
$btn-rematch-background: #ffdd40

    
/* -- GLOBAL AND MOBILE STYLES -- */
\:root
  --cols: var(--cols-mobile)
  --board-width: var(--board-mobile-width)
  
body 
  background-color: #122329
  font-family: 'Avenir', sans-serif
  margin: 0

.container
  position: fixed
  width: 100vw
  z-index: 2
  
.board
  box-sizing: border-box
  width: var(--board-width)
  padding: var(--board-padding-horizontal)
  background: linear-gradient(45deg, rgba(246,80,48,1) 0%, rgba(246,80,48,1) 45%, rgba(254,107,72,1))
  border-radius: calc(var(--board-width) / 100)
  margin: 2vmin auto
  
.slots
  display: grid
  grid-template-columns: repeat(var(--cols), auto)
  grid-column-gap: var(--column-gap)
  grid-row-gap: var(--row-gap)
  width: 100%
  height: 100%

.slot
  border-radius: var(--card-border-radius) 
  background-color: rgba(236, 74, 37, .8)
  box-shadow: inset 0px 0.8vmin 0.8vmin rgba(77, 18, 18, 0.3), inset 0px -2px 5px rgba(148, 5, 5, 0.15), 0px 2px 2px rgba(255, 212, 170, 0.15)
  
.footer 
  display: flex
  justify-content: space-between
  align-items: center
  padding: var(--board-padding-b) 0

.title 
  font-size: .8rem
  line-height: 1
  color: #ac2e0f
  text-shadow: 0px 1px 1px rgba(255, 255, 255, .4)

.subtitle 
  font-weight: normal
  display: block

.btn
  &--rematch
    background: linear-gradient(#fffc00, #fc9010)
    background: linear-gradient(179deg, #d64646 49.16%, #c82c07 88.24%)
    color: #bf3a20
    border: 0
    border-radius: 5px
    cursor: pointer
    text-transform: uppercase
    letter-spacing: 0.08em
    position: relative
    transition: all .3s
    padding: 0
    font-size: .75rem
    font-weight: bold
    min-height: 0
    user-select: none
    font-family: 'Avenir', sans-serif
    &-front 
      display: block
      padding: .5vmin 1vmin
      margin: 0
      background: linear-gradient(rgb(254, 252, 245) 4.2%, #ffd40c 6.72%, #fcaa0f)
      border-radius: inherit
      color: #bf3a20
      &:hover 
        background-color: darken($btn-rematch-background, 10)
    
.card 
  box-sizing: border-box
  display: block
  cursor: pointer
  margin: calc(var(--slot-inset) / 1.5)
  border-radius: var(--card-border-radius) 
  background-color: #fff
  backface-visibility: visible
  position: relative
  width: calc(100% - var(--slot-inset))
  transform-origin: bottom center
  transition: all .3s
  &::before 
    content: '?'
    font-size: 5vmin
    text-shadow: 2px 2px 0 #9c0000, 4px 4px 0px #f53d3d
    color: #ffc601
    pointer-events: none
    border-radius: 0 0 .4vmin .4vmin
    transform: rotateY(-180deg) translateZ(0px)
    font-weight: bolder
    position: absolute
    display: flex
    justify-content: center 
    align-items: center
    top: 0
    left: 0
    width: 100%
    height: 100%
    opacity: 0
    background: linear-gradient(rgb(243, 243, 243) 5%, #e0e0e0 90%)
    transition: all .3s
  &--assigned
    position: absolute
    width: var(--card-holder-width)
    top: 96%
    left: 44%
  

.card__front
  padding: var(--card-padding)
  padding-bottom: var(--card-padding-bottom)
  padding-top: var(--card-padding-top)
  &::after
    content: ''
    display: block
    position: relative
    padding-top: 150%
    background-image: url('https://i.imgur.com/yZzBIeb.png')
    background-size: calc(var(--card-width) * 5)
    transition: opacity .3s
.special .card__front::after
  background-image: url('https://i.imgur.com/TypSFC5.png')
  
$row: 0
@for $i from 0 to 24
  @if $i % 5 == 0
    $row: $i/5
  
  .card-#{$i} .card__front::after 
    background-position: calc(var(--card-width) * -#{$i}) calc(var(--card-height) * -#{$row})

.control
  position: absolute
  opacity: 0

.control:checked ~ .card
  transform: rotateY(180deg) translate3d(0, -1px, 0vmin)
  box-shadow: none
  &::before 
    opacity: 1
  .card__front::after
    opacity: 0

.btn--mode
  color: #d9a715
  height: 500vh
  padding-bottom: 10vh
  bottom: 0vmin
  width: 100vw
  display: flex 
  align-items: flex-end
  justify-content: center
  &__input 
    display: none
  &__label 
    text-transform: uppercase
    font-size: .8rem
    letter-spacing: .1em
    cursor: pointer
    i 
      font-size: 1rem
      top: .35rem
      width: 3em
      height: 1.5em
      margin-left: 1vmin
      position: relative
      border-radius: .75em
      display: inline-block 
      background-color: #345
      box-shadow: inset 0 0 5px rgba(0, 0, 0, .7)
      transition: all .3s
    i::after 
      content: ''
      display: block
      width: 1.5em 
      height: 1.5em 
      position: absolute 
      left: 0
      background-color: white 
      border-radius: 50%
      transition: all .2s
  &__label:hover 
    i::after 
      left: .2em
  &__input:checked ~ &__label
    i 
      background-color: #df9a03
    i::after 
      left: calc(100% - 1.5em)
  &__input:checked ~ &__label:hover 
    i 
      
   
/* -- STYLES FOR DESKTOP -- */
@media (min-width: 768px)
  \:root 
    --cols: var(--cols-desktop)
    --board-width: var(--board-desktop-width)
  .container 
    perspective: 2000px
  .board
    transform: rotateX(25deg) translate3d(0, 50px, 0)
    transform-style: preserve-3d
    backface-visibility: hidden
    box-shadow: 0px 20px 60px 10px rgba(0, 0, 0, .5)
    position: relative
    top: calc(var(--board-width) / 10)
    border-bottom: .6vmin solid #c92100
    
  .slots 
    grid-template-columns: repeat(var(--cols), auto)
    
  .card 
    transform: rotateX(-30deg) translate3d(0, 1px, 0)
    top: calc(-100% + var(--slot-inset))
    left: -.1vmin
    box-shadow: 0px -30px 50px rgba(0, 0, 0, .2)
    &__front::after 
      transition: all .3s
      box-shadow: inset 0px 4px 7px 0px rgba(0, 0, 0, .4)
    &::before 
      transform: rotateY(-180deg) rotateZ(180deg) translateZ(0px)
    &--assigned
      top: 80%
      left: 44%
    
  .card__front
    border-radius: .4vmin .4vmin 0 0
    background: linear-gradient(white, white 3%, #a5a39c 3%, #d3d2cd 5%, white 90%, #cdcac0 90%, #f0efe5 97%, white 98%)
    &::after 
      transition: all .2s
  .card__grips
    position: absolute
    bottom: 0
    left: 0
    height: 100%
    width: 100%
    &::before, 
    &::after
      background: linear-gradient(180deg, rgba(214,58,26,1) 0%, rgba(246,80,48,1) 45%, rgba(254,107,72,1) 71%, rgba(246,80,48,1) 100%)
      border-radius: .5vmin
      bottom: .2vmin
      box-shadow: .5vmin 0 .8vmin rgba(0, 0, 0, .2)
      content: ''
      display: block
      height: 1vmin
      left: -.7vmin
      position: absolute
      transition: all .3s
      width: 2vmin
      z-index: 2
    &::after
      box-shadow: -.5vmin 0 .8vmin rgba(0, 0, 0, .2)
      left: auto
      right: -.7vmin
    
  .card:hover 
    transform: rotateX(-45deg) translate3d(0, -1px, 0)
    .card__grips::after,
    .card__grips::before
      transform: rotateX(10deg) scale(1, 1.17) translateY(.09vmin)
    .card__front::after
      box-shadow: inset 0px 5px 10px 0px rgba(0, 0, 0, .3)
      
      
  .card--assigned:hover
    transform: rotateX(-30deg) translateY(-1vmin)
    .card__front::after
      
      
  .control:checked ~ .card
    transform: rotateX(-188deg) translate3d(0, -1px, -3vmin)
    box-shadow: none
    &::before 
      opacity: 1
    .card__front::after
      opacity: 0
    .card__grips::after,
    .card__grips::before
      opacity: 0
  
  .btn 
    &--rematch 
      transform-style: preserve-3d
      box-shadow:  1px 2px 3px rgba(68, 0, 0, 0.5), 2px 5px 10px rgba(68, 0, 0, 0.2)
      &-front 
        backface-visibility: hidden
        text-shadow: 0px 2px 1px rgba(255, 255, 255, .9)
        transform: translateX(-.3vmin) translateZ(2.5vmin)
        transition: all .2s
      &:hover &-front
        transform: translateX(-.1vmin) translateZ(1.2vmin)
  .title
    width: 40%
              
            
!

JS

              
                const cardsNum = document.querySelectorAll('.slot').length;
const cardAssigned = document.getElementById('card-assigned');
const board = document.getElementById('board');
const btnRematch = document.getElementById('btn-rematch');
const btnMode = document.getElementById('btn-mode');

const getRand = limit => Math.round(Math.random() * limit);

cardAssigned.className = 'card card--assigned card-' + getRand(cardsNum);

btnRematch.onclick = () => {
  cardAssigned.className = 'card card--assigned card-' + getRand(cardsNum);
};

btnMode.onclick = () => { board.classList.toggle('special') };



              
            
!
999px

Console