Не могу разобраться, как сделать верстку этой части со словами "Пиши!" "Вдохновляй!" и т.д

Question

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

Answer 1

в css для круга напиши:

z-index: 1;

а для текста:

z-index: 99;

Answer 2

Круг можно отобразить фоном используя radial-gradient(), и далее размещать текст любым удобным способом:

.block {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 34px 88px;
  height: 420px; width: 538px;
  
  background: radial-gradient(circle at 50% 50%, #fbfddd 0 140px, #0000 142px), #fffeec;
}

.text {
  display: inline-block;
  font: normal 27px/1em sans-serif;
  letter-spacing: 3.5px;
  text-align: center;
}
.text:nth-of-type(1) { color: #f38a7a; width: 100%; }
.text:nth-of-type(2) { color: #6cd6f1; }
.text:nth-of-type(3) { color: #efc394; }
.text:nth-of-type(4) { color: #db7151; width: 100%; font: bold 29px/1em sans-serif; letter-spacing: 2.7px; }

<div class="block">
  <div class="text">Напиши!</div>
  <div class="text">Прочти!</div>
  <div class="text">Вдохновись!</div>
  <div class="text">Вдохновляй!</div>
</div>

БЛОГ НА HUSL

Не могу разобраться, как сделать верстку этой части со словами "Пиши!" "Вдохновляй!" и т.д

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