Snack

#frontendchallenge #devchallenge #css

<!DOCTYPE html>

Favorite Snack

 
.snack { 
width: 150px; 
height: 100px; 
background-color: #F9BF45; 
border-radius: 50% 50% 0 0; 
position: relative; 
overflow: hidden; 
} 
.snack::before { 
content: ''; 
position: absolute; 
width: 80%; 
height: 80%; 
background-color: #FFCC00; 
border-radius: 50%; 
top: 10%; 
left: 10%; 
} 
.snack::after { 
content: ''; 
position: absolute; 
width: 20px; 
height: 20px; 
background-color: #FF6F61; 
border-radius: 50%; 
top: 40%; 
left: 20%; 
}