I have the desire to create something similar to this, but I am unsure of where to start.
Although I have a concept in mind, I am struggling to make it functional and visually appealing.
<div id="data">
<div id="men" class="shape"></div>
<div id="women" class="shape"></div>
<div id="circle" class="small-shape"></div>
</div>
<style>
#data {
width: 100px;
height: 100px;
background: white;
position: relative;
}
.shape {
border-radius: 100px;
background: #CCC;
width: 100px;
height: 100px;
position: absolute;
}
.shape#men {
background: #27ae60;
}
.shape#women {
background: #f26646;
}
.small-shape {
border-radius: 100px;
background: white;
width: 65px;
height: 65px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
}
</style>