Задать вопрос
JolyCode
@JolyCode
junior frontend developer
html

Наткнулся на нечто новое в верстке и просто не понимаю что делать?

6273aaf86ad50350257201.jpeg
Здравствуйте, совсем нет понимания как это сделать (выделенное красным), отправлять код не стану, просто будет стыдно показать, какой карикатурой я вообще занимался, но никакого нету результата, я не прошу вас писать целой код-решение, просто помогите идеей, как и куда здесь можно написать?
  • Вопрос задан
  • 131 просмотр
3 комментария
Подписаться 1 Простой 3 комментария
Решения вопроса 1
@corvus278
1. Раздели эти две стороны на два блока (левый и правый), они будут одной высоты (для этого положи их в один контейнер), одному из этих блоков, например левому, задай бордер (он будет разделителем между сторонами).
2. Карточки - для сносок ("ветки" из разделителя), первое что приходит в голову, это сделать их через псевдоэлелементы (after или before), и абсолютно спозиционировать относительно карточки (карточки должны быть прижаты к разделителю). И добавь всем карточкам, кроме превой (псевдокласс last-child), отступ сверху (он фиксированный).

Вообще, довольно интересный кейс, буду признателен если дашь ссылку на макет)

P.S. там кстати в комментах к макету наверняка что то есть по решению
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 2
@wonderingpeanut
Ничего не разделяя, простым движением руки создаем грид из 2 колонок и 8 строк, элементам грида делаем gridRow: i / i + 3, где i - номер элемента

бум: https://codesandbox.io/s/purple-morning-eiz6gb?fil...
Ответ написан
2 комментария
2 комментария
Gells0nd
@Gells0nd
6273b03e6f580304174461.png

Может разбить блоки как то так?
Создаем 1 основной див, туда помещаем еще 2, в каждом из которых будет по одной стороне. А потом, т.к. правый блок меньше, чем левый мы просто задаем отступ сверху правому блоку. Сейчас попробую сверстать что то подобное, скину, если выйдет адекватно)
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Расширение для Google Chrome
22 дек. 2024, в 20:34
3000 руб./за проект
Парсер-бот
22 дек. 2024, в 20:12
10000 руб./за проект
Ещё заказы