[html]
<style>
.movie-card{
padding: 40px 0;
color: #575756;
}
.container{
width: 100%;
height: 740px;
margin:0 auto;
border-radius:5px;
background: #e4dbe9;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
}
.cover{
height:365px;
position: relative;
overflow: hidden;
z-index:1;
margin:0;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.cover:before {
content:'';
width:100%; height:100%;
position:absolute;
overflow: hidden;
top:0; left:0;
z-index: -1;
border-radius: 20px;
transform-origin:0 0;
background: url("http://forumuploads.ru/uploads/001a/32/39/100/211477.jpg") ; <!-- Прямоугольная картинка -->
}
a {
text-decoration: none;
color: #5C7FB8
}
a:hover{
text-decoration:underline;
}
.menu{
text-align: center;
padding: 250px 0 0 0px;
z-index:1;
}
.title{
color: white;
font-size: 44px;
text-shadow: 2px 2px #2a1f1f;
}
.columntag{
padding-top: 200px;
}
.textinfo{
float: left;
width: 250px;
margin-left: 10px;
padding-top: 35px;
}
.cast{
float: left;
width: 200px;
margin-left: 10px;
padding-top: 35px;
}
.cast img{
border-radius:50%;
cursor: pointer;
border: 3px solid white;
width: 50px;
}
.cast img:hover{
opacity:0.6;
}
.cast a:hover{
text-decoration: none;
}
.text{
float:right;
width: 300px;
padding-top: 50px;
padding-right: 50px;
}
.guide{
text-align: left;
padding-top: 200px;
padding-left: 10px;
}
.guide a {
color:#A9A8A3;
}
.guide a:hover{
color: #bdbdbd;
}
a[data-tooltip] {
position: relative;
}
a[data-tooltip]::before,
a[data-tooltip]::after {
position: absolute;
display: none;
opacity: 0.85;
}
a[data-tooltip]::before {
/*
* using data-tooltip instead of title so we
* don't have the real tooltip overlapping
*/
content: attr(data-tooltip);
background: #000;
color: #fff;
font-size: 13px;
padding: 5px;
border-radius: 5px;
/* we don't want the text to wrap */
white-space: nowrap;
text-decoration: none;
}
a[data-tooltip]::after {
width: 0;
height: 0;
border: 6px solid transparent;
content: '';
}
a[data-tooltip]:hover::before,
a[data-tooltip]:hover::after {
display: block;
}
/** positioning **/
a[data-tooltip][data-placement="top"]::before {
bottom: 100%;
left: 0;
margin-bottom: 40px;
}
a[data-tooltip][data-placement="top"]::after {
border-top-color: #000;
border-bottom: none;
bottom: 50px;
left: 20px;
margin-bottom: 4px;
}
</style>
<script>
</script>
<div class="movie-card">
<div class="container">
<div class="cover" >
<div class="menu">
<div class="title">Не ныряй в кроличью нору, Алиса</div> <!-- Название эпизода -->
</div>
</div>
<div class="info">
<div class="cast">
<h2>Действующие лица:</h2>
<a href="#" data-tooltip="Сейлор Меркурий" data-placement="top"> <!-- Тут меняем имя -->
<img src="https://i.ibb.co/K0ch89r/3311.png" /> <!-- Сюда ставим аватар участника -->
</a>
<a href="#" data-tooltip="Сейлор Марс" data-placement="top"> <!-- Тут меняем имя -->
<img src="https://i.ibb.co/NynLGR5/11.png" /> <!-- Сюда ставим аватар участника -->
</div>
<!-- Здесь текст предисловия, в формате хтмл -->
<div class="text">
И почему именно в этот день к торговой принцессе пожаловали очередные господа, которых, о ужас, ограбили? Почему она решила, что сможет помочь всем и каждому? Пожалуй, только Альшамс знает ответ на этот вопрос, как и на тот, почему Рей именно в день "великой охоты" на себя решила пойти исследовать пещеру, о которой так настойчиво рассказывал один из тех, кого они ограбили. Может Луна связала их путь? Или хитрый огонь, которому всё известно. Не даром же он сказал, что Рей найдёт давно потерянное. Или её найдут.
Алиса, не ныряй в кроличью норку, если не знаешь, что тебя там ждёт.
</div>
<div class="textinfo"><h2>Время, бой, погода:</h2>
<!-- Здесь текст дополнительных параметров -->
12 июля 1997 года, ясный солнечный день, вмешательство мастера не требуется с нами Марс</div>
</div>
</div>
</div>
[/html]