<figure class="movie">
<div class="movie__hero">
<img src="https://www.mensjournal.com/wp-content/uploads/2018/10/rambo-main-3.jpg?quality=86&strip=all" alt="Rambo" class="movie__img">
</div>
<div class="movie__content">
<div class="movie__title">
<h1 class="heading__primary">First Blood Part II <i class="fas fa-fire"></i></h1>
<div class="movie__tag movie__tag--1">#action</div>
<div class="movie__tag movie__tag--2">#thriller</div>
</div>
<p class="movie__description">
First Blood is a 1982 American action film directed by Ted Kotcheff, and co-written by Sylvester
Stallone, who also stars as Vietnam War veteran John Rambo.
</p>
<div class="movie__details">
<p class="movie__detail"><span class="icons icons-red"><i class="fas fa-camera-retro"></i> </span>Buzz
Feitshans</p>
<p class="movie__detail"><span class="icons icons-grey"><i class="fas fa-clock"></i> </span>1h 33m</p>
<p class="movie__detail"><span class="icons icons-yellow"><i class="fas fa-file-invoice-dollar"></i>
</span>$12.52 crores</p>
</div>
</div>
<div class="movie__price">$12.56</div>
</figure>
/*
background-color: #A9C9FF;
background-image: linear-gradient(180deg, #A9C9FF 0%, #FFBBEC 100%);
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 300;
color: #444;
background:linear-gradient(to right bottom, #A9C9FF 0%, #FFBBEC 100%);
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.movie {
max-width: 800px;
border-radius: 5px;
display: flex;
box-shadow: 0 5px 20px 10px rgba(0, 0, 0, .2);
overflow: hidden;
}
.movie__hero {
flex: 0 0 45%;
}
.movie__img {
width: 100%;
display: block;
}
.movie__content {
background-color: #fff;
flex: 1;
padding: 35px 30px;
display: flex;
flex-direction: column;
}
.movie__price {
background:linear-gradient(to bottom, #A9C9FF 0%, #FFBBEC 100%);
flex: 0 0 50px;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
color: rgb(255, 255, 255);
writing-mode: vertical-lr;
display: flex;
align-items: center;
justify-content: center;
}
.movie__title {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.heading__primary {
font-size: 16px;
margin-right: auto;
color: royalblue;
}
.fa-fire {
color: salmon;
}
.movie__tag {
font-size: 10px;
color: #fff;
padding: 2px 7px;
border-radius: 100px;
margin-right: 8px;
display: block;
text-transform: uppercase;
}
.movie__tag--1 {
background-color: #A9C9FF;
}
.movie__tag--2 {
background-color:#FFBBEC;
}
.movie__description {
font-size: 14px;
}
.movie__details {
display: flex;
margin: auto;
}
.movie__detail {
font-size: 13px;
margin-right: 20px;
display: flex;
align-items: center;
}
.icons i {
margin-right: 3px;
font-size: 18px;
}
.icons-red {
color: salmon;
}
.icons-grey {
color: grey;
}
.icons-yellow {
color: rgb(190, 190, 71);
}
This Pen doesn't use any external JavaScript resources.