LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
html, body {
  height: 100%;
}

body {
  background: #bdc3c7 url("https://www.transparenttextures.com/patterns/diagmonds-light.png");
  font-size: 40px;
  overflow: hidden;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9em;
  height: 12em;
  transform: translate(-50%, -50%);
  border: 0.15em solid #000;
  border-radius: 2px;
  overflow: hidden;
}

.floor {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22em;
  height: 22em;
  background: black no-repeat;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#fff, #fff), linear-gradient(#46b856, #46b856), linear-gradient(#f26522, #f26522), linear-gradient(#0750a4, #0750a4), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#f26522, #f26522);
  background-size: 0.85em 0.85em;
  background-position: 0.075em 0.075em, 1.075em 0.075em, 2.075em 0.075em, 3.075em 0.075em, 4.075em 0.075em, 5.075em 0.075em, 6.075em 0.075em, 7.075em 0.075em, 8.075em 0.075em, 9.075em 0.075em, 10.075em 0.075em, 11.075em 0.075em, 12.075em 0.075em, 13.075em 0.075em, 14.075em 0.075em, 15.075em 0.075em, 16.075em 0.075em, 17.075em 0.075em, 18.075em 0.075em, 19.075em 0.075em, 20.075em 0.075em, 21.075em 0.075em, 0.075em 1.075em, 1.075em 1.075em, 2.075em 1.075em, 3.075em 1.075em, 4.075em 1.075em, 5.075em 1.075em, 6.075em 1.075em, 7.075em 1.075em, 8.075em 1.075em, 9.075em 1.075em, 10.075em 1.075em, 11.075em 1.075em, 12.075em 1.075em, 13.075em 1.075em, 14.075em 1.075em, 15.075em 1.075em, 16.075em 1.075em, 17.075em 1.075em, 18.075em 1.075em, 19.075em 1.075em, 20.075em 1.075em, 21.075em 1.075em, 0.075em 2.075em, 1.075em 2.075em, 2.075em 2.075em, 3.075em 2.075em, 4.075em 2.075em, 5.075em 2.075em, 6.075em 2.075em, 7.075em 2.075em, 8.075em 2.075em, 9.075em 2.075em, 10.075em 2.075em, 11.075em 2.075em, 12.075em 2.075em, 13.075em 2.075em, 14.075em 2.075em, 15.075em 2.075em, 16.075em 2.075em, 17.075em 2.075em, 18.075em 2.075em, 19.075em 2.075em, 20.075em 2.075em, 21.075em 2.075em, 0.075em 3.075em, 1.075em 3.075em, 2.075em 3.075em, 3.075em 3.075em, 4.075em 3.075em, 5.075em 3.075em, 6.075em 3.075em, 7.075em 3.075em, 8.075em 3.075em, 9.075em 3.075em, 10.075em 3.075em, 11.075em 3.075em, 12.075em 3.075em, 13.075em 3.075em, 14.075em 3.075em, 15.075em 3.075em, 16.075em 3.075em, 17.075em 3.075em, 18.075em 3.075em, 19.075em 3.075em, 20.075em 3.075em, 21.075em 3.075em, 0.075em 4.075em, 1.075em 4.075em, 2.075em 4.075em, 3.075em 4.075em, 4.075em 4.075em, 5.075em 4.075em, 6.075em 4.075em, 7.075em 4.075em, 8.075em 4.075em, 9.075em 4.075em, 10.075em 4.075em, 11.075em 4.075em, 12.075em 4.075em, 13.075em 4.075em, 14.075em 4.075em, 15.075em 4.075em, 16.075em 4.075em, 17.075em 4.075em, 18.075em 4.075em, 19.075em 4.075em, 20.075em 4.075em, 21.075em 4.075em, 0.075em 5.075em, 1.075em 5.075em, 2.075em 5.075em, 3.075em 5.075em, 4.075em 5.075em, 5.075em 5.075em, 6.075em 5.075em, 7.075em 5.075em, 8.075em 5.075em, 9.075em 5.075em, 10.075em 5.075em, 11.075em 5.075em, 12.075em 5.075em, 13.075em 5.075em, 14.075em 5.075em, 15.075em 5.075em, 16.075em 5.075em, 17.075em 5.075em, 18.075em 5.075em, 19.075em 5.075em, 20.075em 5.075em, 21.075em 5.075em, 0.075em 6.075em, 1.075em 6.075em, 2.075em 6.075em, 3.075em 6.075em, 4.075em 6.075em, 5.075em 6.075em, 6.075em 6.075em, 7.075em 6.075em, 8.075em 6.075em, 9.075em 6.075em, 10.075em 6.075em, 11.075em 6.075em, 12.075em 6.075em, 13.075em 6.075em, 14.075em 6.075em, 15.075em 6.075em, 16.075em 6.075em, 17.075em 6.075em, 18.075em 6.075em, 19.075em 6.075em, 20.075em 6.075em, 21.075em 6.075em, 0.075em 7.075em, 1.075em 7.075em, 2.075em 7.075em, 3.075em 7.075em, 4.075em 7.075em, 5.075em 7.075em, 6.075em 7.075em, 7.075em 7.075em, 8.075em 7.075em, 9.075em 7.075em, 10.075em 7.075em, 11.075em 7.075em, 12.075em 7.075em, 13.075em 7.075em, 14.075em 7.075em, 15.075em 7.075em, 16.075em 7.075em, 17.075em 7.075em, 18.075em 7.075em, 19.075em 7.075em, 20.075em 7.075em, 21.075em 7.075em, 0.075em 8.075em, 1.075em 8.075em, 2.075em 8.075em, 3.075em 8.075em, 4.075em 8.075em, 5.075em 8.075em, 6.075em 8.075em, 7.075em 8.075em, 8.075em 8.075em, 9.075em 8.075em, 10.075em 8.075em, 11.075em 8.075em, 12.075em 8.075em, 13.075em 8.075em, 14.075em 8.075em, 15.075em 8.075em, 16.075em 8.075em, 17.075em 8.075em, 18.075em 8.075em, 19.075em 8.075em, 20.075em 8.075em, 21.075em 8.075em, 0.075em 9.075em, 1.075em 9.075em, 2.075em 9.075em, 3.075em 9.075em, 4.075em 9.075em, 5.075em 9.075em, 6.075em 9.075em, 7.075em 9.075em, 8.075em 9.075em, 9.075em 9.075em, 10.075em 9.075em, 11.075em 9.075em, 12.075em 9.075em, 13.075em 9.075em, 14.075em 9.075em, 15.075em 9.075em, 16.075em 9.075em, 17.075em 9.075em, 18.075em 9.075em, 19.075em 9.075em, 20.075em 9.075em, 21.075em 9.075em, 0.075em 10.075em, 1.075em 10.075em, 2.075em 10.075em, 3.075em 10.075em, 4.075em 10.075em, 5.075em 10.075em, 6.075em 10.075em, 7.075em 10.075em, 8.075em 10.075em, 9.075em 10.075em, 10.075em 10.075em, 11.075em 10.075em, 12.075em 10.075em, 13.075em 10.075em, 14.075em 10.075em, 15.075em 10.075em, 16.075em 10.075em, 17.075em 10.075em, 18.075em 10.075em, 19.075em 10.075em, 20.075em 10.075em, 21.075em 10.075em, 0.075em 11.075em, 1.075em 11.075em, 2.075em 11.075em, 3.075em 11.075em, 4.075em 11.075em, 5.075em 11.075em, 6.075em 11.075em, 7.075em 11.075em, 8.075em 11.075em, 9.075em 11.075em, 10.075em 11.075em, 11.075em 11.075em, 12.075em 11.075em, 13.075em 11.075em, 14.075em 11.075em, 15.075em 11.075em, 16.075em 11.075em, 17.075em 11.075em, 18.075em 11.075em, 19.075em 11.075em, 20.075em 11.075em, 21.075em 11.075em, 0.075em 12.075em, 1.075em 12.075em, 2.075em 12.075em, 3.075em 12.075em, 4.075em 12.075em, 5.075em 12.075em, 6.075em 12.075em, 7.075em 12.075em, 8.075em 12.075em, 9.075em 12.075em, 10.075em 12.075em, 11.075em 12.075em, 12.075em 12.075em, 13.075em 12.075em, 14.075em 12.075em, 15.075em 12.075em, 16.075em 12.075em, 17.075em 12.075em, 18.075em 12.075em, 19.075em 12.075em, 20.075em 12.075em, 21.075em 12.075em, 0.075em 13.075em, 1.075em 13.075em, 2.075em 13.075em, 3.075em 13.075em, 4.075em 13.075em, 5.075em 13.075em, 6.075em 13.075em, 7.075em 13.075em, 8.075em 13.075em, 9.075em 13.075em, 10.075em 13.075em, 11.075em 13.075em, 12.075em 13.075em, 13.075em 13.075em, 14.075em 13.075em, 15.075em 13.075em, 16.075em 13.075em, 17.075em 13.075em, 18.075em 13.075em, 19.075em 13.075em, 20.075em 13.075em, 21.075em 13.075em, 0.075em 14.075em, 1.075em 14.075em, 2.075em 14.075em, 3.075em 14.075em, 4.075em 14.075em, 5.075em 14.075em, 6.075em 14.075em, 7.075em 14.075em, 8.075em 14.075em, 9.075em 14.075em, 10.075em 14.075em, 11.075em 14.075em, 12.075em 14.075em, 13.075em 14.075em, 14.075em 14.075em, 15.075em 14.075em, 16.075em 14.075em, 17.075em 14.075em, 18.075em 14.075em, 19.075em 14.075em, 20.075em 14.075em, 21.075em 14.075em, 0.075em 15.075em, 1.075em 15.075em, 2.075em 15.075em, 3.075em 15.075em, 4.075em 15.075em, 5.075em 15.075em, 6.075em 15.075em, 7.075em 15.075em, 8.075em 15.075em, 9.075em 15.075em, 10.075em 15.075em, 11.075em 15.075em, 12.075em 15.075em, 13.075em 15.075em, 14.075em 15.075em, 15.075em 15.075em, 16.075em 15.075em, 17.075em 15.075em, 18.075em 15.075em, 19.075em 15.075em, 20.075em 15.075em, 21.075em 15.075em, 0.075em 16.075em, 1.075em 16.075em, 2.075em 16.075em, 3.075em 16.075em, 4.075em 16.075em, 5.075em 16.075em, 6.075em 16.075em, 7.075em 16.075em, 8.075em 16.075em, 9.075em 16.075em, 10.075em 16.075em, 11.075em 16.075em, 12.075em 16.075em, 13.075em 16.075em, 14.075em 16.075em, 15.075em 16.075em, 16.075em 16.075em, 17.075em 16.075em, 18.075em 16.075em, 19.075em 16.075em, 20.075em 16.075em, 21.075em 16.075em, 0.075em 17.075em, 1.075em 17.075em, 2.075em 17.075em, 3.075em 17.075em, 4.075em 17.075em, 5.075em 17.075em, 6.075em 17.075em, 7.075em 17.075em, 8.075em 17.075em, 9.075em 17.075em, 10.075em 17.075em, 11.075em 17.075em, 12.075em 17.075em, 13.075em 17.075em, 14.075em 17.075em, 15.075em 17.075em, 16.075em 17.075em, 17.075em 17.075em, 18.075em 17.075em, 19.075em 17.075em, 20.075em 17.075em, 21.075em 17.075em, 0.075em 18.075em, 1.075em 18.075em, 2.075em 18.075em, 3.075em 18.075em, 4.075em 18.075em, 5.075em 18.075em, 6.075em 18.075em, 7.075em 18.075em, 8.075em 18.075em, 9.075em 18.075em, 10.075em 18.075em, 11.075em 18.075em, 12.075em 18.075em, 13.075em 18.075em, 14.075em 18.075em, 15.075em 18.075em, 16.075em 18.075em, 17.075em 18.075em, 18.075em 18.075em, 19.075em 18.075em, 20.075em 18.075em, 21.075em 18.075em, 0.075em 19.075em, 1.075em 19.075em, 2.075em 19.075em, 3.075em 19.075em, 4.075em 19.075em, 5.075em 19.075em, 6.075em 19.075em, 7.075em 19.075em, 8.075em 19.075em, 9.075em 19.075em, 10.075em 19.075em, 11.075em 19.075em, 12.075em 19.075em, 13.075em 19.075em, 14.075em 19.075em, 15.075em 19.075em, 16.075em 19.075em, 17.075em 19.075em, 18.075em 19.075em, 19.075em 19.075em, 20.075em 19.075em, 21.075em 19.075em, 0.075em 20.075em, 1.075em 20.075em, 2.075em 20.075em, 3.075em 20.075em, 4.075em 20.075em, 5.075em 20.075em, 6.075em 20.075em, 7.075em 20.075em, 8.075em 20.075em, 9.075em 20.075em, 10.075em 20.075em, 11.075em 20.075em, 12.075em 20.075em, 13.075em 20.075em, 14.075em 20.075em, 15.075em 20.075em, 16.075em 20.075em, 17.075em 20.075em, 18.075em 20.075em, 19.075em 20.075em, 20.075em 20.075em, 21.075em 20.075em, 0.075em 21.075em, 1.075em 21.075em, 2.075em 21.075em, 3.075em 21.075em, 4.075em 21.075em, 5.075em 21.075em, 6.075em 21.075em, 7.075em 21.075em, 8.075em 21.075em, 9.075em 21.075em, 10.075em 21.075em, 11.075em 21.075em, 12.075em 21.075em, 13.075em 21.075em, 14.075em 21.075em, 15.075em 21.075em, 16.075em 21.075em, 17.075em 21.075em, 18.075em 21.075em, 19.075em 21.075em, 20.075em 21.075em, 21.075em 21.075em;
  transform: translate(-50%, -50%) rotateX(55deg) rotateZ(45deg);
  z-index: -2;
}

.rubiks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3em;
  height: 3em;
  transform-style: preserve-3d;
  transform: translateY(0) translate(-50%, -50%) rotateX(-35deg) rotateY(-45deg);
}
.rubiks .face {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3em;
  height: 3em;
}
@keyframes side-grow {
  from, 5% {
    transform: translateY(100%);
  }
  45%, to {
    transform: translateY(0);
  }
}
.rubiks .face:nth-child(1) {
  animation: front-fall 3s -3s infinite;
  transform-style: preserve-3d;
}
@keyframes front-fall {
  from, 70% {
    transform: translateZ(1.5em) translateY(1.5em) rotateX(0) translateY(-1.5em);
  }
  95%, to {
    transform: translateZ(1.5em) translateY(1.5em) rotateX(-90deg) translateY(-1.5em);
  }
}
.rubiks .face:nth-child(1) .inner {
  transform: translateZ(-1px);
  overflow: hidden;
  z-index: 5;
}
.rubiks .face:nth-child(1) .inner, .rubiks .face:nth-child(1) .inner:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.rubiks .face:nth-child(1) .inner:before {
  content: '';
  background: black no-repeat;
  background-image: linear-gradient(#f3e63c, #f3e63c), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff);
  background-size: 0.85em 0.85em;
  background-position: 0.075em 0.075em, 1.075em 0.075em, 2.075em 0.075em, 0.075em 1.075em, 1.075em 1.075em, 2.075em 1.075em, 0.075em 2.075em, 1.075em 2.075em, 2.075em 2.075em;
  animation: side-grow 3s -3s infinite;
}
@keyframes shadows {
  from, 5% {
    transform: scaleY(0);
    opacity: .5;
    visibility: visible;
  }
  45%, 70% {
    transform: scaleY(1);
    opacity: .5;
  }
  95%, to {
    transform: scaleY(1);
    opacity: 1;
    visibility: hidden;
  }
}
.rubiks .face:nth-child(1):before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 5;
  backface-visibility: hidden;
  transform-origin: center bottom;
  animation: shadows 3s -3s infinite;
}
.rubiks .face:nth-child(2) {
  animation: right-fall 3s -3s infinite;
  overflow: hidden;
}
@keyframes right-fall {
  from, 70% {
    transform: translateX(1.5em) rotateY(90deg) translateY(1.5em) rotateX(0) translateY(-1.5em);
  }
  95%, to {
    transform: translateX(1.5em) rotateY(90deg) translateY(1.5em) rotateX(-90deg) translateY(-1.5em);
  }
}
.rubiks .face:nth-child(2):before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black no-repeat;
  background-image: linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#f26522, #f26522), linear-gradient(#46b856, #46b856), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#0750a4, #0750a4);
  background-size: 0.85em 0.85em;
  background-position: 0.075em 0.075em, 1.075em 0.075em, 2.075em 0.075em, 0.075em 1.075em, 1.075em 1.075em, 2.075em 1.075em, 0.075em 2.075em, 1.075em 2.075em, 2.075em 2.075em;
  animation: side-grow 3s -3s infinite;
}
.rubiks .face:nth-child(3) {
  animation: top 3s -3s infinite;
  background: black no-repeat;
  background-image: linear-gradient(#fff, #fff), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#0750a4, #0750a4), linear-gradient(#ed1c24, #ed1c24), linear-gradient(#fff, #fff), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#0750a4, #0750a4), linear-gradient(#f3e63c, #f3e63c), linear-gradient(#fff, #fff);
  background-size: 0.85em 0.85em;
  background-position: 0.075em 0.075em, 1.075em 0.075em, 2.075em 0.075em, 0.075em 1.075em, 1.075em 1.075em, 2.075em 1.075em, 0.075em 2.075em, 1.075em 2.075em, 2.075em 2.075em;
}
@keyframes top {
  from, 5% {
    transform: translateY(0) translateY(1.5em) rotateX(90deg);
  }
  45% {
    transform: translateY(1px) translateY(-1.5em) rotateX(90deg);
    visibility: hidden;
  }
  70% {
    transform: translateY(0) translateY(1.5em) rotateX(90deg);
    visibility: hidden;
  }
  to {
    transform: translateY(0) translateY(1.5em) rotateX(90deg);
    visibility: visible;
  }
}
.rubiks:nth-child(2) {
  z-index: -1;
}
.rubiks:nth-child(2) .face:nth-child(1) {
  animation: none;
  transform: translateY(-1px) translateZ(1.5em) translateY(1.5em) rotateX(-90deg) translateY(-1.5em);
  transform-style: flat;
}
.rubiks:nth-child(2) .face:nth-child(1) .inner {
  z-index: 0;
}
.rubiks:nth-child(2) .face:nth-child(1) .inner:before {
  animation: none;
}
.rubiks:nth-child(2) .face:nth-child(2) {
  transform: translateX(1.5em) rotateY(90deg) translateY(1.5em) rotateX(-90deg) translateY(-1.5em);
}
.rubiks:nth-child(2) .face:nth-child(2), .rubiks:nth-child(2) .face:nth-child(2):before {
  animation: none;
}
.rubiks:nth-child(2) .face:nth-child(3) {
  animation: none;
  transform: translate3d(-3em, 1.5em, -3em) rotateX(90deg);
}

Description

Inspired by this beautiful artwork from Malika Favre :
Term
Wed, 11/29/2017 - 13:54

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv