Посидел, подумал, посмотрел комментарий "Ankhena" ,решил была не была и написал такой код:
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sifte_2</title>
<link rel="stylesheet" href="/css/Style.css">
</head>
<body>
<div class="wrapper">
<head>
<div class="header">
<div class="container">
<div class="header__flex">
<div class="header__logo">
<img src="/img/logo.png" alt="">
</div>
<ul class="header__main">
<li class="header__item">Каталог товаров</li>
<li class="header__item">Блог</li>
<li class="header__item">Контакты</li>
</ul>
<div class="header__icon">
<img class="header__icon-item" src="/img/search.svg" alt="">
<img class="header__icon-item" src="/img/shop.svg" alt="">
<img class="header__icon-item" src="/img/login.svg" alt="">
</div>
</div>
</div>
</div>
</head>
<main>
<div class="slider">
<div class="container">
<div class="slider__body">
<div class="slider__title">Свежеобжаренный кофе</div>
<div class="slider__text">
<p>Кофе Калининградской обжарки из разных стран произрастания с доставкой на дом. </p>
<p>Мы обжариваем кофе <span>каждые выходные.</span></p>
</div>
<a href="#" class="slider__btn">Посмотреть каталог</a>
<div class="slider__cup-coffee">
<img class="slider__coffee" src="/img/coffee.png" alt="">
<div class="slider__cup"></div>
</div>
</div>
</div>
</div>
</main>
</div>
</body>
Scss
.wrapper{
font-family: 'Gilroy';
width: 100%;
}
<b>Scss</b>
.container {
max-width: 1716px;
padding: 0 20px;
margin: 0 auto;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100vw;
z-index: 50;
&__flex {
display: flex;
align-items: center;
height: 160px;
}
&__logo {
flex: 0 1 300px;
}
&__main {
justify-self: center;
flex: 1 1 auto;
display: flex;
justify-content: center;
}
&__item {
font-family: 'Gilroy', sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 29px;
letter-spacing: 0em;
margin: 0 50px;
}
&__icon {
flex: 0 1 300px;
}
&__icon-item {
margin: 0 25px;
}
}
.slider {
padding-top: calc(14.7vw);
position: relative;
text-align: left;
z-index: 2;
width: 100vw;
&::after{
content: '';
position: absolute;
background: url(/img/fon.svg)left/cover no-repeat;
width: calc(40vw);
height: calc(85vw);
right: 0;
top: 0;
z-index: -3;
}
&__body {
position: relative;
}
&__title {
font-family: 'Gilroy';
margin: 0 0 60px;
font-weight: 900;
font-size: 80px;
line-height: 100px;
}
&__text {
width: 660px;
font-weight: 500;
font-size: 25px;
line-height: 130%;
p{
margin: 0 0 30px 0;
}
span{
font-weight: 700;
}
margin-bottom: 90px;
}
&__btn {
color: wheat;
background-color: #F9B300;
padding: 22px 56px;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 36px;
}
&__cup-coffee {
position: absolute;
top: -10px;
left: 45vw;
z-index: -2;
}
&__cup-coffee-body {
position: relative;
}
&__coffee {
width: calc(50vw);
max-width: 1000px;
height: calc(40vw);
max-height: 800px;
}
&__cup{
position: absolute;
width: 90%;
height: 90%;
left: 5%;
top: -5%;
background: url(/img/cup.png)center/ contain no-repeat;
z-index: 1;
}
}
@media(min-width: 1920px){
.slider {
padding-top: 220px;
&::after{
height: calc(85vw - ((100vw - 1716px)/2));
width: calc(50vw - ((100vw - 1716px)/2));
}
&__cup-coffee {
left: calc(686px + ((100vw - 1716px)/2));
}
}
}
@media(max-width: 1582px){
.slider {
&__cup-coffee{
top: 100px
}
}
}
Получилось это
Мало-ли кому-то понадобится мой "код"
