赤目魚
Страница: 1
Сообщений 1 страница 4 из 4
Поделиться116.10.2024 21:56
[html]<style>#ship0 {
--mrs0: auto; /* отступ слева, auto - для центровки */
--bgs0: #fff; /* фон карточки */
--cls0: #111; /* цвет текста */
--shw0: 500px; /* ширина карточки */
--shw1: 200px; /* ширина картинки */
--shh1: 350px; /* высота картинки */
--shh2: 180px; /* высота блока с описанием */
--brs0: #9ac8c5; /* цвет внутренних рамок */
}
#ship0 {display:grid; grid-template-columns:auto auto; grid-template-rows:1fr auto; margin: 10px auto 10px var(--mrs0); max-width:var(--shw0); overflow:hidden; background:var(--bgs0); color: var(--cls0);}
#ship0, #ship0 * {box-sizing:border-box; /* shipovnik */}
.apict {grid-column: 1 / 2; grid-row: 1 / -1; background: no-repeat 50% 50%; background-size:cover; width:var(--shw1); height:var(--shh1); overflow:hidden; clip-path: polygon(0 0, 100% 0, 100% 70%, 0% 100%);}
.atext {grid-column: 2 / 3; grid-row: 1 / 2; display:block; padding: 24px 24px 0 24px;}
.atext > em {display:block; padding: 6px 0; line-height:100%; text-align:center; font-style:normal !important; margin-bottom:26px; font-size: 10px; border-bottom: 1px solid var(--brs0); border-top: 1px solid var(--brs0);}
.anzv {grid-column: 2 / 3; grid-row: 2 / 3; display:block; position:relative; padding: 0px 24px 12px calc(var(--shw1) / 2); margin-left: calc(0px - var(--shw1)); text-align:center;}
.anzv > span {display:block; padding:0 !important; width:100%; height:0px; background:transparent; border-bottom: 6px solid var(--brs0);}
.anzv > h6 {transform: translateY(-70%); text-shadow: 1px 1px 3px var(--brs0); font-family: Georgia, Tahoma, serif; font-weight: 400; font-style: italic; font-size: 26px;}
.atext p::-webkit-scrollbar {width:5px; height:5px; background-color: rgba(255, 255, 255,1);}
.atext p::-webkit-scrollbar-thumb {background:#bdbdbd; box-shadow:inset 0 0 0 2px var(--bgs0);}
/* ТЕКСТОВЫЙ БЛОК */
.atext > p {padding: 0 5px 0 0 !important; overflow: auto; line-height: 130% !important; height: var(--shh2); font-size: 11px;
text-align: center; font-style: italic;
}</style>
<div id="ship0">
<div class="apict" style="background-image:url(https://forumupload.ru/uploads/001a/74/14/67/864864.png);"></div>
<div class="atext"><em>
гэнин Киригакурэ, 16 лет
</em><p>
TEXT
</p></div>
<div class="anzv"><span></span>
<h6> Suikazan Kiyoshi</h6>
</div></div>[/html]
Отредактировано Suikazan Kiyoshi (17.10.2024 01:45)
Поделиться217.10.2024 02:03
[html]<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet"><style>/* shipovnik */
#ship13, #ship13h {
--bgw: 700px; /* максимальная ширина главного блока */
--bg1: #; /* главный фон */
--clr1: #9ac8c5; /* ХРОНОЛОГИЯ цвет названия */
--clr2: #969696; /* цвет строки под хронологией */
--clr3: #9ac8c5; /* цвет рамки */
--clr4: rgba(161,190,199, 0.35); /* полупрозрачная цифра */
--clr5: #9ac8c5; /* цвет ссылок */
margin: auto; /* отступы от краев */
}
#ship13 {display:block; width:auto; box-sizing:border-box; padding:24px; max-width: var(--bgw); background: var(--bg1);}
#ship13 *, #ship13h * {box-sizing:border-box;}
/*** ХРОНОЛОГИЯ название ***/
#ship13h {display:block; box-sizing:border-box; width:auto; max-width: var(--bgw); padding: 14px 0; background:var(--bg1); color: var(--clr1); text-align:center; font-weight:600; font-size:24px; font-family: 'Playfair Display', Georgia, serif;}
#ship13h em {display:block; padding-top:4px; font-style:normal !important; color: var(--clr2); font-weight:400; font-family: Arial, sans-serif; font-size:10px;}
/* цифра */
.boxf {display:block; position:relative; z-index:3; width: 50%; min-height:50px; background:transparent; border-right: 1px solid var(--clr3);}
.boxf:nth-child(2n) {display: block; position: relative; margin-top: -40px; margin-bottom: -40px; margin-left: calc(50% - 1px); width: 50%; min-height: 50px; border-right: 0px none transparent; border-left: 1px solid var(--clr3);}
/* категория */
.boxcat {display:block; padding:0 10px 4px 10px; text-align:left; border-bottom: 1px solid var(--clr3);
text-transform:uppercase; font-weight:600; font-size:16px; font-family: 'Playfair Display', Georgia, serif;}
.boxf:nth-child(2n) .boxcat {text-align:right;}
.boxcat::after {display: block; content: ""; height: 6px; width: 6px; float: right; margin: 23px -13px auto auto; background: var(--clr3); border-radius: 50%;}
.boxf:nth-child(2n) .boxcat::after {float: left; margin: 22px auto auto -13px;}
.boxf:last-of-type {margin-bottom:0.3em;}
/* цифры */
.numbrow {display: block; margin: auto auto -46px 30px !important; z-index: 2; width: auto; background: transparent; text-align: left; font-style: normal !important; font-size: 76px; height: 76px; line-height: 76px; letter-spacing: -3px; font-family: 'Yeseva One', Arial, sans-serif; color: var(--clr4);}
.boxf:nth-child(2n) .numbrow {text-align: right; margin: auto 25px -52px auto !important;}
/* текстовый блок */
.textf {display:block; padding:20px; line-height:120%; text-align:justify; font-weight: 400; font-size: 12px; font-family:'PT Sans', Tahoma, sans-serif;}
.textf > p {margin:0px !important; padding: 0 0 16px 0 !important; line-height: 110% !important;}
.textf > p:last-child {padding-bottom:0px !important;}
#ship13 a {color: var(--clr5); text-decoration: none;}
#ship13 a:hover {text-decoration: underline;}</style>
<div id="ship13h">Хронология прошлого
<em>background & flashbacks</em></div>
<div id="ship13"><!--- НАЧАЛО БЛОКОВ --->
<!--- 611--->
<div class="boxf"><em class="numbrow">BG</em><div class="boxcat">611 - 628 гг.</div>
<div class="textf">
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
</div></div>
<!--- 617 --->
<div class="boxf"><em class="numbrow">FB</em><div class="boxcat">Воспоминания былого</div>
<div class="textf">
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
</div></div>
<!--- КОНЕЦ БЛОКОВ ---></div>[/html]
Поделиться317.10.2024 02:03
[html]<link href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap" rel="stylesheet"><style>/* shipovnik */
#ship13, #ship13h {
--bgw: 700px; /* максимальная ширина главного блока */
--bg1: #; /* главный фон */
--clr1: #9ac8c5; /* ХРОНОЛОГИЯ цвет названия */
--clr2: #969696; /* цвет строки под хронологией */
--clr3: #9ac8c5; /* цвет рамки */
--clr4: rgba(161,190,199, 0.35); /* полупрозрачная цифра */
--clr5: #9ac8c5; /* цвет ссылок */
margin: auto; /* отступы от краев */
}
#ship13 {display:block; width:auto; box-sizing:border-box; padding:24px; max-width: var(--bgw); background: var(--bg1);}
#ship13 *, #ship13h * {box-sizing:border-box;}
/*** ХРОНОЛОГИЯ название ***/
#ship13h {display:block; box-sizing:border-box; width:auto; max-width: var(--bgw); padding: 14px 0; background:var(--bg1); color: var(--clr1); text-align:center; font-weight:600; font-size:24px; font-family: 'Playfair Display', Georgia, serif;}
#ship13h em {display:block; padding-top:4px; font-style:normal !important; color: var(--clr2); font-weight:400; font-family: Arial, sans-serif; font-size:10px;}
/* цифра */
.boxf {display:block; position:relative; z-index:3; width: 50%; min-height:50px; background:transparent; border-right: 1px solid var(--clr3);}
.boxf:nth-child(2n) {display: block; position: relative; margin-top: -40px; margin-bottom: -40px; margin-left: calc(50% - 1px); width: 50%; min-height: 50px; border-right: 0px none transparent; border-left: 1px solid var(--clr3);}
/* категория */
.boxcat {display:block; padding:0 10px 4px 10px; text-align:left; border-bottom: 1px solid var(--clr3);
text-transform:uppercase; font-weight:600; font-size:16px; font-family: 'Playfair Display', Georgia, serif;}
.boxf:nth-child(2n) .boxcat {text-align:right;}
.boxcat::after {display: block; content: ""; height: 6px; width: 6px; float: right; margin: 23px -13px auto auto; background: var(--clr3); border-radius: 50%;}
.boxf:nth-child(2n) .boxcat::after {float: left; margin: 22px auto auto -13px;}
.boxf:last-of-type {margin-bottom:0.3em;}
/* цифры */
.numbrow {display: block; margin: auto auto -46px 30px !important; z-index: 2; width: auto; background: transparent; text-align: left; font-style: normal !important; font-size: 76px; height: 76px; line-height: 76px; letter-spacing: -3px; font-family: 'Yeseva One', Arial, sans-serif; color: var(--clr4);}
.boxf:nth-child(2n) .numbrow {text-align: right; margin: auto 25px -52px auto !important;}
/* текстовый блок */
.textf {display:block; padding:20px; line-height:120%; text-align:justify; font-weight: 400; font-size: 12px; font-family:'PT Sans', Tahoma, sans-serif;}
.textf > p {margin:0px !important; padding: 0 0 16px 0 !important; line-height: 110% !important;}
.textf > p:last-child {padding-bottom:0px !important;}
#ship13 a {color: var(--clr5); text-decoration: none;}
#ship13 a:hover {text-decoration: underline;}</style>
<div id="ship13h">Хронология
<em>события 628 года</em></div>
<div id="ship13"><!--- НАЧАЛО БЛОКОВ --->
<!--- ЯНВАРЬ (fb) --->
<div class="boxf"><em class="numbrow">01</em><div class="boxcat">Январь (fb)</div>
<div class="textf">
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
</div></div>
<!--- ФЕВРАЛЬ --->
<div class="boxf"><em class="numbrow">02</em><div class="boxcat">Февраль</div>
<div class="textf">
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
<p><a href="ссылка">название</a> - описание</p>
</div></div>
<!--- КОНЕЦ БЛОКОВ ---></div>[/html]
Отредактировано Suikazan Kiyoshi (17.10.2024 02:12)
Поделиться417.10.2024 02:19
[html]<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><style>
:root {
--s6m: auto; /* отступ от левого края, auto - для центровки */
--shav1: 100px; /* ширина аватара */
--shav2: 100px; /* высота аватара */
--shclr: #9fb1c3; /* границы */
--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><div class="ship6"><!-- НАЧАЛО -->
<!-- ПЕРВЫЙ -->
<div class="sh1"><div class="sh2"><img class="ava" src="link"><div class="ava2">
<em><a href="#">???</a></em>
...
</div></div><div class="sh3">
...
</div></div>
<!-- ВТОРОЙ -->
<div class="sh1"><div class="sh2"><img class="ava" src="link"><div class="ava2">
<em><a href="#">???</a></em>
...
</div></div><div class="sh3">
...
</div></div>
<!-- ТРЕТИЙ -->
<div class="sh1"><div class="sh2"><img class="ava" src="link"><div class="ava2">
<em><a href="#">???</a></em>
...
</div></div><div class="sh3">
...
</div></div>
<!-- КОНЕЦ --><div>[/html]
Страница: 1
