<div class="card">
  <div class="card__inner">
    <header class="card__header">
      <nav class="card__nav">
        <ul class="list list--nav">
          <li><a href="#">Movie</a></li>
          <li><a href="#">Trivia</a></li>
          <li><a href="#">Reviews</a></li>
        </ul>
      </nav>
    </header>
    
    <main class="card__body">
      
      <div class="card__info">
        <h1 class="card__title">Captain America: Civil War</h1>
    
        <p class="card__slug">Political interference in the Avengers' activities causes a rift between former allies Captain America and Iron Man.</p>
      
        <button class="card__btn" value="Watch trailer">Watch trailer</button>

        <div class="card__rating">
          8.2
        </div>
      </div>
    </main>
    
    <footer class="card__footer">
      <ul class="list list--info">
        <li>2016</li>
        <li>122 min</li>
        <li>Action | Sci-Fi</li>
      </ul>
    </footer>
  </div>
</div>
// Functions
@function remy($value, $base: 16px) {
  @return ($value / $base) * 1rem;
}

// Mixins
@mixin transition($prop: all, $duration: .2s, $timing: cubic-bezier(.4, 0, 1, 1)) {
  transition: $prop $duration $timing;
}

// Colors
$color-black: #212121;
$color-primary: #c62828;// red

// Variables
$boxshadow-0: 0 1px 3px rgba(0, 0, 0, .13),
0 1px 3px rgba(0, 0, 0, .23);
$boxshadow-1: 0 3px 6px rgba(0, 0, 0, .16),
0 3px 6px rgba(0, 0, 0, .23);
$boxshadow-2: 0 10px 20px rgba(0, 0, 0, .19),
0 6px 6px rgba(0, 0, 0, .23);
$boxshadow-3: 0 14px 28px rgba(0, 0, 0, .25),
0 10px 10px rgba(0, 0, 0, .22);
$radius: remy(4px);

// Base
html,
body,
.wrapper {
  width: 100%;
  height: 100%;
}

html {
  font-size: 16px;
}

body {
  font-size: 100%;
  font-family: 'Roboto', Arial, Verdana, sans-serif;
  background: #eee;
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.card {
  position: relative;
  margin-top: 2rem;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  width: remy(600px);
  height: remy(340px);
  background: url(http://media.comicbook.com/2016/05/captain-america-civil-war-02082016-182755.png), rgb(10,10,10);
  background-position: -60px 42px, 0;
  background-repeat: no-repeat;
  background-size: 70% 88%;
  border-radius: $radius;
  box-shadow: $boxshadow-2;
  
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10,10,10,.15);
  }
}

.card__inner {
  position: relative;
  z-index: 2;
  height: 100%;
}

.list {
  display: flex;
}

.list--nav {
  justify-content: space-around;
  
  li  {
    width: calc(100%/3);
    background: #111;
    
    @include transition;

    &:focus,
    &:hover {
      background: #333;
    }
    
    &:first-of-type {
      background: #292929;
    }
  }
  
  a {
    display: block;
    padding-top: .85rem;
    padding-bottom: .85rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: remy(2px);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
  }
}

.card__body {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.card__info,
.card__footer {
  color: #fff;
}

.card__info {
  position: relative;
  padding-right: 1.25rem;
  float: right;
  width: 50%;
}

.card__title {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  text-transform: uppercase;
}

.card__slug {
  margin-bottom: 1.25rem;
  color: rgba(255,255,255,.95);
}

.card__btn {
  display: inline-block;
  padding: .65rem 1.5rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: remy(1px);
  text-transform: uppercase;
  color: #fff;
  background: $color-primary;
  border: 0;
  border-radius: remy(35px);
  box-shadow: $boxshadow-2;
  
  @include transition;
  
  &:focus,
  &:hover {
    color: #fff;
    background: lighten($color-primary, 13%);
    box-shadow: $boxshadow-3;
  }
}

.card__rating {
  display: inline-block;
  position: relative;
  padding: 1rem;
  margin-left: 3rem;
  color: #fff;
  border-radius: 50%;
  border: 3px solid $color-primary;
  
  &:before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -5px;
    left:0;
    width: 50%;
    height: 20px;
    background: #000;
  }
}

footer {
  position: absolute;
  bottom: 0;
  padding-top: 1rem;
  padding-right: 1.25rem;
  padding-bottom: 1rem;
  width: 100%;
}

.list--info {
  padding-left: 1rem;
  float: right;
  justify-content: space-between;
  width: 50%;
  
  li {
    font-size: .85rem;
  }
  
  li:nth-of-type(n+2) {
    margin-left: 1rem;
  }
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css
  3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.