Friends, I am in the middle of a work of academic bias, and I have the mission of transforming this map into virtual and responsive content.
ForthisIalreadyhaveadivsstructuregeneratedbyPhotoshopitself.Myquestionishowtoturnthisintoresponsivecontent?Iappreciateyourunderstanding.
<html><head><style>.mainMap{position:absolute;left:0px;top:0px;z-index:14;max-width:100%;}.Preenchimento6{background-image:url("img/part1.png");
position: absolute;
left: 697px;
top: 1203px;
width: 288px;
height: 316px;
z-index: 13;
background-repeat: no-repeat;
}
.Preenchimento2 {
background-image: url("img/part2.png");
position: absolute;
left: 709px;
top: 908px;
width: 438px;
height: 316px;
z-index: 12;
background-repeat: no-repeat;
}
.Preenchimento3 {
background-image: url("img/part3.png");
position: absolute;
left: 565px;
top: 512px;
width: 781px;
height: 717px;
z-index: 11;
background-repeat: no-repeat;
}
.Preenchimento1 {
background-image: url("img/part4.png");
position: absolute;
left: 1040px;
top: 614px;
width: 305px;
height: 261px;
z-index: 10;
background-repeat: no-repeat;
}
.Preenchimento4 {
background-image: url("img/part5.png");
position: absolute;
left: 514px;
top: 299px;
width: 226px;
height: 228px;
z-index: 9;
background-repeat: no-repeat;
}
.Preenchimento5 {
background-image: url("img/part6.png");
position: absolute;
left: 162px;
top: 333px;
width: 905px;
height: 583px;
z-index: 8;
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" href="css/materialize.min.css"></head>
<body>
<div class="mainMap container">
<div class="Preenchimento1"></div>
<div class="Preenchimento2"></div>
<div class="Preenchimento3"></div>
<div class="Preenchimento4"></div>
<div class="Preenchimento5"></div>
<div class="Preenchimento6"></div>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
</script>
</body>
</html>