[внимание! не выключайте компьютер: идёт загрузка оформления...]
[html]<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><style>:root {
--s6m: auto; /* отступ от левого края, auto - для центровки */
--shav1: 80px; /* ширина аватара */
--shav2: 80px; /* высота аватара */
--shclr: #4f4743; /* границы */
--shbg: rgba(255, 255, 255, 0.17); /* фон блока с текстом */
}
.ship6 {max-width:700px; /* ограничиваем ширину блока*/
position:relative; display:block; box-sizing:border-box; padding: 8px 0 0 0; margin: auto auto auto var(--s6m);}
.ship6 * {box-sizing:border-box;}
.ship6 .sh1 {margin: 18px auto 0px auto !important; padding:0px !important; display:grid; grid-template-columns: auto auto; align-items: start;}
.ship6 .sh1:nth-child(1) {margin-top: 0px !important;}
.ship6 .sh2 {display:grid; grid-template-columns: auto 1fr;}
.ship6 .sh2 {order:1; min-width:200px; min-height:100px;}
/* блок текста */
.ship6 .sh3 {order:2; text-align:justify; border: 1px solid var(--shclr); background:var(--shbg); padding:14px; line-height: 120%; font-size: 11px; min-height:64px; min-width:100px;}
/* аватар */
.ship6 .ava {order:1; display: block; object-fit: cover; object-position: 50% 50%; background-color:var(--shclr); border: 1px solid var(--shclr); outline: 1px solid var(--shclr); outline-offset:5px; margin:6px; width:var(--shav1); height:var(--shav2);}
/* никнейм */
.ship6 .ava2 {order:2; padding: 10px; min-width:90px; max-width:180px; font-size:10px;}
.ship6 .ava2 em {display:block; position:relative; border-bottom: 1px solid var(--shclr); margin: 0px -10px 5px -10px; padding: 0 10px 5px 10px; font-style:normal !important; font-weight: 600; font-size: 16px; text-transform: uppercase; font-family: 'Roboto Condensed', Tahoma, sans-serif;}
/* четные блоки */
.ship6 .ava2 em:after {display:block; content:""; background:var(--shclr); border-radius:50%; width:6px; height:6px; position: absolute; margin: 3px -3px auto auto !important; right: 0px;} /* shipovnik */
.ship6 .sh1:nth-child(2n) .sh3 {order:-1;}
.ship6 .sh1:nth-child(2n) .ava2 {order:-1; text-align:right;}
.ship6 .sh1:nth-child(2n) .ava2 em:after {margin: 3px auto auto -3px !important; left: 0px;}
.ship6 .sh1:nth-child(2n) .sh2 {grid-template-columns: 1fr auto;}
</style>[/html]
<!--HTML-->
<style type="text/css">
.walden { width: 400px; height: 249px; -webkit-perspective: 1000; -moz-perspective: 1000; -o-perspective: 1000; -ms-perspective: 1000; }
.henry {width: 420x; height: 220px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d;-ms-transform-style: preserve-3d; }
.walden:hover .henry {-webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg);-ms-transform: rotateY(180deg); }
.emerson {overflow: hidden; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute;}
.waldo {overflow: hidden; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); opacity: 0; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; position: absolute; width: 400px; height: 200px; padding: 10px; background-color: #4f4743; overflow: auto; float: left; }
.walden:hover .waldo {-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; opacity: 1; background-color: #4f4743;}
</style>
<link href='http://fonts.googleapis.com/css?family=Buda:300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>
<center>
<div class="walden"><div class="henry"><div class="emerson"><div style="width:400px; height: 200px; background-image: url(https://forumupload.ru/uploads/001b/2c/35/2923/73787.png); border: 10px solid #4f4743;"></div></div><div class="waldo"><div style="width: 150px; height: 200px; position: relative; float: left;"><img src="https://forumupload.ru/uploads/001b/2c/35/2923/806566.png"></div><div style="height: 190px; width: 215px; border: 5px solid #70473e; background-color: #EBF2EE; position: relative; float: right;"><div style="width: 195px; height: 170px; padding: 12px; text-align: justify; color: #432529; font-family: cuprum; font-size: 11px; line-height: 98%;overflow: auto;">
<div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">
ФАНДОМ
</div>
<br>
<a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><br>
<br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">
АЛЬТЕРНАТИВА
</div>
<br>
<a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><br>
<br><br><div style="width: 180px; background-color: #4c0c0c; padding: 6px; text-align: center; font-family: calibri; font-size: 15px; text-transform: uppercase; line-height: 100%; color: #fff;">
БАНГКОК [АУ]
</div>
<br>
<a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><a href="ссылка на эпизод" target="_blank">Название эпизода</a>
<br><br>
</div>
</div>
</div></div>
</div></div>
</center>шаблон добавления эпизода в хронологию:
Код:<a href="ссылка на эпизод" target="_blank">Название эпизода</a>
Отредактировано Erwin Smith (21.09.24 20:30:02)
