<!-- #CodePenChallenge: Reflections -->
<div class="top">
<div class="columns">
<div class="column is-full featured_wrapper p-0">
<img src="https://www.shorturl.at/jnoAK" class="featured">
<div class="title_wrapper">
<span class="has-text-white">Trending Today</span>
<h1 class="title is-1 has-text-white">The Untold Story of the great Lorem Ipsum</h1>
<button class="button is-medium">Watch It Now</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="columns is-multiline p-0 pt-6 last">
<div class="column is-full">
<p class="has-text-white">Action Movies Collection</p>
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/nCEN2">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/pwMU1">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/jkqB8">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/ciADR">
</div>
</div>
<div class="columns last">
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/aefq1">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/BGV34">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/uzCR2">
</div>
<div class="column is-one-quarter">
<img src="https://www.shorturl.at/hCGOT">
</div>
</div>
</div>@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;800&display=swap");
body,
html {
background: #000000;
padding: 0;
margin: 0;
padding-bottom: 6rem;
font-family: "Montserrat", sans-serif;
width: 100%;
}
.container {
padding-bottom: 3rem;
}
img {
-webkit-box-reflect: below 5px
linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.container img:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.last {
margin-top: 6.5rem;
}
.featured_wrapper {
position: relative;
}
.featured_wrapper img {
width: 100%;
width: 100%;
height: 100vh;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: top;
object-position: top;
}
.title_wrapper {
position: absolute;
width: 100%;
left: 2rem;
bottom: 2rem;
padding: 20px 40px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.title_wrapper h1 {
width: 70%;
}
button {
background: #f40612 !important;
color: #fff !important;
font-size: 18px;
padding: 0.5rem 3rem;
outline: none;
border: 0 !important;
}
@media (max-width: 768px) {
.title_wrapper {
text-align: center;
left: 0;
}
.title_wrapper h1 {
font-size: 32px !important;
width: 100%;
}
.container {
padding: 20px;
}
}
@media (max-width: 480px) {
.column.is-one-quarter img {
width: 100%;
margin-bottom: 7rem;
}
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.