Пункты

Вставлять в HTML-блок

Код:

<div class="points-column">
<div class="point-item">
<div class="point-header">Первый заголовок</div>
<div class="point-text">Текст первого заголовка будет находиться здесь</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
<div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div>
  
</div>
  <div class="point-item">
<div class="point-header">complete analysis of materials and tools</div>
<div class="point-text">some text description</div></div>
</div>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  /*Цвет заголовка и пунктов */
  --points-color-main: #3FA8DE;
   /*Цвет текста пунктов */
  --points-clr: #F0F0F0;
   /*Размер пунктов */
  --circle-size:30px;
   /*Толщина линии */
  --points-line-width: 3px;
   /*Шрифт */
  --font-family: 'Montserrat', sans-serif;
}
body {
  counter-reset: points;
}
.points-column {
  max-width: 360px;
  margin: auto;
  padding-left: 50px;
 position: relative; 
  box-sizing: border-box;
}
.points-column::before {
  content: '';
  position: absolute;
  top:0;
  left: 20px;
  height: 100%;
  width:var(--points-line-width);
  transform:translateX(-50%);
  background: var(--points-color-main);
  filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.2));
  border-radius: 3px;
}
/*Заголовок */
.point-header {
  position: relative;
 font-family: var(--font-family);
  color:var(--points-color-main);
  text-transform: uppercase;
  font-weight: 900;
  
}
.point-header::before {
  position: absolute;
  left:-30px;
  transform: translateX(-50%);
  top:0;
   counter-increment: points;
  content: counter(points);
 border-radius: 50%;
  color: var(--points-clr);
  background: var(--points-color-main);
  width:var(--circle-size);
  height:var(--circle-size);
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0px 0px 7px rgba(0,0,0,0.2));
  font-family: var(--font-family);
}
/* Текст */
.point-text {
  font-family: var(--font-family);
  padding: 5px 0px 30px 0px;
}
</style>

Видео: