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
  .back-taco-shell
  .rim
  .box-cover
  .lettuce-back
    .leaves-back-1
    .leaves-back-2
    .leaves-back-3
    .leaves-back-4
    .leaves-back-5
    .cheese-string-1
  .meat-container
    .meat-1
    .meat-2
    .meat-3
    .meat-4
    .meat-5
    .meat-dot-1
    .meat-dot-2
    .meat-dot-3
    .meat-dot-4
    .meat-dot-5
    .meat-dot-6
    .meat-dot-7
    .meat-dot-8
    .meat-dot-9
    .meat-dot-10
    .meat-dot-11
    .meat-dot-12
    .meat-dot-13
    .meat-dot-14
    .meat-dot-15
    .cheese-string-2
    .cheese-string-3
    .cheese-string-4
  .tomato-1
  .tomato-2
  .lettuce-front
    .leaves-front-1
    .leaves-front-2
    .leaves-front-3
    .leaves-front-4
    .leaves-front-5
  .front-taco-shell
    .hide
    .hide-1
    .dot-1
    .dot-2
    .dot-3
    .dot-4
    .dot-5
    .dot-6
    .dot-7
    .dot-8
    .dot-9
    .dot-10
    .dot-11
    .dot-12
    .dot-13
    .dot-14
  .bottom
  
              
            
!

CSS

              
                // colors
$orange: #FBAE4C;
$dark-orange: #F89844;
$light-orange: #FECB8F;
$offwhite-orange: #F8A654;
$dark-green: #41B250;
$light-green: #8FC44B;
$red: #BE2233;
$light-red: #EF5A34;
$brown: #621519;
$dark-brown: #471515;
$yellow: #FEDC37;
$purple: #303292;
$white: #ffffff;

// shapes
$circle: 50%;

* {
  box-sizing: border-box;
}

body {
  background: $purple;
  font-family: 'Pacifico', cursive;
  color: $white;
}

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

.box:after {
  position: absolute;
  margin: auto;
  left: 0%;
  right: 0%;
  bottom: -30%;
  content: "Bravo here's a Taco";
  font-size: 2.5em;
  text-align: center;
}

.back-taco-shell {
  position: absolute;
  bottom: 11%;
  width: 80%;
  height: 80%;
  background: $offwhite-orange;
  border: 15px solid $light-orange;
  border-top-left-radius: $circle;
  border-bottom-left-radius: 50px;
  border-top-right-radius: $circle;
  z-index: 1;
}

.rim {
  position: absolute;
  left: -0.15%;
  bottom: 0;
  width: 30%;
  height: 40%;
  background: $offwhite-orange;
  border: 15px solid $light-orange;
  border-top: none;
  border-radius: $circle;
  z-index: 2;
}

.box-cover {
  position: absolute;
  left: 2.5%;
  bottom: 14.5%;
  width: 40%;
  height: 30%;
  background: $offwhite-orange;
  border-top: none;
  border-bottom-left-radius: 40px;
  z-index: 3;
}

.front-taco-shell {
  position: absolute;
  bottom: 0%;
  left: 25%;
  width: 80%;
  height: 90%;
  background: $orange;
  border: 15px solid $light-orange;
  border-bottom: none;
  border-right: none;
  border-top-left-radius: $circle;
  border-bottom-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-top-right-radius: $circle;
  z-index: 4;
  overflow: hidden-y;
}

.bottom {
  position: absolute;
  left: 10.5%;
  bottom: 0;
  width: 40%;
  height: 30%;
  background: $orange;
  border-bottom-left-radius: 40px;
  z-index: 1;
}

.hide {
  position: absolute;
  left: -4%;
  bottom: 0%;
  width: 40%;
  height: 11%;
  background: $orange;
  border-top-left-radius: 40px;
}

.hide-1 {
  position: absolute;
  left: 0%;
  bottom: 8%;
  width: 10%;
  height: 11%;
  background: $orange;
  border-bottom-left-radius: 10px;
}

.dot-1 {
  position: absolute;
  top: 20%;
  left: 40%;
  width: 5%;
  height: 6%;
  transform: scale(1.5);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-2 {
  position: absolute;
  top: 15%;
  right: 30%;
  width: 5%;
  height: 6%;
  transform: scale(1.2);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-3 {
  position: absolute;
  top: 35%;
  right: 10%;
  width: 5%;
  height: 6%;
  transform: scale(.9);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-4 {
  position: absolute;
  top: 40%;
  right: 30%;
  width: 5%;
  height: 6%;
  transform: scale(1.25);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-5 {
  position: absolute;
  top: 45%;
  left: 45%;
  width: 5%;
  height: 6%;
  transform: scale(1.5);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-6 {
  position: absolute;
  top: 40%;
  left: 20%;
  width: 5%;
  height: 6%;
  transform: scale(1.15);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-7 {
  position: absolute;
  bottom: 30%;
  left: 10%;
  width: 5%;
  height: 6%;
  transform: scale(1.25);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-8 {
  position: absolute;
  bottom: 28%;
  left: 30%;
  width: 5%;
  height: 6%;
  transform: scale(.9);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-9 {
  position: absolute;
  bottom: 25%;
  right: 45%;
  width: 5%;
  height: 6%;
  transform: scale(1.15);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-10 {
  position: absolute;
  bottom: 28%;
  right: 25%;
  width: 5%;
  height: 6%;
  transform: scale(.9);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-11 {
  position: absolute;
  bottom: 20%;
  right: 10%;
  width: 5%;
  height: 6%;
  transform: scale(1.6);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-12 {
  position: absolute;
  bottom: 10%;
  right: 30%;
  width: 5%;
  height: 6%;
  transform: scale(2);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-13 {
  position: absolute;
  bottom: 8%;
  left: 37%;
  width: 5%;
  height: 6%;
  transform: scale(2);
  background: $dark-orange;
  border-radius: $circle;
}

.dot-14 {
  position: absolute;
  bottom: 8%;
  left: 17%;
  width: 5%;
  height: 6%;
  transform: scale(1);
  background: $dark-orange;
  border-radius: $circle;
}

.lettuce-back {
  position: absolute;
  width: 60%;
  height: 85%;
  z-index: 4;
}

.leaves-back-1 {
  position: absolute;
  right: 0%;
  width: 40%;
  height: 55%;
  background: $dark-green;
  border-radius: 50%;
}

.leaves-back-2 {
  position: absolute;
  top: 5%;
  right: 20%;
  width: 40%;
  height: 55%;
  background: $dark-green;
  border-radius: 50%;
}

.leaves-back-3 {
  position: absolute;
  top: 15%;
  right: 40%;
  width: 50%;
  height: 55%;
  background: $dark-green;
  border-radius: 50%;
}

.leaves-back-4 {
  position: absolute;
  top: 45%;
  left: 0%;
  width: 50%;
  height: 35%;
  background: $dark-green;
  border-radius: 50%;
}

.leaves-back-5 {
  position: absolute;
  bottom: -5%;
  left: -5%;
  width: 50%;
  height: 45%;
  background: $dark-green;
  border-radius: 50%;
}

.meat-container {
  position: absolute;
  left: 10%;
  width: 50%;
  height: 95%;
  z-index: 4;
  // border: 1px solid;
}

.meat-1 {
  position: absolute;
  top: 5%;
  right: -10%;
  width: 50%;
  height: 55%;
  background: $brown;
  border-radius: 50%;
}

.meat-2 {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 50%;
  height: 55%;
  background: $brown;
  border-radius: 50%;
}

.meat-3 {
  position: absolute;
  top: 15%;
  right: 25%;
  width: 56%;
  height: 55%;
  background: $brown;
  border-radius: 50%;
}

.meat-4 {
  position: absolute;
  top: 25%;
  right: 45%;
  width: 56%;
  height: 55%;
  background: $brown;
  border-radius: 50%;
}

.meat-5 {
  position: absolute;
  bottom: 0%;
  left: -15%;
  width: 56%;
  height: 55%;
  background: $brown;
  border-radius: 50%;
}

.meat-dot-1 {
  position: absolute;
  bottom: 8%;
  left: 8%;
  width: 8%;
  height: 6%;
  transform: scale(1.25);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-2 {
  position: absolute;
  bottom: 18%;
  left: 17%;
  width: 8%;
  height: 6%;
  transform: scale(.9);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-3 {
  position: absolute;
  bottom: 18%;
  left: 5%;
  width: 8%;
  height: 6%;
  transform: scale(.6);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-4 {
  position: absolute;
  bottom: 28%;
  left: -5%;
  width: 8%;
  height: 6%;
  transform: scale(.8);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-5 {
  position: absolute;
  bottom: 32%;
  left: 6%;
  width: 8%;
  height: 6%;
  transform: scale(.5);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-6 {
  position: absolute;
  bottom: 42%;
  left: 10%;
  width: 8%;
  height: 6%;
  transform: scale(.9);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-7 {
  position: absolute;
  top: 42%;
  left: 10%;
  width: 8%;
  height: 6%;
  transform: scale(.7);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-8 {
  position: absolute;
  top: 42%;
  left: 20%;
  width: 8%;
  height: 6%;
  transform: scale(.6);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-9 {
  position: absolute;
  top: 32%;
  left: 20%;
  width: 8%;
  height: 6%;
  transform: scale(.7);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-10 {
  position: absolute;
  top: 32%;
  left: 30%;
  width: 8%;
  height: 6%;
  transform: scale(.5);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-11 {
  position: absolute;
  top: 22%;
  left: 30%;
  width: 8%;
  height: 6%;
  transform: scale(.7);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-12 {
  position: absolute;
  top: 22%;
  left: 39%;
  width: 8%;
  height: 6%;
  transform: scale(.5);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-13 {
  position: absolute;
  top: 12%;
  right: 39%;
  width: 8%;
  height: 6%;
  transform: scale(.5);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-14 {
  position: absolute;
  top: 10%;
  right: 29%;
  width: 8%;
  height: 6%;
  transform: scale(.6);
  background: $dark-brown;
  border-radius: $circle;
}

.meat-dot-15 {
  position: absolute;
  top: 8%;
  right: 19%;
  width: 8%;
  height: 6%;
  transform: scale(.4);
  background: $dark-brown;
  border-radius: $circle;
}

.tomato-1 {
  position: absolute;
  top: -6%;
  right: 20%;
  width: 50%;
  height: 60%;
  background: $light-red;
  border-radius: $circle;
  border: 25px solid $red;
  transform: scale(0.7);
  z-index: 4;
}

.tomato-2 {
  position: absolute;
  top: 25%;
  left: 10%;
  width: 50%;
  height: 60%;
  background: $light-red;
  border-radius: $circle;
  border: 25px solid $red;
  transform: scale(.9);
  z-index: 4;
}

.lettuce-front {
  position: absolute;
  top: 3%;
  left: 20%;
  width: 70%;
  height: 85%;
  z-index: 4;
}

.leaves-front-1 {
  position: absolute;
  right: 0%;
  width: 40%;
  height: 55%;
  background: $light-green;
  border-radius: 50%;
}

.leaves-front-2 {
  position: absolute;
  top: 5%;
  right: 20%;
  width: 40%;
  height: 55%;
  background: $light-green;
  border-radius: 50%;
}

.leaves-front-3 {
  position: absolute;
  top: 15%;
  right: 40%;
  width: 50%;
  height: 55%;
  background: $light-green;
  border-radius: 50%;
}

.leaves-front-4 {
  position: absolute;
  top: 45%;
  left: 0%;
  width: 50%;
  height: 35%;
  background: $light-green;
  border-radius: 50%;
}

.leaves-front-5 {
  position: absolute;
  bottom: -5%;
  left: -5%;
  width: 50%;
  height: 45%;
  background: $light-green;
  border-radius: 50%;
}

.cheese-string-1 {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 40%;
  height: 10%;
  background: $yellow;
  transform: scale(0.8) rotate(10deg);
  border-radius: 50px;
  z-index: 3;
}

.cheese-string-2 {
  position: absolute;
  top: 10%;
  left: 35%;
  width: 40%;
  height: 10%;
  background: $yellow;
  transform: scale(0.8) rotate(20deg);
  border-radius: 50px;
  z-index: 3;
}

.cheese-string-3 {
  position: absolute;
  bottom: 3%;
  left: -5%;
  width: 40%;
  height: 10%;
  background: $yellow;
  transform: scale(0.5) rotate(-20deg);
  border-radius: 50px;
  z-index: 3;
}

.cheese-string-4 {
  position: absolute;
  bottom: 33%;
  left: -15%;
  width: 40%;
  height: 10%;
  background: $yellow;
  transform: scale(0.8) rotate(20deg);
  border-radius: 50px;
  z-index: 3;
}
              
            
!

JS

              
                
              
            
!
999px

Console