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

Ссылка скопирована
CSS HTML PHP
5 апреля 2026 1 ответ

Пропадают линии при позиционировании их. 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>

<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; }

.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; }

Дополнительно:

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

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

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

  • Максим, Спасибо большое, я о такой реализации и не подозревала
    path можно сгенерировать где или ручная отрисовка?
  • oksana_melikhova, нарисовать можно, я делал в ручную, рисовал руками без всяких редакторов, но для не оытных есть векторные редакторы типа : иллюстратор, корел драв, инкскейп..
    Я учился на них...щас рисую без них вообще
  • Максим, Спасибо большое! Буду экспериментировать. Учитывая, какие возможности открываются, мне оно надо)

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Стас DB Ответ

    Для того чтобы реализовать блок кода с подсветкой синтаксиса на HTML странице, можно воспользоваться тегом 

     с атрибутом lang для указания языка программирования. Например, для отображения кода на PHP, необходимо использовать следующую конструкцию:
    


     
    


    Этот код позволит отобразить блок с кодом на PHP с подсветкой синтаксиса на вашей странице. Вы можете использовать этот подход для любого другого языка программирования, просто заменив значение атрибута lang на соответствующее название.
    

    Таким образом, вы сможете удобно отображать код различных языков программирования на вашем сайте, делая его более читаемым и понятным для посетителей.
    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов Figma Баг с переносом слов в Figma? 0 ответов