[html]
<style>
.movie-card{
padding: 40px 0;
color: #575756;
}
.container1 {
width: 100%;
height: 550px;
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:315px;
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("https://nsa40.casimages.com/img/2019/06/01/190601060227596330.jpg") ; <!-- Прямоугольная картинка -->
}
.menu1 {
text-align: center;
padding: 250px 0 0 0px;
z-index:1;
}
.title1 {
color: white;
font-size: 44px;
text-shadow: 2px 2px #2a1f1f;
}
.columntag{
padding-top: 200px;
}
.textinfo{
float: left;
width: 250px;
margin-left: 10px;
padding-top: 0px;
}
.cast{
float: left;
width: 100px;
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;
}
.text1 {
float:right;
width: 350px;
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="container1">
<div class="cover" >
<div class="menu">
<div class="title1">Alea jacta est</div> <!-- Название эпизода -->
</div>
</div>
<div class="info">
<div class="cast">
<h2>Действующие лица:</h2>
<a href="#" data-tooltip="Натаниэль" data-placement="top"> <!-- Тут меняем имя -->
<img src="http://s3.uploads.ru/PG6YX.png" /> <!-- Сюда ставим аватар участника -->
</a>
<a href="#" data-tooltip="Эрза" data-placement="top"> <!-- Тут меняем имя -->
<img src="http://forumfiles.ru/uploads/001a/32/39/3/286949.jpg" /> <!-- Сюда ставим аватар участника -->
</a>
</div>
<!-- Здесь текст предисловия, в формате хтмл -->
<div class="text1">
Восстание и беспорядки в городе начинают захватывать центральные улицы, где живут благородные богатые люди, держащие у себя рабов. Это было глупым решением для нищей толпы вообще приходить в этот район. Чего они только полезли туда, где полно защитных артефактов, и где люди могут позволить себе лучшую защиту, которую можно купить за деньги? Никто даже не воспринимал это шествие всерьез, только лишь временные трудности, после которых можно продолжать жить. Продолжать навещать друзей и знакомых, обсуждая пробежавших вчера голодранцев.
</div>
<div class="textinfo"><h2>Время, бой, погода:</h2>
<!-- Здесь текст дополнительных параметров -->
12 июля / до обеда </div>
</div>
</div>
</div>
[/html]
