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

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

6273aaf86ad50350257201.jpeg
Здравствуйте, совсем нет понимания как это сделать (выделенное красным), отправлять код не стану, просто будет стыдно показать, какой карикатурой я вообще занимался, но никакого нету результата, я не прошу вас писать целой код-решение, просто помогите идеей, как и куда здесь можно написать?
  • Вопрос задан
  • 128 просмотров
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 комментария
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработка торгового бота на Байбит под виндоус серверс
04 мая 2024, в 15:12
15000 руб./за проект
Разработка лендинга на Тильда Tilda
04 мая 2024, в 14:46
15000 руб./за проект
Программа для сайта знакомств (ИИ)
04 мая 2024, в 14:41
20000 руб./за проект
Ещё заказы