Я не уверен, почему эта часть кажется вам сложной, но если вы говорите о том, как создавать круги с помощью html / css3, то у меня есть простой ответ. Просто сделайте ваши точки с радиусом границы, равным половине высоты / ширины.
<span class="dot dot1"></span>
<span class="dot dot2"></span>
<span class="dot dot3"></span>
<span class="dot dot4"></span>
...
.dot {
display: inline-block;
width:12px;height:12px;
border-radius:6px;
background-color:#8999A6;
}
.page4 .dot4 {
background-color: white;
}
Если вы не можете понять, что делать дальше, вам в основном понадобится кто-то, кто сделает все за вас, но я дам вам подсказку. Где-то выше, вы собираетесь установить класс, указывающий активную страницу. Это позволит вам запускать правила CSS, которые могут сказать, какая совпадающая точка активна, и изменить bg на белый.