Задать вопрос
@Svyat-hulek
человек
css

Декор experts__decor не хочет скрываться под experts__statistic. Как сделать правильно?

<section class="experts">
        <div class="experts__statistics">
          <div class="experts__body">
            <div class="experts__number">2m</div>
            <div class="experts__value">Users</div>
          </div>
          <div class="experts__body">
            <div class="experts__number">78</div>
            <div class="experts__value">Countries</div>
          </div>
          <div class="experts__body">
            <div class="experts__number">10.000+</div>
            <div class="experts__value">Medical experts</div>
          </div>
          <div class="experts__decor experts__decor_one"></div>
          <div class="experts__decor experts__decor_two"></div>
          <div class="experts__decor experts__decor_three"></div>
        </div>
        <div class="container">
          <div class="experts__block">
            <div class="experts__title">Talk to<span>experts.</span></div>
            <div class="experts__text">Book appointments or submit queries into thousands of forums concerning health
              issues and prevention against noval Corona Virus.</div>
            <div class="experts__button"><a href="" class="button">Features</a></div>
          </div>
          <div class="experts__img"><img src="./img/COroNA/Group 26.png" alt=""></div>
        </div>
      </section>


.experts {
  background: #fafbfd;
  &__statistics {
    position: relative;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
    height: 117px;
    width: 654px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 2px 24px 0px rgba(88, 126, 236, 0.15);
    margin-bottom: 79.07px;
  }
  &__decor {
    z-index: -1;
    border-radius: 30px;
    background: #ec5863;
    &_one {
      position: absolute;
      top: 84.5px;
      left: -28px;
      height: 66px;
      width: 66px;
      transform: rotate(45deg);
      border-radius: 16px;
    }
    &_two {
      position: absolute;
      top: -35px;
      left: 200px;
      height: 97px;
      width: 97px;
      transform: rotate(105deg);
    }
    &_three {
      position: absolute;
      top: 0px;
      left: 590px;
      width: 127.467px;
      height: 127.467px;
      transform: rotate(-30deg);
    }
  }
  &__number {
    color: #ec5863;
    font-size: 36px;
    letter-spacing: 5.04px;
    font-family: Rubik-Bold;
    font-weight: 700;
    text-align: center;
  }
  &__value {
    color: #000;
    text-align: center;
    letter-spacing: 4.07px;
    font-family: Rubik-Bold;
    font-size: 11px;
    font-weight: 700;
  }
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &__block {
    margin-right: 104.83px;
  }
  &__title {
    color: #000;
    font-family: Rubik-bold;
    font-size: 44px;
    font-style: normal;
    font-weight: 700;
    line-height: 126%;
    span {
      color: #587eec;
    }
    margin-bottom: 12.07px;
  }
  &__text {
    color: #616161;
    font-family: Rubik-Regular;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 138.5%;
    letter-spacing: 0.96px;
    margin-bottom: 24px;
  }
  margin-bottom: 195.59px;
}
  • Вопрос задан
  • 74 просмотра
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ответы на вопрос 1
@makrazer
не знаю пойдёт или нет, но вот:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <section class="experts">
        <div class="experts__statistics">
            <div class="experts__bodies">
                <div class="experts__body">
                    <div class="experts__number">2m</div>
                    <div class="experts__value">Users</div>
                </div>
                <div class="experts__body">
                    <div class="experts__number">78</div>
                    <div class="experts__value">Countries</div>
                </div>
                <div class="experts__body">
                    <div class="experts__number">10.000+</div>
                    <div class="experts__value">Medical experts</div>
                </div>
            </div>
            <div class="experts__decor-items">
                <div class="experts__decor experts__decor_one"></div>
                <div class="experts__decor experts__decor_two"></div>
                <div class="experts__decor experts__decor_three"></div>
            </div>
        </div>
        <div class="container">
            <div class="experts__block">
                <div class="experts__title">Talk to<span> experts.</span></div>
                <div class="experts__text">Book appointments or submit queries into thousands of forums concerning
                    health
                    issues and prevention against noval Corona Virus.</div>
                <div class="experts__button"><a href="" class="button">Features</a></div>
            </div>
            <div class="experts__img"><img src="./img/COroNA/Group 26.png" alt=""></div>
        </div>
    </section>
</body>
</html>


.experts {
    background: #fafbfd;
    &__statistics {
      position: relative;
      top: 0;
      left: 0;
      margin: 0 auto;
      height: 117px;
      width: 654px;
      margin-bottom: 79.07px;
    }
    &__bodies {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      height: 100%;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0px 2px 24px 0px rgba(88, 126, 236, 0.15);
      position: relative;
      z-index: 1;
    }
    &__decor-items {
      position: relative;
      top: -100%;
      z-index: 0;
    }
    &__decor {
      border-radius: 30px;
      background: #ec5863;
      &_one {
        position: absolute;
        top: 84.5px;
        left: -28px;
        height: 66px;
        width: 66px;
        transform: rotate(45deg);
        border-radius: 16px;
      }
      &_two {
        position: absolute;
        top: -35px;
        left: 200px;
        height: 97px;
        width: 97px;
        transform: rotate(105deg);
      }
      &_three {
        position: absolute;
        top: 0px;
        left: 590px;
        width: 127.467px;
        height: 127.467px;
        transform: rotate(-30deg);
      }
    }
    &__number {
      color: #ec5863;
      font-size: 36px;
      letter-spacing: 5.04px;
      font-family: Rubik-Bold;
      font-weight: 700;
      text-align: center;
    }
    &__value {
      color: #000;
      text-align: center;
      letter-spacing: 4.07px;
      font-family: Rubik-Bold;
      font-size: 11px;
      font-weight: 700;
    }
    .container {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__block {
      margin-right: 104.83px;
    }
    &__title {
      color: #000;
      font-family: Rubik-bold;
      font-size: 44px;
      font-style: normal;
      font-weight: 700;
      line-height: 126%;
      span {
        color: #587eec;
      }
      margin-bottom: 12.07px;
    }
    &__text {
      color: #616161;
      font-family: Rubik-Regular;
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: 138.5%;
      letter-spacing: 0.96px;
      margin-bottom: 24px;
    }
    margin-bottom: 195.59px;
  }
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Frontend разработчик
Базис-Центр • Коломна
от 30 000 до 70 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка приложения и скриптов на python
04 мая 2024, в 17:58
10000 руб./за проект
Разработать 3Д модель сверла в NX10
04 мая 2024, в 17:40
1000 руб./за проект
MiniApp для телеграмм на React+Redux
04 мая 2024, в 17:35
150000 руб./за проект
Ещё заказы