Как лучше верстать такие эффекты как в примере?

Для верстки эффектов, подобных тем, что вы видите в примере, лучше всего использовать CSS и JavaScript. Вот несколько шагов, которые помогут вам создать подобные эффекты:

1. Создание HTML структуры:
Для начала, вам нужно создать HTML структуру, включающую элементы, к которым вы хотите применить эффекты. Например, вы можете использовать div блоки для создания контейнеров с текстом.

2. Добавление CSS стилей:
Далее, вы можете добавить CSS стили для создания желаемых эффектов. Например, вы можете использовать свойства как background-color, color, font-size, padding, border и другие для стилизации ваших элементов.

3. Использование JavaScript:
Если вы хотите добавить анимированные эффекты, такие как изменение цвета при наведении курсора, вы можете использовать JavaScript. Например, вы можете использовать события как onmouseover и onmouseout для изменения стилей элементов при наведении курсора.

Пример использования JavaScript для изменения стилей элемента при наведении курсора:

document.getElementById("myElement").onmouseover = function() {
  this.style.backgroundColor = "blue";
  this.style.color = "white";
};
 
document.getElementById("myElement").onmouseout = function() {
  this.style.backgroundColor = "white";
  this.style.color = "black";
};

4. Тестирование и настройка:
После того как вы добавили стили и скрипты, важно протестировать вашу верстку в различных браузерах, чтобы убедиться, что все работает корректно. При необходимости, вы можете вносить коррективы в CSS и JavaScript код.

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