Coding with Rumaysa

Boba Cup (Pure CSS!)

body {
padding-top: 100px;
}

.boba-cup {
align-items: center;
justify-content: center;
text-align: center;
margin: auto;
}

.lid {
width: 200px;
height: 100px;
margin: auto;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 5px solid black;
border-bottom: 0;
box-sizing: border-box;
background-color: #80dbff;
}

.lid::after {
content: "";
margin: auto;
border: 5px solid black;
background-color: #80dbff;
position: absolute;
bottom: 297px;
left: 279px;
width: 200px;
height: 10px;
}

.cup {
border: 5px solid black;
border-top: 3px solid black;
width: 150px;
background-color: #e066ff;
margin: auto;
height: 200px;
margin-top: 35px;
z-index: -1;
transform: perspective(10px) rotateX(-1deg);
}

.straw {
z-index: -1;
border: 5px solid black;
width: 20px;
height: 120px;
background-color: #ff80aa;
position: absolute;
left: 399px;
top: 40px;
transform: rotate(15deg);
}

.pearl {
border-radius: 50%;
background-color: black;
width: 20px;
height: 20px;
position: absolute;
}

.one {
left: 115px;
top: 94px;
}

.two {
left: 90px;
top: 140px;
height: 22px;
}

.three {
left: 20px;
top: 90px;
}

.four {
left: 40px;
top: 130px;
height: 22px;
}

.five {
left: 70px;
top: 80px;
}