Сверстать необычный элемент дизайна
Подскажите добрые люди, кто-нибудь сталкивался с подобным, как это верстать то вообще?
Я пробовал как-то так, но что-то не дотумкаю как низ сверстать?
P.S. вроде разобрался - вопрос закрыт. Обновил код. Вроде все работает, остается доработать моб. версию, но это уже другая история. Не знаю на сколько хорош код с точки зрения правильности и элегантности, но в принципе свою задачу выполняет.
.how-are-working-main {
width: 80%;
margin: 50px auto;
}
.how-are-working-list-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
overflow: hidden;
}
.how-are-working-list-1 li {
position: relative;
margin: 50px 0;
padding: 50px 0;
}
.how-are-working-list-1 li:before {
content: '';
position: absolute;
top: 0;
border-top: 1px solid #FF7B3D;
display: flex;
width: 100%;
}
.how-are-working-list-1 li:nth-child(3):before {
content: '';
position: absolute;
top: 0;
right: 0;
display: flex;
width: 100%;
border-right: 1px solid #FF7B3D;
border-bottom: 1px solid #FF7B3D;
border-radius: 0 100px 100px 0;
height: 200px;
}
.how-are-working-list-1 li:nth-child(1):after {
content: '1';
position: absolute;
top: -30px;
left: 0;
border-radius: 50%;
background: #FF7B3D;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
}
.how-are-working-list-1 li:nth-child(2):after {
content: '2';
position: absolute;
top: -30px;
left: 0;
border-radius: 50%;
background: #FF7B3D;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
}
.how-are-working-list-1 li:nth-child(3):after {
content: '3';
position: absolute;
top: -30px;
left: 0;
border-radius: 50%;
background: #FF7B3D;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
}
.how-are-working-list-1 li h5, .how-are-working-list-3 li h5 {
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 20px;
color: #162729;
margin: 0 0 20px 0;
}
.how-are-working-list-1 li p, .how-are-working-list-3 li p {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 16px;
color: #162729;
}
.how-are-working-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.how-are-working-list-2 {
margin-top: -21px
}
.how-are-working-list-2 {
margin-left: 30px;
}
.how-are-working-list-3 {
margin-left: 120px;
}
.how-are-working-list-2, .how-are-working-list-3 {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
overflow: hidden;
}
.how-are-working-list-2 li {
position: relative;
padding: 120px 0;
width: 50%;
}
.how-are-working-list-2 li:nth-child(1):before {
content: '';
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 200px;
border-left: 1px solid #FF7B3D;
border-top: 1px solid #FF7B3D;
border-bottom: 1px solid #FF7B3D;
border-radius: 100px 0 0 100px;
}
.how-are-working-list-2 li:nth-child(2):before {
content: '';
position: absolute;
top: 0;
left: 0;
display: flex;
width: 50%;
height: 201px;
border-bottom: 1px solid #FF7B3D;
}
.how-are-working-list-2 li:nth-child(1):after {
content: '4';
position: absolute;
bottom: 10px;
left: 80px;
border-radius: 50%;
background: #FF7B3D;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
}
.how-are-working-list-2 li:nth-child(2):after {
content: '5';
position: absolute;
bottom: 10px;
left: 50%;
border-radius: 50%;
background: #FF7B3D;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
font-weight: 600;
font-size: 28px;
color: #FFFFFF;
}<!DOCTYPE HTML>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>**текст, выделенный жирным шрифтом**
<section class="how-are-working">
<h3>Как мы работаем</h3>
<div class="how-are-working-main">
<ul class="how-are-working-list-1">
<li>
<h5>Заявка</h5>
<p>Оставите заявку по телефону, в мессенджерах, или онлайн на нашем сайте</p>
</li>
<li>
<h5>Подбор проекта</h5>
<p>Подбираем Вам индивидуальный проект для строительства или готовый дом</p>
</li>
<li>
<h5>Помощь с оформлением ипотеки</h5>
<p>Подбираем Вам индивидуальный проект для строительства или готовый дом</p>
</li>
</ul>
<div class="how-are-working-2">
<div class="how-are-working-img">
<img src="/images/how-are-working-img.png" alt="">
</div>
<div class="how-are-working-txt">
<ul class="how-are-working-list-2">
<li></li>
<li></li>
</ul>
<ul class="how-are-working-list-3">
<li>
<h5>Договор</h5>
<p>Подписываем договор на покупку готового дома или на строительство по индивидуальному проекту, и приступаем к работам</p>
</li>
<li>
<h5>Работы по благоустройству</h5>
<p>При необходимости делаем дизайн-проект, ландшафтный дизайн, ремонтные работы под ключ</p>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>