Как реализовать такой блок в HTML/CSS?

Question

У меня такой вопрос, как можно реализовать подобный блок и сами блоки (items)?

Answer 1

Смотри: ( в голове представляй ) У тебя будет три блока: это каждый пункт ( fast perfomance, prototyping и vector editing ) Каждый этот блок разбей на 2 блока: в левых блоках у тебя иконки, а в правых текст ( в правых блоках еще h1 и p теги будут ), это с помощью флекса будет сделано все. Если не понятно, я могу скинуть код, как это сделать можно

Answer 2

С помощью display: flex;

Добавил цвета как в вопросе для каждого блока.

* {
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.block {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	width: 400px;
}

.block .icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	flex-shrink: 0;
	padding: 10px;
}

.block-red .icon { background-color: #f55767; }
.block-blue .icon { background-color: #2563ff; }
.block-green .icon { background-color: #40975f; }

.block .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block .description {
	margin-left: 10px;
}

.block .description p {
	font-size: 16px;
	margin: 0 0 10px 0;
	font-weight: 600;
}

.block-red p { color: #f55767; }
.block-blue p { color: #2563ff; }
.block-green p { color: #40975f; }

.block .description span {
	font-size: 13px;
}

<div class="container">
	<div class="blocks">
		<div class="block block-red">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2687/2687779.svg" alt="">
			</div>
			<div class="description">
				<p>Fast Perfomance</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
		<div class="block block-blue">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2033/2033705.svg" alt="">
			</div>
			<div class="description">
				<p>Prototyping</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
		<div class="block block-green">
			<div class="icon">
				<img src="https://image.flaticon.com/icons/svg/2752/2752514.svg" alt="">
			</div>
			<div class="description">
				<p>Vector Editing</p>
				<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea quasi, unde, autem consequatur similique voluptas deserunt provident?</span>
			</div>
		</div>
	</div>
</div>

Answer 3

Решение с помощью display: grid;

Добавил цвета для каждого блока.

.blocks {
	display: grid;
	grid-gap: 30px;
	font-family: sans-serif;
}

.blocks .block {
	display: grid;
	grid-template-areas: 'img p' 'img span';
	align-items: center;
	grid-gap: 10px;
	width: 400px;
}

.block .icon {
	grid-area: img;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	padding: 10px;
}

.block .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.block.red .icon { background-color: rgba(245, 87, 103, 0.4); }
.block.blue .icon { background-color: rgba(37, 99, 255, 0.4); }
.block.green .icon { background-color: rgba(64, 151, 95, 0.4); }

.block p {
	grid-area: p;
	margin: 0;
	font-weight: 600;
	font-size: 16px;
}

.block.red p { color: #f55767; }
.block.blue p { color: #2563ff; }
.block.green p { color: #40975f; }

.block span {
	grid-area: span;
	font-size: 13px;
}

<div class="blocks">
	<div class="block red">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2687/2687779.svg" alt="">
		</div>
		<p>Fast Perfomance</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
	<div class="block blue">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2033/2033705.svg" alt="">
		</div>
		<p>Prototyping</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
	<div class="block green">
		<div class="icon">
			<img src="https://image.flaticon.com/icons/svg/2752/2752514.svg" alt="">
		</div>
		<p>Vector Editing</p>
		<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, deserunt sed amet obcaecati, eaque enim doloribus.</span>
	</div>
</div>

БЛОГ НА HUSL

Как реализовать такой блок в HTML/CSS?

Ответы (3 шт):