<div class="container">
  <div class="poster">
    <div class="poster__img"></div>
    <div class="poster__info">
      <h1 class="poster__title">Angry Birds</h1>
      <p class="poster__text">Find out why the birds are so angry. When an island populated by happy, flightless birds is visited by mysterious green piggies, it's up to three unlikely outcasts - Red, Chuck and Bomb - to figure out what the pigs are up to.</p>
    </div>
  </div>
  <a href="#">Find out more</a>
</div>
*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  line-height: 1.6;
  background: #eee
}

.container {
  display: block;
  width: 375px;
  height: 677px;
  background: #ffffff;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1);
  padding: 70px 30px 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  &:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 200px;
    background: red;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(130deg, #e67e22 10%, #e74c3c 100%);
  }
}

.poster {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 1px 0 10px 0 rgba(0, 0, 0, 0.2);
  &__img {
    height: 200px;
    background: url('http://cdn1-www.comingsoon.net/assets/uploads/gallery/angry-birds-1412173620/angrybirdsmovie0004.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
  }
  &__info {
    background: #fff;
    padding: 25px 25px 40px;
  }
  &__title {
    font-size: 1.2em;
    font-weight: 300;
    margin-bottom: .4em;
  }
  &__text {
    font-size: .9em;
    color: #999;
    font-weight: 300;
  }
}

a {
  display: block;
  width: 250px;
  background: #27ae60;
  text-align: center;
  margin: 30px auto;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .15em;
  text-decoration: none;
  font-size: .9em;
  font-weight: 300;
  background: linear-gradient(90deg, #2ecc71, #27ae60);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: 0.3s;
  &:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10), 0 8px 8px rgba(0, 0, 0, 0.18);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.