<div id="three-container">
<div id="star"></div>
<div id="three"></div>
<img class="globe1" src="https://avatars3.githubusercontent.com/u/26817802?s=80"/>
<img class="globe2" src="https://avatars1.githubusercontent.com/u/1307267?s=80"/>
<img class="globe3" src="https://avatars2.githubusercontent.com/u/3276739?s=80"/>
<img class="globe4" src="https://avatars1.githubusercontent.com/u/8249453?s=80"/>
<img class="globe5" src="https://avatars2.githubusercontent.com/u/29441630?s=80"/>
<img class="globe6" src="https://avatars2.githubusercontent.com/u/13032099?s=80"/>
</div>
#three-container{
margin-left:50px;
position:absolute;
background:url('https://images.unsplash.com/photo-1486078695445-0497c2f58cfe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80');
width:500px;
height:700px;
border:1px solid black;
}
img{
position:absolute;
display:block;
width:80px;
height:80px;
border-radius:50%;
border:4px solid red;
overflow:hidden;
}
.globe1{
top:310px;
left:100px;
}
.globe2{
top:310px;
left:310px;
}
.globe3{
top:330px;
left:205px;
}
.globe4{
top:450px;
left:60px;
}
.globe5{
top:480px;
left:205px;
}
.globe6{
top:450px;
left:350px;
}
#star{
position:absolute;
top:40px;
left:200px;
width:100px;
height:100px;
z-index:10;
background-image: linear-gradient(45deg, #f4ff29 25%, #dce800 25%, #dce800 50%, #f4ff29 50%, #f4ff29 75%, #dce800 75%, #dce800 100%);
background-size: 28.28px 28.28px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
#three{
position:absolute;
left:50px;
top:100px;
width:400px;
height:700px;
background-image: linear-gradient(5deg, #1a9900 25%, #00ab17 25%, #00ab17 50%, #1a9900 50%, #1a9900 75%, #00ab17 75%, #00ab17 100%);
background-size: 49.44px 68.05px;
clip-path: polygon(50% 0%, 80% 30%, 70% 30%, 90% 50%, 80% 50%, 100% 70%, 60% 70%, 60% 80%, 40% 80%, 40% 70%, 0% 70%, 20% 50%, 10% 50%, 30% 30%, 20% 30%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.