<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.