Как реализовать данный блок?

Question

[oksana_melikhova]

Пропадают линии при позиционировании их. z-index и увеличением ширины не помогают

Что нужно

Что получается

<section class="result">
			<div class="container result-container">
				<div class="result-items__img">
					<img src="./img/result-img.png" alt="">
				</div>
				<div class="result-items">
					<div class="result-item">
						<div class="result-item__text result-item__text-1">
							Основное <br> <span>отопление</span> и <br> теплый <span>пол</span>
						</div>
						<div class="result-item__text2">
							<span>Не боится</span> <br> запирания мебелью
						</div>
					</div>
					<div class="result-item">
						<div class="result-item__text result-item__text-2">
							Капитальные <br> затраты <span>в 2 <br> раза ниже</span>
						</div>
						<div class="result-item__text2">
							<span>Подходит</span> под любые <br> напольные покрытия
						</div>
					</div>
					<div class="result-item">
						<div class="result-item__text result-item__text-3">
							<span>Экономит до 20%</span> <br> электроэнергии
						</div>
						<div class="result-item__text2">
							<span>Ремонтпригодный</span> без <br> вскрытия напольного <br> покрытия
						</div>
					</div>
					<div class="result-item">
						<div class="result-item__text">
							<span>Автономен</span> <br> не требует <br> обслуживания
						</div>
						<div class="result-item__text2">
							<span>Безопасен</span> для <br> людей и животных
						</div>
					</div>
					<div class="result-item">
						<div class="result-item__text">
							<span>Быстрый <br> монтаж</span> 1-3 дня
						</div>
						<div class="result-item__text2">
							Срок службы <br> <span>более 50 лет</span>
						</div>
					</div>
				</div>
			</div>
		</section>

.result {
	position: relative;
	padding: 100px 0 100px 0;
}

/* .result-container {
} */

.result-items__img {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 1;
}


.result-items {
}

.result-item {
	display: flex;
	align-items: center;
	justify-content: space-between;

	color: #622C67;
	font-size: 14px;
	font-weight: 400;
	z-index: 100;
}

.result-item span {
	font-weight: 700;
}

.result-item__text {
	position: relative;
	text-align: left;
	margin-bottom: 35px;
}

.result-item__text2 {
	text-align: right;
}

.result-item__text-1::before {
	content: '';
	position: absolute;
	top: 30px;
	left: 120px;
	background-image: url(../img/icon/Vector1.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 162px;
	height: 107px;
	z-index: 100;
}

.result-item__text-2::before {
	content: '';
	position: absolute;
	top: 30px;
	left: 120px;
	background-image: url(../img/icon/Vector2.svg);
	width: 162px;
	height: 65px;
	z-index: 100;
}

.result-item__text-3::before {
	content: '';
	position: absolute;
	top: 20px;
	left: 140px;
	background-image: url(../img/icon/Vector3.svg);
	width: 121px;
	height: 2px;
	z-index: 100;
}

Comments

[Максим]

Вы эту всю картинку в svg сделайте.
100% будет одинаково при любом разрешении экрана.

Примерно так: https://codepen.io/topicstarter/pen/mdawmGe

До конца не делал, лень, но смысл должен быть ясен

[oksana_melikhova]

Максим, Спасибо большое, я о такой реализации и не подозревала
path можно сгенерировать где или ручная отрисовка?

[Максим]

oksana_melikhova, нарисовать можно, я делал в ручную, рисовал руками без всяких редакторов, но для не оытных есть векторные редакторы типа : иллюстратор, корел драв, инкскейп..
Я учился на них...щас рисую без них вообще

[oksana_melikhova]

Максим, Спасибо большое! Буду экспериментировать. Учитывая, какие возможности открываются, мне оно надо)