<div id="wrap">
<div class="circle">
<div class="circle__txt circle__txt--r" id="txt-01"><span>Some text 01</span></div>
<div class="circle__txt circle__txt--r" id="txt-02"><span>Some text 02</span></div>
<div class="circle__txt circle__txt--r" id="txt-03"><span>Some text 03</span></div>
<div class="circle__txt circle__txt--l" id="txt-04"><span>Some text 04</span></div>
<div class="circle__txt circle__txt--l" id="txt-05"><span>Some text 05</span></div>
<div class="circle__txt circle__txt--l" id="txt-06"><span>Some text 06</span></div>
<div class="circle__txt circle__txt--c" id="txt-07"><span>Some text 07</span></div>
<div class="circle__img"><img src="http://cdn.onlinewebfonts.com/svg/img_555739.png" alt=""></div>
</div>
</div>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: #fff;
color: #000;
font-size: 18px;
font-family: monospace;
}
*,
*::before,
*::after {
box-sizing: border-box;
outline: none;
}
#wrap {
width: 100%;
padding: 20px;
}
.circle {
width: 100%;
max-width: 980px;
margin: auto;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
'txt-area-01 img-area-01 txt-area-04'
'txt-area-02 img-area-01 txt-area-05'
'txt-area-03 img-area-01 txt-area-06'
'txt-area-07 txt-area-07 txt-area-07';
&__img {
grid-area: img-area-01;
img {
width: 100%;
}
}
&__txt {
margin-top: 2vw;
&#txt-01 {
grid-area: txt-area-01;
margin-right: -3vw;
}
&#txt-02 {
grid-area: txt-area-02;
margin-right: 3vw;
}
&#txt-03 {
grid-area: txt-area-03;
}
&#txt-04 {
grid-area: txt-area-04;
margin-left: -3vw;
}
&#txt-05 {
grid-area: txt-area-05;
margin-left: 3vw;
}
&#txt-06 {
grid-area: txt-area-06;
}
&#txt-07 {
grid-area: txt-area-07;
}
&--r {
text-align: right;
}
&--l {
text-align: left;
}
&--c {
text-align: center;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.