Позиционирование текста в flex блоке

Question

Всем добрый вечер!

Пытаюсь реализовать данный макет по обучению.

У меня недопонимание заключается в позиционировании текста справа. Я данный участок сайта сделал Grid'ом. Фото помещается в первый блок, а текст во второй. Я сделал внутри правого блока grid'a flex. Но даже не могу понять как с его помощью реализовать так как на макете. У меня либо каждый элемент на новой строке, либо все на одной.

Мой код

.text_top {
  margin: 290px 331px 382px 64px;
  display: flex;
  white-space: nowrap;
  flex-wrap: wrap;
}

.first {
  font-size: 48px;
  font-weight: 900;
  margin-left: 30px;
}

.second {
  font-size: 32px;
  font-weight: 700;
  margin-left: 30px;
  white-space: nowrap;
}

.third {
  font-size: 32px;
  font-weight: 700;
}

<div class="top">
  <div class="man">
    <img src="./img/man.png" alt="man" class="man_image">
  </div>
  <div class="text_top">
    <img src="./img/Rectangle.png" alt="rect" class="rect">
    <p class="first">THE BRAND</p>
    <p class="second">OF LUXURIOUS</p>
    <p class="third">FASHION</p>
  </div>
</div>

Подскажите, пожалуйста, куда копать, чтоб правильно позиционировать данный текст.

Answer 1

Использование графических примитивов в виде картинок, вместо CSS-свойств, таких как border или background-image, может иметь несколько причин и преимуществ.

Эстетика и дизайн: Картинки могут предоставить более широкие возможности для дизайна и внешнего вида элемента. Они позволяют создавать более сложные и креативные визуальные эффекты, которые могут быть сложны или даже невозможны с использованием только CSS. Например, текстуры, градиенты, сложные узоры и изображения могут быть легко интегрированы в элемент через картинку.
Кросс-браузерная совместимость: Иногда CSS-свойства могут вести себя по-разному в разных браузерах, особенно если речь идет о старых версиях. Использование картинок может быть более надежным способом обеспечения совместимости с разными браузерами, поскольку картинки будут отображаться одинаково независимо от браузера.
Оптимизация производительности: В случае использования простых графических элементов, таких как прямоугольники или линии, в качестве картинок, можно добиться лучшей производительности при загрузке страницы. Картинка может быть оптимизирована и закэширована браузером, что ускоряет время загрузки страницы.

Теперь касательно разделения предложения на несколько абзацев. Это делается для улучшения читаемости и визуальной структурированности текста. Представьте, что каждый абзац - это отдельная мысль или аргумент. Разделение на абзацы делает текст более доступным для чтения, особенно когда речь идет о длинных текстах.

Наконец, относительно использования различных HTML-тегов для стилизации текста. Да, внутри одного абзаца можно использовать разные теги для изменения вида текста. Это помогает сделать текст более выразительным и понятным для читателя. Например, выделение определенных слов или фраз с помощью <em> или <strong> может подчеркнуть их важность или эмоциональную окраску. Однако важно использовать эти теги соответственно их семантике, чтобы не нарушать структуру документа и обеспечить доступность контента.

БЛОГ НА HUSL

Позиционирование текста в flex блоке

Ответы (1 шт):