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

              
                .box
  .plate-1
    .plate-top
      .cake-base
        .cake-topping
      .cream
        .cherry
        .stem
      .crust-1
      .crust-2 
      .crust-3 
      .crust-4 
      .crust-5 
      .crust-6
      .sauce-1
      .sauce-2
      .sauce-3
      .sauce-4
      .sauce-5
      .sauce-6
      .sauce-7
      .sauce-8
      .top-sauce-1
      .top-sauce-2
      .top-sauce-3
  .plate-2
    .plate-top
    .crep
      .white-cream
        .chocholate-cube-1
        .chocholate-cube-2
        .chocholate-cube-3
        .chocholate-cube-4
        .chocholate-cube-5
        .chocholate-cube-6
        .chocholate-cube-7
        .chocholate-cube-8
        .chocholate-cube-9
        .chocholate-cube-10
      .bottom-fold
      .top-fold
    .chocolate-sauce-1
    .chocolate-sauce-2
    .chocolate-sauce-3
    .chocolate-sauce-4
    .chocolate-sauce-5
    .chocolate-sauce-6
    .chocolate-sauce-7
    .chocolate-sauce-8
    .leaf-1
      .right-leaf
      .left-leaf
    .leaf-2
      .right-leaf
      .left-leaf
    .top-cocolate-sauce-1
    .top-cocolate-sauce-2
    .top-cocolate-sauce-3
    .top-cocolate-sauce-4
              
            
!

CSS

              
                // colors
$light-blue: #D2E3F1;
$dark-brown: #684C27;
$light-brown: #B48E5F;
$bage: #E7C29E;
$white: #FFFFFF;
$red: #B30F31;
$black: #3A2315;
$orange: #F17054;
$green: #3EB14F;
$light-green: #8CC349;
$dark-chocolate-brown: #2F2117;
$chocolate-brown: #53392A;
$crep-bage: #E7AB6A;
$crep-dark-bage: #98673E;
$crep-light-bage: #F1CEA9;
$gray: #D0D2D3;
$shadow: #A3B0CD;

// shapes
$circle: 50%;
$triangle: polygon(50% 0%, 0% 100%, 100% 100%);

* {
  box-sizing: border-box;
}

body {
  background: $light-blue;
}

.box {
  position: relative;
  width: 700px;
  height: 500px;
  display: block;
  background: none;
  margin: auto;
  margin-top: 12%;
}

.plate-1 {
  position: absolute;
  top: 20%;
  width: 45%;
  height: 60%;
  background: $gray;
  border: 20px solid $white;
  border-radius: $circle;
  box-shadow: -8px 8px $shadow;
}

.plate-2 {
  position: absolute;
  top: 20%;
  right: 0;
  width: 45%;
  height: 60%;
  background: $gray;
  border: 20px solid $white;
  border-radius: $circle;
  box-shadow: -8px 8px $shadow;
}

.plate-top {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  background: $white;
  border-radius: $circle;
}

.cake-base {
  position: absolute;
  top: 15%;
  left: 25%;
  width: 60%;
  height: 80%;
  background: $dark-brown;
  transform: rotate(130deg) scale(0.9);
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
  z-index: 3;
}

.cake-topping {
  position: absolute;
  // top: 15%;
  left: 5%;
  width: 90%;
  height: 100%;
  background: $bage;
  transform: scale(0.85);
  -webkit-clip-path: $triangle;
  clip-path: $triangle;
}

.crust-1 {
  position: absolute;
  top: 44%;
  left: 11%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-2 {
  position: absolute;
  top: 35%;
  left: 13%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-3 {
  position: absolute;
  top: 27%;
  left: 18%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-4 {
  position: absolute;
  top: 20%;
  left: 25%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-5 {
  position: absolute;
  top: 15%;
  left: 30%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-5 {
  position: absolute;
  top: 13%;
  left: 33%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.crust-6 {
  position: absolute;
  top: 10%;
  left: 40%;
  width: 15%;
  height: 15%;
  background: $light-brown;
  border-radius: $circle;
  z-index: 3;
}

.cream {
  position: absolute;
  top: 36%;
  left: 35%;
  width: 17%;
  height: 17%;
  background: $white;
  border-radius: $circle;
  z-index: 4;
}

.cherry {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 60%;
  height: 60%;
  background: $red;
  border-radius: $circle;
}

.stem {
  position: absolute;
  top: 60%;
  left: 20%;
  width: 60%;
  height: 60%;
  border-left: 6px solid $black;
  border-radius: $circle;
  transform: rotate(20deg);
}

.sauce-1 {
  position: absolute;
  bottom: 20%;
  left: 30%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.8);
}

.sauce-2 {
  position: absolute;
  bottom: 11%;
  right: 25%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.4);
}

.sauce-3 {
  position: absolute;
  bottom: 9%;
  right: 13%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.3);
}

.sauce-3 {
  position: absolute;
  bottom: 9%;
  right: 13%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.3);
}

.sauce-4 {
  position: absolute;
  bottom: 0%;
  left: 33%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.35);
}

.sauce-5 {
  position: absolute;
  top: 30%;
  right: 20%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.8);
}

.sauce-6 {
  position: absolute;
  top: 45%;
  right: 10%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.6);
}

.sauce-7 {
  position: absolute;
  top: 30%;
  right: 7%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.3);
}

.sauce-8 {
  position: absolute;
  top: 10%;
  right: 15%;
  width: 30%;
  height: 30%;
  background: $orange;
  border-radius: $circle;
  transform: scale(.25);
}

.top-sauce-1 {
  position : absolute;
  top: 48%;
  left: 28%;
  width: 45%;
  height: 7%;
  background: $orange;
  opacity: 0.7;
  border-radius: 10px;
  transform: rotate(-45deg);
  z-index: 3;
}

.top-sauce-2 {
  position : absolute;
  bottom: 35%;
  left: 37%;
  width: 25%;
  height: 4%;
  background: $orange;
  opacity: 0.7;
  border-radius: 10px;
  transform: rotate(-45deg);
  z-index: 3;
}

.top-sauce-3 {
  position : absolute;
  bottom: 28%;
  left: 52%;
  width: 25%;
  height: 10%;
  background: $orange;
  opacity: 0.7;
  border-radius: 10px;
  transform: rotate(-45deg);
  z-index: 3;
}

.crep {
  position: absolute;
  top: 35%;
  left: 8%;
  width: 85%;
  height: 30%;
  background: $crep-dark-bage;
  border-radius: 50px;
  z-index: 3;
  transform: rotate(-25deg) scale(0.95);
  overflow: hidden;
}

.white-cream {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 90%;
  height: 80%;
  background: $white;
  border-radius: 50px;
}

.bottom-fold {
  position: absolute;
  top: -28%;
  left: 1%;
  width: 100%;
  height: 80%;
  background: $crep-bage;
  border-radius: $circle;
  transform: scale(0.95);
}

.top-fold {
  position: absolute;
  bottom: -25%;
  left: 1.5%;
  width: 100%;
  height: 80%;
  background: $crep-light-bage;
  border-radius: $circle;
  transform: scale(0.95);
}

.chocholate-cube-1 {
  position: absolute;
  top: 25%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-2 {
  position: absolute;
  top: 25%;
  left: 10%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-3 {
  position: absolute;
  top: 45%;
  left: 0%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-4 {
  position: absolute;
  top: 45%;
  left: 6%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-5 {
  position: absolute;
  top: 40%;
  left: 16%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-6 {
  position: absolute;
  top: 40%;
  right: 16%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-7 {
  position: absolute;
  top: 45%;
  right: 6%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-8 {
  position: absolute;
  top: 45%;
  right: 0%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-9 {
  position: absolute;
  top: 25%;
  right: 10%;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocholate-cube-10 {
  position: absolute;
  top: 25%;
  right: 0;
  width: 9%;
  height: 30%;
  background: $chocolate-brown;
  border-radius: $circle;
  transform: scale(0.4);
}

.chocolate-sauce-1 {
  position: absolute;
  bottom: 20%;
  left: 40%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.8);
}

.chocolate-sauce-2 {
  position: absolute;
  bottom: 13%;
  left: 25%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.4);
}

.chocolate-sauce-3 {
  position: absolute;
  bottom: 0;
  left: 35%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.25);
}

.chocolate-sauce-4 {
  position: absolute;
  bottom: 25%;
  right: 13%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.23);
}

.chocolate-sauce-5 {
  position: absolute;
  bottom: 32%;
  right: 7%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.4);
}

.chocolate-sauce-5 {
  position: absolute;
  top: 25%;
  left: 20%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.8);
}

.chocolate-sauce-6 {
  position: absolute;
  top: 23%;
  left: 35%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.8);
}

.chocolate-sauce-7 {
  position: absolute;
  top: 13%;
  right: 20%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.4);
}

.chocolate-sauce-8 {
  position: absolute;
  top: 9%;
  left: 35%;
  width: 30%;
  height: 30%;
  background: $dark-chocolate-brown;
  border-radius: $circle;
  transform: scale(.25);
}

.leaf-1 {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 25%;
  height: 40%;
  transform: scale(.65) rotate(-40deg);
  z-index: 2;
}

.leaf-2 {
  position: absolute;
  top: 10%;
  left: 30%;
  width: 25%;
  height: 40%;
  transform: scale(.5) rotate(-10deg);
  z-index: 2;
}

.left-leaf {
  position: absolute;
  left: 0;
  width: 50%;
  height: 100%;
  background: $green;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
}

.right-leaf {
  position: absolute;
  right: 0;
  width: 50%;
  height: 100%;
  background: $light-green;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
}

.top-cocolate-sauce-1 {
  position : absolute;
  top: 38%;
  right: 18%;
  width: 30%;
  height: 7%;
  background: $dark-chocolate-brown;
  border-radius: 10px;
  transform: rotate(-115deg);
  z-index: 3;
}

.top-cocolate-sauce-2 {
  position : absolute;
  top: 42%;
  right: 28%;
  width: 32%;
  height: 9%;
  background: $dark-chocolate-brown;
  border-radius: 10px;
  transform: rotate(-115deg);
  z-index: 3;
}

.top-cocolate-sauce-3 {
  position : absolute;
  top: 52%;
  left: 28%;
  width: 32%;
  height: 4%;
  background: $dark-chocolate-brown;
  border-radius: 10px;
  transform: rotate(-115deg);
  z-index: 3;
}

.top-cocolate-sauce-4 {
  position : absolute;
  top: 53%;
  left: 21%;
  width: 32%;
  height: 6%;
  background: $dark-chocolate-brown;
  border-radius: 10px;
  transform: rotate(-115deg);
  z-index: 3;
}
              
            
!

JS

              
                
              
            
!
999px

Console