Задать вопрос

dvorfalkash

Ответы

  • Верстка нестандартного фона?

    @dvorfalkash Автор вопроса
    Посидел, подумал, посмотрел комментарий "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 
      }
   }
}


    Получилось это

    612bb23c699c1309517094.png

    Мало-ли кому-то понадобится мой "код"
    Ответ написан
    Комментировать
    Комментировать