<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
<div class="item">
<p><i class="fab fa-affiliatetheme"></i>
12000+ <br>Business
</p>
<p><i class="fab fa-affiliatetheme"></i>
60000+ <br>Downloads
</p>
<p><i class="fab fa-affiliatetheme"></i>
30000+<br>Free Installs
</p>
<p><i class="fab fa-affiliatetheme"></i>
40000+ <br>Pro Users
</p>
</div>
* {
margin: 0;
padding: 0;
}
.item {
display: flex;
align-items: center;
justify-content: space-between;
}
p:nth-of-type(1) {
background: blue;
}
p:nth-of-type(2) {
background: red;
}
p:nth-of-type(3) {
background: green;
}
p:nth-of-type(4) {
background: yellow;
}
p {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: sans-serif;
position: relative;
font-size: 2vw;
padding: 10vh 0;
}
p i {
position: absolute;
left: 2vw;
top: 50%;
transform: translateY(-50%);
font-size: 3.3vw;
color: #000;
}
p i:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5vw;
height: 5vw;
background: #fff;
z-index: -1;
border-radius: 50%;
padding: 0.2vw;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.