[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("https://i.pinimg.com/564x/76/00/03/7600034c3c014bc489d8c49ea90cc26c.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/RgK2WGY/1.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
              <a href="#" data-tooltip="Сейлор Венера" data-placement="top"> <!-- Тут меняем имя -->
                <img src="https://i.ibb.co/VwSJmdq/1.gif" /> <!-- Сюда ставим аватар участника -->
              </a>
       
             
    </div>
<!-- Здесь текст предисловия, в формате хтмл -->
    <div class="text">
Невероятный клуб, где таинство танца в тандеме с магией расскажут удивительные истории. Забудься.<br> Заблудись. Влюбись и доверься. <br>
<br>

    </div>
    <div class="textinfo"><h2>Время, бой, погода:</h2>

<!-- Здесь текст дополнительных параметров -->

вечер 3 августа / без боя /яркий свет сменяется полумраком. Диваны для гостей на первом и втором этажах. Пестрые артисты снуют то тут то там. Огромное временно пустое место - сцена посреди зала. </div>
   
    </div>

   
   
   
   

</div>
</div>

[/html]

Отредактировано Сейлор Венера (2020-09-16 20:34:55)