<div class="wrapper">
<div class="center">
<div class="main">
<div class="big-img"></div>
</div>
<div class="img img-1"></div>
<div class="img img-2"></div>
<div class="img img-3"></div>
<div class="img img-4"></div>
<div class="img img-5"></div>
<div class="img img-6"></div>
<div class="img img-7"></div>
<div class="img img-8"></div>
<div class="img img-9"></div>
<div class="img img-10"></div>
</div>
</div>
@mixin circle {
border: 1px solid #000;
border-radius: 50%;
background: yellow;
}
.wrapper {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
@media (max-width: 410px) {
height: auto;
}
}
.main {
@media (max-width: 410px) {
width: 100%;
}
}
.img {
width: 50px;
height: 50px;
@include circle;
position: absolute;
@media (max-width: 410px) {
position: static;
margin: 10px;
}
&-1 {
top: -80px;
}
&-2 {
top: -35px;
right: -35px;
}
&-3 {
right: -80px;
}
&-4 {
bottom: -35px;
right: -35px;
}
&-5 {
bottom: -80px;
}
&-6 {
bottom: -35px;
left: -35px;
}
&-7 {
left: -80px;
}
&-8 {
top: -35px;
left: -35px;
}
&-9 {
bottom: -100px;
right: 5px;
}
&-10 {
bottom: -100px;
left: 5px;
}
}
.center {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
@media (max-width: 410px) {
display: flex;
flex-wrap: wrap;
}
}
.big-img {
width: 200px;
height: 200px;
@include circle;
@media (max-width: 410px) {
margin: 0 auto;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.