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