HTML CSS

RESPONSIVE CIRCLE WITH TEXT IN HTML CSS

<div class="res-circle">    <div class="circle-txt">Foo!</div> </div>

.res-circle {   PERCENTAGE WIDTH   width: 20%;   TURN INTO CIRCLE   border-radius: 50%;   BACKGROUND COLOR   background: #bcd6ff;   NECESSARY TO POSITION TEXT   line-height: 0; position: relative; }

MATCH HEIGHT TO WIDTH .res-circle::after {   content: ""; display: block;   padding-bottom: 100%;  }

CENTER TEXT IN CIRCLE .circle-txt {   position: absolute;   bottom: 50%; width: 100%;   text-align: center; }