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

              
                <div class="gameboy">
  <div class="switch"></div>
  <div class="base">
    <div class="line__top"></div>
    <div class="line__side__R"></div>
    <div class="line__side__L"></div>
    <div class="on__off">
      <div class="on__off__btm">◀OFF●ON▶</div>
      <div class="on__off__line"></div>
      <div class="on__off__line"></div>
      <div class="on__off__line"></div>
    </div>
    <div class="display">

      <div class="display__line">
        <div class="display__line__l"></div>
        <div class="display__line__l"></div>
      </div>

      <div class="display__top">DOT MATRIX WITH STEREO SOUND</div>

      <div class="battery"></div>

      <div class="display__inner">
        <div class="text__here">CSS Nintendo®</div>
      </div>
    </div>

    <div class="nintendo">Nintendo<span class="name">GAME BOY<span class="tm">TM</span></span></div>

    <div class="left__key">

      <div class="left__key__tate"></div>
      <div class="left__key__yoko"></div>
      <div class="left__key__tate__inner">
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
        <div class="left__key__tate__inner__grips"></div>
      </div>
      <div class="left__key__yoko__inner">
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
        <div class="left__key__yoko__inner__grips"></div>
      </div>
      <div class="left__key__center">
        <div class="left__key__center__cir"></div>
      </div>
    </div>

    <div class="right__key">
      <div class="right__key__btn">
        <div class="right__key__btn__R"></div>
        <div class="right__key__btn__L"></div>
      </div>
      <div class="right__key__label">
        <div class="b">B</div>
        <div class="a">A</div>
      </div>

    </div>

    <div class="selectStart">
      <div class="selectStart__slect">
        <div class="selectStart__btn">
          <div class="selectStart__btn__inner"></div>
        </div>
        <div class="select">SELECT</div>
      </div>
      <div class="selectStart__start">
        <div class="selectStart__btn">
          <div class="selectStart__btn__inner"></div>
        </div>
        <div class="start">START</div>
      </div>
    </div>

    <div class="speaker">
      <div class="speaker__Light"></div>
      <div class="speaker__line"></div>
      <div class="speaker__line"></div>
      <div class="speaker__line"></div>
      <div class="speaker__line"></div>
      <div class="speaker__line"></div>
      <div class="speaker__line"></div>

    </div>

    <div class="phones">
      <div class="phones__top">ΩPHONES</div>
      <div class="phones__line">
        <div class="phones__line__inner"></div>
        <div class="phones__line__inner"></div>
      </div>

    </div>

  </div>
</div>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Gidugu&family=Merriweather+Sans:ital,wght@0,300;1,300&family=Orbitron&display=swap");

$allW: 263px;
$rotate: -27deg;

$mainColor: #eee6e2;
$mainColorLight: #f6f2ee;
$mainColorDark: #e5ddd7;

$BtnLight: #eee6e2;
$BtnDark: #dbd5d0;

$textBColor: #2039a2;
$textPColor: #9f447e;
$textGColor: #d8d7e1;

$line: #dbd5ce;
$lineLight: #f6f5f2;
$lineDark: #d0c8c0;

$des: #9a97a1;
$desLight: #b9b8c3;
$desDark: #939098;

$screen: #7d7e4c;
$screenLight: #8a9b38;
$screenDark: #6d664b;

$switch: #c8c4c5;
$switchLight: #d9d5da;
$switchDark: #a69999;

$rightBtn: #b34c77;
$rightBtnLight: #fad3ee;
$rightBtnDark: #b2356b;

$leftKey: #55565b;
$leftKeyLight: #6f7075;
$leftKeyDark: #31303a;
$leftKeyShadow: #0a0a0a;

$speaker: #b8aeaa;
$speakerLight: #f6f0ed;
$speakerDark: #1a0b0a;

$selectStart: #a99e9e;
$selectStartLight: #d2d0d3;
$selectStartDark: #9e9592;


body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Orbitron", sans-serif;
  background: $mainColorLight;
}

.gameboy {
  position: relative;
  .switch {
    width: 14px;
    height: 6px;
    background: $switch;
    border-radius: 20px 20px 0 0;
    position: absolute;
    top: -5px;
    left: 35px;
    background-image: linear-gradient(
      0deg,
      $switchDark,
      $switchLight 95% 99%,
      transparent
    );

    animation: switchOn;
    animation-duration: 1s;
    animation-delay: 1s;
  }
  .base {
    width: $allW;
    height: 437px;
    border-radius: 10px 10px 60px 10px;
    background: $mainColor;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(
        90deg,
        $lineDark,
        transparent 6% 95%,
        $lineLight 98% 99%,
        transparent
      ),
      linear-gradient(
        0deg,
        $mainColor,
        transparent 1% 97%,
        $lineLight 99% 99%,
        transparent,
        $lineDark
      );
    box-shadow: -3px 0px 5px 0px $mainColorLight inset,
      6px 0 6px 1px $mainColorDark inset, 0 3px 3px $mainColorLight inset,
      0 35px 20px -2px rgba(0, 0, 0, 0.08), 0 55px 50px -5px rgba(0, 0, 0, 0.05);

    .line__top {
      width: $allW;
      height: 5px;
      top: 22px;
      position: absolute;
      background: $line;
      background-image: linear-gradient(
        90deg,
        $lineDark,
        transparent 8% 95%,
        $lineLight 97% 98%,
        transparent
      );
    }

    .line__side__R,
    .line__side__L {
      width: 5px;
      height: 24px;
      position: absolute;
      background: $line;
      background-image: linear-gradient(
        90deg,
        $lineLight,
        transparent 10% 40%,
        $lineDark
      );
    }

    .line__side__R {
      left: 20px;
    }

    .line__side__L {
      right: 20px;
    }

    .on__off {
      &__btm {
        width: 50px;
        height: 10px;
        background: #000;
        position: absolute;
        left: 30px;
        top: 9px;
        border-radius: 50px;
        background: $mainColor;
        box-shadow: 1px 1px 1px 1px $lineLight inset,
          -1px -1px 1px 1px $lineDark inset;
        color: $mainColorLight;
        text-align: center;
        font-size: 6px;
      }

      &__line {
        width: 3px;
        height: 12px;
        background: $mainColor;
        position: absolute;
        left: 35px;
        background-image: linear-gradient(
          0deg,
          $mainColor,
          transparent 35% 60%,
          $mainColorLight 60% 80%,
          $mainColor 90% 100%
        );

        &:nth-child(2) {
          left: 40px;
        }

        &:nth-child(3) {
          left: 45px;
        }
      }
    }

    .display {
      width: 224px;
      height: 171px;
      background: $des;
      margin: 38px auto;
      position: relative;
      border-radius: 10px 10px 36px 10px;
      box-shadow: -1px 0px 1px $desDark inset, 1px 0 1px $desDark inset,
        0 1px 1px $desLight inset;

      .battery {
        position: absolute;
        top: 62px;
        left: 13px;
        width: 8px;
        height: 8px;
        border-radius: 50px;
        background: #f74f2f;

        animation: batteryOn 5s;
        animation-duration: 1s;
        animation-delay: 1s;

        &::after {
          content: "BATTERRY";
          color: $textGColor;
          font-size: 5px;
          font-family: "Merriweather Sans", sans-serif;
          font-weight: 300;
          margin-left: -6px;
        }
      }

      .display__top {
        position: absolute;
        top: 10px;
        left: 59%;
        transform: translate(-50%, -50%);
        width: 118px;
        height: 10px;
        background: $des;
        color: $textGColor;
        font-size: 6px;
        font-family: "Merriweather Sans", sans-serif;
        font-weight: 300;
        text-align: center;
      }

      &__line {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translate(-50%, -50%);
        &__l {
          width: 200px;
          height: 3px;
          background: $textPColor;
          margin-bottom: 2px;
          &:nth-child(2) {
            background: $textBColor;
          }
        }
      }

      &__inner {
        width: 142px;
        height: 129px;
        background: $screenLight;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 2px;
        box-shadow: -10px 0px 5px -1px $screen inset, 5px 0 10px $screen inset,
          -5px 0px 2px $screenDark inset;
        overflow: hidden;

        .text__here {
          width: 100%;
          position: absolute;
          top: -10%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: #1a6770;
          font-family: "Gidugu", sans-serif;
          font-size: 18px;
          text-align: center;

          animation: title 5s;
          animation-delay: 2s;
          animation-fill-mode: forwards;
          animation-timing-function: linear;
        }
      }
    }

    .left__key {
      &__tate {
        width: 24px;
        height: 67px;
        background: $leftKeyShadow;
        position: absolute;
        left: 43px;
        top: 265px;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &__yoko {
        width: 67px;
        height: 24px;
        background: $leftKeyShadow;
        position: absolute;
        left: 21px;
        top: 286px;
        border-radius: 3px;
      }

      &__tate__inner {
        position: absolute;
        left: 45px;
        top: 268px;
        width: 20px;
        height: 61px;
        border-radius: 3px;
        background: $leftKey;
        box-shadow: -1px 0px 2px 0px $leftKeyLight inset,
          2px -4px 2px $leftKeyDark inset, -9px 0px 3px 0px rgba(0, 0, 0, 0.08),
          -9px 0px 5px 0px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;

        &__grips {
          width: 70%;
          height: 5px;
          background: $leftKey;
          box-shadow: -1px 0px 2px 0px $leftKeyLight inset,
            2px -2px 2px $leftKeyDark inset;
        }
      }

      &__yoko__inner {
        width: 61px;
        height: 20px;
        position: absolute;
        left: 24px;
        top: 288px;
        border-radius: 3px;
        background: $leftKey;
        box-shadow: -1px 0px 2px 0px $leftKeyLight inset,
          2px -4px 2px $leftKeyDark inset, -9px 0px 3px 0px rgba(0, 0, 0, 0.08),
          -9px 0px 5px 0px rgba(0, 0, 0, 0.05);
        display: flex;
        justify-content: space-around;
        align-items: center;
        &__grips {
          width: 5px;
          height: 65%;
          background: $leftKey;
          box-shadow: -1px 1px 1px $leftKeyLight inset,
            1px -1px 1px $leftKeyDark inset;
        }
      }

      &__center {
        width: 20px;
        height: 20px;
        background: $leftKey;
        position: absolute;
        left: 45px;
        top: 288px;
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        &__cir {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          box-shadow: -2px 2px 5px $leftKeyDark inset,
            2px -4px 5px $leftKeyLight inset;
        }
      }
    }

    .nintendo {
      position: absolute;
      top: 208px;
      left: 20px;
      color: $textBColor;
      font-family: "Gidugu", sans-serif;
      font-size: 18px;
      .name {
        font-style: italic;
        font-weight: 300;
        font-family: "Merriweather Sans", sans-serif;
        margin-left: 2px;
        .tm {
          font-size: 6px;
        }
      }
    }

    .right__key {
      position: absolute;
      left: 168px;
      top: 280px;
      transform: rotate($rotate);

      .right__key__btn {
        width: 94px;
        height: 43px;
        border-radius: 50px;
        background: $mainColor;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-shadow: 10px 2px 30px 3px $BtnLight inset,
          -30px -20px 40px 0px $BtnDark inset;
        &__R,
        &__L {
          width: 33px;
          height: 33px;
          background: $rightBtn;
          border-radius: 50px;
          box-shadow: -1px 0px 3px 0px $rightBtnLight inset,
            2px -4px 5px $rightBtnDark inset,
            -9px -2px 3px -1px rgba(0, 0, 0, 0.08),
            -9px -2px 5px -1px rgba(0, 0, 0, 0.05);
        }
      }

      .right__key__label {
        margin-top: 0px;
        width: 94px;
        display: flex;
        justify-content: space-around;
        color: $textBColor;

        .a,
        .b {
          font-size: 10px;
        }
      }
    }

    .selectStart {
      width: 90px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      left: 77px;
      bottom: 50px;

      .selectStart__slect,
      .selectStart__start {
        transform: rotate($rotate);
        text-align: center;

        .start,
        .select {
          font-size: 7px;
          color: $textBColor;
        }
      }
      &__btn {
        width: 40px;
        height: 17px;
        background: $mainColor;
        border-radius: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        box-shadow: -3px 3px 2px 3px $BtnLight inset,
          0px -4px 2px $BtnDark inset;

        &__inner {
          width: 32px;
          height: 9px;
          border-radius: 50px;
          background: $selectStart;
          box-shadow: -1px 0px 2px 2px $selectStartLight inset,
            0px 4px 2px $selectStartDark inset;
        }
      }
    }

    .speaker {
      width: 80px;
      display: flex;
      justify-content: space-between;
      position: absolute;
      right: 10px;
      bottom: 23px;
      transform: rotate($rotate);

      &__Light {
        width: 150px;
        height: 50px;
        position: absolute;
        background: $speakerLight;
        top: 38px;
        left: -30px;
        opacity: 0.7;
      }

      &__line {
        width: 5px;
        height: 44px;
        border-radius: 50px;
        background: $speaker;
        position: relative;
        overflow: hidden;

        &::after {
          position: absolute;
          content: "";
          width: 5px;
          height: 30px;
          background: $speakerDark;
          border-radius: 50px;
          top: 0px;
          left: -3px;
        }
      }
    }

    .phones {
      width: 40px;
      height: 17px;
      position: absolute;
      bottom: 0;
      left: 98px;
      color: $mainColorLight;
      text-align: center;
      font-size: 6px;
      &__top {
        width: 40px;
        height: 10px;
        border-radius: 50px;
        background: $mainColor;
        box-shadow: 1px 1px 1px 1px $lineLight inset,
          -1px -1px 1px 1px $lineDark inset;
      }
      &__line {
        width: 15px;
        height: 120%;
        background: $mainColorDark;
        position: absolute;
        right: 5px;
        display: flex;
        justify-content: space-around;
        z-index: 10;
        background-image: linear-gradient(
          0deg,
          $lineLight,
          transparent 10% 40%
        );

        &__inner {
          width: 3px;
          height: 100%;
          background: $mainColor;
          border-radius: 0 0 25px 25px / 0 0 25px 25px;
        }
      }
    }
  }
}

@keyframes title {
  0% {
  }
  100% {
    top: 50%;
  }
}

@keyframes batteryOn {
  0% {
    background: #67534d;
  }
  100% {
    background: #f74f2f;
  }
}

@keyframes switchOn {
  0% {
    left: 30px;
  }
  100% {
    left: 35px;
  }
}

              
            
!

JS

              
                //You can change the title on ".text__here" ;)
//Hope you like it!
              
            
!
999px

Console