Sorvetinho

index.html

<div class="canva">
<div><br> <br> <p>Feliz Dia das Crianças Marlene</p>  
  </div>
  <div class="stick"></div>
  <div class="body">
    <div class="topping"></div>
    <div class="drip"></div>
    <div class="sprinkles"></div>
  </div>
</div>
by@yosraemad

sorvetinho.markdown

Sorvetinho

A Pen by callseven on CodePen.

License.

style.css

*{
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial;
  color: pink;
}

.canva {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #c7eeed;
}
.stick {
  position: absolute;
  width: 5vmin;
  height: 20vmin;
  background: #ebe5d5;
  border: 1px solid #ebe5d5;
  border-radius: 20px;
  bottom: 17vmin;
}

.body {
  position: absolute;
  width: 20vmin;
  height: 30vmin;
  background: pink;
  border-radius: 50px;
  border: .5px solid black;
}

.topping {
  position: absolute;
  width: 22vmin;
  height: 15vmin;
  background: #fad350;
  border-radius: 50px;
  left: -1vmin;
  top: -1vmin;
}


.drip {
  position: absolute;
  width: 4vmin;
  height: 15vmin;
  background: #fad250;
  border-radius: 50%;
  top: 5vmin;
  left: 3vmin;

  box-shadow: 11vmin -2vmin #fad250;
}

.sprinkles {
  position: absolute;
  width: 1vmin;
  height: 3vmin;
  background: red;
  border-radius: 50%;
  left: 4vmin;
  top: 2vmin;
  transform: rotate(20deg);

  box-shadow: 4vmin 4vmin #45d1ed;
}

.sprinkles::after {
  content: "";
  position: absolute;

  width: 1vmin;
  height: 3vmin;
  background: #ed45cb;
  border-radius: 50%;
  left: 7vmin;
  top: -1vmin;
  transform: rotate(-39deg);

  box-shadow: 4vmin 4vmin #ed456f;
}

.sprinkles::before {
  content: "";
  position: absolute;

  width: 1vmin;
  height: 3vmin;
  background: #ffaf6e;
  border-radius: 50%;
  left: 4vmin;
  top: -1vmin;
  transform: rotate(-80deg);

  box-shadow: 4vmin 4vmin #06d455;
}