Как можно реализовать данный блок?

Question

[Vlad]

Помогите пожалуйста с идеями и этапами реализации этого блока. Может какой ролик на ютубе с похожей реализацией встречали? На что обратить внимание и с чего начать? Благодарю.

Comments

[Vlad]

Фон у меня есть с фигмы, как правильно расположить элементы внутри?

[Ankhena]

Vlad, хоть гридами, хоть флексами.
Что именно у вас не получается?

[Vlad]

Ankhena, Скажем так это мой первый учебный проект который я делаю сам, и скорее всего я взял сложность не по моему уровню. Все сделано кроме футера. И вот на данный футер моих знаний и костылей не хватило. Поэтому скажем так много чего получается и нет. То фон как то не так встанет, то не могу понять как под Лого плиткой разместить иконки соцсетей например.

[Ankhena]

Vlad,

Лого плиткой разместить иконки соцсетей например.

Всё, как обычно, гридами или флексами.

Покажите в песочнице на jsfiddle.net что вы делаете с иконками соц.сетей и почему они не встают гридами или флексами, как вам нужно.

Answer 1

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

Варианты могут быть разные, например, используя сетку бустрапа это было бы чтото типа

Если без сетки на флексах, то например както так

Comments

[Vlad]

Спасибо! Сделаю сначала на Флексе. Бустрап еще не проходил.

Answer 2

[Rucklless]

https://itchief.ru/html-and-css/wave-divider-using-svg

Comments

[Vlad]

Благодарю за сайт, будет полезен)

Answer 3

[andand44]

Делается с помощью svg. Есть генераторы таких волн.
Например https://getwaves.io/

Comments

[Vlad]

Нет нет, именно фон у меня есть, с фигмы. Как расположить элементы внутри. Flex? Grid? flex/Grid?

[Andrew]

Vlad, какие элементы? там 5 колонок в контейнере...

[andand44]

Vlad Серьезно?
Расположить с помощью Flex. Изучить Flexbox, посмотреть как устроен Bootstrap, например и сделать так же или лучше. Этих шагов будет достаточно, чтобы расположить элементы внутри этого блока.

[Vlad]

andand44, Спасибо!

Answer 4

[Артем Золин]

https://www.shapedivider.app/