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

Question

[AndrRybak]

Верстаю сайт по макету и не могу понять как сверстать заголовок.

Я решил, что фраза "Unlock Your Creative Potential with Online Design and Development Courses." является заголовком, но не получается его сверстать.

Накидал вот такую разметку в html(названия классов пока без особого смысла)

<h1 class="hero__heading"><span class="hero__span-1"><span class="hero__span-2 hero__span-2--icon">Unlock</span> Your Creative Potential</span> with Online Design and Development Courses.</h1>

И вот такой css код

.hero {
  background-color: #f7f7f8;

  &__heading {
    margin: 0;
  }

  &__span-1 {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid #f1f1f3;
    border-radius: 8px;
    padding: 12px 24px 12px 12px;
    background-color: #fcfcfd;
  }

  &__span-2 {
    display: flex;
    align-items: center;
    color: #ff9500;

    &::before {
      content: "";
      display: inline-block;
      margin-right: 10px;
      width: 48px;
      height: 48px;
      background-position: center;
      background-repeat: no-repeat;
    }

    &--icon {
      &::before {
        background-image: url("../img/heading-icon.svg");
      }
    }
  }
}

Но тогда между Unlock и Your нет отступа. Мне кажется, что я сделал не правильно и слишком намудрил. Если кто-то сможет помочь с кодом, то буду благодарен)

Comments

[historydev]

Главное до scss добрался, а сверстать заголовок не может.

#КУРСЫ

[AndrRybak]

historydev, При чем тут курсы и scss? Я учусь по документации и роликам на ютубе. Сам никогда не сталкивался с тем, что ранее не верстал?

[historydev]

AndrRybak,

Дело не в том, что ты с этим столкнулся, а в том что ты привык переписывать код с ютубчиков.

Самое время погуглить, покопаться самому, а не писать вопрос после первой попытки, если это вообще можно назвать попыткой.

Выделение слова в предложении цветом, это наверное самое первое что приходит на ум начинающему верстальщику.

https://htmlbook.ru/faq/kak-vydelit-drugim-tsvetom...

А картинку можно и нужно вставить через обычный тег img.

Если кто-то сможет помочь с кодом, то буду благодарен)

[AndrRybak]

historydev, Вставлять декоративную картинку в img, спасибо. Мне понятен твой профессионализм.

Answer 1

[Сергей delphinpro]

&__span-1 {
    display: flex;
    gap: 1em; /* добавить промежуток между флекс-ячейками */

Но там не нужен флекс. Вообще ничего не надо. Просто для &__span-2 добавить другой цвет и иконку. Вы слишком перемудрили.

Comments

[AndrRybak]

Спасибо, буду пробовать. Флекс добавил, потому что иконка не вставала по центру.

Answer 2

[UthvfyV]

.hero {
background-color: #f7f7f8;
margin-right: 10px;
}
h1 p {
width: 100%;
}

<h1><p><span class="hero">Unlock</span> Your Creative Potential</span><p>
<p>with Online Design and Development Courses.<p></h1>