[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>EP Card</title>
<style>
.ep-card {
width: 500px;
min-height: 700px;
margin: 50px auto;
border: 2px solid black;
border-radius: 10px;
font-family: 'Arial', sans-serif;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
background: #000;
}
.ep-card::before {
content: "";
background: url('https://upforme.ru/uploads/001c/7d/d4/59/789817.png') center/cover no-repeat;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 0;
}
.ep-card::after {
content: "";
background: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 1;
}
.ep-card > * {
position: relative;
z-index: 2;
}
.top {
height: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 60px;
box-sizing: border-box;
}
.triangle-frame {
width: 300px;
height: 260px;
position: relative;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
overflow: hidden;
background: #000;
box-shadow: 0 0 10px rgba(0,0,0,0.6);
border: 2px solid #000;
}
.triangle-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.title {
font-size: 24px;
font-weight: bold;
text-align: center;
margin: 15px 0 5px;
text-shadow: 1px 1px 2px #000;
}
.meta {
text-align: center;
font-size: 14px;
color: #ccc;
display: flex;
justify-content: center;
gap: 40px;
line-height: 1.5;
}
.meta-block {
text-align: center;
}
hr {
width: 80%;
height: 1px;
background: #ccc;
border: none;
margin: 15px auto;
}
.description {
text-align: center;
padding: 0 20px;
font-size: 14px;
}
.cast {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 20px;
font-size: 14px;
color: #fff;
}
.cast-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.cast-links a {
color: #FFD700;
text-decoration: none;
font-size: 13px;
}
.credit {
text-align: center;
font-size: 11px;
color: #aaa;
padding: 10px;
font-style: italic;
margin-top: auto;
}
</style>
</head>
<body>
<div class="ep-card">
<div class="top">
<div class="triangle-frame">
<img src="https://e.radikal.host/2025/07/04/1000061579.png" alt="Эпизод">
</div>
<div class="title">Двадцать первый час.</div>
</div>
<div class="meta">
<div class="meta-block">
<div>Дата</div>
<div>14.06.2016</div>
<div>07:30</div>
</div>
<div class="meta-block">
<div>Место</div>
<div>Городской суд/кабинет прокурора</div>
<div>Погода: Пасмурно</div>
</div>
</div>
<hr>
<div class="description"><i>
Когда бюрократия и реальность встречаются в морге.
<br>
Судья подписывает ордер с торжественностью, достойной подписания капитуляции Германии, вот только все улики уже успели:
<br>- самоуничтожиться,
<br>- сбежать в другую страну,
<br>- переквалифицироваться в свидетелей защиты.
<br>«Поздравляю, теперь вы официально можете искать то, чего нет» </i>
</div>
<hr>
<div class="cast">
<div class="cast-links">
<a href="https://liesoftales.f-rpg.me/profile.php?id=57">Steadfast Tin Soldier</a>
<a href="https://liesoftales.f-rpg.me/profile.php?id=59">Goldie Fisher</a>
</div>
</div>
<div class="credit">
by Goldfish
</div>
</div>
</body>
</html>
[/html]
