Как сделать блок, имеющий заголовок с бордером и контентом?

Question

[Полина Емельянова]

Добрый день, коллеги.

Прошу поможщи с реализацией элемента.
САБЖ:

1. Есть два блока, которые должны иметь адаптив и не ломаться при тесте контентом. Одинаковые по высоте.
2. У этих блоков есть бекграунд с блюром.
3. В центре блока есть "окно" без блюра, с имиджем, заголовок, а также бордер, который рвется у границ заголовка.
4. Заголовок имеет прозрачный фон.
5. Под данным окном есть секция со ссылками.

если пп 2 и 3 более менее понятно как белать, то вот с бордером и заголовком, а также одинаковой высотой самого "окна" у меня не сростается.

ВОПРОС: как реализовать ОКНО: данный блок должен иметь одну высоту и адаптивиться-резиниться, иметь адаптивный же бордер.

Заранее благодарю за ответ

Answer 1

[Сергей delphinpro]

одинаковые по высоте пилим флексами
левый и верхний бордеры имитируем псевдоэлементами

собственно самое сложное сделать блюр по внешней кромке картинки, но с этим как раз у вас проблемы нет =))
Сейчас попробую накидать примерчик

Comments

[Полина Емельянова]

Благодарю! Жду пример.)))

[Сергей delphinpro]

Полина Емельянова, обновил ответ