JavaScript: Models, Views, and Controllers - Learn HTML5 and JavaScript for Android - page 298

...
.btn-favorite {
float: right;
padding: 10px;
color: #FFFFFF;
background: #7D9DCE;
font-weight: bold;
border-radius: 5px;
text-decoration: none;
border: 1px solid #A5CCEB;
}
}
}
This will create a blue button, floated to the right of the movie title. You will also
want to alter the release date a bit, so that it stands out from the title of the
movie. You can see the additions next.
.movie-header {
...
.movie-title {
...
.movie-release-date {
text-transform: uppercase;
font-weight: bold;
}
}
}
Your full movie header style should look like the following code.
.movie-header {
position: relative;
overflow: hidden;
height: 20%;
.poster {
position: absolute;
top: 0%;
@include animation(posteranimation 10s ease 0 infinite alternate);
}
.movie-title {
position: absolute;
bottom: 0px;
background: rgba(255, 255, 255, 0.75);
padding: 5px;
bottom: 0;