Вот вроде бы красиво, начинаю сжимать экран или менять масштаб браузера всё начинает ехать. А если точнее, то масштабированию не поддаётся линия. Нужно что бы синий указатель попадал в центр овала с названием, который при масштабировании окна браузера улетает вниз.
В ...... идёт наполнение тех блоков
<div class="mid">
<div class="left">
<h1>Подборка лучших бесплатных нейросетей-художников за этот год</h1>
<div class="Common_block" style="margin-top: 50%;">
<img class="Bookmark2" src="Bookmark1.png">
<div class="Indoor_unit">
.....
</div>
</div>
<div class="Common_block">
<img class="Bookmark2" src="Bookmark1.png">
<div class="Indoor_unit">
.....
</div>
</div>
</div>
<div class="mid_mid">
<p class="name1">ruDALL-E</p>
<div class="line" style="height: 126%;"></div>
<p class="name1">Starryai</p>
<div class="line" style="height: 425px;"></div>
<p class="name1">Midjourney</p>
<div class="line" style="height: 505px;"></div>
<p class="name1">Ostagram</p>
<div class="line" style="height: 570px;"></div>
<p class="name1">Different Dimension Me</p>
</div>
<div class="right">
<div class="Common_block" style="margin-top: 0;">
<img class="Bookmark2" src="Bookmark1.png">
<div class="Indoor_unit">
.....
</div>
</div>
<div class="Common_block">
<img class="Bookmark2" src="Bookmark1.png">
<div class="Indoor_unit">
.....
</div>
</div>
<div class="Common_block">
<img class="Bookmark2" src="Bookmark1.png">
<div class="Indoor_unit">
.....
</div>
</div>
</div>
.name1 {
width: 100%;
height: auto;
margin: 0 auto;
border: thick solid #FFFFFF;
background-color: #4F4A4A;
border-radius: 40px;
text-align: center;
border-width: 2px;
z-index: 2;
}
.line {
padding-left: 50%;
}
.line:before {
content: " ";
background: #FFFFFF;
width: 2px;
height: 100%;
float: left;
margin-left: 3%;
z-index: 1;
}
.left {
float: left;
width: 44%;
height: 400px;
}
.mid_mid {
width: 8%;
height: 400px;
z-index: 1;
padding-top: 1%;
}
.right {
width: 44%;
height: 400px;
}
.Common_block {
float: left;
margin-top: 10%;
}
.Bookmark1 {
position: absolute;
pointer-events: none;
margin-left: 1%;
width: 10%;
height: auto;
z-index: 999;
}
