Как лучше сверстать этот блок на Landing page?

Question

[Максим]

Доброго времени суток.
Постараюсь кратко.
Делаю тестовое задание.
Нужно сверстать пару простых вроде блоков.
Подскажите как лучше сверстать блок который на скрине.
Конкретно не могу пока понять как лучше сверстать блок с надписями что рядом с белыми небольшими кругами. Наверняка тут нельзя тупо картинкой бахнуть или фоном)
Как грамотно сверстать что бы текст можно было спокойно менять и возможно сами круги тоже?
Как их расположить ровно как на макете ?
Спасибо большое!

Comments

[Ярослав Иванов]

А после тестового задания снова придете на тостер со следующим вопросом о верстке ? Тут все очень просто. Зная основы html/css любой может справится.

[Максим]

Ярослав Иванов: Спасибо за помощь бро!)

[Максим]

Ярослав Иванов: Я додумался только до абсолютного позиционирования кругов с надписями относительно центрального круга)

[Ярослав Иванов]

Максим: O_O зачем. просто 3 блока. и отрицательный маржин в некотрых случаях

[OniSpX]

Правильно, ещё можешь сделать фиксированный размер этих элементов, у крайних из них сделаешь соответствующие отступы слева и справа. Центральный круг просто выровняешь по центру фона блока.

[Максим]

Спасибо, попробую !

Answer 1

[Николай]

Вариантов много, я бы сделал на ul>li + :after, :before. Если текст будет появляться по наведению, мне кажется самый оптимальный вариант. А так можно и картинкой, абсолютным позиционированием выстроить строки (если не привык к сложным моментам)

Comments

[Максим]

Николай Спасибо большое!)