File: //proc/self/cwd/raquel/themes/web/views/map.php
<div class="section m-0 bg-color dark">
<div class="container clearfix p-5 p-md-2">
<div class="row mb-5 align-items-center">
<div class="col-lg-4 col-md-4">
<div class="heading-block mt-md-3 mt-0">
<h3 class=" nott ls0 color-2">Onde Atuamos</h3>
<p></p>
</div>
<div class="row">
<div class="col-12">
<p class="font-medium2">Regiões onde você conta com a Mantovani</p>
</div>
</div>
</div>
<div class="col-lg-8 col-md-8">
<div id="hotspot-img" class="hotspot-img mt-2 responsive-hotspot-wrap">
<img src="<?= url("shared/img/map1.png")?>" class="img-responsive" alt="Image">
<!-- Circle #1 -->
<a href="">
<div class="hot-spot" data-x="1370" data-y="204">
<div class="circle"></div>
<div class="tooltip"><p>Tucuruvi</p></div>
</div>
</a>
<!-- Circle #2 -->
<a href="">
<div class="hot-spot" data-x="1203" data-y="366">
<div class="circle"></div>
<div class="tooltip"><p>Santana</p></div>
</div>
</a>
<!-- Circle #3 -->
<a href="">
<div class="hot-spot" data-x="1062" data-y="300">
<div class="circle"></div>
<div class="tooltip"><p>Casa Verde</p></div>
</div>
</a>
<!-- Circle #4 -->
<a href="">
<div class="hot-spot" data-x="1184" data-y="500">
<div class="circle"></div>
<div class="tooltip"><p>Bom Retiro</p></div>
</div>
</a>
<!-- Circle #5 -->
<a href="">
<div class="hot-spot" data-x="1076" data-y="490">
<div class="circle"></div>
<div class="tooltip"><p>Santa Cecília</p></div>
</div>
</a>
<!-- Circle-->
<a href="">
<div class="hot-spot" data-x="973" data-y="477">
<div class="circle"></div>
<div class="tooltip"><p>Barra Funda</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="930" data-y="575">
<div class="circle"></div>
<div class="tooltip"><p>Perdizes</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="769" data-y="643">
<div class="circle"></div>
<div class="tooltip"><p>Alto de Pinheiros</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="615" data-y="539">
<div class="circle"></div>
<div class="tooltip"><p>Vila Leopoldina</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1140" data-y="608">
<div class="circle"></div>
<div class="tooltip"><p>República</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1190" data-y="643">
<div class="circle"></div>
<div class="tooltip"><p>Sé</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1052" data-y="602">
<div class="circle"></div>
<div class="tooltip"><p>Consolação</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1121" data-y="703">
<div class="circle"></div>
<div class="tooltip"><p>Vela Vista</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1198" data-y="704">
<div class="circle"></div>
<div class="tooltip"><p>Liberdade</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="990" data-y="715">
<div class="circle"></div>
<div class="tooltip"><p>Jardim Paulista</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="875" data-y="692">
<div class="circle"></div>
<div class="tooltip"><p>Pinheiros</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="762" data-y="962">
<div class="circle"></div>
<div class="tooltip"><p>Morumbi</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="658" data-y="714">
<div class="circle"></div>
<div class="tooltip"><p>Butantã</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="895" data-y="935">
<div class="circle"></div>
<div class="tooltip"><p>Itaim Bibi</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1036" data-y="885">
<div class="circle"></div>
<div class="tooltip"><p>Moema</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="973" data-y="1087">
<div class="circle"></div>
<div class="tooltip"><p>Campo Belo</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1131" data-y="1199">
<div class="circle"></div>
<div class="tooltip"><p>Jabaquara</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1148" data-y="1016">
<div class="circle"></div>
<div class="tooltip"><p>Saúde</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1268" data-y="1089">
<div class="circle"></div>
<div class="tooltip"><p>Cursino</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1395" data-y="1151">
<div class="circle"></div>
<div class="tooltip"><p>Sacomã</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1168" data-y="885">
<div class="circle"></div>
<div class="tooltip"><p>Vila Mariana</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1354" data-y="858">
<div class="circle"></div>
<div class="tooltip"><p>Ipiranga</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1410" data-y="706">
<div class="circle"></div>
<div class="tooltip"><p>Mooca</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1292" data-y="682">
<div class="circle"></div>
<div class="tooltip"><p>Cambuci</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1284" data-y="609">
<div class="circle"></div>
<div class="tooltip"><p>Brás</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1310" data-y="489">
<div class="circle"></div>
<div class="tooltip"><p>Pari</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1390" data-y="510">
<div class="circle"></div>
<div class="tooltip"><p>Belém</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1573" data-y="600">
<div class="circle"></div>
<div class="tooltip"><p>Tatuapé</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="1565" data-y="768">
<div class="circle"></div>
<div class="tooltip"><p>Água Rasa</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="551" data-y="629">
<div class="circle"></div>
<div class="tooltip"><p>Jaguaré</p></div>
</div>
</a>
<!-- Circle -->
<a href="">
<div class="hot-spot" data-x="780" data-y="395">
<div class="circle"></div>
<div class="tooltip"><p>Lapa</p></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>