CSS
.number-container {
position: relative;
width: 100px; /* Adjust size as needed */
height: 100px; /* Adjust size as needed */
}
.number {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px; /* Adjust font size as needed */
border: 2px solid #000; /* Border color */
border-radius: 50%; /* Make border circular */
position: relative;
z-index: 1; /* Ensure number is above stars */
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
z-index: 0; /* Ensure stars are below number */
}
.star {
position: absolute;
width: 8px; /* Adjust star size as needed */
height: 8px; /* Adjust star size as needed */
background-color: #ffd700; /* Star color */
border-radius: 50%; /* Make star circular */
}
/* Position stars */
.star:nth-child(1) {
top: 5%;
left: 50%;
}
.star:nth-child(2) {
top: 50%;
left: 90%;
}
.star:nth-child(3) {
bottom: 5%;
left: 50%;
}
.star:nth-child(4) {
top: 50%;
left: 10%;
}
/* Add more star positions for other numbers */
