@pozhiloy_pauk

Как сверстать данный заголовок?

Всем привет, собственно вопрос: как сверстать заголовок, как в макете, с помощью smart-grid или другого способа?
Помогите, пожалуйста.
<section class="promo">
    <div class="container">
    <h1 class="promo__title promo-title">
        <span class="promo-title_light">Modern</span>>
        <span class="promo-title_small">And</span>
        <span class="promo-title_third">Unique</span>       
      </h1>
    </div>
</section>

.promo {
    min-height: 607px;
    background-color: #000000;
    padding: 164px 0 151px 0;
    .row {
        @include row-flex();
    }
    &-title {
        color: #ffffff;
        font-family: "Raleway";
        font-size: 120px;
        font-weight: 700;
        text-transform: uppercase;
        &_light {
            line-height: 90px;
            color: #fdce16;
            @include col();
            @include shift-left(2);
            @include size(6);
        }
        &_small {
            font-size: 60px;
            line-height: 50px;
            @include col();
            @include shift-left(6);
            @include size(2);
        }
        &_third {
            line-height: 90px;
            @include col();
            @include shift-left(5);
            @include size(6);
        }
    }
}

5f76c82cc1859220107382.png
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
wapster92
@wapster92 Куратор тега CSS
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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