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

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

Сам попробовал секшн в смарт объект собрать и тупо прилепить на сайт, но секшн заходит под хедер, а должен быть над ним, вот код:
  • Вопрос задан
  • 5443 просмотра
Решения вопроса 1
RAX7
@RAX7
SVG + padding/margin в процентах
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
JaxAdam
@JaxAdam
Студент, обучаюсь верстке, стажируясь
Секции сделать относительными и давать им большие паддинги и по разному чтобы друг на друга не лезли. Так же нужно регулировать всоту секции по ширине экрана, чтобы было адаптивным. Именно фоновое изображение задавать отдельно а не как фоновое. И вообще еденицы измерения 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;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы