/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
@import url("https://fonts.googleapis.com/css?family=Poppins:wght@100,200;400;700");
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&display=swap');
$primaryFont: 'Poppins',sans-serif;
$secondaryFont: 'Nunito',sans-serif;
$black: #212121;
$gray: #d5d8d7;
$white: #fafbfd;
$primary: #efc352;
body{
background: #E8EAF6;
height:100%;
}
.module{
background: #f5f5f5;
font-family: $primaryFont;
border-radius: 25px;
padding: 20px;
box-shadow: 3px 3px 15px rgba(0,0,0,.1), 0 0 0px 5px black,10px 50px 30px -30px rgba(0,0,0,0.5);
height: 640px;
overflow: hidden;
overflow-y: inherit;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
&::-webkit-scrollbar {
display: none;
}
position: relative;
z-index:3;
&:before{
content:'';
display:block;
top:0;
position:absolute;
left:50%;
width: 150px;
height: 30px;
background: black;
margin-left: -75px;
z-index: 6;
border-radius: 0 0 20px 20px;
}
.notify{
z-index: 3;
top: 5px;
position: absolute;
width: 280px;
left: 50%;
transform: translateX(-50%);
img{
width: 100%;
//filter: invert(1);
}
}
.movie-detail{
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 100%;
background-color: #f5f5f5;
transform: translatey(100%) scaley(0);
transition: ease all .3s;
z-index: 2;
.wrapper-image{
background: url('https://image.tmdb.org/t/p/w370_and_h556_bestv2/aRD1vLU7k5NHO0HThfHrjEQwWRz.jpg') center center no-repeat;
background-size: cover;
height: 320px;
position: relative;
border-radius: 0px 0px 60% 60%/35%;
width: 120%;
transform: translateX(-10%);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255,.9), 0px 20px 20px rgba(0, 0, 0, 0.3);
.play{
cursor:pointer;
position: absolute;
bottom: -40px;
left:50%;
transform: translate(-50%,0);
width: 80px;
height: 80px;
transition: ease all .3s;
border-radius: 100%;
background-color: white;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255,.6), 0px 20px 20px rgba(0, 0, 0, 0.1);
svg{
transition: ease all .3s;
width: 20px;
transform: translate(32px, 28px);
fill: #de3852;
}
&:hover{
svg{
width: 25px;
transform: translate(30px, 26px);
}
}
}
}
h2{
font-family: $secondaryFont;
text-align: center;
font-size: 18px;
font-weight: 900;
padding: 0 60px;
margin-top: 70px;
text-transform: uppercase;
}
&.active{
transform: translatey(0%) scaley(1);
}
}
.header{
position: sticky;
top:-20px;
z-index: 2;
padding: 20px;
width:calc(100% +40px);
display:flex;
background: #f5f5f5;
justify-content: space-between;
align-items: center;
flex-direction: row;
vertical-align: middle;
margin: 0 -20px;
.menu{
svg{
width: 18px;
}
}
.logo{
height:25px;
}
.search{
svg{
width: 18px;
}
}
}
.hero-slider{
margin: 0 -20px;
margin-top:30px;
margin-bottom: 0;
.slick-list{
padding-bottom: 40px!important;
height: 235px;
}
.slick-slide {
border:0;
outline: none;
margin: 0 5px;
width: 250px;
transition: ease all .3s;
height: 165px;
transform: translatey(10px);
opacity: .5;
&.slick-current{
height: 195px;
opacity: 1;
transform: translatey(0);
.slide-content{
height: 195px;
background-size: 100% auto;
h3{
animation: fadeInUp .3s both ease-out;
}
}
}
}
.slide-content{
transition: ease all .3s;
vertical-align: middle;
height: 165px;
background:#eee;
border-radius: 10px;
text-align: center;
background-position: center center;
position: relative;
background-size: 130% auto;
&.full{
position: absolute;
}
&.nut{
background-image:url('https://image.tmdb.org/t/p/w370_and_h556_bestv2/aRD1vLU7k5NHO0HThfHrjEQwWRz.jpg');
}
&.beauty{
background-image:url('https://media1.popsugar-assets.com/files/thumbor/z5oKgNC9S4DS6Bay78Aoy5aLO4s/fit-in/728xorig/filters:format_auto-!!-:strip_icc-!!-/2017/01/26/813/n/1922283/055dc333c3280d59_BeautyAndTheBeast58726d5b9fac8/i/Beauty-Beast-2017-Movie-Posters.jpg');
}
&.onward{
background-image:url('https://images-na.ssl-images-amazon.com/images/I/71YwxjfhEiL._AC_SY679_.jpg');
}
&:before{
transition: ease all .3s;
content: "";
position: absolute;
width: 90%;
height: 100%;
background-image: inherit;
background-size: cover;
z-index: -1;
filter: blur(12px);
opacity: 0.6;
left: 50%;
transform: translate(-50%, 8%);
border-radius: 30px;
}
h3{
color:white;
position: absolute;
bottom:10px;
left:20px;
right: 20px;
text-align: left;
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
font-family: $secondaryFont;
text-shadow: 0 0 5px rgba(0,0,0,.5);
animation: fadeOutDown .3s both ease-out;
}
}
}
.category-slider{
margin: 20px -20px;
.slick-list{
padding: 0 20px;
padding-bottom: 40px!important;
.slick-slide{
border:0;
outline: none;
margin: 0 5px;
height: 70px;
width: 175px;
}
.category{
transition: ease all .3s;
vertical-align: middle;
height: 70px;
width: 175px;
background:#eee;
border-radius: 10px;
background-position: center center;
position: relative;
background-size: 100% auto;
h4{
text-align: center;
line-height: 70px;
color:white;
font-weight: 800;
position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
z-index: 2;
transition: ease all .3s;
}
&:after{
background: rgb(163,34,43);
background: linear-gradient(0deg, rgba(255,54,68,.9) 0%, rgba(200,38,47,.9) 50%, rgba(195,63,73,.7) 100%);
transition: ease all .3s;
content: "";
position: absolute;
width: 100%;
height: 100%;
left:0;
top:0;
border-radius: 10px;
}
&:before{
transition: ease all .3s;
content: "";
position: absolute;
width: 90%;
height: 100%;
background-color: #eee;
background-size: cover;
z-index: -1;
filter: blur(20px);
opacity: .9;
left: 50%;
transform: translate(-50%, 10%);
border-radius: 30px;
}
&.action{
background-image:url('https://ae01.alicdn.com/kf/HTB1omVZIpXXXXcrXVXXq6xXFXXX6.jpg');
}
&.comedy{
background-image:url('https://spyrestudios.com/wp-content/uploads/comedy-posters/88_comedyposter.jpg');
}
&.drama{
background-image:url('https://cdn3.f-cdn.com/contestentries/1483944/23877317/5c9c1b8630103_thumb900.jpg');
}
}
}
}
.my-list-slider{
margin: 20px -20px;
.slick-list{
padding-bottom: 60px!important;
padding: 0 20px;
.slick-slide{
border:0;
outline: none;
margin: 0 5px;
width: 150px;
height: 190px;
}
.itm{
transition: ease all .3s;
vertical-align: middle;
background:#eee;
border-radius: 10px;
background-position: center center;
position: relative;
background-repeat: none;
background-size: 100% auto;
height: 190px;
width: 150px;
&.movie-1{
background-image:url('https://ae01.alicdn.com/kf/HTB1omVZIpXXXXcrXVXXq6xXFXXX6.jpg');
}
&.movie-2{
background-image:url('https://spyrestudios.com/wp-content/uploads/comedy-posters/88_comedyposter.jpg');
}
&.movie-3{
background-image:url('https://cdn3.f-cdn.com/contestentries/1483944/23877317/5c9c1b8630103_thumb900.jpg');
}
&.movie-4{
background-image:url('https://spyrestudios.com/wp-content/uploads/comedy-posters/88_comedyposter.jpg');
}
&:before{
transition: ease all .3s;
content: "";
position: absolute;
width: 90%;
height: 100%;
background-image: inherit;
background-size: cover;
z-index: -1;
filter: blur(20px);
opacity: .9;
left: 50%;
transform: translate(-50%, 10%);
border-radius: 30px;
}
&.action{
background-image:url('https://ae01.alicdn.com/kf/HTB1omVZIpXXXXcrXVXXq6xXFXXX6.jpg');
}
&.comedy{
background-image:url('https://spyrestudios.com/wp-content/uploads/comedy-posters/88_comedyposter.jpg');
}
&.drama{
background-image:url('https://cdn3.f-cdn.com/contestentries/1483944/23877317/5c9c1b8630103_thumb900.jpg');
}
}
}
}
.section-header{
display: flex;
width: 100%;
h2{
font-size: 20px;
font-family: $secondaryFont;
margin: 0;
}
.go{
margin-left: auto;
svg{
height: 20px;
width: 20px;
}
}
}
}
/* DEV */
.dribbble {
position: fixed;
display: block;
right: 20px;
bottom: 20px;
z-index: 99;
img {
display: block;
height: 28px;
}
}
.dev{
position: fixed;
font-size: 14px;
top:10px;
left:10px;
padding: 1em;
color: $black;
background-color: white;
border-radius: 25px;
cursor:pointer;
a{
text-decoration: none;
font-weight: bold;
color: $black;
transition: ease all .3s;
&:hover{
color: #EF5350;
text-decoration: underline;
}
}
span{
display: inline-block;
transition: ease all .3s;
&:hover{
transform:scale(1.2);
}
}
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -0.5em;
opacity: 0;
}
40% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@keyframes tracking-out-contract {
0% {
opacity: 1;
}
50% {
opacity: 1;
}
100% {
letter-spacing: -0.5em;
opacity: 0;
}
}
View Compiled
//IN PROGRESS
/* Please ❤ this if you like it! */
/* Follow Me https://codepen.io/designfenix */
$('.hero-slider').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
autoplaySpeed: 2000,
arrows: false,
centerMode: true
});
$('.category-slider').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 2,
slidesToScroll: 1,
autoplay: false,
arrows: false,
variableWidth:true,
centerMode: false
});
$('.my-list-slider').slick({
dots: false,
infinite: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: false,
variableWidth:true,
centerMode: false
});
/*$('.slide-content').on('click', function(){
$('.movie-detail').toggleClass('active');
})*/
