.wrapper
  .graph
    .fire
    .candle
    .cake.top
    .cake.bot
    .message
      %p Happy Birthday
View Compiled
@import url('https://fonts.googleapis.com/css?family=Great+Vibes');

* {
  margin: auto;
  padding: 0;
}
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #E1F5FE;
}
.cake {
  background: linear-gradient(180deg, #FFEDD9 20%, #E6C197);
  border: 4px solid #542F04;
  border-radius: 8px 8px 0 0;
}
.cake::before {
  content: '';
  position: absolute;
  width: inherit;
  height: 30px;
  background-size: 40px 30px;
  background-image: radial-gradient(circle at 50% 10%, #542F04 80%, transparent 85%);
}
.top{
  width: 120px;
  height: 60px;
  border-bottom: none;
}
.bot{
  width: 180px;
  height: 80px;
}
.candle {
  width: 10px;
  height: 30px;
  background-size: 5px 10px;
  background-image: linear-gradient(#651FFF 40%, #FFF59D 40%);
  border-radius: 2px 2px 0 0;
}
.fire {
  background: #FFB74D;
  width: 6px;
  height: 15px;
  border-radius: 50%;
  transform: rotate(-10deg) translate(-2px, -1px);
  animation: fire 2s ease-in-out infinite;
}
@keyframes fire {
  50% {
    transform: rotate(10deg) translate(2px, -1px);
  }
}
.message {
  margin-top: 0.5em;
  font-family: 'Great Vibes', cursive;
  font-size: 4em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.