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

    @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;
      }
    Ответ написан
    Комментировать
  • Некоторые слова из текста выпали, как сделать один общий текст?

    @makrazer
    Чтобы не ехал текст используй неблочный тег<span> вместо блочного <p>
    Из за того, что ты весь контент размещал с помощью position fixed у тебя и не скролится страница
    Ответ написан
    Комментировать