Portadas para Películas y Series

Como crear una portada para peliculas y series?

Bienvenidos a este nuevo tutorial, y como es de costumbre, nuevamente les traigo informacion relevante con warez, en esta ocacion aprendemos a implementar una increible portada para nuestra pagina web de peliculas y series hechas en Blogger, este diseño hara que tus entradas sean mucho mas atractivas de lo normal.

Quieres que las entradas de tus películas se vean asi? sigue estos pequeños pasos acontinuación y mira la magia.

Ejemplo:

Latino

Five Nights at Freddy's

ﾠMovie2h 2m

Resumen

Un guardia de seguridad con problemas comienza a trabajar en Freddy Fazbear's Pizza. Mientras pasa su primera noche en el trabajo, se da cuenta de que el turno de noche en Freddy's no será tan fácil de superar.

Empecemos con la instalación.

Lo primero que haremos es instalar el codigo CSS

  .cp-header {
    /* position: relative; */
}
  .cp-header-bg {
    position: relative;
    width: 100%!important;
    height: 250px;
    z-index: 1;
    object-fit: cover;
    border-radius: 10px;
}
  .cp-header__headline {
    padding: 16px;
    color: #fff;
    font-weight: 500;
}
  
  h1.cp-header-title {
    margin: 0px 0px 5px 210px;
}
  .cp-header__headline span-v1 {
    background: #288b00d9;
    color: white;
    padding: 5px 20px;
    border-radius: 15px;
    font-size: 14.5px;
}
  
  .cp-header__headline span-v2 {
    margin-left: 5px;
    background: #288b00d9;
    padding: 5px 10px;
    border-radius: 13px;
    color: white;
    font-size: 13.5px;
}
  .flex {
    display: grid;
    margin-bottom: 20px;
    grid-template-columns: 175px auto;
    grid-column-gap: 10px;
    height: 110px;
}
  .cp-header__cover {
    padding: 10px;
    width: 180px;
    position: relative;
    z-index: 3;
    bottom: 152px;
}
  .cp-header__cover img {
    width: 100%;
    display: block;
    border-radius: 8px;
}
  .language-type {
    position: relative;
    bottom: 40px;
    text-align: center;
}
  .language-type h4 {
    color: white;
    margin: 10px;
    background: #288b00d9;
    border-radius: 4px;
    font-size: 18px;
}
  h1.cp-header-title {
    margin: 0 0 5px 0;
}
  
  .cp-synopsis {
    width: 100%;
    padding: 5px 0;
    font-weight: 400;
}
  .cp-synopsis spam {
    font-weight: bold;
    font-size: 20px;
}
  .cp-synopsis p {
    margin-top: 5px;
    overflow: auto;
    height: 100px;
    font-size: 13.5px;
    text-align: justify;
    padding: 0 5px 0 0;
}
  
  @media only screen and (min-width: 768px) {
    .cp-synopsis spam {
    display: none;
}
  }
  
  @media only screen and (max-width: 425px) {
    
    .flex {
    grid-template-columns: 0px auto;
    /* grid-column-gap: 10px; */
    height: 60px;
}
    
  .cp-header-bg {
    height: 175px;
}
    .cp-header__cover {
    width: 123px;
    bottom: 150px;
}
    h1.cp-header-title {
    font-size: 21px;
    margin: 10px 0;
    border-left: 3px solid orange;
    padding: 0 2px;
}
    .cp-header__headline {
    padding: 16px 0;
    height: min-content;
}
    
  .cp-synopsis spam {
    font-size: 18px;
    border-left: 3px solid orange;
    padding: 0 2px;
}  

    .cp-header__headline span-v1 {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 400;
}
    .cp-header__headline span-v2 {
    padding: 5px 10px;
    border-radius: 13px;
    font-size: 11px;
    font-weight: 200;
}
    
    .cp-header__cover img {
    filter: drop-shadow(2px 4px 6px black);
}
    
}