Как отверстать этот блок?

Question

[Andrew Foy]

Это мой первый сайт который я верстаю сам. Столкнулся с этим не знаю как ее отверстать? И как сделать обмен валют?


Ссылка на макет: https://www.figma.com/file/aSREKxkI1XVNWySf4UlIe5/...

Comments

[Фёдор]

Подправьте скриншот.

[Антон Литвиненко]

Answer 1

[Олег]

Делите на блоки

- полупрозрачные уменьшенные копии блока (под блоком с контентом) - как псевдоэлементы ::after с разным смещением по top и с разным значением opacity
- обмен валют - это уже на javascript + сервер делается

Comments

[Andrew Foy]

а как сделать стрелку смены валюты?

[Олег]

Andrew Foy,
иконочные шрифты, типа font-awesome и прочих
просто SVG изображение вставить

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M508.485 184.485l-92.485 92c-4.687 4.686-12.284 4.686-16.97 0l-7.071-7.07c-4.687-4.686-4.687-12.284 0-16.971L452.893 192H12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h440.905l-60.946-60.444c-4.687-4.686-4.687-12.284 0-16.971l7.07-7.07c4.687-4.686 12.284-4.686 16.971 0l92.485 92c4.687 4.686 4.686 12.284 0 16.97zm-504.97 160l92.485 92c4.687 4.686 12.284 4.686 16.971 0l7.07-7.07c4.687-4.686 4.687-12.284 0-16.971L59.095 352H500c6.627 0 12-5.373 12-12v-8c0-6.627-5.373-12-12-12H59.107l60.934-60.444c4.687-4.686 4.687-12.284 0-16.971l-7.071-7.07c-4.686-4.686-12.284-4.687-16.97 0l-92.485 92c-4.686 4.686-4.687 12.284 0 16.97z"></path></svg>

Также ещё уголочки для раскрывающихся списков:

<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentColor" d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"></path></svg>

Answer 2

[Дмитрий Жемчужнов]

Для полупрозрачности можно использовать background-filter.
https://developer.mozilla.org/ru/docs/Web/CSS/back...

Answer 3

[art style]

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