<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy CSSer-4 UI Realization</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./dist/style/index.css">
</head>
<body>
<input id="checkbox__confirm" type="checkbox">
<header>
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="title">Popuar</span>
<i class="fa fa-search" aria-hidden="true"></i>
</header>
<section class="movie">
<div class="movie__cover">
<img class="cover__img" src="https://res.cloudinary.com/gorestarry/image/upload/v1493107560/ZHsNBxG_c0euvr.jpg" alt="">
<div class="cover__detail">
<h2>The Accountant</h2>
<span> Action, Crime, Drama </span>
</div>
<label class="movie__btn" for="checkbox__confirm">
<span class="default">Read more</span>
</label>
</div>
<div class="movie__intro">
<!-- <iframe class="intro__vedio" width="560" height="315" src="https://www.youtube.com/embed/DBfsgcswlYQ" frameborder="0" allowfullscreen></iframe> -->
<img class="intro__vedio" src="https://res.cloudinary.com/gorestarry/image/upload/v1493107791/53eef3a7a7ce5046f5fdfb62e8c59b4e_ltmxnm.jpg" alt="" />
<div class="intro__detail">
<div class="detail__box">
<span class="title">The Accountant(2016)</span>
<span class="score"><span>7.4</span> / 10</span>
</div>
<div class="detail__box">
<span class="contentRating">R-12</span>
<span class="types">Action, Crime, Drama</span>
</div>
<div class="detail__box">
<span class="duration">2h 8min</span>
<span class="date">14 October 2016 (Taiwan)</span>
</div>
<div class="detail__summary_text">
As a math savant uncooks the books for a new client, the Treasury Department closes in on his activities and the body count
starts to rise.
</div>
</div>
<label class="movie__btn" for="checkbox__confirm">
<span class="default">Buy now</span>
</label>
</div>
</section>
</body>
body {
background-image: linear-gradient( 45deg, #7FC6EE 0%, #CFE3FC 100%);
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 0 10vw;
}
header {
display: flex;
justify-content: space-between;
width: 100%;
color: white;
font-size: 5vmin;
margin: 9.5vmin 0;
transform-origin: top;
transition: 0.3s ease-out;
span.title {
font-size: 4vmin;
}
}
$box__radius: 2vmin;
$shadow__color: rgba(0, 0, 0, 0.3);
$btn__height: 12vmin;
%box__movie {
position: absolute;
background-color: white;
width: 100%;
min-height: 130vmin;
box-shadow: 3vmin 3vmin 5vmin $shadow__color;
border-radius: $box__radius;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: calc( #{$btn__height} * 2 / 3);
transition: opacity 0.5s ease-out;
box-sizing: border-box;
}
#checkbox__confirm {
display: none;
&:checked {
&~header {
opacity: 0;
}
&~.movie {
transform: translateY(-5vmin);
&>.movie__cover {
opacity: 0;
}
&>.movie__intro {
opacity: 1;
pointer-events: all;
}
}
}
}
.movie {
position: relative;
width: 100%;
height: calc( 130vmin + #{$btn__height} * 2 / 3);
display: flex;
flex-direction: column;
transition: transform 0.3s ease-out;
&__btn {
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: calc( #{ - $btn__height} / 3);
width: 60%;
line-height: $btn__height;
color: #66B2EC;
font-size: 4vmin;
border-radius: 1.5vmin;
text-align: center;
background-color: #D6EBF0;
box-shadow: 0 3vmin 6vmin $shadow__color;
&:hover {
color: gray;
}
}
&__cover {
@extend %box__movie;
text-align: center;
@at-root .cover {
&__img {
width: 100%;
height: 90vmin;
object-fit: cover;
object-position: 52% 50%;
border-top-left-radius: $box__radius;
border-top-right-radius: $box__radius;
}
&__detail {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
h2 {
font-size: 4.5vmin;
margin: 0 0 3vmin 0;
}
span {
font-size: 3vmin;
}
}
}
}
&__intro {
opacity: 0;
pointer-events: none;
@extend %box__movie;
.intro__vedio {
position: relative;
top: -3vmin;
display: inline-block;
object-fit: cover;
object-position: center;
width: 92%;
height: 40vw;
border-radius: 1.5vmin;
}
.intro__detail {
box-sizing: border-box;
width: 100%;
padding: 0 10vmin;
@at-root {
.detail__box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
margin: 1.2vmin 0;
&:first-of-type {
margin: 4vmin 0;
}
.title {
color: #54666F;
font-size: 3.8vmin;
}
.score {
font-size: 3.5vmin;
color: gray;
white-space: nowrap;
span {
color: #62AEE9;
font-size: 7vmin;
}
}
.contentRating,
.types,
.duration,
.date {
font-size: 3vmin;
color: #62AEE9;
}
}
.detail__summary_text {
color: gray;
margin-top: 8vmin;
font-size: 3vmin;
line-height: 4.5vmin;
}
}
}
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.