[html]<style>
.siil {
background: url(https://i.imgur.com/mXwNxKf.png);
border-radius: 30px;
overflow: hidden;
width: 700px!important;
height: 570px;
border: 1px solid #eff1f1;
margin: 10px auto;
}
.sil { background: #fbfbfb;
border-radius: 20px;
overflow: hidden;
width: 650px!important;
height: 500px;
margin: 35px auto;
color: #000;
font-family: jost;
}
.silsv { display: flex;
height: 310px;
margin-top: 137px;
align-items: center;
justify-content: center;
}
.silpages { display:flex; justify-content:center; align-items:center; flex-direction:column;}
.silpages { width: 40px;
align-self: stretch;
margin: 20px;
justify-content: space-between;
margin-top: 110px;
}
.silpages a, .silpages label {font-size: 8px;
border: 1px solid #eff1f1;
height: 30px;
width: 86px;
margin-top: -1-0px;
line-height: 30px;
text-align: center;
text-decoration: none;
color: #000;
box-sizing: border-box;
letter-spacing: 1px;
font-weight: 600;
font-family: jost;
text-transform: uppercase;
cursor: pointer;
border-radius: 0px 10px 10px 0px;
}
.siltit { height: 38px;
border-bottom: 1px solid #eeeeee99;
text-align: center;
color: #000000;
text-shadow: 1px 1px rgba(0,0,0,0.05), -1px 1px rgba(0,0,0,0.05), 1px -1px rgba(0,0,0,0.05), -1px -1px rgba(0,0,0,0.05), 1px 0 rgba(0,0,0,0.05), 0 1px rgba(0,0,0,0.05), -1px 0 rgba(0,0,0,0.05), 0 -1px rgba(0,0,0,0.05);
font: 12px 'jost';
font-weight: 800;
text-transform: uppercase;
line-height: 38px;
letter-spacing: 2px;
}
.silv2 { width: 670px;}
.siltem { flex-grow: 1; align-self: stretch; margin: 20px; border-radius: 10px; overflow: hidden; position: relative;}
.siltem>div { position: absolute; width: 100%; height: 100%; box-sizing: border-box; padding-right: 5px; overflow: auto; border-radius: 10px; top: 100%; border: 1px solid #eff1f1; transition: ease .5s; background: #fbfbfb; text-align: center; }
.siltem>div.page1, .siltem>div.page3 { overflow-y: auto; display: grid; padding-right: 0; line-height: 36px; align-content: stretch; align-items: center; justify-items: center;}
.siltem>div.page2, .siltem>div.page4 { overflow-y: auto; display: block; padding: 10px;}
.siltem>div.page2 strong, .siltem>div.page4 strong { font-size: 12px; text-align: center; text-transform: uppercase; font-family: jost; display: flex; /* width: fit-content; */ border-radius: 15px; padding: 2px 10px; background: white; margin-top: 8px; margin-bottom: 8px; justify-content: space-around;}
.sil input, .sil br { display:none; }
.sil input#page1:checked ~ .silsv .page1, .sil input#page2:checked ~ .silsv .page2, .sil input#page3:checked ~ .silsv .page3, .sil input#page4:checked ~ .silsv .page4 { top:0; z-index:9;}
.sil input#page1:checked ~ .silsv label[for="page1"], .sil input#page2:checked ~ .silsv label[for="page2"], .sil input#page3:checked ~ .silsv label[for="page3"], .sil input#page4:checked ~ .silsv label[for="page4"] { color: #000000!important;
background: #ffffff;
}
.silv2 .siltit { text-align: center;}
.silv2 .page1, .silv2 .page3 { text-align:center; }
.texts {
color: #000;
position: absolute;
display: grid;
margin-top: 25px;
z-index: 3;
text-align: justify;
width: 575px;
margin-left: 22px;
border: 1px solid #eff1f1;
padding: 15px;
border-radius: 10px;
}
.page2 img, .page4 img {
padding: 2px!important;
border-radius: 5px;
margin-bottom: 1px;
border: 1px solid #d9ebe136;
}
</style>
<div class="siil">
<div class="sil silv2">
<div class="siltit">магазин</div>
<div class="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mollis ipsum purus, ut facilisis eros blandit eu. Quisque fringilla iaculis pulvinar. Vivamus odio turpis, rhoncus eget nulla rhoncus, tempus ultrices dui. Maecenas aliquam rhoncus leo, ac mollis est egestas id. In vel elementum nulla. Quisque pharetra dapibus purus, non eleifend elit mollis id. Aliquam vel ligula nec nisl porta efficitur. Mauris vitae aliquet ante. Orci varius natoque penatibus</div>
<input type="radio" name="sil" id="page1" checked/>
<input type="radio" name="sil" id="page2"/>
<input type="radio" name="sil" id="page3"/>
<input type="radio" name="sil" id="page4"/>
<div class="silsv">
<div class="silpages">
<label for="page1">плашки</label>
<label for="page2">иконки</label>
<label for="page3">что-то</label>
<label for="page4">что-то</label>
</div>
<div class="siltem">
<div class="page1">
<table>
<tbody><tr>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
</tr>
</tbody></table>
</div>
<div class="page2">
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br><strong>ивентовые</strong>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br>
<strong>рейтинговые</strong><br>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
</div>
<div class="page3">
<table>
<tbody><tr>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
<td><img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"> <img src="https://i.imgur.com/ttW4fnG.png"></td>
</tr>
</tbody></table>
</div>
<div class="page4">
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br><strong>ивентовые</strong>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
<br><br>
<strong>рейтинговые</strong><br>
<img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif"> <img src="https://i.imgur.com/Odc8Mlo.gif">
</div>
</div>
</div>
</div>
</div>
[/html]