<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="o-wrapper">
<div class="c-movie-card">
<div class="c-movie-card__img"></div>
<div class="c-movie-card__btn-cont">
<span class="c-movie-card__rating "> 9.1 </span>
<a href="" class="btn--lrg ">
<svg class="shopping" viewBox="0 0 40 37" <g fill="#fff" fill-rule="evenodd">
<path d="M17.476 27.817c-1.13 0-2.156.443-2.917 1.165-.03.026-.06.05-.088.08-.768.767-1.244 1.828-1.244 3s.475 2.233 1.245 3h.002c.77.77 1.833 1.246 3 1.246 1.173 0 2.236-.475 3.005-1.245.77-.768 1.245-1.83 1.245-3.002 0-1.166-.478-2.23-1.25-3-.77-.768-1.83-1.243-3-1.243zM32.468 18.802l.84-4.462c.135-.714-.336-1.4-1.048-1.53-.713-.136-1.4.334-1.533 1.045l-.84 4.463c-.134.712.337 1.4 1.05 1.532.71.134 1.4-.335 1.53-1.048z"
/>
<path d="M38.683 8.05H17.215c-.727 0-1.317.59-1.317 1.314 0 .728.59 1.317 1.317 1.317h19.828l-2.51 11.203H15.496L11.07 1.045C10.94.425 10.39.002 9.782.002V0H1.317C.59 0 0 .59 0 1.317c0 .726.59 1.315 1.317 1.315h7.4l4.412 20.76c.094.636.64 1.122 1.302 1.122h21.15v-.005c.603 0 1.146-.417 1.282-1.028l3.073-13.714c.04-.128.063-.262.063-.404 0-.725-.59-1.315-1.317-1.315zM32.365 27.817c-1.128 0-2.155.443-2.917 1.165-.03.026-.058.05-.086.08-.77.767-1.244 1.828-1.244 3s.475 2.233 1.245 3h.002c.77.77 1.832 1.246 3 1.246 1.17 0 2.232-.477 3.003-1.25.77-.77 1.245-1.828 1.245-2.997 0-1.17-.475-2.23-1.245-3-.767-.768-1.83-1.243-3.003-1.243z"
/>
</g>
</svg>
</a>
</div>
<div class="c-movie-card__content ">
<h1 class="c-movie-card__title">The Martian</h1>
<p class="c-movie-card__description">During a manned mission to Mars, Astronaut Mark Watney (Matt Damon) is presumed dead after a fierce storm and left behind by his crew.
</p>
</div>
<span class="c-icons__arow">
<svg version="1.1"
viewBox="0 0 28.6 8">
<style type="text/css">
.st0{fill:#E5E5E5;}
</style>
<path class="st0" d="M0.4,1.5L14,7.9c0,0,0,0,0,0c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0c0,0,0,0,0.1,0c0,0,0.1,0,0.1,0
c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0,0,0,0,0,0l13.6-6.5c0.4-0.2,0.5-0.6,0.4-1C28.4,0.2,28.2,0,27.9,0
c-0.1,0-0.2,0-0.3,0.1L14.3,6.4L1.1,0.1C1,0,0.9,0,0.8,0C0.5,0,0.2,0.2,0.1,0.4C-0.1,0.8,0.1,1.3,0.4,1.5z"/>
</svg>
</span>
</div>
</div>
$font-family--primary:'nunito';
body {
background-image: url("http://wallpaperspal.com/wp-content/uploads/Silver-Blur-Background-Wallpaper.jpg");
background-size:cover;
}
.o-wrapper {
position: relative;
max-width:380px;
margin:50px auto 100px;
}
.c-movie-card {
position: relative;
box-shadow: 0 10px 50px rgba(0,0,0,0.19), 0 6px 50px rgba(0,0,0,0.23);
border-radius:4px;
padding-bottom:20px;
background:white;
// black angled overlay
&:before {
content:'';
position: absolute;
width: 100%;
height:120px;
background: rgba(0,0,0,.42);
transform:skewY(9deg);
top:260px;
z-index: 9;
}
&:after {
content:'';
position: absolute;
width: 100%;
height:80px;
background: linear-gradient(to bottom, rgba(0,16,31,.3) 40%,rgba(0,0,0,.1) 100%);
transform:skewY(9deg);
top:180px;
z-index: 8;
}
}
.c-movie-card__btn-cont {
position: absolute;
top:40%;
left:30%;
z-index:1000;
}
.btn--lrg{
position:absolute;
background-color: #00101f;
display:inline-block;
width: 100px;
height: 100px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 6px 30px rgba(0,0,0,0.29);
transition:all .4s ease;
left:-1em;
&:hover {
box-shadow: 0 20px 35px rgba(0,0,0,0.29), 0 12px 35px rgba(0,0,0,0.33);
svg.shopping {
border:1px solid rgba(255,255,255,.7);
}
}
}
svg.shopping {
width: 35%;
position: relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
padding:20px;
border:1px solid rgba(255,255,255,.0);
transition:all .5s ease;
}
.c-movie-card__rating {
position:absolute;
background:white;
font-family: $font-family--primary;
font-weight: 300;
font-size: 1.2rem;
display:inline-block;
padding:32px;
box-shadow: 0 10px 30px rgba(0,0,0,0.25), 0 6px 30px rgba(0,0,0,0.29);
right:-8.25em;
top:1.75em;
}
.c-movie-card__img {
position: relative;
height:350px;
background-size:280%;
background-position:75% 20%;
border-radius:4px 4px 0 0;
background-image: url("http://s3.foxfilm.com/foxmovies/production/films/104/images/gallery/martian-gallery3-gallery-image.jpg");
&:after{
content:'';
display:block;
width: 100%;
height: 20%;
transform: skewY(-8deg);
background:white;
position: absolute;
z-index:500;
bottom:-40px;
}
}
.c-movie-card__content {
padding-top:2rem;
position: relative;
color:#222222;
background:white;
z-index: 10;
}
.c-movie-card__title {
font-family: $font-family--primary;
font-weight: 400;
text-align: center;
margin-bottom: .5rem;
}
.c-movie-card__description {
width: 85%;
font-family: $font-family--primary;
font-weight: 300;
text-align: center;
margin:0 auto;
}
.c-icons__arow {
display:block;
width: 15%;
margin:0 auto;
margin-top: 3rem;
}
