Как сверстать такой блок?

Question

[Андрей]

Как сверстать подобный блок?
Мои попытки это сделать не особо увенчались успехом
Я примерно понимаю, что это делается через display: flex;
Но все равно не выходит

Comments

[Ivan1331]

Скиньте хотя бы что не получается, или вы ожидаете что кто то сверстает за вас без шаблона по картинке?

Answer 1

[Сергей Хлопов]

Я бы наверно делал вот так (ниже ссылка на codepen). Возможно чем-то поможет.
По поводу фоновых кружков:

• Я бы сделал их тегом img (экспорт из граф. редактора в svg) т.е. было бы 3 svg файла
  
• Прописал бы им position: absolute;
  
• Для картинки с фоновыми кружками сделал бы z-index=1, а для кружка с иконкой z-index=2
  
• С помощью top, left, right, bottom картинку с фоновым кружками расположил как требуется
  

Ещё обычно на небольшой ширине экрана с такими карточками бывает что заголовок переходит на вторую строку, и получается не ровно. К примеру вот так:

Это можно исправить добавив свойство height (высоту) блоку с названием.
В моём примере на ширине 916px заголовок переходит на вторую строку, я добавил медиа выражение которое на этой ширине делает высоту блокам с названием карточки равную двум строкам, что бы ровно было.

Answer 2

[Semantic.Moscow]

кружочки можно сделать множественными background`ами с inline SVG (circle)
позиционировать флексом удобно (поиграться) прямо в консоли браузера.

Answer 3

[Арамаис Мирзоян]

Алгоритм примерно такой — создаете один родительский div, которому присваивайте свойство display: flex, внутри этого div-а создаете 3 дочерних div-ов, которым присваивайте width: 33.333333%. Внутри этих div-ов размещаете изображения и тексты. Этим div-ам можете дать text-align: center, чтобы отцентрировать изображения и тексты.

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