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

CSS HTML PHP

1 ответ

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

Что нужно

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

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

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

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

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

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

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

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

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

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

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

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

Заказать помощь

Лучший ответ

Стас DB Ответ

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

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

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

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

Другие ответы (0)

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

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

комментарий Отменить ответ

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

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

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

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

комментарий Отменить ответ

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

Ежедневно, круглосуточно