Как спозиционировать заголовок согласно макету?

Question

[Фёдор]

Приветствую! Возник неудобный момент. Не получатеся спозиционировать элемент согласно макету. Из собственных решений было - добавление отдельного класса последнему элементу. Использование свойства plan-action__title > h3:nth-child(3). Собственно это не дало ни каких результатов. Что я делаю не так? Ниже представлены скриншоты "ожидания/реальности" ​и кусочек кода.

Макет:

Реальность:

<div class="plan-action">
                    <div class="plan-action__title">
                        <span>
                            03
                        </span>
                        <h3>Alivio</h3>
                    </div>
                    <div class="plan-action__content">
                        <p>
                            Now you are aware, and have a way to manage and overcome your own stress.
                            What are you waiting for? Alivio today!
                        </p>
                    </div>
                    <div class="plan-action__image">
                        <img src="./assets/image/content/girl.jpg" alt="">
                    </div>
                </div>

.container__plan-action {
    display: flex;
}

.plan-action__title {
    position: relative;
    flex: 0 0 33%;
}

.plan-action__title > span {
    font: 400 150px/1.95 'Georgia', sans-serif;
    color: rgba(1, 153, 109, 0.2);
}

.plan-action__title > h3{
    position: absolute;
    top: 170px;
    left: 80px;
    font: 700 30px/1.5 'Georgia',sans-serif;
    color: #000000;
}

Comments

[Ankhena]

По-моему, заголовок стоит по центру. А если нет, то просто задайте нужный отступ.
А цифры абсолютом. Или гридами.

Весь макет не видно, но 03 намекает на то, что есть 01 и 02.
Они очень удобно делаются псевдоэлементами и css counters. И в разметке отсутствуют.
Если номера важны для восприятия контента с помощью читалок, то все это складывается в нумерованный список (нативные номера скрываются).

Тогда обертка plan-action__title скорее всего лишняя.

font: 400 150px/1.95 'Georgia', sans-serif;

Не лениво же вам каждый раз про Georgia писать.

Использование свойства plan-action__title > h3:nth-child(3) Собственно это не дало ни каких результатов.

Не удивительно, что не дало. В разметке h3 является вторым ребенком plan-action__title, а не третьим.

[Фёдор]

Ankhena,

Они очень удобно делаются псевдоэлементами и css counters. И в разметке отсутствуют.

Обязательно попробую это свойство. Ранее не пользовался им. Спасибо.

Если номера важны для восприятия контента с помощью читалок, то все это складывается в нумерованный список (нативные номера скрываются).

Ну они тут имеют скорее имееют декоративный эффект. Какими средствами можно проверять свою вёрстку для читалок?

Не лениво же вам каждый раз про Georgia писать.

Это простенький лэндинг, который верстается для поддержания навыков. Препроцессор тут будет лишним. (:

Проблема решилась добавлением отдельного класса со свойством margin

[Ankhena]

Фёдор,

Это простенький лэндинг, который верстается для поддержания навыков. Препроцессор тут будет лишним. (:

Препроцессор не при чем.

Ну они тут имеют скорее имееют декоративный эффект.

Тогда просто псевдоэлементы и counters, без <ol>

Какими средствами можно проверять свою вёрстку для читалок?

Читалками?
Также можете попробовать нативными средствами Edge, посмотреть что говорят различные расширения для браузера для проверки доступности (например, WAVE) и т.д.

[Фёдор]

Ankhena,

Препроцессор не при чем.

Тогда о чём шла речь?

[Ankhena]

Фёдор, например, задать всему .plan-action__title

Переменные, кстати, есть не только в препроцессоре, но и в нативном CSS, называются кастомными свойствами. Погуглите. Очень крутая и удобная штука.

[Фёдор]

Ankhena, Спасибо за совет. В очередной раз получаю от вас действительно полезные советы. Огромная благодарность и плюсик в карму.

Answer 1

[キム ファイブプラス]

Курите - https://css-tricks.com/snippets/css/complete-guide-grid