Как сверстать такой сайт?

Question

[JustStone]

Подскажите как сверстать такой сайт с такими изгибами?
Ссылка на облако с макетом: https://cloud.mail.ru/public/LAxL/UhZLdfAWk

Сам попробовал секшн в смарт объект собрать и тупо прилепить на сайт, но секшн заходит под хедер, а должен быть над ним, вот код:

Comments

[Nikita Sobolev]

Где такие макеты берешь? Где полный взять?)

[riot26]

Nikita Sobolev, https://dartthemes.com/product/shoe-landing-psd-te...

[sim3x]

Прикрепите рендер макета в пнг
Ваш вопрос превзратиться в тыкву, когда линк станет невалидным

[JustStone]

Nikita Sobolev, Взял отсюда https://tpverstak.ru/psd-mockups/ но то что я в облаке скинул, это всё что есть

Answer 1

[RAX7]

SVG + padding/margin в процентах

Comments

[Wentixon]

подскажи а в какой проге ты рисуешь svg?

[RAX7]

Wentixon, я их не рисую. Экспорт из фотошопа (можно из иллюстратора) с небольшими правками руками.

[Wentixon]

RAX7,

Answer 2

[Adik Izat]

Секции сделать относительными и давать им большие паддинги и по разному чтобы друг на друга не лезли. Так же нужно регулировать всоту секции по ширине экрана, чтобы было адаптивным. Именно фоновое изображение задавать отдельно а не как фоновое. И вообще еденицы измерения vw, vh в помощь. Так же не помешало бы узнать про свойство изображения object-fit и его значения cover, contain.

section{
   position:relative;
padding: 8vh 10vw;
width: 100%;
height: 40vw;
}

img.bg{
possition: absolute;
width: 100%;
top: 0;
left: 0;
}

.content-section{
   z-index: 100;
}