ZX Spectrum with Pure CSS

HTML

              
                <div class="zx-spectrum">

    <div class="zx-spectrum-top">
      <div class="logos">
        <div class="sinclair-logo">sinclair</div>
        <div class="model-name">ZX Spectrum</div>
      </div>
    </div>

    <div class="zx-spectrum-border top"></div>

    <div class="zx-spectrum-keyboard">
      <div class="keyboard-container">
        <div class="keyboard-row keyboard-row-1">

          <div class="key-container">
            <div class="first label color-blue">BLUE</div>
            <div class="second label">EDIT</div>
            <div class="key">
              <div class="primary">1</div>
              <div class="secondary">
                <div class="symbol symbol-1"></div>
              </div>
              <div class="tertiary">!</div>
            </div>
            <div class="last label">DEF FN</div>
          </div>

          <div class="key-container">
            <div class="first label color-red">RED</div>
            <div class="second label">CAPS LOCK</div>
            <div class="key">
              <div class="primary">2</div>
              <div class="secondary">
                <div class="symbol symbol-2"></div>
              </div>
              <div class="tertiary">@</div>
            </div>
            <div class="last label">FN</div>
          </div>

          <div class="key-container">
            <div class="first label color-magenta">MAGENTA</div>
            <div class="second label">TRUE VIDEO</div>
            <div class="key">
              <div class="primary">3</div>
              <div class="secondary">
                <div class="symbol symbol-3"></div>
              </div>
              <div class="tertiary">#</div>
            </div>
            <div class="last label">LINE</div>
          </div>

          <div class="key-container">
            <div class="first label">GREEN</div>
            <div class="second label">INV.VIDEO</div>
            <div class="key">
              <div class="primary">4</div>
              <div class="secondary">
                <div class="symbol symbol-4"></div>
              </div>
              <div class="tertiary">$</div>
            </div>
            <div class="last label">OPEN #</div>
          </div>

          <div class="key-container">
            <div class="first label color-cyan">CYAN</div>
            <div class="second label arrow">⇦</div>
            <div class="key">
              <div class="primary">5</div>
              <div class="secondary">
                <div class="symbol symbol-5"></div>
              </div>
              <div class="tertiary">%</div>
            </div>
            <div class="last label">CLOSE #</div>
          </div>

          <div class="key-container">
            <div class="first label color-yellow">YELLOW</div>
            <div class="second label arrow arrow-vertical">⇩</div>
            <div class="key">
              <div class="primary">6</div>
              <div class="secondary">
                <div class="symbol symbol-6"></div>
              </div>
              <div class="tertiary">&</div>
            </div>
            <div class="last label">MOVE</div>
          </div>

          <div class="key-container">
            <div class="first label color-white">WHITE</div>
            <div class="second label arrow arrow-vertical">⇧</div>
            <div class="key">
              <div class="primary">7</div>
              <div class="secondary">
                <div class="symbol symbol-7"></div>
              </div>
              <div class="tertiary">'</div>
            </div>
            <div class="last label">ERASE</div>
          </div>

          <div class="key-container">
            <div class="first label arrow">⇨</div>
            <div class="key">
              <div class="primary">8</div>
              <div class="secondary">
                <div class="symbol symbol-8"></div>
              </div>
              <div class="tertiary">(</div>
            </div>
            <div class="last label">POINT</div>
          </div>

          <div class="key-container">
            <div class="first label color-white">GRAPHICS</div>
            <div class="key">
              <div class="primary">9</div>
              <div class="secondary"></div>
              <div class="tertiary">)</div>
            </div>
            <div class="last label">CAT</div>
          </div>

          <div class="key-container">
            <div class="first label inverted-color">BLACK</div>
            <div class="second label">DELETE</div>
            <div class="key">
              <div class="primary">0</div>
              <div class="secondary"></div>
              <div class="tertiary">_</div>
            </div>
            <div class="last label">FORMAT</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-2">

          <div class="key-container">
            <div class="first label">SIN</div>
            <div class="key">
              <div class="primary">Q</div>
              <div class="secondary">&lt;=</div>
              <div class="tertiary">PLOT</div>
            </div>
            <div class="last label">ASN</div>
          </div>

          <div class="key-container">
            <div class="first label">COS</div>
            <div class="key">
              <div class="primary">W</div>
              <div class="secondary">&lt;&gt;</div>
              <div class="tertiary">DRAW</div>
            </div>
            <div class="last label">ACS</div>
          </div>

          <div class="key-container">
            <div class="first label">TAN</div>
            <div class="key">
              <div class="primary">E</div>
              <div class="secondary">&gt;=</div>
              <div class="tertiary">REM</div>
            </div>
            <div class="last label">ATN</div>
          </div>

          <div class="key-container">
            <div class="first label">INT</div>
            <div class="key">
              <div class="primary">R</div>
              <div class="secondary">&lt;</div>
              <div class="tertiary">RUN</div>
            </div>
            <div class="last label">VERIFY</div>
          </div>

          <div class="key-container">
            <div class="first label">RND</div>
            <div class="key">
              <div class="primary">T</div>
              <div class="secondary">&lt;</div>
              <div class="tertiary">RAND</div>
            </div>
            <div class="last label">MERGE</div>
          </div>

          <div class="key-container">
            <div class="first label">STR $</div>
            <div class="key">
              <div class="primary">Y</div>
              <div class="secondary">AND</div>
              <div class="tertiary">RETURN</div>
            </div>
            <div class="last label">[</div>
          </div>

          <div class="key-container">
            <div class="first label">CHR $</div>
            <div class="key">
              <div class="primary">U</div>
              <div class="secondary">OR</div>
              <div class="tertiary">IF</div>
            </div>
            <div class="last label">]</div>
          </div>

          <div class="key-container">
            <div class="first label">CODE</div>
            <div class="key">
              <div class="primary">I</div>
              <div class="secondary">AT</div>
              <div class="tertiary">INPUT</div>
            </div>
            <div class="last label">IN</div>
          </div>

          <div class="key-container">
            <div class="first label">PEEK</div>
            <div class="key">
              <div class="primary">O</div>
              <div class="secondary big">;</div>
              <div class="tertiary">POKE</div>
            </div>
            <div class="last label">OUT</div>
          </div>

          <div class="key-container">
            <div class="first label">TAB</div>
            <div class="key">
              <div class="primary">P</div>
              <div class="secondary big">"</div>
              <div class="tertiary">PRINT</div>
            </div>
            <div class="last label">©</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-3">

          <div class="key-container">
            <div class="first label">READ</div>
            <div class="key">
              <div class="primary">A</div>
              <div class="secondary">STOP</div>
              <div class="tertiary">NEW</div>
            </div>
            <div class="last label big">~</div>
          </div>

          <div class="key-container">
            <div class="first label">RESTORE</div>
            <div class="key">
              <div class="primary">S</div>
              <div class="secondary">NOT</div>
              <div class="tertiary">SAVE</div>
            </div>
            <div class="last label">|</div>
          </div>

          <div class="key-container">
            <div class="first label">DATA</div>
            <div class="key">
              <div class="primary">D</div>
              <div class="secondary">STEP</div>
              <div class="tertiary">DIM</div>
            </div>
            <div class="last label">\</div>
          </div>

          <div class="key-container">
            <div class="first label">SGN</div>
            <div class="key">
              <div class="primary">F</div>
              <div class="secondary">TO</div>
              <div class="tertiary">FOR</div>
            </div>
            <div class="last label">{</div>
          </div>

          <div class="key-container">
            <div class="first label">ABS</div>
            <div class="key">
              <div class="primary">G</div>
              <div class="secondary">THEN</div>
              <div class="tertiary">GOTO</div>
            </div>
            <div class="last label">}</div>
          </div>

          <div class="key-container">
            <div class="first label">SQR</div>
            <div class="key">
              <div class="primary">H</div>
              <div class="secondary big">↑</div>
              <div class="tertiary">GOSUB</div>
            </div>
            <div class="last label">CIRCLE</div>
          </div>

          <div class="key-container">
            <div class="first label">VAL</div>
            <div class="key">
              <div class="primary">J</div>
              <div class="secondary big">-</div>
              <div class="tertiary">LOAD</div>
            </div>
            <div class="last label">VAL $</div>
          </div>

          <div class="key-container">
            <div class="first label">LEN</div>
            <div class="key">
              <div class="primary">K</div>
              <div class="secondary big">+</div>
              <div class="tertiary">LIST</div>
            </div>
            <div class="last label">SCREEN $</div>
          </div>

          <div class="key-container">
            <div class="first label">USR</div>
            <div class="key">
              <div class="primary">L</div>
              <div class="secondary big">=</div>
              <div class="tertiary">LET</div>
            </div>
            <div class="last label">ATTR</div>
          </div>

          <div class="key-container">
            <div class="without-label key">ENTER</div>
          </div>

        </div>
        <div class="keyboard-row keyboard-row-4">

          <div class="key-container">
            <div class="key double without-label large">
              <span>CAPS</span>
              <span>SHIFT</span>
            </div>
          </div>

          <div class="key-container">
            <div class="first label">LN</div>
            <div class="key">
              <div class="primary">Z</div>
              <div class="secondary big">:</div>
              <div class="tertiary">COPY</div>
            </div>
            <div class="last label">BLEEP</div>
          </div>

          <div class="key-container">
            <div class="first label">EXP</div>
            <div class="key">
              <div class="primary">X</div>
              <div class="secondary big">£</div>
              <div class="tertiary">CLEAR</div>
            </div>
            <div class="last label">INK</div>
          </div>

          <div class="key-container">
            <div class="first label">L PRINT</div>
            <div class="key">
              <div class="primary">C</div>
              <div class="secondary big">?</div>
              <div class="tertiary">CONT</div>
            </div>
            <div class="last label">PAPER</div>
          </div>

          <div class="key-container">
            <div class="first label">L LIST</div>
            <div class="key">
              <div class="primary">V</div>
              <div class="secondary big">/</div>
              <div class="tertiary">CLS</div>
            </div>
            <div class="last label">FLASH</div>
          </div>

          <div class="key-container">
            <div class="first label">BIN</div>
            <div class="key">
              <div class="primary">B</div>
              <div class="secondary big">*</div>
              <div class="tertiary">BORDER</div>
            </div>
            <div class="last label">BRIGHT</div>
          </div>

          <div class="key-container">
            <div class="first label">IN KEY $</div>
            <div class="key">
              <div class="primary">N</div>
              <div class="secondary big">,</div>
              <div class="tertiary">NEXT</div>
            </div>
            <div class="last label">OVER</div>
          </div>

          <div class="key-container">
            <div class="first label">PI</div>
            <div class="key">
              <div class="primary">M</div>
              <div class="secondary big">.</div>
              <div class="tertiary">PAUSE</div>
            </div>
            <div class="last label">INVERSE</div>
          </div>

          <div class="key-container">
            <div class="key double without-label">
              <span class="color-red">SYMBOL</span>
              <span class="color-red">SHIFT</span>
            </div>
          </div>

          <div class="key-container">
            <div class="key double without-label large-xl">
              <span>BREAK</span>
              <span class="big">SPACE</span>
            </div>
          </div>

        </div>
      </div>
    </div>

    <div class="zx-spectrum-border bottom"></div>

  </div>

<div class="created">
  <span>Created by</span>
  <a href="https://manz.dev/"><h2>Manz.dev</h2></a>
  <p>on <a href="https://twitch.tv/ManzDev">Twitch</a> / <a href="https://youtu.be/Qfq-cmqPdz4">Youtube</a></p>
</div>

CSS

              
                @use postcss-nested;

:root {
  --spectrum-width: 760px;
  --spectrum-height: 495px;
  --spectrum-bgcolor: #353539;
}

@font-face {
  font-family: "Sinclair logo";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/sinclair-logo.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/sinclair-logo.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Technoid";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/technoid.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/technoid.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Alte Haas Grotesk";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/alte-haas-grotesk-bold.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/alte-haas-grotesk-bold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "PLZ";
  src:
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/plz.woff2") format("woff2"),
    url("https://manzdev.github.io/twitch-zx-spectrum/fonts/plz.woff") format("woff");
  font-display: swap;
}

body {
  background: #44a;
}

.zx-spectrum {
  width: var(--spectrum-width);
  height: var(--spectrum-height);
  margin: 3em auto;
  background: var(--spectrum-bgcolor);
  border-top: 2px solid #3e3e41;
  border-radius: 25px 25px 5px 5px;
  overflow: hidden;
  position: relative;
  box-shadow: -10px 10px 20px #0008;

  & .zx-spectrum-top {
    height: 170px;
    background: linear-gradient(to right,
        #1F1F21 0,
        #4D4B50 1%,
        #323136 2.5% 97%,
        #4D4B50cc 99%,
        #1F1F21 100%);
    position: relative;

    & .logos {
      padding-left: 30px;
    }

    & .sinclair-logo {
      padding-top: 5px;
      font-family: "Sinclair logo";
      font-size: 90px;
      letter-spacing: 0.5px;
      color: #3B3A3F;
      text-shadow:
        0 -1px 1px #6c6b6d,
        1px 3px 3px #161617;
      line-height: 50%;
    }

    & .model-name {
      font-family: Montserrat, sans-serif;
      font-size: 22px;
      letter-spacing: -1px;
      text-shadow: 1px 2px 0 #111;
      color: #fff;
    }

    &::after {
      content: "";
      display: block;
      background: #272729;
      background: linear-gradient(to right,
          #1F1F21 0,
          #2e2e2f 1%,
          #272729 2.5% 97%,
          #2e2e2f 99%,
          #1F1F21 100%);
      width: 100%;
      height: 40px;
      position: absolute;
      bottom: 0;
      border-radius: 25px 25px 0 0;
    }

  }

  & .zx-spectrum-border {
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, #38373C, #2E2E32, #252427);

    &.top {
      border-radius: 25px 25px 0 0;
      height: 30px;
      background: linear-gradient(to bottom, #38373C 2%, #2E2E32 13%, #252427 25%);
      transform: translateY(-18px);

      &::after,
      &::before {
        content: "";
        display: block;
        width: 20px;
        height: 30px;
        position: absolute;
        right: 0;
        top: 0;
        border-radius: 0 25px 0 0;
        background: radial-gradient(ellipse 70px 50px at -8px 24px, #252427 33%, #2E2E32 40%, #38373C 65%);
      }

      &::before {
        background: radial-gradient(ellipse 50px 50px at 20px 25px, #252427 36%, #2E2E32 40%, #38373C 50%);
        border-radius: 25px 0 0 0;
        right: auto;
        left: 0;
      }
    }

    &.bottom {
      height: 15px;
      transform: scaleY(0.6) translateY(5px);
      border-radius: 1px 1px 3px 3px;
      position: absolute;
      bottom: 0;
      background:
        linear-gradient(to bottom,
          #fff3 1px,
          transparent 4px 12px,
          #0006 12px),
        linear-gradient(to right,
          #4D4B50 0.5%,
          #2c2b2f 1% 99.5%,
          #1F1F21 100%);
      box-shadow: 0 -2px 4px #0006;
    }
  }

  & .zx-spectrum-keyboard {
    height: 330px;
    border-radius: 25px 25px 5px 5px;
    background: #272729;
    background:
      linear-gradient(to right, transparent 96%, #0002 98%, #fff2 99%),
      linear-gradient(113deg,
        transparent 0 715px,
        #EA5A48 716px 727px,
        #E0C92B 728px 738px,
        #66AE43 738px 750px,
        #70B9E6 750px 762px,
        transparent 762px),
      linear-gradient(to right,
        #1F1F21 0,
        #4D4B50 1%,
        #323136 2.5% 97%,
        #4D4B50cc 99%,
        #1F1F21 100%);
    transform: translateY(-40px);
    display: flex;
    justify-content: center;
    align-items: flex-start;

    & .keyboard-container {
      width: 694px;
      height: 290px;
      margin-top: 8px;

      &>.keyboard-row {
        width: 100%;
        display: flex;
        align-items: flex-end;
        gap: 0 18px;
      }

      & .keyboard-row-1 {
        height: 80px;

        & .key {
          display: grid;
          grid-template-areas: "pri sec""pri ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
          }

          & .tertiary {
            grid-area: ter;
          }
        }
      }

      & .keyboard-row-2 {
        height: 70px;
        transform: translateX(30px);

        & .key-container {

          &:is(:nth-child(1), :nth-child(2), :nth-child(3)) .secondary {
            letter-spacing: 2px;
          }

          &:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5)) .secondary {
            font-size: 12px;
          }
        }

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 10px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 14px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }
      }

      & .keyboard-row-3 {
        height: 70px;
        transform: translateX(49px);

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 8px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 12px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }

        & .last.label.big {
          transform: rotate(25deg) translate(20px, 8px) scale(1.8);
        }
      }

      & .keyboard-row-4 {
        height: 70px;

        & .key {
          display: grid;
          grid-template-rows: 22px 10px;
          grid-template-areas: "pri sec""ter ter";

          & .primary {
            grid-area: pri;
          }

          & .secondary {
            grid-area: sec;
            font-family: Montserrat;
            font-size: 8px;
            text-shadow: 0 1px 1px #0008;
            color: #CF574B;

            &.big {
              font-size: 12px;
            }
          }

          & .tertiary {
            grid-area: ter;
            color: #fff;
            justify-content: flex-end;
            margin-right: 5px;
          }
        }
      }

    }

    & .key-container {

      & .label {
        font-family: Montserrat, sans-serif;
        font-size: 9px;

        &.arrow {
          font-size: 16px;
          color: white;
          line-height: 70%;
          transform: translateY(-3px);

          &.arrow-vertical {
            transform: scaleY(0.6) translateY(-4px);
          }
        }
      }

      & .color-red {
        color: #CF574B;
      }

      & .first {
        color: #6D8326;

        &.color-blue {
          color: #607CBF;
        }

        &.color-red {
          color: #CF574B;
        }

        &.color-magenta {
          color: #983D6A;
        }

        &.color-green {
          color: #6D8326;
        }

        &.color-cyan {
          color: #1AA8DE;
        }

        &.color-yellow {
          color: #FFCF4F;
        }

        &.color-white {
          color: #fff;
        }

        &.inverted-color {
          color: #353438;
          background: #fff;
          display: inline-block;
          padding: 0 5px;
          border-radius: 1px;
        }
      }

      & .second {
        color: #fff;
      }

      & .key {
        width: 48px;
        height: 35px;
        margin-top: 3px;
        margin-bottom: 4px;
        background: #535C61;
        border-radius: 5px;
        box-shadow:
          0 1px 0px #7F878D inset,
          0 -1px 2px #202224 inset,
          -2px 0 1px #676D73 inset,
          1px 0 1px #646B71 inset,
          0 0 1px 2px #100F1055,
          0 1px 3px 5px #100F1033,
          0 3px 3px #111;
        user-select: none;

        & .primary {
          font-family: "PLZ", serif;
          font-size: 22px;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          text-shadow: 0 0 4px #0004;
          transform: translateY(3px);
        }

        & .secondary {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        & .tertiary {
          font-family: Montserrat, sans-serif;
          font-size: 9px;
          color: #CF574B;
          text-shadow: 0 1px 2px #0007;
          display: flex;
          justify-content: center;
          align-items: flex-start;
        }

        &.without-label {
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: Montserrat, sans-serif;
          font-size: 10px;
          color: #fff;
        }

        &.double {
          display: flex;
          flex-direction: column;

          & .big {
            font-size: 14px;
          }
        }

        &.large {
          width: 65px;
        }

        &.large-xl {
          width: 80px;
        }
      }

      & .without-label {
        transform: translateY(-11px);
      }

      & .last {
        color: #CF574B;
      }
    }
  }

}

.symbol {
  width: 8px;
  height: 8px;
  border: 1px solid #fff;
  border-radius: 2px;
}

.symbol-1 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%),
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-2 {
  background:
    linear-gradient(to right, transparent 50%, #fff 50%),
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-3 {
  background:
    linear-gradient(to bottom, transparent 50%, #fff 50%);
}

.symbol-4 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%),
    linear-gradient(to bottom, #fff 50%, transparent 50%);
}

.symbol-5 {
  background:
    linear-gradient(to right, #fff 50%, transparent 50%);
}

.symbol-6 {
  position: relative;
}

.symbol-6::before {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  right: 0;
}

.symbol-6::after {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

.symbol-7 {
  position: relative;
}

.symbol-7::after {
  content: "";
  display: block;
  width: 50%;
  height: 50%;
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
}

.symbol-8 {
  background: #fff;
}

.created {
  background: 
    url(https://assets.codepen.io/154065/internal/avatars/users/default.png),
    linear-gradient(to bottom, #884ced, #ec1cce);
  background-size: 75px 75px, cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  width: 250px;
  height: 75px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 2em;
  
  & span,
  & h2,
  & p,
  & a {
    font-family: Montserrat;
    margin: 0;
  }
  
  & a,
  & p,
  & span {
    color: #fff;    
  }
  
  & h2 {
    font-weight: 700;
    transform: translate(0, -4px);    
  }
  
  & a {
    text-decoration-color: rgba(255,255,255,0.4);
  }
  
  & a:hover {
    color: #e6e82a;
  }
}

JS

              
                /* Look mom, without JS */

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions