cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="nintendo">
  <div class="item-block"></div>
</div>

<p class="view-collection">&bull; #codevember &bull; <a href="https://codepen.io/collection/nxZbMW/" target="_blank">View Collection</a> &bull;<br />
  <span>Handcrafted with <span class="love">♥</span> from Austin, TX by <a href="https://twitter.com/fleetingftw">James Fleeting</a></span></p>
            
          
!
            
              @use postcss-simple-vars;
@use postcss-media-minmax;
@use postcss-nested;

$block: 14px;
$black: #000;
$orange: #fda23c;
$tan: #fdbba0;
$bp: 400px;

.nintendo {
  flex: 0 0 auto;
  width: 224px;
  height: 275px;
  overflow: hidden;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
}

.item-block {
  position: relative;
  height: $block;
  width: $block;
  background: $black;
  box-shadow:
    0 0 $black,
    calc($block * 1) 0 $black,
    calc($block * 2) 0 $black,
    calc($block * 3) 0 $black,
    calc($block * 4) 0 $black,
    calc($block * 5) 0 $black,
    calc($block * 6) 0 $black,
    calc($block * 7) 0 $black,
    calc($block * 8) 0 $black,
    calc($block * 9) 0 $black,
    calc($block * 10) 0 $black,
    calc($block * 11) 0 $black,
    calc($block * 12) 0 $black,
    calc($block * 13) 0 $black,
    calc($block * 14) 0 $black,
    calc($block * 15) 0 $black,
    
    0 $block $black,
    $block $block $tan,
    calc($block * 2) $block $tan,
    calc($block * 3) $block $tan,
    calc($block * 4) $block $tan,
    calc($block * 5) $block $tan,
    calc($block * 6) $block $tan,
    calc($block * 7) $block $tan,
    calc($block * 8) $block $tan,
    calc($block * 9) $block $tan,
    calc($block * 10) $block $tan,
    calc($block * 11) $block $tan,
    calc($block * 12) $block $tan,
    calc($block * 13) $block $tan,
    calc($block * 14) $block $tan,
    calc($block * 15) $block $black,
    
    0 calc($block * 2) $black,
    calc($block * 1) calc($block * 2) $tan,
    calc($block * 2) calc($block * 2) $black,
    calc($block * 3) calc($block * 2) $orange,
    calc($block * 4) calc($block * 2) $orange,
    calc($block * 5) calc($block * 2) $orange,
    calc($block * 6) calc($block * 2) $orange,
    calc($block * 7) calc($block * 2) $orange,
    calc($block * 8) calc($block * 2) $orange,
    calc($block * 9) calc($block * 2) $orange,
    calc($block * 10) calc($block * 2) $orange,
    calc($block * 11) calc($block * 2) $orange,
    calc($block * 12) calc($block * 2) $orange,
    calc($block * 13) calc($block * 2) $black,
    calc($block * 14) calc($block * 2) $orange,
    calc($block * 15) calc($block * 2) $black,
    
    calc($block * 1) calc($block * 3) $tan,
    calc($block * 2) calc($block * 3) $orange,
    calc($block * 3) calc($block * 3) $orange,
    calc($block * 4) calc($block * 3) $orange,
    calc($block * 5) calc($block * 3) $orange,
    calc($block * 6) calc($block * 3) $orange,
    calc($block * 7) calc($block * 3) $orange,
    calc($block * 8) calc($block * 3) $orange,
    calc($block * 9) calc($block * 3) $orange,
    calc($block * 10) calc($block * 3) $orange,
    calc($block * 11) calc($block * 3) $orange,
    calc($block * 12) calc($block * 3) $orange,
    calc($block * 13) calc($block * 3) $orange,
    calc($block * 14) calc($block * 3) $orange,

    $block calc($block * 4) $tan,
    calc($block * 2) calc($block * 4) $orange,
    calc($block * 3) calc($block * 4) $orange,
    calc($block * 4) calc($block * 4) $orange,
    calc($block * 5) calc($block * 4) $orange,
    calc($block * 6) calc($block * 4) $orange,
    calc($block * 7) calc($block * 4) $orange,
    calc($block * 8) calc($block * 4) $orange,
    calc($block * 9) calc($block * 4) $orange,
    calc($block * 10) calc($block * 4) $orange,
    calc($block * 11) calc($block * 4) $orange,
    calc($block * 12) calc($block * 4) $orange,
    calc($block * 13) calc($block * 4) $orange,
    calc($block * 14) calc($block * 4) $orange,

    calc($block * 1) calc($block * 5) $tan,
    calc($block * 2) calc($block * 5) $orange,
    calc($block * 3) calc($block * 5) $orange,
    calc($block * 4) calc($block * 5) $orange,
    calc($block * 5) calc($block * 5) $orange,
    calc($block * 6) calc($block * 5) $orange,
    calc($block * 7) calc($block * 5) $orange,
    calc($block * 8) calc($block * 5) $orange,
    calc($block * 9) calc($block * 5) $orange,
    calc($block * 10) calc($block * 5) $orange,
    calc($block * 11) calc($block * 5) $orange,
    calc($block * 12) calc($block * 5) $orange,
    calc($block * 13) calc($block * 5) $orange,
    calc($block * 14) calc($block * 5) $orange,

    calc($block * 1) calc($block * 6) $tan,
    calc($block * 2) calc($block * 6) $orange,
    calc($block * 3) calc($block * 6) $orange,
    calc($block * 4) calc($block * 6) $orange,
    calc($block * 5) calc($block * 6) $orange,
    calc($block * 6) calc($block * 6) $orange,
    calc($block * 7) calc($block * 6) $orange,
    calc($block * 8) calc($block * 6) $orange,
    calc($block * 9) calc($block * 6) $orange,
    calc($block * 10) calc($block * 6) $orange,
    calc($block * 11) calc($block * 6) $orange,
    calc($block * 12) calc($block * 6) $orange,
    calc($block * 13) calc($block * 6) $orange,
    calc($block * 14) calc($block * 6) $orange,

    calc($block * 1) calc($block * 7) $tan,
    calc($block * 2) calc($block * 7) $orange,
    calc($block * 3) calc($block * 7) $orange,
    calc($block * 4) calc($block * 7) $orange,
    calc($block * 5) calc($block * 7) $orange,
    calc($block * 6) calc($block * 7) $orange,
    calc($block * 7) calc($block * 7) $orange,
    calc($block * 8) calc($block * 7) $orange,
    calc($block * 9) calc($block * 7) $orange,
    calc($block * 10) calc($block * 7) $orange,
    calc($block * 11) calc($block * 7) $orange,
    calc($block * 12) calc($block * 7) $orange,
    calc($block * 13) calc($block * 7) $orange,
    calc($block * 14) calc($block * 7) $orange,

    calc($block * 1) calc($block * 8) $tan,
    calc($block * 2) calc($block * 8) $orange,
    calc($block * 3) calc($block * 8) $orange,
    calc($block * 4) calc($block * 8) $orange,
    calc($block * 5) calc($block * 8) $orange,
    calc($block * 6) calc($block * 8) $orange,
    calc($block * 7) calc($block * 8) $orange,
    calc($block * 8) calc($block * 8) $orange,
    calc($block * 9) calc($block * 8) $orange,
    calc($block * 10) calc($block * 8) $orange,
    calc($block * 11) calc($block * 8) $orange,
    calc($block * 12) calc($block * 8) $orange,
    calc($block * 13) calc($block * 8) $orange,
    calc($block * 14) calc($block * 8) $orange,

    calc($block * 1) calc($block * 9) $tan,
    calc($block * 2) calc($block * 9) $orange,
    calc($block * 3) calc($block * 9) $orange,
    calc($block * 4) calc($block * 9) $orange,
    calc($block * 5) calc($block * 9) $orange,
    calc($block * 6) calc($block * 9) $orange,
    calc($block * 7) calc($block * 9) $orange,
    calc($block * 8) calc($block * 9) $orange,
    calc($block * 9) calc($block * 9) $orange,
    calc($block * 10) calc($block * 9) $orange,
    calc($block * 11) calc($block * 9) $orange,
    calc($block * 12) calc($block * 9) $orange,
    calc($block * 13) calc($block * 9) $orange,
    calc($block * 14) calc($block * 9) $orange,
    
    calc($block * 1) calc($block * 10) $tan,
    calc($block * 2) calc($block * 10) $orange,
    calc($block * 3) calc($block * 10) $orange,
    calc($block * 4) calc($block * 10) $orange,
    calc($block * 5) calc($block * 10) $orange,
    calc($block * 6) calc($block * 10) $orange,
    calc($block * 7) calc($block * 10) $orange,
    calc($block * 8) calc($block * 10) $orange,
    calc($block * 9) calc($block * 10) $orange,
    calc($block * 10) calc($block * 10) $orange,
    calc($block * 11) calc($block * 10) $orange,
    calc($block * 12) calc($block * 10) $orange,
    calc($block * 13) calc($block * 10) $orange,
    calc($block * 14) calc($block * 10) $orange,
    
    calc($block * 1) calc($block * 11) $tan,
    calc($block * 2) calc($block * 11) $orange,
    calc($block * 3) calc($block * 11) $orange,
    calc($block * 4) calc($block * 11) $orange,
    calc($block * 5) calc($block * 11) $orange,
    calc($block * 6) calc($block * 11) $orange,
    calc($block * 7) calc($block * 11) $orange,
    calc($block * 8) calc($block * 11) $orange,
    calc($block * 9) calc($block * 11) $orange,
    calc($block * 10) calc($block * 11) $orange,
    calc($block * 11) calc($block * 11) $orange,
    calc($block * 12) calc($block * 11) $orange,
    calc($block * 13) calc($block * 11) $orange,
    calc($block * 14) calc($block * 11) $orange,
    
    calc($block * 1) calc($block * 12) $tan,
    calc($block * 2) calc($block * 12) $orange,
    calc($block * 3) calc($block * 12) $orange,
    calc($block * 4) calc($block * 12) $orange,
    calc($block * 5) calc($block * 12) $orange,
    calc($block * 6) calc($block * 12) $orange,
    calc($block * 7) calc($block * 12) $orange,
    calc($block * 8) calc($block * 12) $orange,
    calc($block * 9) calc($block * 12) $orange,
    calc($block * 10) calc($block * 12) $orange,
    calc($block * 11) calc($block * 12) $orange,
    calc($block * 12) calc($block * 12) $orange,
    calc($block * 13) calc($block * 12) $orange,
    calc($block * 14) calc($block * 12) $orange,
    
    0 calc($block * 13) $black,
    calc($block * 1) calc($block * 13) $tan,
    calc($block * 2) calc($block * 13) $black,
    calc($block * 3) calc($block * 13) $orange,
    calc($block * 4) calc($block * 13) $orange,
    calc($block * 5) calc($block * 13) $orange,
    calc($block * 6) calc($block * 13) $orange,
    calc($block * 7) calc($block * 13) $orange,
    calc($block * 8) calc($block * 13) $orange,
    calc($block * 9) calc($block * 13) $orange,
    calc($block * 10) calc($block * 13) $orange,
    calc($block * 11) calc($block * 13) $orange,
    calc($block * 12) calc($block * 13) $orange,
    calc($block * 13) calc($block * 13) $black,
    calc($block * 14) calc($block * 13) $orange,
    calc($block * 15) calc($block * 13) $black,
    
    0 calc($block * 14) $black,
    calc($block * 1) calc($block * 14) $tan,
    calc($block * 2) calc($block * 14) $orange,
    calc($block * 3) calc($block * 14) $orange,
    calc($block * 4) calc($block * 14) $orange,
    calc($block * 5) calc($block * 14) $orange,
    calc($block * 6) calc($block * 14) $orange,
    calc($block * 7) calc($block * 14) $orange,
    calc($block * 8) calc($block * 14) $orange,
    calc($block * 9) calc($block * 14) $orange,
    calc($block * 10) calc($block * 14) $orange,
    calc($block * 11) calc($block * 14) $orange,
    calc($block * 12) calc($block * 14) $orange,
    calc($block * 13) calc($block * 14) $orange,
    calc($block * 14) calc($block * 14) $orange,
    calc($block * 15) calc($block * 14) $black,
    
    0 calc($block * 15) $black,
    calc($block * 1) calc($block * 15) $black,
    calc($block * 2) calc($block * 15) $black,
    calc($block * 3) calc($block * 15) $black,
    calc($block * 4) calc($block * 15) $black,
    calc($block * 5) calc($block * 15) $black,
    calc($block * 6) calc($block * 15) $black,
    calc($block * 7) calc($block * 15) $black,
    calc($block * 8) calc($block * 15) $black,
    calc($block * 9) calc($block * 15) $black,
    calc($block * 10) calc($block * 15) $black,
    calc($block * 11) calc($block * 15) $black,
    calc($block * 12) calc($block * 15) $black,
    calc($block * 13) calc($block * 15) $black,
    calc($block * 14) calc($block * 15) $black,
    calc($block * 15) calc($block * 15) $black;
  
  &::after {
    position: absolute;
    top: 0;
    left: 0;
    width: $block;
    height: $block;
    content: "";
    box-shadow:
      0 calc($block * 3) $black,
      calc($block * 15) calc($block * 3) $black,
      0 calc($block * 4) $black,
      calc($block * 15) calc($block * 4) $black,
      0 calc($block * 5) $black,
      calc($block * 15) calc($block * 5) $black,
      0 calc($block * 6) $black,
      calc($block * 15) calc($block * 6) $black,
      0 calc($block * 7) $black,
      calc($block * 15) calc($block * 7) $black,
      0 calc($block * 8) $black,
      calc($block * 15) calc($block * 8) $black,
      0 calc($block * 9) $black,
      calc($block * 15) calc($block * 9) $black,
      0 calc($block * 10) $black,
      calc($block * 15) calc($block * 10) $black,
      0 calc($block * 11) $black,
      calc($block * 15) calc($block * 11) $black,
      0 calc($block * 12) $black,
      calc($block * 15) calc($block * 12) $black;
  }
  
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: $block;
    height: $block;
    content: "";
    transform: translateX(-200px);
    box-shadow:
      calc($block * 4) calc($block * 3) $tan,
      calc($block * 5) calc($block * 3) $tan,
      calc($block * 6) calc($block * 3) $tan,
      calc($block * 7) calc($block * 3) $tan,
      calc($block * 8) calc($block * 3) $tan,
      calc($block * 9) calc($block * 3) $tan,
      calc($block * 10) calc($block * 3) $tan,

      calc($block * 3) calc($block * 4) $tan,
      calc($block * 4) calc($block * 4) $tan,
      calc($block * 5) calc($block * 4) $tan,
      calc($block * 6) calc($block * 4) $tan,
      calc($block * 7) calc($block * 4) $tan,
      calc($block * 8) calc($block * 4) $tan,
      calc($block * 9) calc($block * 4) $tan,
      calc($block * 10) calc($block * 4) $tan,
      calc($block * 11) calc($block * 4) $tan,

      calc($block * 3) calc($block * 5) $tan,
      calc($block * 4) calc($block * 5) $tan,
      calc($block * 5) calc($block * 5) $tan,
      calc($block * 6) calc($block * 5) $black,
      calc($block * 7) calc($block * 5) $black,
      calc($block * 8) calc($block * 5) $black,
      calc($block * 9) calc($block * 5) $tan,
      calc($block * 10) calc($block * 5) $tan,
      calc($block * 11) calc($block * 5) $tan,
      calc($block * 12) calc($block * 5) $black,

      calc($block * 4) calc($block * 6) $black,
      calc($block * 5) calc($block * 6) $black,
      calc($block * 6) calc($block * 6) $black,
      calc($block * 9) calc($block * 6) $tan,
      calc($block * 10) calc($block * 6) $tan,
      calc($block * 11) calc($block * 6) $tan,
      calc($block * 12) calc($block * 6) $black,

      calc($block * 6) calc($block * 7) $tan,
      calc($block * 7) calc($block * 7) $tan,
      calc($block * 8) calc($block * 7) $tan,
      calc($block * 9) calc($block * 7) $tan,
      calc($block * 10) calc($block * 7) $tan,
      calc($block * 11) calc($block * 7) $black,
      calc($block * 12) calc($block * 7) $black,

      calc($block * 6) calc($block * 8) $tan,
      calc($block * 7) calc($block * 8) $tan,
      calc($block * 8) calc($block * 8) $tan,
      calc($block * 9) calc($block * 8) $black,
      calc($block * 10) calc($block * 8) $black,
      calc($block * 11) calc($block * 8) $black,

      calc($block * 7) calc($block * 9) $black,
      calc($block * 8) calc($block * 9) $black,
      calc($block * 9) calc($block * 9) $black,

      calc($block * 6) calc($block * 10) $tan,
      calc($block * 7) calc($block * 10) $tan,
      calc($block * 8) calc($block * 10) $tan,

      calc($block * 6) calc($block * 11) $tan,
      calc($block * 7) calc($block * 11) $tan,
      calc($block * 8) calc($block * 11) $tan,
      calc($block * 9) calc($block * 11) $black,

      calc($block * 7) calc($block * 12) $black,
      calc($block * 8) calc($block * 12) $black,
      calc($block * 9) calc($block * 12) $black;
    
    animation: scroll 1.3s linear infinite;
  }
}

@keyframes scroll {
  0% {
    transform: translateX(-200px);
  }
  
  80% {
    opacity: 1;
    transform: translateX(200px);
  }
  
  85% {
    opacity: 0;
    transform: translateX(200px);
  }
  
  90% {
    opacity: 0;
    transform: translateX(-200px);
  }
  
  95% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
  }
}

html, body {
  height: 100%;
  
  @media screen and (height <= $bp) {
    height: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  background: radial-gradient(ellipse at center, #343436 0%,#1d1f20 100%);
  
  @media screen and (height <= $bp) {
    display: block;
  }
}

.view-collection {
  flex: 0 0 auto;
  margin: 10px 0 0;
  color: #fff;
  text-align: center;
  font-size: 15px;
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
  
  @media screen and (height <= $bp) {
    margin: 25px auto;
  }
  
  span {
    font-size: 13px;
  }
  
  .love {
    color: #cc0000;
  }
  
  a {
    color: $orange;
    text-decoration: none;
    transition: all 0.7s;
    
    &:hover, &:focus {
      color: $tan;
    }
  }
}

            
          
!
999px
Loading ..................

Console