Cake | Learning Axis

HTML

CSS

:root {
  --cake-color: #F8CA8E;
  --icing-color: #F990A0;
  --icing-highlight: #F7B7C0;
}
body{
  height: 100vh;
  margin: 0;
  background: #C7F8B5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-canvas{
  position: relative;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 150px;
  height:170px;
}
.plate {
  position: absolute;
  bottom: 15px;
  width: 175px;
  height: 90px;
  background: #BFBFBF;
  border-radius: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.cake-side {
  position: absolute;
  top: 55px;
  width: 150px;
  height: 90px;
  background: var(--cake-color);
  border-radius: 0 0 50% 50%;
  overflow: hidden;
}
.cake-side::before {
  content: '';
  position: absolute;
  width: 150px;
  height: 90px;
  background: white;
  border-radius: 0 0 50% 50%;
  top: -20px;
}
.cake-side::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 90px;
  background: var(--cake-color);
  border-radius: 0 0 50% 50%;
  top: -30px;
}
.cake-top {
  position: absolute;
  top: 20px;
  width: 150px;
  height: 75px;
  background: var(--icing-color);
  border-radius: 50%;
  border-bottom: 4px solid var(--icing-highlight);
}
.drips {
  position: absolute;
  display: flex;
  width: 150px;
  height: 70px;
  top: 55px;
}
.drip:nth-child(1) {
  height: 50px;
  width: 20px;
}
.drip:nth-child(2) {
  height: 50px;
  width: 15px;
}
.drip:nth-child(3) {
  height: 50px;
  width: 20px;
}
.drip:nth-child(4) {
  height: 60px;
  width: 25px;
}
.drip:nth-child(5) {
  height: 65px;
  width: 25px;
}
.drip:nth-child(6) {
  height: 50px;
  width: 20px;
}
.drip:nth-child(7) {
  height: 60px;
  width: 15px;
}
.drip:nth-child(8) {
  height: 35px;
  width: 10px;
}
.drip {
  background: var(--icing-color);
  border-radius: 0 0 50% 50% / 0 0 20% 20%;
}
.candle {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  width: 8px;
  height: 50px;
  background: repeating-linear-gradient(
    45deg, 
    white, 
    white 4px, 
    #F96B6B 4px, 
    #F96B6B 6px
  );
  border-radius: 10% 10% 20% 20%;
}
.candle::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 5px;
  background: black;
}
.flame {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
  height: 10px;
  width: 10px;
  background: #F78F4E;
  border-radius: 50%;
  border: 2px solid yellow;
}
.flame::before {
  content: '';
  position: absolute;
  top: -10px;
   width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid yellow;
}
.flame::after {
  content: '';
  position: absolute;
  top: -6px;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid #F78F4E;
}