[html]
<style>
.movie-card{
padding: 40px 0;
color: #575756;
}
.container{
width: 100%;
height: 640px;
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("https://i.pinimg.com/736x/53/71/8f/53718f63f7ba5140a63a0e3e539341ab.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: 250px;
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: 350px;
padding-top: 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">Spread your wings! </div> <!-- Название эпизода -->
</div>
</div>
<div class="info">
<div class="cast">
<h2>Действующие лица:</h2>
<a href="#" data-tooltip="Принц Кристиан" data-placement="top"> <!-- Тут меняем имя -->
<img src="https://i.pinimg.com/280x280_RS/e0/f7/58/e0f75828d101a39371dfd1dd7c7386e7.jpg" /> <!-- Сюда ставим аватар участника -->
</a>
<a href="#" data-tooltip="Эрза" data-placement="top"> <!-- Тут меняем имя -->
<img src="http://forumuploads.ru/uploads/001a/32/39/5/458201.jpg" /> <!-- Сюда ставим аватар участника -->
</a>
</div>
<!-- Здесь текст предисловия, в формате хтмл -->
<div class="text">
Хранителям вновь предстоит непростая задача - разобраться с исчезновением детей на континенте. Ведь от веры зависит и будущее самих Хранителей Снов, а также баланс на всей земле. <br>
Все бы хорошо, но ни одной толковой зацепки у великолепной пятерки нет.<br>
Именно тогда команда решает разделиться и начать поиски злодея. Кто и зачем похищает детей, а вместе с ними веру в добро и свет? Предстоит узнать!
</div>
<div class="textinfo"><h2>Время, бой, погода:</h2>
<!-- Здесь текст дополнительных параметров -->
Различные локации Америки 21 века. </div>
</div>
</div>
</div>
[/html]
