bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман

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

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

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

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

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

Заранее благодарю за ответ
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
одинаковые по высоте пилим флексами
левый и верхний бордеры имитируем псевдоэлементами

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
HTML Academy Санкт-Петербург
от 130 000 до 160 000 руб.
Nordavind Москва
от 60 000 до 90 000 руб.
24 марта 2019, в 17:59
15000 руб./за проект
24 марта 2019, в 17:57
65000 руб./за проект
24 марта 2019, в 17:40
100000 руб./за проект