<div class="section">
<div class="item">
<div class="img blue">
</div>
<h4>Обучение с нуля</h4>
</div>
<div class="item">
<div class="img purple">
</div>
<h4>Повышение квалификации</h4>
</div>
</div>
.section {
display: flex;
justify-content: space-between;
font-family: sans-serif;
width: 512px;
}
.item {
width: 45%;
}
.img {
height: 42px;
border-radius: 3px;
margin-top: 64px;
position: relative;
}
.img:after {
content: '';
position: absolute;
bottom: 0;
left: 32px;
display: block;
width: 64px;
height: 64px;
background: silver;
border: 3px solid white;
border-radius: 6px;
}
.blue {
background: blue;
}
.purple {
background: purple;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.