[html]<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<style>
:root {
--general: #474747;
--acento: #44807e;
--hoverlink: #5e9e9c;
--back1: #e1e1e1;
--back2: #eee;
--back3: #f3f3f3;
--dark1: #111;
--text-light: #555;
}
.blcrono {
width: 500px;
max-width: 100%;
padding: 30px;
border-radius: 20px;
margin: 20px auto;
background: var(--back3);
border: 1px solid #dadada;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
font-family: 'Poppins', sans-serif;
box-sizing: border-box; /* только для этого блока */
}
.blcronot {
width: 100%;
font-size: 24px;
font-family: 'Abril Fatface', cursive;
text-align: center;
color: var(--acento);
margin: 30px 0 20px 0;
letter-spacing: 1px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.blcronot::before,
.blcronot::after {
content: '';
flex: 1;
height: 1px;
background: #ccc;
margin: 0 14px;
}
.blcronot:first-of-type {
margin-top: 0;
}
.cronobox {
width: 100%;
min-height: 50px;
background: var(--back1);
border-radius: 10px;
display: flex;
align-items: center;
gap: 16px;
padding: 8px 18px;
margin-bottom: 10px;
transition: background 0.25s ease, transform 0.15s ease;
cursor: default;
box-sizing: border-box;
}
.cronobox:hover {
background: #d0d0d0;
transform: translateY(-1px);
}
.cronobox m {
font-family: 'Abril Fatface', cursive;
font-size: 22px;
color: var(--acento);
min-width: 40px;
text-align: center;
flex-shrink: 0;
}
.cronobox n {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
}
.tl-title {
font-size: 15px;
font-weight: 600;
color: #111;
letter-spacing: 0.2px;
transition: color 0.25s ease;
}
.tl-title a {
color: #111;
text-decoration: none;
transition: color 0.25s ease;
}
.cronobox:hover .tl-title a {
color: var(--acento);
}
.tl-player {
font-size: 12px;
font-weight: 400;
color: var(--text-light);
letter-spacing: 0.3px;
}
.tl-player i {
font-style: normal;
}
@media (max-width: 500px) {
.blcrono {
padding: 20px 16px;
}
.blcronot {
font-size: 20px;
margin: 22px 0 16px 0;
}
.cronobox {
padding: 10px 14px;
gap: 12px;
}
.cronobox m {
font-size: 18px;
min-width: 30px;
}
.tl-title {
font-size: 13px;
}
.tl-player {
font-size: 11px;
}
}
@media (max-width: 380px) {
.cronobox {
flex-wrap: wrap;
gap: 6px;
}
.cronobox m {
min-width: 100%;
text-align: left;
font-size: 16px;
}
.tl-title {
font-size: 12px;
}
}
</style>
<div class="blcrono">
<div class="blcronot">ФАНДОМ-МЕЖФАНДОМ</div>
<div class="cronobox">
<m>01</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>02</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>03</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="blcronot">АЛЬТЕРНАТИВА</div>
<div class="cronobox">
<m>04</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>05</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>06</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="blcronot">архив</div>
<div class="cronobox">
<m>07</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>08</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
<div class="cronobox">
<m>09</m>
<n>
<span class="tl-title"><a href="ссылка на эпизод">название вашего эпизода</a></span>
<span class="tl-player">ft. @соигрок</span>
</n>
</div>
</div>[/html]
