Как сверстать такой блок в html?

Для создания блока в HTML, можно использовать несколько методов, но я расскажу о наиболее распространенном подходе.

Верстка блока может быть осуществлена с использованием элемента <div>. Вот пример кода, который поможет вам создать такой блок:

<div class="block">
  <h2 class="block-title">Заголовок блока</h2>
  <p class="block-description">Описание блока</p>
  <button class="block-button">Нажми меня</button>
</div>

В этом коде мы создаем контейнер с классом "block", а затем внутри него добавляем заголовок, описание и кнопку. Каждый элемент имеет свой собственный класс для применения стилей.

Теперь, чтобы стилизовать этот блок, вы можете использовать CSS. Вот пример CSS, который добавит стили к нашему блоку:

.block {
  background-color: #f1f1f1;
  padding: 20px;
  border-radius: 5px;
}

.block-title {
  font-size: 24px;
  margin-bottom: 10px;
}

.block-description {
  font-size: 16px;
  margin-bottom: 10px;
}

.block-button {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
}

.block-button:hover {
  background-color: #45a049;
}

В этом примере мы добавляем стили к каждому элементу внутри блока. У блока есть фоновый цвет, отступы, радиус границы и так далее. Заголовок, описание и кнопка имеют свои собственные стили, такие как размер шрифта, интервалы и цвета.

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

Надеюсь, это поможет вам сверстать блок в HTML. Если у вас возникнут еще вопросы, не стесняйтесь задавать!