Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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 align="left">
<div class="flower1">
  <span><span class="mid c1"></span></span>

  <span class="p0"><span class="pet c1"></span></span>
  <span class="p1"><span class="pet c1"></span></span>
  <span class="p2"><span class="pet c1"></span></span>
  <span class="p3"><span class="pet c1"></span></span>
  <span class="p4"><span class="pet c1"></span></span>
  <span class="p5"><span class="pet c1"></span></span>
  <span class="p6"><span class="pet c1"></span></span>
  <span class="p7"><span class="pet c1"></span></span>
  <span class="p8"><span class="pet c1"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower2" >
  <span><span class="mid c2"></span></span>

  <span class="p0"><span class="pet c2"></span></span>
  <span class="p1"><span class="pet c2"></span></span>
  <span class="p8"><span class="pet c2"></span></span>
  <span class="p3"><span class="pet c2"></span></span>
  <span class="p4"><span class="pet c2"></span></span>
  <span class="p5"><span class="pet c2"></span></span>
  <span class="p6"><span class="pet c2"></span></span>
  <span class="p7"><span class="pet c2"></span></span>
  <span class="p2"><span class="pet c2"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower3" >
  <span><span class="mid c3"></span></span>

  <span class="p0"><span class="pet c3"></span></span>
  <span class="p1"><span class="pet c3"></span></span>
  <span class="p2"><span class="pet c3"></span></span>
  <span class="p3"><span class="pet c3"></span></span>
  <span class="p8"><span class="pet c3"></span></span>
  <span class="p5"><span class="pet c3"></span></span>
  <span class="p6"><span class="pet c3"></span></span>
  <span class="p7"><span class="pet c3"></span></span>
  <span class="p4"><span class="pet c3"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower4" >
  <span><span class="mid c4"></span></span>

  <span class="p0"><span class="pet c4"></span></span>
  <span class="p1"><span class="pet c4"></span></span>
  <span class="p2"><span class="pet c4"></span></span>
  <span class="p3"><span class="pet c4"></span></span>
  <span class="p4"><span class="pet c4"></span></span>
  <span class="p5"><span class="pet c4"></span></span>
  <span class="p8"><span class="pet c4"></span></span>
  <span class="p7"><span class="pet c4"></span></span>
  <span class="p6"><span class="pet c4"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower5" >
  <span><span class="mid c5"></span></span>

  <span class="p0"><span class="pet c5"></span></span>
  <span class="p8"><span class="pet c5"></span></span>
  <span class="p2"><span class="pet c5"></span></span>
  <span class="p3"><span class="pet c5"></span></span>
  <span class="p4"><span class="pet c5"></span></span>
  <span class="p5"><span class="pet c5"></span></span>
  <span class="p6"><span class="pet c5"></span></span>
  <span class="p7"><span class="pet c5"></span></span>
  <span class="p1"><span class="pet c5"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower6" >
  <span><span class="mid c6"></span></span>

  <span class="p0"><span class="pet c6"></span></span>
  <span class="p1"><span class="pet c6"></span></span>
  <span class="p2"><span class="pet c6"></span></span>
  <span class="p3"><span class="pet c6"></span></span>
  <span class="p4"><span class="pet c6"></span></span>
  <span class="p8"><span class="pet c6"></span></span>
  <span class="p6"><span class="pet c6"></span></span>
  <span class="p7"><span class="pet c6"></span></span>
  <span class="p5"><span class="pet c6"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

<div class="flower7" >
  <span><span class="mid c7"></span></span>

  <span class="p0"><span class="pet c7"></span></span>
  <span class="p1"><span class="pet c7"></span></span>
  <span class="p2"><span class="pet c7"></span></span>
  <span class="p3"><span class="pet c7"></span></span>
  <span class="p4"><span class="pet c7"></span></span>
  <span class="p5"><span class="pet c7"></span></span>
  <span class="p6"><span class="pet c7"></span></span>
  <span class="p7"><span class="pet c7"></span></span>
  <span class="p8"><span class="pet c7"></span></span>
  
  <span><span class="hea p0"></span></span>
  <span><span class="hea p1"></span></span>
  <span><span class="hea p2"></span></span>
  <span><span class="hea p3"></span></span>
  <span><span class="hea p4"></span></span>
  <span><span class="hea p5"></span></span>
  <span><span class="hea p6"></span></span>
  <span><span class="hea p7"></span></span>
  <span><span class="hea p8"></span></span>
</div>

</div>

</body>

              
            
!

CSS

              
                body {
    width: 900px;
    margin: 50px 100px;
    text-align: center;
    background: rgb(143,200,0);
    background: -moz-linear-gradient(-45deg,  rgba(143,200,0,1) 0%, rgba(143,200,0,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(143,200,0,1)), color-stop(100%,rgba(143,200,0,1)));
    background: -webkit-linear-gradient(-45deg,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%);
    background: -o-linear-gradient(-45deg,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%);
    background: -ms-linear-gradient(-45deg,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%);
    background: linear-gradient(135deg,  rgba(143,200,0,1) 0%,rgba(143,200,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc800', endColorstr='#8fc800',GradientType=1 );


}

.flower1 {
  width: 100px;
  display: block;
  margin-top: 180px;
  margin-left: 111px;
  position: absolute;
 
}
.flower2 {
  width: 100px;
  display: block;
  margin-top: 240px;
  margin-left: 222px;
  position: absolute;
  
}
.flower3 {
  width: 100px;
  display: block;
  margin-top: 300px;
  margin-left: 333px;
  position: absolute;
  
}
.flower4 {
  width: 100px;
  display: block;
  margin-top: 360px;
  margin-left: 444px;
  position: absolute;
  
}
.flower5 {
  width: 100px;
  display: block;
  margin-top: 420px;
  margin-left: 555px;
  position: absolute;
  
}
.flower6 {
  width: 100px;
  display: block;
  margin-top: 480px;
  margin-left: 666px;
  position: absolute;
 
}
.flower7 {
  width: 100px;
  display: block;
  margin-top: 540px;
  margin-left: 777px;
  position: absolute;
  
}

div[class*="flower"] > span[class]
{
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 90px;
  height: 90px;
  cursor: pointer;


  border-radius: 10px 500px;
  
  -webkit-transform-origin: 0% 0%;
  -moz-transform-origin: 0% 0%;
  -o-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
   
  
   -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  -ms-transition: all 1.25s ease;
  transition: all 1.25s ease;
}

.pet {
  display: block;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 90px;
  height: 90px;
  /*cursor: pointer;*/
  border-radius: 10px 500px;
  box-shadow: 2px 2px 8px rgba(50, 50, 50, 0.3);
  box-shadow: inset 10px 20px 10px rgba(50, 50, 50, 0.12);

   -webkit-transition: all 1.25s ease;
  -moz-transition: all 1.25s ease;
  -o-transition: all 1.25s ease;
  -ms-transition: all 1.25s ease;
  transition: all 1.25s ease;
}

.pet:hover {
  transform: translate(10px, 10px);
}

.hea {
  display: block;
  position: absolute;
  opacity: 0.75;
  bottom: 98px;
  left: -3px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  border-radius: 50px 5px;

  box-shadow: 2px 2px 8px rgba(50, 50, 50, 0.3);
  background: #fefcea;
  background: -webkit-linear-gradient(top, #fefcea 0%, #f1da36 100%);
  background: -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%);
  background: -o-linear-gradient(top, #fefcea 0%, #f1da36 100%);
  background: -ms-linear-gradient(top, #fefcea 0%, #f1da36 100%);
  background: linear-gradient(top, #fefcea 0%, #f1da36 100%);

  -webkit-transform-origin: 30% 190%;
  -moz-transform-origin: 30% 190%;
  -o-transform-origin: 30% 190%;
  -ms-transform-origin: 30% 190%;
  transform-origin: 30% 190%;
}


.p0 {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}

.p1 {
  -webkit-transform: rotate(-0deg);
  -moz-transform: rotate(-0deg);
  -o-transform: rotate(-0deg);
  -ms-transform: rotate(-0deg);
  transform: rotate(-0deg);
}

.p2 {
  -webkit-transform: rotate(-40deg);
  -moz-transform: rotate(-40deg);
  -o-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
}

.p3 {
  -webkit-transform: rotate(-80deg);
  -moz-transform: rotate(-80deg);
  -o-transform: rotate(-80deg);
  -ms-transform: rotate(-80deg);
  transform: rotate(-80deg);
}

.p4 {
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
  -o-transform: rotate(-120deg);
  -ms-transform: rotate(-120deg);
  transform: rotate(-120deg);
}

.p5 {
  -webkit-transform: rotate(-160deg);
  -moz-transform: rotate(-160deg);
  -o-transform: rotate(-160deg);
  -ms-transform: rotate(-160deg);
  transform: rotate(-160deg);
}

.p6 {
  -webkit-transform: rotate(-200deg);
  -moz-transform: rotate(-200deg);
  -o-transform: rotate(-200deg);
  -ms-transform: rotate(-200deg);
  transform: rotate(-200deg);
}

.p7 {
  -webkit-transform: rotate(-240deg);
  -moz-transform: rotate(-240deg);
  -o-transform: rotate(-240deg);
  -ms-transform: rotate(-240deg);
  transform: rotate(-240deg);
}

.p8 {
  -webkit-transform: rotate(-280deg);
  -moz-transform: rotate(-280deg);
  -o-transform: rotate(-280deg);
  -ms-transform: rotate(-280deg);
  transform: rotate(-280deg);
}

.p9 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.p10 {
  -webkit-transform: rotate(100deg);
  -moz-transform: rotate(100deg);
  -o-transform: rotate(100deg);
  -ms-transform: rotate(100deg);
  transform: rotate(100deg);
}

.mid {
  display: block;
  position: absolute;
  opacity: 0.75;
  bottom: 69px;
  left: -20px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50px 50px;

  box-shadow: 2px 2px 8px rgba(50, 50, 50, 0.3);
  
  -webkit-transform-origin: 30% 190%;
  -moz-transform-origin: 30% 190%;
  -o-transform-origin: 30% 190%;
  -ms-transform-origin: 30% 190%;
  transform-origin: 30% 190%;

}
/************Colors*********/

/*#ff0000 #ff6666 #ffe5e5*/
.c1{
  background: #ff0000;
  background: -moz-linear-gradient(-45deg,  #ff0000 0%, #ff6666 72%, #ffe5e5 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ff0000), color-stop(72%,#ff6666), color-stop(100%,#ffe5e5));
  background: -webkit-linear-gradient(-45deg,  #ff0000 0%,#ff6666 72%,#ffe5e5 100%);
  background: -o-linear-gradient(-45deg,  #ff0000 0%,#ff6666 72%,#ffe5e5 100%);
  background: -ms-linear-gradient(-45deg,  #ff0000 0%,#ff6666 72%,#ffe5e5 100%);
  background: linear-gradient(135deg,  #ff0000 0%,#ff6666 72%,#ffe5e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffe5e5',GradientType=1 );
}

/*#ffa900 #ffd47f #fff6e5*/
.c2{
  background: #ffa900;
  background: -moz-linear-gradient(-45deg,  #ffa900 0%, #ffd47f 72%, #fff6e5 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffa900), color-stop(72%,#ffd47f), color-stop(100%,#fff6e5));
  background: -webkit-linear-gradient(-45deg,  #ffa900 0%,#ffd47f 72%,#fff6e5 100%);
  background: -o-linear-gradient(-45deg,  #ffa900 0%,#ffd47f 72%,#fff6e5 100%);
  background: -ms-linear-gradient(-45deg,  #ffa900 0%,#ffd47f 72%,#fff6e5 100%);
  background: linear-gradient(135deg,  #ffa900 0%,#ffd47f 72%,#fff6e5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa900', endColorstr='#fff6e5',GradientType=1 );
}

/*#fbff00 #fdff7f #feffe5*/
.c3{
  background: #fbff00;
  background: -moz-linear-gradient(-45deg,  #fbff00 0%, #fdff7f 72%, #feffe5 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#fbff00), color-stop(72%,#fdff7f), color-stop(100%,#feffe5));
  background: -webkit-linear-gradient(-45deg,  #fbff00 0%,#fdff7f 72%,#feffe5 100%);
  background: -o-linear-gradient(-45deg,  #fbff00 0%,#fdff7f 72%,#feffe5 100%);
  background: -ms-linear-gradient(-45deg,  #fbff00 0%,#fdff7f 72%,#feffe5 100%);
  background: linear-gradient(135deg,  #fbff00 0%,#fdff7f 72%,#feffe5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbff00', endColorstr='#feffe5',GradientType=1 );
}

/*#00ff00 #7fff7f #e5ffe5*/
.c4{
  background: #00ff00;
  background: -moz-linear-gradient(-45deg,  #00ff00 0%, #7fff7f 72%, #e5ffe5 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ff00), color-stop(72%,#7fff7f), color-stop(100%,#e5ffe5));
  background: -webkit-linear-gradient(-45deg,  #00ff00 0%,#7fff7f 72%,#e5ffe5 100%);
  background: -o-linear-gradient(-45deg,  #00ff00 0%,#7fff7f 72%,#e5ffe5 100%);
  background: -ms-linear-gradient(-45deg,  #00ff00 0%,#7fff7f 72%,#e5ffe5 100%);
  background: linear-gradient(135deg,  #00ff00 0%,#7fff7f 72%,#e5ffe5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#e5ffe5',GradientType=1 );
}

/*#00ffff #7fffff #e5ffff*/
.c5{
  background: #00ffff;
  background: -moz-linear-gradient(-45deg,  #00ffff 0%, #7fffff 72%, #e5ffff 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ffff), color-stop(72%,#7fffff), color-stop(100%,#e5ffff));
  background: -webkit-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: -o-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: -ms-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: linear-gradient(135deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#e5ffff',GradientType=1 );
}

/*#0000ff #7f7fff  #e5e5ff*/
.c6{
  background: #0000ff;
  background: -moz-linear-gradient(-45deg,  #0000ff 0%, #7f7fff 72%, #e5e5ff 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#0000ff), color-stop(72%,#7f7fff), color-stop(100%,#e5e5ff));
  background: -webkit-linear-gradient(-45deg,  #0000ff 0%,#7f7fff 72%,#e5e5ff 100%);
  background: -o-linear-gradient(-45deg,  #0000ff 0%,#7f7fff 72%,#e5e5ff 100%);
  background: -ms-linear-gradient(-45deg,  #0000ff 0%,#7f7fff 72%,#e5e5ff 100%);
  background: linear-gradient(135deg,  #0000ff 0%,#7f7fff 72%,#e5e5ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#e5e5ff',GradientType=1 );
}

/*#b800ff #db7fff  #f7e5ff*/
.c7{
  background: #b800ff;
  background: -moz-linear-gradient(-45deg,  #b800ff 0%, #db7fff 72%, #f7e5ff 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#b800ff), color-stop(72%,#db7fff), color-stop(100%,#f7e5ff));
  background: -webkit-linear-gradient(-45deg,  #b800ff 0%,#db7fff 72%,#f7e5ff 100%);
  background: -o-linear-gradient(-45deg,  #b800ff 0%,#db7fff 72%,#f7e5ff 100%);
  background: -ms-linear-gradient(-45deg,  #b800ff 0%,#db7fff 72%,#f7e5ff 100%);
  background: linear-gradient(135deg,  #b800ff 0%,#db7fff 72%,#f7e5ff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b800ff', endColorstr='#f7e5ff',GradientType=1 );
}

.c{
  background: #00ffff;
  background: -moz-linear-gradient(-45deg,  #00ffff 0%, #7fffff 72%, #e5ffff 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#00ffff), color-stop(72%,#7fffff), color-stop(100%,#e5ffff));
  background: -webkit-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: -o-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: -ms-linear-gradient(-45deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  background: linear-gradient(135deg,  #00ffff 0%,#7fffff 72%,#e5ffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#e5ffff',GradientType=1 );
}

              
            
!

JS

              
                
              
            
!
999px

Console