Как верстать такой дизайн?

Question

[Levott]

Что надо использовать для этого и как верстать такой дизайн?

Comments

[iBird Rose]

сохранить эту фиолетовую штуку как svg и вставить как фон блока

[Levott]

iBird Rose, а звёздочки и эти реальные загагулины + карточку (я просто недавно начал верстать)

[iBird Rose]

Levott, и их тоже. они не несут в себе функционал. поэтому просто сохраняешь как svg и вставляешь как картинки, либо как фон, либо прям тегом <svg>

[Levott]

iBird Rose, спасибо

[szQocks]

iBird Rose, фиолетовую можно и через радиусы сверстать, не ток svg

[szQocks]

Levott,

div{
  width: 246px;
  height: 266px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: violet;
}

Answer 1

[sharpsss]

Смотри , начну с закругляшек - это блок , который имеет
border-radius:10px 10px 0px 0px
тут точно не уверен , правильно ли я расставил закругления) но можешь местами поменять если что закругляшки для верха, далее этот блок у нас display:flex flex-direction:column; align:center то есть всё что внутри ровняешь как тебе нужно, далее картинку внутрь запихиваешь думаю со 100% шириной т.е. width:100%
Давай дальше , фон блока этого тёмный цвет задаешь backround-color : тут твой цвет далее кругляшок предлагаю вставить прямо в html разметку svg и дать ему абсолютное позиционирование ,ну кругляшок со звёздочками просто блок внутри свг , блоку диплэй флекс ровняешь тут думаю понятно, закорючки это свг, как-то так)

Comments

[Levott]

Огромное тебе спасибо за такую расписку действий <3

[sharpsss]

Levott, да пожалуйста ) если вопросы будут - можешь сюда в комментах писать

[Levott]

sharpsss, могу ли я писать тебе в тг?

[sharpsss]

Levott, можешь