Как должно быть по макету:
Блоки сделаны через флекс,для первого получилось всё сделать согласно макету:
Однако с оставшимися 3-мя возникли пробелемы:
Попытался использовать код для первого блока соответственно подстраивая под нужный блок,но не вышло.
Как расположить картинку слева,а текст справа,при этом,чтобы за картинкой был белый круг как на первом блоке?
Код включая первый блок:
<div class="cards">
<div class="cards__flex">
<div class="cards__block">
<div class="cards__img">
<span class="cyrcle"><img src="img/first.png"></span>
</div>
<div class="cards__text">12000+<br>Business</div>
</div>
<div class="cards__block">
<img src="img/first1.png">
<div class="cards__text">60000+<br>Downloads</div>
</div>
<div class="cards__block">
<img src="img/first2.png">
<div class="cards__text">30000+<br>Free Installs</div>
</div>
<div class="cards__block">
<img src="img/first3.png">
<div class="cards__text">40000+<br>Pro Users</div>
</div>
</div>
</div>
.cards {
margin-top: 100px;
&__flex {
display: flex;
flex: 1 0 400px;
}
&__block {
display: flex;
&:nth-child(1) {
width: 400px;
height: 90px;
margin-bottom: 100px;
padding: 45px 114px 45px 117px;
background-color: #80d8ff;
}
&:nth-child(2) {
width: 400px;
height: 90px;
margin-bottom: 100px;
padding: 45px 114px 45px 117px;
background-color: #82b1ff;
}
&:nth-child(3) {
width: 400px;
height: 90px;
margin-bottom: 100px;
padding: 45px 114px 45px 117px;
background-color: #b388ff;
}
&:last-child{
width: 400px;
height: 90px;
margin-bottom: 100px;
padding: 45px 114px 45px 117px;
background-color: #ea80fc;
}
}
&__text {
margin: 18px 0 0 0;
font-family: Raleway;
font-size: 20px;
font-weight: 800;
font-stretch: normal;
font-style: normal;
line-height: 1.25;
letter-spacing: normal;
float: right;
color: #ffffff;
}
&__img{
position: relative;
width: 100px; height: 100px;
background: #81D9FF;
border-radius: 50%;
& span{
position: absolute; top: 50%; left: 55%; transform: translate(-60%, -60%);
width: 60px; height: 60px;
text-align: center; line-height: 50px;
background: #fff;
-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
& img{
.ico_wrap i {color: #81D9FF;}
margin-top: 16.5px;
}
}
}
}
Да-да, код так себе <3