*
Отредактировано viv (2026-07-11 21:30:08)
luvlocket |
Привет, Гость! Войдите или зарегистрируйтесь.
*
Отредактировано viv (2026-07-11 21:30:08)
[html]<style>.ship11 {
--wd2: 550px; /* общая ширина блока */
--fh1: 1em; /* размер шрифта */
--hd1: 100px; /* высота аватара */
--wd1:80px; /* ширина аватара */
--wb1: #334451; /* цвет рамки */
background: rgba(255, 255, 255, 0.3); /* цвет фона */
margin: 10px auto;
display:block; box-sizing: border-box; overflow: hidden; padding: 20px; max-width: var(--wd2); font-size: var(--fh1); border: 3px solid var(--wb1); outline: 1px solid var(--wb1); outline-offset: 8px;}
.ship11 * {box-sizing: border-box;}
.pers {display: flex; flex-direction: row; align-items: flex-start; width: auto; box-sizing: border-box; margin: 10px auto 30px 24px !important;}
.pers:last-child {/*shipovnik*/ margin-bottom: 10px !important;}
.kart {display:inline-block; position:relative; margin-right: 40px !important;}
.us1, .us2 {position:absolute; z-index:+1; display: block; bottom: 12px; width:52px; height:28px; background: url(https://upforme.ru/uploads/001b/03/40/91/984540.png) 0% 0% no-repeat transparent;}
em.us1 {margin-left: calc(var(--wd1) / 2 + 25%) !important;}
em.us2 {right: calc(0px + var(--wd1) / 2 + 25%) !important; transform: rotateY(180deg);}
.ava {display:block; position: relative; box-sizing:border-box; width: var(--wd1); height: var(--hd1); padding:2px;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: #000;}
.ava em {display:block; width: auto; height: 100%; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); background: 50% 50% no-repeat #000; background-size:cover;}
.ship11 p {margin: 0px !important; padding: 0 !important;}
.nik1 {display: block; padding: 8px 0; font-family: BebasB, Tahoma, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 16px;}
.nik2 {display: block; padding: 0 0 8px; font-family: Tahoma, sans-serif; font-size: 10px; opacity: 0.7;}
@font-face {font-family: BebasB; src: url(https://forumstatic.ru/files/0018/62/a0/30681.ttf);}
</style><div class="ship11"><!-- START -->
<!------ ПЕРСОНАЖ 1 ------>
<div class="pers"><div class="kart"><em class="us1"></em><div class="ava">
<a href="ссылка"><em style="background-image: url(https://upforme.ru/uploads/001b/03/40/3/718212.png);"></em></a></div><em class="us2"></em></div><div><div class="nik1">
<a href="ссылка"> Имя Персонажа </a></div>
<div class="nik2"> Краткое описание </div>
Расширенное описание
</div></div>
<!------ ПЕРСОНАЖ 2 ------>
<div class="pers"><div class="kart"><em class="us1"></em><div class="ava">
<a href="ссылка"><em style="background-image: url(https://upforme.ru/uploads/001b/03/40/3/718212.png);"></em></a></div><em class="us2"></em></div><div><div class="nik1">
<a href="ссылка"> Имя Персонажа </a></div>
<div class="nik2"> Краткое описание </div>
Расширенное описание
</div></div>
<!-- END --></div>[/html]
[html]<link href="https://fonts.googleapis.com/css2?family=Oranienbaum&family=PT+Sans&display=swap" rel="stylesheet"><style>
.ship20 {
--bgsw: 800px; /* максимальная ширина блока */
--bgs1: #0f0f0f; /* фон общий*/
--sct1: #c0c0c0; /* цвет общего текста */
--sct1a: #69becc; /* цвет ccылок */
--szt: 1em; /* размер шрифта */
--pad2: 24px; /* отступ между эпизодами */
--pad1: 18px; /* отступ текста слева */
--pwt: 46px; /* ширина левого блока */
--bgs2: #1a666c; /* цвет границы*/
--bgs3: #0a343b; /* цвет ленты */
--sct3: #d6d6d6; /* текст ленты */
--sct2: #767676; /* цвет даты и участников */
--bgsa: #69becc; /* активный эпизод */
--bgsz: #0a3a41; /* завершенный эпизод */
--bgsnz: #1b1b1b; /* незавершенный эпизод */
}
.ship20 * {box-sizing: border-box; line-height: 140% !important;}
.ship20 {margin: auto 40px auto 0px; max-width: var(--bgsw); background: var(--bgs1); color: var(--sct1); font-size: var(--szt);}
.ship20 a {color: var(--sct1a) !important;}
.ship20 a:hover {filter: brightness(1.2);}
.ship20 p {margin: 0px auto 0px calc(var(--pad1) + var(--pwt)) !important; padding: 0 var(--pad2) var(--pad2) 0 !important; position: relative; text-align: justify;}
.ship20 p:before {content:' '; display: block; position: absolute; margin-left: calc(0px - var(--pad1) - var(--pwt)); height: 100%; width: var(--pwt); border-right: 1px solid var(--bgs2); }
/** эпизод **/
.ship20 p > a:first-child {display: block; padding: 4px 0 4px 0; font-size: 14px; font-weight: 400; font-style: italic; font-family: Georgia, Times New Roman, serif;}
/** маркеры shipovnik **/
.ship20 p > a.ep_a:before, .ship20 p > a.ep_z:before, .ship20 p > a.ep_nz:before {content: ''; display:block; position:absolute; transform: translate(-50%, 50%); width: 12px; height: 12px; margin-left: calc(0px - var(--pad1) - var(--pwt) / 2); border-radius: 50%;}
.ship20 p > a.ep_a:before {background: var(--bgsa);}
.ship20 p > a.ep_z:before {background: var(--bgsz);}
.ship20 p > a.ep_nz:before {background: var(--bgsnz);}
/** дата и участники **/
.ship20 em {display: block; padding: 0 0 6px 0; font-style: normal !important; color: var(--sct2); font-size: 11px; font-family: Tahoma, sans-serif;}
/** год или эпоха **/
.ship20 ht0 {display:block; position:relative; padding: 7px 30px; margin: 0px auto; color: var(--sct3); background: var(--bgs3); font-size: 15px; text-transform: uppercase; font-family: 'Oranienbaum', Tahoma, serif;}
.ship20 ht0:after {content:''; display: block; position: absolute; top: 0px; right: -29px; width: 30px; height: 100%; clip-path: polygon(0% 0%, 75% 0%, 30% 50%, 75% 100%, 0% 100%); background: var(--bgs3);}
.ship20 ht0 + p > a:first-child {padding-top: var(--pad2);}</style>
<div class="ship20">
<!--- START --->
<!----- ГОД ИЛИ ЭПОХА ----->
<ht0>Год или эпоха. Любой период</ht0>
<p><a class="ep_a" href="#">Активный эпизод</a>
<em>22.11.2022 // Участник 1 + Участник 2 + ...</em>
Мы все еще живем бок о бок с вами. <b>Мы</b> также травим <i>себя</i> сигаретами <s>и алкоголем</s>, ловим такси по пути на работу, валимся с ног от <u>усталости</u> по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
</p>
<p><a class="ep_z" href="#">Завершенный эпизод</a>
<em>17.03.1756 // Участник 1 + Участник 2 + Какой-то никнейм</em>
...
</p>
<p><a class="ep_nz" href="#">Незавершенный</a>
<em>25.08.1756 // Участник 1 + Участник 2 + Какой-то никнейм</em>
Описание эпизода
</p>
<!----- ГОД ИЛИ ЭПОХА ----->
<ht0>2075. Год, когда что-то случилось</ht0>
<p><a class="ep_a" href="#">Активный эпизод</a>
<em> дата // Участники </em>
Описание эпизода
</p>
<p><a class="ep_z" href="#">Завершенный эпизод</a>
<em> дата // Участники </em>
Описание эпизода
</p>
<p><a class="ep_nz" href="#">Незавершенный эпизод</a>
<em> дата // Участники </em>
Описание эпизода
</p>
<!--- END ---></div>[/html]
[html]<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap" rel="stylesheet">
<style>.ship8 {
--sh1: 80px; /* ширина и высота картинки */
--sh2: #808080; /* цвет описания персонажа и рамки */
}
.ship8 { max-width: 700px; /*** ограничить ширину блока ***/
display:flex; flex-wrap: wrap; position:relative; overflow:hidden; width:100%; height:auto; box-sizing:border-box; padding-top: 10px;}
.ship8 * {box-sizing:border-box;}
/* весь блок карточки */
.shipp {display:flex; flex-direction: row; width: calc(100% - 14px); min-height: calc(var(--sh1) + 20px); margin-bottom: 28px !important; margin-right: 0px !important;}
.shipp:last-child {margin-bottom:0px !important;}
/* круг */
.krt {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; outline: 1px solid var(--sh2); outline-offset: 6px; margin: 6px 16px auto 10px !important;}
.kar {display:block; width: var(--sh1); height: var(--sh1); border-radius:50%; background: 50% 50% no-repeat transparent; background-size:cover;}
.namep, .namp {display:block; text-align: left;}
/* имя */
.namep {line-height:110%; font-family: 'Oswald', Tahoma, sans-serif; font-size: 20px;}
/* описание */
.namp {margin-top:4px !important; color: var(--sh2); font-size: 10px;}
/* текст */
.shipp p {display:block; padding:0 !important; margin-top:10px !important; font-family: Tahoma, Arial, sans-serif; line-height:130% !important; text-align: justify;}
</style><div class="ship8"><!-- START -->
<!-- ПЕРСОНАЖ_1 -->
<div class="shipp"><div class="krt">
<div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
<div><span class="namep"><a href="#"> Имя Персонажа</a></span>
<div class="namp">Описание персонажа</div>
<p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
</p></div></div>
<!-- ПЕРСОНАЖ_2 -->
<div class="shipp"><div class="krt">
<div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
<div><span class="namep"><a href="#"> Имя Персонажа</a></span>
<div class="namp">Описание персонажа</div>
<p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
</p></div></div>
<!-- ПЕРСОНАЖ_3 -->
<div class="shipp"><div class="krt">
<div class="kar" style="background-image:url(https://pp.userapi.com/c845020/v8450203 … nu1PeM.jpg)"></div>
</div>
<div><span class="namep"><a href="#"> Имя Персонажа</a></span>
<div class="namp">Описание персонажа</div>
<p>
Мы все еще живем бок о бок с вами. Мы также травим себя сигаретами и алкоголем, ловим такси по пути на работу, валимся с ног от усталости по вечерам и мечтаем о несбывшемся. Мы - замкнутое общество и с неохотой открываемся чужакам.
</p></div></div>
<!-- END --></div>[/html]
[html]<div class="bt5baul" style="width:550px;"><div class="b5b-titulo"><i class="cp cp-wolf" style="background:#6244b3;"></i><b style="color:#6244b3;">People that I love</b></div><div class="b5b-listaDePJ2"><div class="b5b-modulPJ2"><img src="https://i.imgur.com/4G90uEq.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/RY4RGcu.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/nouTNUm.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/9A82flf.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/JoONFp9.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/AS2yRG1.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/JoONFp9.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/AS2yRG1.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/4G90uEq.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/RY4RGcu.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/nouTNUm.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/9A82flf.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/nouTNUm.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/9A82flf.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/JoONFp9.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/AS2yRG1.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div><div class="b5b-modulPJ2"><img src="https://i.imgur.com/4G90uEq.png"/><div class="b5b-cancion"><img src="https://i.imgur.com/RY4RGcu.png" class="b5b-segundaFoto"/><img src="https://scannables.scdn.co/uri/plain/jpeg/A58064/white/640/spotify:track:5PTfZsGlsDDPH8i3PdQnXJ" class="b5b-cancionenlace"/></div></div></div></div><a class="bettycred" style="margin-top:-5px;width:430px;font-size:11px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
<link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>.bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden;} .b5b-titulo{height:80px; border-bottom:1px solid #ddd; display:flex; align-items:center; overflow:hidden; padding:0px 30px; justify-content:space-between;} .b5b-titulo i{font-size:30px; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height: 50px; border-radius:10px; text-align:center;} .b5b-titulo b{font-family:"Hind", sans-serif; font-size:20px;} .b5b-listaDePJ2{display:grid; grid-template-columns:repeat(3,184px); overflow:hidden;} .b5b-modulPJ2{width:184px; border-left:1px solid #ddd; height:200px; border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;} .b5b-modulPJ2 > img{ width:130px; height:130px; border:10px solid #fafafa; outline:1px solid #ddd; display:block;position:relative;} .b5b-cancion{width:130px; height:130px; position:absolute; border:10px solid #fafafa; opacity:0;} .b5b-cancionenlace{width:100px;display:block;margin:0 auto; border-radius:5px;} .b5b-segundaFoto{width:130px; height:130px; margin-bottom:-33px; display:block;} .b5b-modulPJ2:hover .b5b-cancion{opacity:1;} .b5b-modulPJ2:hover .b5b-cancion, .b5b-cancion{-webkit-transition: all 0.7s ease-in-out 0s; -moz-transition: all 0.7s ease-in-out 0s; -o-transition: all 0.7s ease-in-out 0s; transition: all 0.7s ease-in-out 0s;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>
<div class="bt5baul" style="width:550px"><div class="b5b-titulo"><i class="cp cp-wolf" style="background:#a58064;"></i><b style="color:#a58064;">Memories</b></div><div class="b5b-moodboard"><div class="b5b-imgc"><img src="https://placehold.jp/160x160.png"></div><div class="b5b-imgl"><img src="https://placehold.jp/340x160.png"></div><div class="b5b-imgc"><img src="https://placehold.jp/160x160.png"></div><div class="b5b-imgc"><img src="https://placehold.jp/160x160.png"></div><div class="b5b-imgc"><img src="https://placehold.jp/160x160.png"></div><div class="b5b-imgl"><img src="https://placehold.jp/340x160.png"></div><div class="b5b-imgc"><img src="https://placehold.jp/160x160.png"></div></div></div><a class="bettycred" style="margin-top:-5px;width:430px;font-size:11px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
<link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>.bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden;} .b5b-titulo{height:80px; border-bottom:1px solid #ddd; display:flex; align-items:center; overflow:hidden; padding:0px 30px; justify-content:space-between;} .b5b-titulo i{font-size:30px; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height: 50px; border-radius:10px; text-align:center;} .b5b-titulo b{font-family:"Hind", sans-serif; font-size:20px;}.b5b-moodboard{display:flex; flex-wrap:wrap;} .b5b-imgc{width:182px; height:190px; } .b5b-imgl{width:366px; height:190px;} .b5b-moodboard > div:nth-child(2n),.b5b-moodboard > div:nth-child(5),.b5b-moodboard > div:nth-child(7){border-left:1px solid #ddd;}.b5b-moodboard > div:nth-child(6){border-left:0;}.b5b-imgc, .b5b-imgl{border-bottom:1px solid #ddd; display:flex; align-items:center; justify-content:center;} .b5b-imgc > img{width:160px; height:160px;} .b5b-imgl > img {height:160px; width:340px;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>
<div class="bt5baul"><div class="b5b-titulo"><i class="cp cp-wolf" style="background:#a58064;"></i><b style="color:#a58064;">Soundtrack of my life</b></div><div class="b5b-cancionPrincipal"><img src="https://placehold.jp/120x120.png"/><span><b style="color:#a58064;">Superheroes</b>The script</span></div><div class="b5b-modulC"><span class="cp cp-star-o" style="color:#a58064;"></span><div><b style="color:#a58064;">Teach me how to love</b>Shawn Mendes</div></div><div class="b5b-modulC"><span class="cp cp-star" style="color:#a58064;"></span><div><b style="color:#a58064;">Want you back</b>5 seconds of summer</div></div><div class="b5b-modulC"><span class="cp cp-star-o" style="color:#a58064;"></span><div><b style="color:#a58064;">Plastic Heart</b>Miley Cyrus</div></div></div><a class="bettycred" style="margin-top:-5px;width:430px;font-size:11px;" href="https://bettyleg.tumblr.com/">bettyleg</a>
<link href="//icons.cappuccicons.com/cpf.css" rel="stylesheet"/><link href="https://fonts.googleapis.com/css2?family=Hammersmith+One&family=Hind&display=swap" rel="stylesheet"><style>.bt5baul{width:400px;border:15px solid #fafafa; outline-offset:-15px; outline:1px solid #ddd; margin:10px auto; box-shadow:0 0 1px #444; position:relative; overflow:hidden;} .b5b-titulo{height:80px; border-bottom:1px solid #ddd; display:flex; align-items:center; overflow:hidden; padding:0px 30px; justify-content:space-between;} .b5b-titulo i{font-size:30px; color:#fff; display:flex; align-items:center; justify-content:center; width:50px; height: 50px; border-radius:10px; text-align:center;} .b5b-titulo b{font-family:"Hind", sans-serif; font-size:20px;}.b5b-cancionPrincipal{height:140px; border-bottom:1px solid #ddd; display:flex; align-items:center;} .b5b-cancionPrincipal img{width:120px; height:120px; padding:10px; border-right:1px solid #ddd; display:block; background:#fafafa;} .b5b-cancionPrincipal > span,.b5b-modulC > div{line-height:18px; display:block; font-size:14px; font-family:"Hind", sans-serif; color:#999; margin:20px;} .b5b-cancionPrincipal > span b,.b5b-modulC >div b{display:block; font-size:20px; font-family:"Hammersmith One",sans-serif; text-transform:uppercase;} .b5b-modulC >div b{font-size:14px;} .b5b-modulC >div {font-size:12px; line-height:15px;} .b5b-modulC > span{display:flex; align-items:center; justify-content:center; height:70px; width:50px; font-size:20px; padding-left:25px;} .b5b-modulC{display:flex; height:70px;} .b5b-modulC:not(:last-child){border-bottom:1px solid #ddd;}.bettycred{display:block; margin:-20px auto 0px; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>[/html]