Untitled

dabblet.css

body {
  background-color: hotpink;
  padding: 100px;
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Arial;
}
h1 {
  margin-bottom: 200px;
}
.coffee {
  display: inline-block;
  background-color: #FFFFFF;
  width: 200px;
  height: 120px;
  border-radius: 0 0 100px 100px;
  position: relative;
  box-shadow: inset 15px 0 0 0px rgba(0, 0, 0, 0.1), 0 0 5px -2px black;
  
  &:after {
    content: "";
    display: block;
    width: 50px;
    height: 40px;
    border-radius: 100%;
    border: 12px solid #FFFFFF;
    position: absolute;
    right: -40px;
    top: 10px;
    transform: rotate(-20deg);
  }
  &:before {
    content: "";
    display: block;
    position: absolute;
    width: 5px;
    height: 60px;
    background-color: black;
    top: -80px;
    left: 70px;
    box-shadow: 20px 0 0 0 black,
      40px 0 0 0 black;
  }
}



















l

dabblet.html

<div class="coffee">
	
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"1","prefixfree":"1","page":"css"}