Как расположить элементы во всех блоках одинаково?

Как должно быть по макету:601f295908563298995572.png
Блоки сделаны через флекс,для первого получилось всё сделать согласно макету:601f299387cb5216713800.png
Однако с оставшимися 3-мя возникли пробелемы:601f29d06ba5a053295349.png
Попытался использовать код для первого блока соответственно подстраивая под нужный блок,но не вышло.
Как расположить картинку слева,а текст справа,при этом,чтобы за картинкой был белый круг как на первом блоке?
Код включая первый блок:
<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
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
LenovoId
@LenovoId
svg, css,js
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы