In this tutorial we’ll build a simple Netflix clone using HTML and css. This is aimed at people who are starting out with HTML but have a basic understanding of the syntax. If you’re completely new to HTML you can still follow along and learn a few things.
Create a new HTML file
First we’ll need to do is create a new document. There are a few ways we can create a document but I’ll be using the text editor VS Code to do this. You can use any text editor you prefer.
Here are the steps for creating a new file in VS Code.
Open VS Code
Select “New File” in the File menu or press Ctrl + N on Windows or Cmd + N on macOS.
Select “Save” in the File menu or press Ctrl + S on Windows or Cmd + S on macOS. You will then be prompted to enter a name of the file.
Now Create Index.Html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Streaming</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<!-- i will provide this in description -->
<link rel="stylesheet" href="css/slick.css" />
<link rel="stylesheet" href="css/slick-theme.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css" />
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/select2.min.css" />
<link rel="stylesheet" href="css/select2-bootstrap4.min.css" />
<link rel="stylesheet" href="css/slick-animation.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header id="main-header">
<div class="main-header">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light p-0">
<a href="#" class="navbar-toggler c-toggler" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="navbar-toggler-icon" data-toggle="collapse">
<span class="navbar-menu-icon navbar-menu-icon--top"></span>
<span class="navbar-menu-icon navbar-menu-icon--middle"></span>
<span class="navbar-menu-icon navbar-menu-icon--bottom"></span>
</div>
</a>
<a href="index.html" class="navbar-brand">
<img src="images/logo.png" class="img-fluid logo" alt="" />
</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="menu-main-menu-container">
<ul id="top-menu" class="navbar-nav ml-auto">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">Movies</a></li>
<li class="menu-item"><a href="#">Shows</a></li>
<li class="menu-item">
<a href="#">Contact Us</a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">About Us</a></li>
<li class="menu-item"><a href="#">Contact</a></li>
<li class="menu-item"><a href="#">FAQ</a></li>
<li class="menu-item">
<a href="#">Privacy-Policy</a>
</li>
<li class="menu-item">
<a href="#">Pricing</a>
<ul class="sub-menu">
<li class="menu-item">
<a href="#">Gold Membership</a>
</li>
<li class="menu-item">
<a href="#">Silver Membership</a>
</li>
<li class="menu-item">
<a href="#">Bronze Membership</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="mobile-more-menu">
<a href="javascript:void(0);" class="more-toggle" id="dropdownMenuButton" data-toggle="more-toggle"
aria-haspopup="true" aria-expanded="false">
<i class="fa fa-ellipsis-h"></i>
</a>
<div class="more-menu" aria-labelledby="dropdownMenuButton">
<div class="navbar-right position-relative">
<ul class="d-flex align-items-center justify-content-end list-inline m-0">
<li>
<a href="#" class="search-toggle">
<i class="fa fa-search"></i>
</a>
<div class="search-box iq-search-bar">
<form action="#" class="searchbox">
<div class="form-group position-relative">
<input type="text" class="text search-input font-size-12"
placeholder="type here to search..." />
<i class="search-link fa fa-search"></i>
</div>
</form>
</div>
</li>
<li class="nav-item nav-icon">
<a href="#" class="search-toggle position-relative">
<i class="fa fa-bell"></i>
<span class="bg-danger dots"></span>
</a>
<div class="iq-sub-dropdown">
<div class="iq-card shadow-none m-0">
<div class="iq-card-body">
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-1.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">Captain Marvel</h6>
<small class="font-size-12">just now</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-2.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">
Dora and The Lost City of Gold
</h6>
<small class="font-size-12">25 mins ago</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-3.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">Mulan</h6>
<small class="font-size-12">1h 30 mins ago</small>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="iq-user-dropdown search-toggle d-flex align-items-center">
<img src="images/user/user.png" class="img-fluid user-m rounded-circle" alt="" />
</a>
<div class="iq-sub-dropdown iq-user-dropdown">
<div class="iq-card shadow-none m-0">
<div class="iq-card-body p-0 pl-3 pr-3">
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-user text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Manage Profile</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-cog text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Settings</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-inr text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Pricing Plan</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-sign-out text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Logout</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="navbar-right menu-right">
<ul class="d-flex align-items-center list-inline m-0">
<li class="nav-item nav-icon">
<a href="#" class="search-toggle device-search">
<i class="fa fa-search"></i>
</a>
<div class="search-box iq-search-bar d-search">
<form action="#" class="searchbox">
<div class="form-group position-relative">
<input type="text" class="text search-input font-size-12"
placeholder="type here to search..." />
<i class="search-link fa fa-search"></i>
</div>
</form>
</div>
</li>
<li class="nav-item nav-icon">
<a href="#" class="search-toggle" data-toggle="search-toggle">
<i class="fa fa-bell"></i>
<span class="bg-danger dots"></span>
</a>
<div class="iq-sub-dropdown">
<div class="iq-card shadow-none m-0">
<div class="iq-card-body">
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-1.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">Captain Marvel</h6>
<small class="font-size-12">just now</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-2.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">
Dora and The Lost City of Gold
</h6>
<small class="font-size-12">25 mins ago</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="media align-items-center">
<img src="images/notify/thumb-3.jpg" alt="" class="img-fluid mr-3" />
<div class="media-body">
<h6 class="mb-0">Mulan</h6>
<small class="font-size-12">1h 30 mins ago</small>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item nav-icon">
<a href="#" class="iq-user-dropdown search-toggle d-flex align-items-center p-0">
<img src="images/user/user.png" class="img-fluid user-m rounded-circle" alt="" />
</a>
<div class="iq-sub-dropdown iq-user-dropdown">
<div class="iq-card shadow-none m-0">
<div class="iq-card-body p-0 pl-3 pr-3">
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-user text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Manage Profile</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-cog text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Settings</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-inr text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Pricing Plan</h6>
</div>
</div>
</a>
<a href="#" class="iq-sub-card setting-dropdown">
<div class="media align-items-center">
<div class="right-icon">
<i class="fa fa-sign-out text-primary"></i>
</div>
<div class="media-body ml-3">
<h6 class="mb-0">Logout</h6>
</div>
</div>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div class="nav-overlay"></div>
</div>
</div>
</div>
</div>
</header>
<!-- slider starts -->
<section id="home" class="iq-main-slider p-0">
<div id="home-slider" class="slider m-0 p-0">
<div class="slide slick-bg s-bg-1">
<div class="container-fluid position-relative h-100">
<div class="slider-inner h-100">
<div class="row align-items-center h--100">
<div class="col-xl-6 col-lg-12 col-md-12">
<a href="javascript:void(0)">
<div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
<img src="images/logo.png" class="c-logo" alt="" />
</div>
</a>
<h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
data-delay-in="0.6">
Jagame Thanthiram
</h1>
<div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
style="opacity: 1">
<div class="slider-ratting d-flex align-items-center mr-4 mt-2 mt-md-3">
<ul
class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star-half"></i></li>
</ul>
<span class="text-white ml-2">7.3(imbd)</span>
</div>
<div class="d-flex align-items-center mt-2 mt-md-3">
<span class="badge badge-secondary p-2">16+</span>
<span class="ml-3">2h 21min</span>
</div>
</div>
<p data-animation-in="fadeInUp">
When a clever, carefree gangster is recruited to help an overseas crime lord take down a rival, he is caught off guard by the moral dilemmas that follow.
</p>
<div class="trending-list" data-animation-in="fadeInUp" data-delay-in="1.2">
<div class="text-primary title starring">
Starring :
<span class="text-body">Dhanush, Aishwarya Lekshmi, James Cosmo</span>
</div>
<div class="text-primary title genres">
Genres : <span class="text-body">Action</span>
</div>
<div class="text-primary title tag">
Tags :
<span class="text-body">Action, Adventure</span>
</div>
</div>
<div class="d-flex align-items-center r-mb-23 mt-4" data-animation-in="fadeInUp" data-delay-in="1.2">
<a href="#" class="btn btn-hover iq-button"><i class="fa fa-play mr-3"></i>Play Now</a>
<a href="#" class="btn btn-link">More Details</a>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 trailor-video">
<a href="video/trailer.mp4" class="video-open playbtn">
<img src="images/play.png" class="play" alt="" />
<span class="w-trailor">Watch Trailer</span>
</a>
</div>
</div>
</div>
</div>
<div class="slide slick-bg s-bg-2">
<div class="container-fluid position-relative h-100">
<div class="slider-inner h-100">
<div class="row align-items-center h--100">
<div class="col-xl-6 col-lg-12 col-md-12">
<a href="javascript:void(0)">
<div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
<img src="images/logo.png" class="c-logo" alt="" />
</div>
</a>
<h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
data-delay-in="0.6">
Kannum Kannum Kollaiyadithaal
</h1>
<div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
style="opacity: 1">
<div class="slider-ratting d-flex align-items-center mr-4 mt-2 mt-md-3">
<ul
class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star-half"></i></li>
</ul>
<span class="text-white ml-2">7.4(imbd)</span>
</div>
<div class="d-flex align-items-center mt-2 mt-md-3">
<span class="badge badge-secondary p-2">13+</span>
<span class="ml-3">1h 42min</span>
</div>
</div>
<p data-animation-in="fadeInUp">
Two wily online scammers mend their fraudulent ways after meeting the girls of their dreams — until a deceitful discovery throws their world for a loop.
</p>
<div class="trending-list" data-animation-in="fadeInUp" data-delay-in="1.2">
<div class="text-primary title starring">
Starring :
<span class="text-body">Dulquer Salmaan, Ritu Varma, Rakshan</span>
</div>
<div class="text-primary title genres">
Genres : <span class="text-body">Animation</span>
</div>
<div class="text-primary title tag">
Tags :
<span class="text-body">Animation, Adventure, Comedy</span>
</div>
</div>
<div class="d-flex align-items-center r-mb-23 mt-4" data-animation-in="fadeInUp" data-delay-in="1.2">
<a href="#" class="btn btn-hover iq-button"><i class="fa fa-play mr-3"></i>Play Now</a>
<a href="#" class="btn btn-link">More Details</a>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 trailor-video">
<a href="video/trailer.mp4" class="video-open playbtn">
<img src="images/play.png" class="play" alt="" />
<span class="w-trailor">Watch Trailer</span>
</a>
</div>
</div>
</div>
</div>
<div class="slide slick-bg s-bg-3">
<div class="container-fluid position-relative h-100">
<div class="slider-inner h-100">
<div class="row align-items-center h--100">
<div class="col-xl-6 col-lg-12 col-md-12">
<a href="javascript:void(0)">
<div class="channel-logo" data-animation-in="fadeInLeft" data-delay-in="0.5">
<img src="images/logo.png" class="c-logo" alt="" />
</div>
</a>
<h1 class="slider-text big-title title text-uppercase" data-animation-in="fadeInLeft"
data-delay-in="0.6">
Navarasa
</h1>
<div class="d-flex flex-wrap align-items-center fadeInLeft animated" data-animation-in="fadeInLeft"
style="opacity: 1">
<div class="slider-ratting d-flex align-items-center mr-4 mt-2 mt-md-3">
<ul
class="ratting-start p-0 m-0 list-inline text-primary d-flex align-items-center justify-content-left">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star-half"></i></li>
</ul>
<span class="text-white ml-2">7.5(imbd)</span>
</div>
<div class="d-flex align-items-center mt-2 mt-md-3">
<span class="badge badge-secondary p-2">16+</span>
<span class="ml-3">1h 52min</span>
</div>
</div>
<p data-animation-in="fadeInUp">
From amusement to awe, the nine human emotions of Indian aesthetic theory are explored in this anthology series.
</p>
<div class="trending-list" data-animation-in="fadeInUp" data-delay-in="1.2">
<div class="text-primary title starring">
Starring :
<span class="text-body">Suriya, Vijay Sethupathi, Revathy</span>
</div>
<div class="text-primary title genres">
Genres : <span class="text-body">Horror</span>
</div>
<div class="text-primary title tag">
Tags :
<span class="text-body">Horror, Mystery, Thriller</span>
</div>
</div>
<div class="d-flex align-items-center r-mb-23 mt-4" data-animation-in="fadeInUp" data-delay-in="1.2">
<a href="#" class="btn btn-hover iq-button"><i class="fa fa-play mr-3"></i>Play Now</a>
<a href="#" class="btn btn-link">More Details</a>
</div>
</div>
</div>
<div class="col-xl-5 col-lg-12 col-md-12 trailor-video">
<a href="video/trailer.mp4" class="video-open playbtn">
<img src="images/play.png" class="play" alt="" />
<span class="w-trailor">Watch Trailer</span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- slider ends -->
<!-- main content starts -->
<div class="main-content">
<!-- favorite section starts -->
<section id="iq-favorites">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="iq-main-header d-flex align-items-center justify-content-between">
<h4 class="main-title">Top Picks For You</h4>
<a href="#" class="iq-view-all">View All</a>
</div>
<div class="favorite-contens">
<ul class="favorites-slider list-inline row p-0 mb-0">
<!-- slide item 1 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/favorite/f1.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Insidious </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">16+</div>
<span class="text-white">1h 43min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 2 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/favorite/f2.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> War </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">12+</div>
<span class="text-white">2h 34min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">58+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 3 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/favorite/f3.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Five Feet Apart </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">18+</div>
<span class="text-white">2h 57min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 4 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/favorite/f4.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Chhichore </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">10+</div>
<span class="text-white">2h 23min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 5 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/favorite/f5.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Doctor Strange </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">12+</div>
<span class="text-white">1h 55min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- favourite section ends -->
<!-- upcoming contents section starts -->
<section id="iq-upcoming-movie">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="iq-main-header d-flex align-items-center justify-content-between">
<h4 class="main-title">Popular Movies</h4>
<a href="#" class="iq-view-all">View All</a>
</div>
<div class="favorite-contens">
<ul class="favorites-slider list-inline row p-0 mb-0">
<!-- slide item 1 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/popular/u1.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Mulan </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">10+</div>
<span class="text-white">2h</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">89+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 2 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/popular/u2.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Laxmii </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">18+</div>
<span class="text-white">2h 21min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">35+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 3 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/popular/u3.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Captain America </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">12+</div>
<span class="text-white">2h 4min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">99+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 4 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/popular/u4.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Life of Pie </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">11+</div>
<span class="text-white">2h 7min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 5 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/popular/u5.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Mission Mangal </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">12+</div>
<span class="text-white">2h 10min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- upcoming contents section ends -->
<!-- top ten trending -->
<section id="iq-topten">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="topten-contents">
<h4 class="main-title iq-title topten-title">
Trending Movies
</h4>
<ul id="top-ten-slider" class="list-inline p-0 m-0 d-flex align-items-center">
<li class="slick-bg">
<a href="#">
<img src="images/top-10/01.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title"><a href="#">Harry Potter</a></h6>
</a>
</li>
<li class="slick-bg">
<a href="#">
<img src="images/top-10/02.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title">
<a href="#">The Queen's Gambit</a>
</h6>
</a>
</li>
<li class="slick-bg">
<a href="#">
<img src="images/top-10/03.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title"><a href="#">Scam 1992</a></h6>
</a>
</li>
<li class="slick-bg">
<a href="#">
<img src="images/top-10/04.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title"><a href="#">Stranger Things</a></h6>
</a>
</li>
<li class="slick-bg">
<a href="#">
<img src="images/top-10/05.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title"><a href="#">BoJack Horsemen</a></h6>
</a>
</li>
<li class="slick-bg">
<a href="#">
<img src="images/top-10/06.jpg" class="img-fluid w-100" alt="" />
<h6 class="iq-title"><a href="#">Peaky Blinders</a></h6>
</a>
</li>
</ul>
<div class="vertical_s">
<ul id="top-ten-slider-nav" class="list-inline p-0 m-0 d-flex align-items-center">
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/01.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>Harry Potter</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
10+
</div>
<span class="text-white">8 Parts</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/02.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>The Queen's Gambit</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
18+
</div>
<span class="text-white">1 Season</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/03.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>Scam 1992</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
12+
</div>
<span class="text-white">1 Season</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/04.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>Stranger Things</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
16+
</div>
<span class="text-white">3 Season</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/05.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>BoJack Horseman</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
15+
</div>
<span class="text-white">6 Season</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
<li>
<div class="block-images position-relative">
<a href="#">
<img src="images/top-10/06.jpg" class="img-fluid w-100" alt="" />
</a>
<div class="block-description">
<h5>Peaky Blinders</h5>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">
20+
</div>
<span class="text-white">5 Season</span>
</div>
<div class="hover-buttons">
<a href="#" class="btn btn-hover" tabindex="0">
<i class="fa fa-play mr-1" aria-hidden="true"></i>
Play Now
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="iq-suggested" class="s-margin">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="iq-main-header d-flex align-items-center justify-content-between">
<h4 class="main-title">Suggested Sports</h4>
<a href="#" class="iq-view-all">View All</a>
</div>
<div class="favorite-contens">
<ul class="favorites-slider list-inline row p-0 mb-0">
<!-- slide item 1 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/suggested/01.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Basketball </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">NBA</div>
<span class="text-white">SPorts</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">89+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 2 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/suggested/02.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> VolleyBall </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">PRO</div>
<span class="text-white">Sports</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">35+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 3 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/suggested/03.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Basketball </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">LSU</div>
<span class="text-white">Sports</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">99+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 4 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/suggested/04.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Cricket </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">T-20</div>
<span class="text-white">Sports</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 5 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/suggested/05.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Golf </a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">PGA</div>
<span class="text-white">Sports</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- parallax section -->
<section id="parallex" class="parallax-window">
<div class="container-fluid h-100">
<div class="row align-items-center justify-content-center h-100 parallaxt-details">
<div class="col-lg-4 r-mb-23">
<div class="text-left">
<a href="javascript:void(0)">
<h1 class="parallax-heading">Avatar</h1>
</a>
<div class="parallax-ratting d-flex align-items-center mt-3 mb-3">
<ul
class="ratting-start p-o m-0 list-inline text-primary d-flex align-items-center justify-content-left">
<li>
<a href="#" class="text-primary"><i class="fa fa-star"></i></a>
</li>
<li>
<a href="#" class="text-primary"><i class="pl-2 fa fa-star"></i></a>
</li>
<li>
<a href="#" class="text-primary"><i class="pl-2 fa fa-star"></i></a>
</li>
<li>
<a href="#" class="text-primary"><i class="pl-2 fa fa-star"></i></a>
</li>
<li>
<a href="#" class="text-primary"><i class="pl-2 fa fa-star-half-o"></i></a>
</li>
</ul>
<span class="text-white ml-3">7.8(Imbd)</span>
</div>
<div class="movie-time d-flex align-items-center mb-3">
<div class="badge badge-secondary p-1 mr-2">9+</div>
<span class="text-white">2h 42min</span>
</div>
<p>
A paraplegic Marine dispatched to the moon Pandora on a unique
mission becomes torn between following his orders and
protecting the world he feels is his home.
</p>
<div class="parallax-buttons">
<a href="#" class="btn btn-hover">Play Now</a>
<a href="#" class="btn btn-link">More Details</a>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="parallax-img">
<a href="#"><img src="images/parallax/avatar.jpg" alt="" class="img-fluid w-100" /></a>
</div>
</div>
</div>
</div>
</section>
<!-- trending section -->
<section id="iq-trending" class="s-margin">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="iq-main-header d-flex align-items-center justify-content-between">
<h4 class="main-title">Trending</h4>
</div>
<div class="trending-contens">
<ul id="trending-slider-nav" class="list-inline p-0 mb-0 row align-items-center">
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/01.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/02.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/03.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/04.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/05.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
<li>
<a href="javascript:void(0);">
<div class="movie-slick position-relative">
<img src="images/trending/06.jpg" class="img-fluid" alt="">
</div>
</a>
</li>
</ul>
<ul id="trending-slider" class="list-inline p-0 m-0 d-flex align-items-center">
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/01.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data1" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data2" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data3" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data4" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data1" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">The Crown</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">18+</span>
<span class="ml-3">3 Seasons</span>
<span class="trending-year">2020</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#2 in Series Today</span>
</div>
<p class="trending-dec">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex facere sapiente optio dolor aperiam impedit sint molestiae delectus, qui magni 1500 thid had that.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Clarie Foy, Olivia Colman, Imelda Staunton
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Biography
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
Peter Morgan
</span>
</div>
</div>
</div>
</div>
<div id="trending-data2" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">the Crown</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
2 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
<option value="Season3">Season 3</option>
<option value="Season4">Season 4</option>
<option value="Season4">Season 4</option>
<option value="Season6">Season 6</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data3" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">the crown</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data4" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">the Crown</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/02.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data5" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data6" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data7" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data8" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data5" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Big Bang Theory</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">15+</span>
<span class="ml-3">2 Seasons</span>
<span class="trending-year">2020</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#3 in Series Today</span>
</div>
<p class="trending-dec">
A woman who moves into an appartment across the hall from two brilliant but social awkward physicists shows then how little they know about life outside of the laboratory.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Jhonny Galecki, Jim Parsons , Kaley Cuoco
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Comedy Romance
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
Chuck Lorre, Bill Prady
</span>
</div>
</div>
</div>
</div>
<div id="trending-data6" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Big Bang Theory</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
12 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
<option value="Season3">Season 3</option>
<option value="Season4">Season 4</option>
<option value="Season5">Season 5</option>
<option value="Season6">Season 6</option>
<option value="Season7">Season 7</option>
<option value="Season8">Season 8</option>
<option value="Season9">Season 9</option>
<option value="Season10">Season 10</option>
<option value="Season11">Season 11</option>
<option value="Season12">Season 12</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data7" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Big Bang Theory</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data8" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Big Bang Theory</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/ce3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/03.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data9" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data10" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data11" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data12" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data9" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Peaky Blinders</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">11+</span>
<span class="ml-3">3 Seasons</span>
<span class="trending-year">2020</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#5 in Series Today</span>
</div>
<p class="trending-dec">
A gangster family epic set in 1990s England, centering on a gang who sew razor blades in the peaks of their caps, and their fierce boss Tommy Shelby.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Cillian Murphy, Paul Anderson, Helen McCrory
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Crime, Drama
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
Steven Knight
</span>
</div>
</div>
</div>
</div>
<div id="trending-data10" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Peaky Blinders</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
2 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
<option value="Season3">Season 3</option>
<option value="Season4">Season 4</option>
<option value="Season4">Season 4</option>
<option value="Season6">Season 6</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data11" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Peaky Blinders</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data12" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Peaky Blinders</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/04.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data13" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data14" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data15" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data16" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data13" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Narcos</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">18+</span>
<span class="ml-3">3 Seasons</span>
<span class="trending-year">2015</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#21 in Series Today</span>
</div>
<p class="trending-dec">
A chronicled look at the criminal exploits of Colombian drug lord Pablo Escobar, as well as the many other drug kingpins who plagued the country through the years.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Pedro Pascal, Wagner Moura, Boyd Holbrook
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Biography, Crime, Drama
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
Carlo Bernard, Chris Brancato, Doug Miro
</span>
</div>
</div>
</div>
</div>
<div id="trending-data14" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Narcos</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
2 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
<option value="Season3">Season 3</option>
<option value="Season4">Season 4</option>
<option value="Season4">Season 4</option>
<option value="Season6">Season 6</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n2.png" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data15" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Narcos</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n2.png" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data16" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Narcos</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/05.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data17" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data18" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data19" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data20" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data17" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">FRIENDS</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">7+</span>
<span class="ml-3">10 Seasons</span>
<span class="trending-year">1994 - 2004</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#6 in Series Today</span>
</div>
<p class="trending-dec">
Follows the personal and professional lives of six twenty to thirty-something-year-old friends living in Manhattan.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Jennifer Aniston, Courteney Cox, Lisa Kudrow
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Comedy , Romance
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
David Crane, Marta Kauffman
</span>
</div>
</div>
</div>
</div>
<div id="trending-data18" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">FRIENDS</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
10 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
<option value="Season3">Season 3</option>
<option value="Season4">Season 4</option>
<option value="Season4">Season 4</option>
<option value="Season6">Season 6</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data19" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">FRIENDS</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data20" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">FRIENDS</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<div class="tranding-block position-relative" style="background-image: url(images/trending/06.jpg);">
<div class="trending-custom-tab">
<div class="tab-title-info position-relative">
<ul class="trending-pills d-flex nav nav-pills justify-content-center align-items-center text-center" role="tablist">
<li class="nav-item">
<a href="#trending-data21" class="nav-link active show" data-toggle="pill" role="tab" aria-selected="true">
Overview
</a>
</li>
<li class="nav-item">
<a href="#trending-data22" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Episodes
</a>
</li>
<li class="nav-item">
<a href="#trending-data23" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Trailers
</a>
</li>
<li class="nav-item">
<a href="#trending-data24" class="nav-link" data-toggle="pill" role="tab" aria-selected="false">
Similiar Like This
</a>
</li>
</ul>
</div>
<div class="trending-content">
<div id="trending-data21" class="overview-tab tab-pane fade active show">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="javascript:void(0);" tabindex="0">
<div class="res-logo">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Mirzapur</h1>
<div class="d-flex align-items-center text-white text-detail">
<span class="badge badge-secondary p-3">18+</span>
<span class="ml-3">2 Seasons</span>
<span class="trending-year">2018</span>
</div>
<div class="d-flex align-items-center series mb-4">
<a href="javascript:void(0);">
<img src="images/trending/trending-label.png" class="img-fluid" alt="">
</a>
<span class="text-gold ml-3">#11 in Series Today</span>
</div>
<p class="trending-dec">
A shocking incident at a wedding procession ignites a series of events entangling the lives of two families in the lawless city of Mirzapur.
</p>
<div class="p-btns">
<div class="d-flex align-items-center p-0">
<a href="#" class="btn btn-hover mr-2" tabindex="0">
<i class="fa fa-play mr-2"></i>
Play Now
</a>
<a href="#" class="btn btn-link" tabindex="0">
<i class="fa fa-plus pr-2"></i>
My List
</a>
</div>
</div>
<div class="trending-list mt-4">
<div class="text-primary title">
Starring :
<span class="text-body">
Pankaj Tripathi, Ali Fazal, Divyendu Sharma
</span>
</div>
<div class="text-primary title">
Genres :
<span class="text-body">
Action, Crime, Drama
</span>
</div>
<div class="text-primary title">
Creators :
<span class="text-body">
Puneet Krishna, Karan Anshuman
</span>
</div>
</div>
</div>
</div>
<div id="trending-data22" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Mirzapur</h1>
<div class="d-flex align-items-center text-white text-detail mb-4">
<span class="season_date">
2 Seasons
</span>
<span class="trending-year">Feb 2019</span>
</div>
<div class="iq-custom-select d-inline-block sea-epi">
<select name="Seasons" class="form-control season-select">
<option value="Season1">Season 1</option>
<option value="Season2">Season 2</option>
</select>
</div>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Episode 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data23" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Mirzapur</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m1.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="trending-data24" class="overlay-tab tab-pane fade">
<div class="trending-info align-items-center w-100 animated fadeInUp">
<a href="#" tabindex="0">
<div class="channel-logo">
<img src="images/logo.png" class="c-logo" alt="">
</div>
</a>
<h1 class="trending-text big-title text-uppercase">Mirzapur</h1>
<div class="episodes-contens mt-4">
<div class="owl-carousel owl-theme episodes-slider1 list-inline p-0 m-0">
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/bbt3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 1</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/fe2.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 2</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/m4.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 3</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/pb3.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 4</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
<div class="e-item">
<div class="block-image position-relative">
<a href="#">
<img src="images/episodes/n5.jpg" class="img-fluid" alt="">
</a>
<div class="episode-play-info">
<div class="episode-play">
<a href="#" tabindex="0">
<i class="fa fa-play"></i>
</a>
</div>
</div>
</div>
<div class="episodes-description text-body">
<div class="d-flex align-items-center justify-content-between">
<a href="#">Trailer 5</a>
<span class="text-primary">2.25m</span>
</div>
<p class="mb-0">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque aliquam quisquam iure tempore earum sequi.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section id="iq-suggested" class="s-margin">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 overflow-hidden">
<div class="iq-main-header d-flex align-items-center justify-content-between">
<h4 class="main-title">Recommended For You</h4>
<a href="#" class="iq-view-all">View All</a>
</div>
<div class="favorite-contens">
<ul class="favorites-slider list-inline row p-0 mb-0">
<!-- slide item 1 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/tvthrillers/01.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#">The Martian</a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">15+</div>
<span class="text-white">2h 45min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">89+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 2 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/tvthrillers/02.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#">Unhinged</a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">7+</div>
<span class="text-white">2h 12min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">35+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 3 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/tvthrillers/03.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#">Kingsman</a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">18+</div>
<span class="text-white">3h</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">99+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 4 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/tvthrillers/04.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Casino Royale</a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">18+</div>
<span class="text-white">1h 55min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
<!-- slide item 5 -->
<li class="slide-item">
<div class="block-images position-relative">
<div class="img-box">
<img src="images/tvthrillers/05.jpg" class="img-fluid" alt="" />
</div>
<div class="block-description">
<h6 class="iq-title">
<a href="#"> Mision Impossible</a>
</h6>
<div class="movie-time d-flex align-items-center my-2">
<div class="badge badge-secondary p-1 mr-2">17+</div>
<span class="text-white">1h 35min</span>
</div>
<div class="hover-buttons">
<span class="btn btn-hover iq-button">
<i class="fa fa-play mr-1"></i>
Play Now
</span>
</div>
</div>
<div class="block-social-info">
<ul class="list-inline p-0 m-0 music-play-lists">
<li class="share">
<span><i class="fa fa-share-alt"></i></span>
<div class="share-box">
<div class="d-flex align-items-center">
<a href="#" class="share-ico"><i class="fa fa-share-alt"></i></a>
<a href="#" class="share-ico"><i class="fa fa-youtube"></i></a>
<a href="#" class="share-ico"><i class="fa fa-instagram"></i></a>
</div>
</div>
</li>
<li>
<span><i class="fa fa-heart"></i></span>
<span class="count-box">19+</span>
</li>
<li>
<span><i class="fa fa-plus"></i></span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- main content ends -->
<footer class="iq-bg-dark">
<div class="footer-top">
<div class="container-fluid">
<div class="row footer-standard">
<div class="col-lg-5">
<div class="widget text-left">
<div>
<ul class="menu p-0">
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy-Policy</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Watch List</a></li>
</ul>
</div>
</div>
<div class="widget text-left">
<div class="textwidget">
<p><small>This is Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quo tempore. Quasi rem rerum est in nulla atque quibusdam illo. this is footer and simple tsesxij is writen jkd. fsek hello how are you. please like and subscribe. footer ends .</small></p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 mt-4 mt-lg-0">
<h6 class="footer-link-title">
Follow Us:
</h6>
<ul class="info-share">
<li>
<a href="#">
<i>
<fa class="fa fa-facebook"></fa>
</a>
</li>
<li>
<a href="#">
<i>
<fa class="fa fa-youtube"></fa>
</a>
</li>
<li>
<a href="#">
<i>
<fa class="fa fa-instagram"></fa>
</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mt-4 mt-lg-0">
<div class="widget text-left">
<div class="textwidget">
<h6 class="footer-link-title">
NetFlix App
</h6>
<div class="d-flex align-items-center">
<a href="#"><img src="images/footer/01.jpg" alt=""></a>
<br>
<a href="#" class="ml-3"><img src="images/footer/02.jpg" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- js files -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/select2.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/slick-animation.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Then Add stylesheet
Style.css
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 1.5;
padding: 0;
margin: 0;
color: #d1d0cf;
background: #141414;
}
.container-fluid{
padding: 0 100px;
}
header#main-header{
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 99;
background: rgba(20, 20, 20, 0.5) !important;
backdrop-filter: blur(10px);
}
header .navbar-light .navbar-brand img.logo{
width: 160px;
}
header .navbar .menu-header-menu-container, header .navbar .menu-main-menu-container{
display: inline-block;
width: 100%;
}
a{
color: #d1d0cf;
text-decoration: none;
outline: medium none;
transition: all 0.5s ease-out 0s;
}
header .navbar ul.navbar-nav{
display: block;
text-align: center;
}
header .navbar ul li{
list-style: none;
margin-right: 18px;
position: relative;
transition: all 0.3s ease-in-out;
display: inline-block;
}
header .navbar ul li.menu-item a{
font-size: 16px;
font-weight: 400;
position: relative;
padding: 0 0 0 10px;
line-height: 70px;
z-index: 9;
text-decoration: none;
transition: all 0.3s ease-in-out;
text-transform: uppercase;
}
header .navbar ul li.menu-item a:hover{
color: #e50914 !important;
}
.navbar ul li:hover > .sub-menu{
display: block !important;
animation: fade-in 0.5s cubic-bezier(0.39,0.575,0.565,1) both;
}
.navbar ul li:hover .sub-menu{
display: block;
padding: 15px 0;
background: #141414;
position: absolute;
top: 100%;
left: 0;
padding-left: 0;
display: inline-block;
min-width: 256px;
box-shadow: 0 1px 30px 0 rgb(36 38 43 / 10%);
}
.navbar ul li .sub-menu li>.sub-menu{
display: none;
}
.navbar .navbar-nav li:last-child .sub-menu li:hover>.sub-menu, .navbar .navbar-nav li:nth-last-child(2) .sub-menu li:hover > .sub-menu{
left: auto;
right: 100%;
top: -15px;
}
.navbar ul li:last-child{
margin-right: 0;
}
.navbar ul.navbar-nav>li.menu-item:hover > a, .navbar ul.navbar-nav > li.menu-item:hover>i{
color: #e50914;
}
.navbar ul.navbar-nav>li.menu-item>a{
text-transform: uppercase;
}
.navbar ul.navbar-nav>li:hover > a{
font-weight: 600;
}
.navbar ul li.menu-item a{
font-size: 16px;
font-weight: 400;
position: relative;
padding: 0 0 0 10px;
line-height: 70px;
z-index: 9;
text-decoration: none;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
}
.navbar ul li .sub-menu{
display: none;
}
.navbar ul li .sub-menu li{
margin-right: 0;
padding: 0 15px;
}
.navbar ul.sub-menu li{
display: block;
text-align: left;
}
.navbar ul li{
list-style: none;
margin-right: 18px;
position: relative;
transition: all 0.3s ease-in-out;
display: inline-block;
}
.menu-sticky .navbar ul li .sub-menu > li a{
line-height: 1em;
}
.navbar ul li .sub-menu li > a{
font-size: 14px;
border-radius: 0;
display: inline-block;
width: 100%;
line-height: 1em;
padding: 15px;
color: #d1d0cf;
position: relative;
overflow: hidden;
}
.navbar ul li.menu-item a{
font-size: 16px;
font-weight: 400;
position: relative;
padding: 0 0 0 10px;
line-height: 70px;
position: relative;
z-index: 9;
text-decoration: none;
transition: all 0.3s ease-in-out;
text-transform: capitalize;
}
.navbar ul li .sub-menu li>a::before{
position: absolute;
content: "";
background: #e50914;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 4px;
opacity: 0;
transform: translate3d(-100%,0,0);
transition: all 0.5s ease-in-out;
}
header .navbar ul li .sub-menu li.current-menu-parent>a::after,
header .navbar ul li .sub-menu li .sub-menu li.menu-item.current-menu-item>a::after,
header .navbar ul li .sub-menu li .sub-menu li.menu-item:hover>a::after{
opacity: 1;
transform: translate3d(0,0,0);
transition: all 0.5s ease-in-out;
}
header .navbar ul li .sub-menu li:hover>a::after{
opacity: 1;
transform: translate3d(0,0,0);
transition: all 0.5s ease-in-out;
}
.navbar ul li .sub-menu li >a::after{
position: absolute;
content: "";
background: linear-gradient(270deg, rgba(11,1,2,0) 0% , rgba(255,55,65,0.3) 100%);
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: translate3d(-100%,0,0);
transition: all 0.5s ease-in-out;
z-index: -1;
opacity: 0;
}
header .navbar ul li .sub-menu li:hover>a::before{
opacity: 1;
transform: translate3d(0,0,0);
transition: all .5s ease-in-out;
}
.nav-open .nav-overlay{
visibility: visible;
transition: 0.3s;
}
.nav-overlay{
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
z-index: 900;
display: block;
width: 100%;
position: fixed;
visibility: hidden;
background: rgba(0, 0, 0, 0.6);
transition: 0.3s;
}
.more-toggle{
color: #fff !important;
font-size: 22px;
}
.dropdown-toggle.more-toggle::after{
content: none;
}
.mobile-more-menu{
display: none;
}
.more-menu{
position: absolute;
top: 50px;
left: auto;
right: 0;
min-width: 18rem;
padding: 0.35rem 0.5rem;
margin: 0;
opacity: 0;
transform: translate(0,70px);
transition: all 0.3s ease-out 0s;
background: #191919;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
visibility: hidden;
z-index: 999;
}
.more-menu.show{
opacity: 1;
transform: translate(0,0);
visibility: visible;
}
header .navbar ul li:last-child{
margin-right: 0;
}
.nav-item span.dots{
height: 10px;
width: 10px;
font-size: 0;
text-align: center;
padding: 0;
position: absolute;
top: 3px;
right: 12px;
border-radius: 50%;
}
.menu-right .nav-items span.dots{
right: 0;
}
.navbar-right li .iq-sub-dropdown .iq-sub-card{
position: relative;
font-size: inherit;
padding: 15px 15px;
line-height: normal;
color: inherit;
text-align: left;
display: inline-block;
width: 100%;
border: 1px solid;
border-image-slice: 1;
border-width: 0 0 1px 0;
border-image-source: linear-gradient(to right, rgba(209,208,207,0.6), rgba(209,208,207,0.3), rgba(209,208,207,0));
}
.iq-sub-card.setting-dropdown{
padding: 15px 15px 15px 0 !important;
}
.navbar-right li .iq-sub-dropdown a.iq-sub-card:last-child{
border-bottom: 0;
}
.notify-bg{
overflow: hidden;
z-index: 99;
}
.notify-bg::before{
content: "";
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
width: 70px;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
filter: blur(30px);
transform: translateX(-100px) skewX(-30deg);
animation: noti-before-animation 2s infinite 2s;
}
.notify-bg::after{
content: "";
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.2);
width: 30px;
height: 100%;
left: 30px;
top: 0;
opacity: 0;
filter: blur(5px);
transform: translateX(-100px) skewX(-30deg);
animation: noti-after-animation 2s infinite 2s;
}
.navbar-right .iq-sub-dropdown .iq-card-body div{
border-radius: 0;
}
.navbar-right .iq-show .iq-sub-dropdown, .iq-show .search-box{
opacity: 1;
visibility: visible;
transform: translate(0,0);
}
.navbar-right .iq-sub-dropdown{
width: 300px;
opacity: 0;
visibility: hidden;
position: absolute;
top: 100%;
right: 15px;
background: #191919;
transform: translate(0,70px);
transition: all 0.3s;
padding: 0;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
transition: all 0.3s ease-out 0s;
z-index: 1;
}
.navbar-light .navbar-toggler-icon{
background: url(images/menu.png) no-repeat scroll center center;
}
.search-toggle:hover, header .navbar ul li.menu-item a:hover{
color: #e50914 !important;
}
.search-wrapper{
position: relative;
display: inline-block;
height: 36px;
vertical-align: bottom;
}
.searchbutton{
position: absolute;
font-size: 22px ;
width: 100%;
margin: 0;
padding: 0;
right: 16px;
color: #d1d0cf;
}
.search:focus+.searchbutton{
transition-duration: 0.4s;
color: #e50914;
}
.search:hover+.searchbutton{
color: #fff;
}
.search{
position: absolute;
left: 49px;
background-color: transparent;
outline: none;
border: none;
border-bottom: 1px solid transparent;
padding: 0 0 0 16px;
width: 0;
height: 100%;
z-index: 10;
color: #fff;
transition-duration: 0.4s;
}
.search:focus, .search:hover{
width: 350px;
padding: 0;
border-color: #d1d0cf;
}
.expandright{
left: auto;
right: -6px;
bottom: -2px;
}
.search::placeholder{
color: #fff !important;
}
.noti-svg{
animation: notify 1.5s ease infinite;
fill: #d1d0cf;
}
.noti-svg:hover{
fill: #e50914;
}
.search-box{
position: absolute;
left: 0;
right: 0;
top: 46px;
min-width: 25rem;
width: 100%;
z-index: -1;
opacity: 0;
transform: translate(0,70px);
transition: all 0.3s ease-out 0s;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
}
.search-toggle{
padding: 0 !important;
}
.iq-search-bar .search-input{
width: 100%;
height: 40px;
padding: 5px 15px 5px 40px;
border: none;
border-radius: 0;
color: #fff;
background: #191919 ;
}
.iq-search-bar .searchbox .search-link{
position: absolute;
left: 15px;
top: 6px;
font-size: 16px;
}
input,input[type="search"]{
width: 100%;
padding: 0px 15px;
height: 48px;
line-height: 48px;
background: #141414;
border: 1px solid #404043;
border-radius: 0;
color: #d1d0cf;
transition: all 0.5s ease-in-out;
}
input:focus , input[type="search"]:focus{
border-color: #e50914;
box-shadow: none;
outline: none;
}
.user-m{
height: 40px;
width: 40px;
min-width: 40px;
line-height: 40px;
font-size: 0.6rem;
}
h1,h2,h3,h4,h5,h6{
font-weight: 500;
margin: 0;
line-height: 1.2;
color: #fff;
}
h1 a, h2 a, h3 a, h4 a,h5 a,h6 a{
color: inherit;
}
.font-size-12{
font-size: 12px;
}
h6 .h6{
font-size: 1.0em;
}
a.text-primary:focus, a.text-primary:hover{
color: #e50914 !important;
}
.text-primary{
color: #e50914 !important;
}
header#main-header.menu-sticky{
position: fixed;
top: 0;
width: 100%;
background: rgba(20, 20, 20, 0.5) !important;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.4);
z-index: 1;
}
/* *********** Responsiveness of header ************** */
@media (min-width : 1300px){
.container{
max-width: 1170px;
}
}
@media (min-width : 1499px){
.container{
max-width: 1266px;
}
}
@media only screen and (min-width:1200px ) and (max-width : 1366px){
.search:focus , .search:hover{
width: 220px !important;
}
}
@media (min-width:992px){
.search-box{
left: auto !important;
right: 0 !important;
}
}
@media (max-width:991px){
header .navbar-light .navbar-brand img.logo{
width: 100px;
}
.navbar-collapse{
position: fixed;
top: 0;
left: 0;
padding-bottom: 15px;
width: 260px;
height: 100vh;
background: #191919;
padding-top: 40px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0,0.2);
}
.vertical_s{
position: static;
}
.navbar-collapse.collapsing{
height: auto;
transition: left 0.3s ease;
left: -100%;
}
.navbar-collapse.show{
left: -15px;
transition: left 0.3s ease-in;
z-index: 999;
}
header .navbar ul li.menu-item a{
line-height: 10px;
float: left;
width: 100%;
text-align: left;
padding: 10px 30px;
color: #fff;
}
.mobile-more-menu{
display: block;
}
.menu-right{
display: none;
}
.navbar-brand{
padding: 0;
margin-right: 0;
}
.more-menu .iq-sub-dropdown{
width: 90%;
margin: 0 auto;
left: 0;
right: 0;
top: 60px;
}
.mobile-more-menu .iq-user-dropdown img{
width: 40px;
}
.iq-search-bar .search-input{
background: #141414;
color: #d1d0cf;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
}
.navbar-right li{
position: static !important;
}
.container-fluid{
padding-left: 30px;
padding-right: 30px;
}
.main-header{
padding: 10px 0;
}
.search-box{
min-width: 16.2rem;
top: 55px;
}
header .navbar ul li{
display: block;
}
}
@media (min-width : 576px){
.iq-search-bar a.search-toggle{
display: none;
}
}
@media (min-width : 1499px){
.container{
max-width: 1200px;
}
}
@media (max-width : 479px){
header .navbar ul li.list-inline-item a{
padding-left: 20px;
padding-right: 20px;
}
header .navbar .iq-usermenu-dropdown>ul>li{
position: static;
}
.search-box{
left: 0;
right: 0;
min-width: 100%;
width: 100%;
}
header .iq-usermenu-dropdown .iq-sub-dropdown{
width: 250px;
}
}
/* header menu responsiveness */
@media screen and (min-width : 1200px){
header .navbar ul li .sub-menu li a, header.menu-sticky .navbar ul li .sub-menu li a{
white-space: nowrap;
}
}
@media screen and (max-width : 4000px) and (min-width : 1200px){
.navbar ul li:hover a, .navbar ul li:hover i{
color: #e50914;
text-decoration: none;
}
}
@media (max-width :991px){
.navbar ul.navbar-nav{
overflow-y: scroll;
overflow-x: hidden;
max-height: 350px;
display: inline-block;
width: 100%;
}
.navbar ul{
width: 100%;
background: #191919;
}
header .navbar ul li a, header .navbar ul li.menu-item a{
padding: 15px;
z-index: inherit;
text-align: left;
font-weight: normal;
}
header .navbar ul li.menu-item a{
line-height: 10px;
float: left;
width: 100%;
text-align: left;
padding: 10px 30px;
color: #fff;
}
header .navbar ul li:hover .sub-menu{
box-shadow: none;
}
header .navbar ul li .sub-menu, header .navbar ul li:hover .sub-menu{
display: none;
position: relative;
top: 0;
width: 100%;
padding: 0;
z-index: 9;
}
header .navbar ul li .sub-menu li .sub-menu li.menu-item a{
background: transparent;
}
.navbar .navbar-nav li:last-child .sub-menu li:hover>.sub-menu, .navbar .navbar-nav li:nth-last-child(2) .sub-menu li:hover >.sub-menu{
left: auto;
right: 0;
top: 0;
}
}
/* ******************** slider main **************** */
.iq-main-slider{
position: relative;
}
#home-slider ul.slick-dots{
bottom: 30px;
}
#home-slider .slick-dots li{
height: auto;
width: auto;
}
#home-slider .slick-dots li button{
height: 2px;
width: 30px;
background: rgba(229, 9, 20, 0.4);
padding: 0;
}
#home-slider .slick-dots li.slick-active button{
background: #e50914;
}
#home-slider li {
position: relative;
}
.slider-description{
position: absolute;
top: 15%;
left: 80px;
}
#home-slider h1.slider-text{
font-size: 80px;
margin: 15px 0;
}
#home-slider p{
margin: 20px 0;
width: 600px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#home-slider .slick-bg{
padding: 130px 0 50px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
position: relative;
z-index: 1;
}
#home-slider .slick-bg.s-bg-1{
background-image: url(images/slider/slider1.jpg);
}
#home-slider .slick-bg.s-bg-2{
background-image: url(images/slider/slider2.jpg);
}
#home-slider .slick-bg.s-bg-3{
background-image: url(images/slider/slider3.jpg);
}
.slick-bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 35%, rgba(83,100,141,0) 100%);
width: 100%;
z-index: -1;
}
.trailor-video{
position: absolute;
bottom: 0;
right: 0;
z-index: 999;
text-align: center;
}
.channel-name{
color: #e50914;
font-size: 20px;
margin-left: 10px;
letter-spacing: 2.5px;
font-weight: 500;
}
.c-logo{
width: 130px;
}
.channel-logo{
border-left: 5px solid #e50914;
background: transparent linear-gradient(270deg, rgba(11,1,2,0) 0%, rgba(255,55,65,0.3) 100%);
padding: 10px 10px 10px 15px;
width: 255px;
position: relative;
overflow : hidden;
}
.playbtn{
display: inline-block;
}
.playbtn img{
display: inline-block;
width: 50px;
filter: invert(1);
}
.playbtn img:hover{
background: #e50914;
border-radius: 50%;
filter: invert(0);
}
.w-trailor{
font-size: 17px;
letter-spacing: 3.5px;
font-weight: 600;
color: #fff;
margin-left: 5px;
}
.slider-inner{
position: relative;
overflow: hidden;
width: 100%;
}
.big-title{
font-family: 'Playfair Display', serif;
background: url(images/texure.jpg);
background-repeat: repeat-x;
background-position: 100% 100%;
color: transparent;
background-clip: text;
-webkit-font-smoothing : antialiased;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.slick-track{
margin: unset !important;
}
h1, .h1{
font-size: 3.052em;
}
h2, .h2{
font-size: 2.300em;
}
h3, .h3{
font-size: 1.953em;
}
h4, .h4{
font-size: 1.400em;
}
h5, .h5{
font-size: 1.300em;
}
h6, .h6{
font-size: 1.0em;
}
.slider-ratting ul li{
margin-right: 5px;
}
.text-white{
color: #fff !important;
}
.text-body{
color: #d1d0cf !important;
}
.text-primary{
color: #e50914 !important;
}
.iq-button.btn{
padding: 12px 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.btn{
outline: medium none;
padding: 9px 30px;
position: relative;
display: inline-block;
border-radius: 0 !important;
cursor: pointer;
z-index: 4;
transition: all 0.5s ease-out 0s;
}
.btn-hover{
background: #bf000a;
border: 1px solid #bf000a;
color: #fff;
transition:color 0.3s ease;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0,0,0,0);
position: relative;
border-radius: 5px;
}
.btn-hover::before{
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #e50914;
border: 1px solid #e50914;
transform: scaleX(1);
transform-origin: 50%;
transition: transform 0.3s ease-out;
}
.btn-hover:hover, .btn-hover:focus, .btn-hover:active{
color: #fff;
}
.btn-hover:focus{
box-shadow: none !important;
}
.btn-hover:hover::before, .btn-hover:focus::before, .btn-hover:active::before{
transform: scaleX(0);
}
.btn-link{
background: transparent;
color: #fff;
}
.btn-link:hover{
color: #e50914;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
a.text-primary:focus, a.text-primary:hover{
color: #e50914 !important;
}
.w-trailor:hover{
transition: all 0.5s ease;
color: #e50914;
}
/* responsiveness *********************** */
@media (min-width : 1499px){
#home-slider h1.slider-text{
margin: 25px 0 0;
}
#home-slider p{
margin: 32px 0px;
}
}
@media (max-width : 1199px){
#home-slider .slick-bg{
height: 100%;
}
}
@media (max-width : 991px){
.hover-buttons .btn{
font-size: 10px;
}
#home-slider .slick-bg{
padding: 50px 0;
}
.r-mb-23{
margin-bottom: 23px;
}
.trailor-video{
display: none;
}
#home-slider h1.slider-text{
font-size: 35px;
}
.iq-main-slider{
padding-top: 60px !important;
}
}
@media (max-width : 767px){
#home-slider h1.slider-text{
line-height: 62px;
margin: 0;
}
#home-slider p{
margin: 22px 0;
}
.iq-main-header{
margin-bottom: 10px;
}
.main-content{
padding-top: 25px;
}
#home-slider p{
width: 100%;
}
.slick-bg::before{
background: linear-gradient(-360deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 40%,
rgba(83,100,141,0) 100%);
}
.play-button i{
font-size: 16px;
}
.play-button::after, .play-button::before{
width: 40px;
height: 40px;
}
}
/* ******************************** */
.main-content{
padding-top: 40px;
}
.iq-main-header{
margin-bottom: 20px;
}
.main-title a:hover , .main-title a:focus{
color: #e50914 !important;
}
.iq-view-all:hover{
color: #bf000a;
}
.favorites-slider .slick-list{
overflow: visible;
padding-bottom: 40px !important;
}
.favorites-slider li.slide-item{
float: left;
width: 25%;
}
li.slide-item{
position: relative;
padding: 0px 15px;
}
li.slide-item .block-images{
position: relative;
width: 100%;
transition: all 0.45s ease 0s;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0,0,0);
transition: all 0.6s ease 0s;
}
li.slide-item:hover .block-images{
overflow: visible;
border-left: 5px solid #e50914;
}
li.slide-item:hover .block-images .img-box{
position: relative;
}
.favorites-slider .slick-list{
overflow: visible;
}
li.slide-item:hover .block-images{
z-index: 99;
transform: scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(500px);
transform-origin: 50% 50%;
transition: all 0.6s ease 0s;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}
.block-social-info{
position: absolute;
top: 0;
left: auto;
bottom: 0;
right: 25px;
z-index: 999;
display: flex;
align-items: center;
opacity: 0;
}
.block-description{
position: absolute;
left: 25px;
top: 0;
bottom: 0;
z-index: 999;
display: flex;
justify-content: center;
flex-direction: column;
}
.block-description>h6{
font-size: 1.5em;
}
.block-description .iq-title{
font-size: 18px;
color: #fff;
text-transform: capitalize;
font-weight: 600;
}
.music-play-lists li{
position: relative;
height: 30px;
width: 30px;
line-height: 35px;
text-align: center;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
margin: 0 auto 7px;
display: flex;
align-items: center;
}
.music-play-lists span{
position: relative;
display: block;
height: 20px;
width: 20px;
line-height: 26px;
font-size: 12px;
text-align: center;
background: #fff;
color: #e50914;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.45s ease 0s;
cursor: pointer;
}
.music-play-lists .count-box{
height: 15px !important;
width: 15px !important;
line-height: 15px !important;
font-size: 8px !important;
background: #e50914 !important;
color: #fff !important;
position: absolute;
right: 0;
top: 0;
padding: 0;
text-align: center !important;
}
.music-play-lists li:hover span{
background: #e50914;
color: #fff;
transition: all 0.45s ease 0s;
}
.text-white{
font-size: 14px;
}
li.slide-item .block-images::before{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
opacity: 0;
}
li.slide-item:hover .block-images::before{
opacity: 1;
z-index: 9;
}
li.slide-item:hover .block-description{
animation: fadeIn 0.6s ease-in-out;
opacity: 1;
}
li.slide-item:hover .block-social-info{
animation: fadeIn 0.6s ease-in-out;
opacity: 1;
}
.hover-buttons .btn{
padding: 5px 15px;
font-size: 12px;
}
li.slide-item.slick-current:hover .block-images{
transform: scale3d(1.1,1.1,1) translate3d(6%,0,0) perspective(500px) ;
}
li.slide-item .block-images::after{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(20,20,20,0.4) 50%, rgba(83,100,141,0) 100%);
transition: all 0.6s ease 0s;
}
small, .text-small, span{
font-size: 14px;
}
a:focus, a:hover{
color: #e50914;
outline: none;
}
li.slide-item{
position: relative;
padding: 0px 10px;
}
.iq-button.btn{
padding: 7px 14px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.block-images .hover-buttons{
margin-top: 5px;
}
.block-social-info .music-play-lists li {
width: 40px;
height: 40px;
}
.block-social-info .music-play-lists span{
width: 30px;
height: 30px;
}
.block-social-info .music-play-lists span i{
font-size: 15px;
}
.overflow-hidden{
overflow: hidden;
}
.share{
position: relative;
}
.share-box{
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.75);
display: none;
position: absolute;
width: 105px;
top: 3px;
right: 40px;
left: auto;
background-color: #191919;
padding: 0 10px;
border-radius: 0;
text-align: center;
z-index: 2;
animation: side-in 0.5s forwards;
margin-bottom: 10px;
transition: all 0.45s ease 0s;
}
.share:hover .share-box{
display: inline-block;
}
.share-box a{
background: transparent !important;
color: #d7d3f8 !important;
margin-right: 15px;
}
.share-box i{
font-size: 15px !important;
}
.share-box a:hover{
color: #bf000a !important;
}
.favorites-slider .slick-arrow{
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
width: 35px;
height: 60px;
}
.favorites-slider .slick-arrow i{
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 60px;
text-align: center;
opacity: 1;
z-index: 9;
top: 0;
background: rgba(0, 0, 0, 0.5);
margin: 0;
line-height: 5px;
box-shadow: 0 9px 19px #01041b0d;
font-size: 0;
transform: none;
color: #fff;
transition: all 0.4s ease-in-out 0s;
}
.favorites-slider .slick-arrow.slick-disabled{
opacity: 0;
}
.favorites-slider .slick-prev{
color: #fff;
right: auto;
left: 9px;
z-index: 9;
top: 90px;
}
.favorites-slider .slick-next{
left: auto;
color: #fff;
right: 6px;
z-index: 9;
top: 90px;
}
.favorites-slider .slick-prev::before, .favorites-slider .slick-next::before{
font-size: 0px;
}
.favorites-slider .slick-arrow i{
font-size: 17px;
}
/* ****************** Responsiveness **************** */
@media (min-width : 1200px){
li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active:hover .block-images{
transform: scale3d(1.1,1.1,1) translate3d(-6% , 0,0) perspective(500px);
}
}
@media (max-width : 1199px){
li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active:hover .block-images{
transform: scale3d(1.1,1.1,1) translate3d(-6% , 0,0) perspective(500px);
}
}
@media (max-width : 991px){
li.slide-item .block-description .movie-time span, li.slide-item .block-description .ratting-start, .block-description .movie-content li{
font-size: 10px;
}
}
@media (max-width : 768px){
li.slide-item .block-images::before{
content: none;
}
li.slide-item.slick-current:hover .block-images, li.slide-item:hover .block-images, li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active:hover .block-images, li.slide-item.slick-active + li.slide-item.slick-active + li.slide-item.slick-active:hover .block-images{
transform: none;
}
.type{
padding: 9px 10px;
font-size: 13px;
}
}
@media (max-width : 767px) {
.main-title{
font-size: 1em;
}
.slick-bg::before{
background: linear-gradient(-360deg, rgba(0,0,0,1) 0% , rgba(20,20,20,1) 40% , rgba(83,100,141,0) 100%);
}
.favorites-slider .slick-arrow, .favorites-slider .slick-arrow:hover{
background: none;
}
.favorites-slider .slick-prev{
right: 37px;
}
.image-box img{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
}
/* ************************** */
.topten-contents{
position: relative;
overflow: hidden;
}
h1,h2,h3,h4,h5{
font-size: 1.4em;
font-weight: 500;
margin: 0;
line-height: 1.2;
color: #fff;
}
h1 a, h2 a, h3 a , h4 a, h5 a, h6 a{
color: inherit;
}
#top-ten-slider-nav .slick-list{
overflow: visible;
padding-bottom: 40px !important;
}
#iq-topten .iq-title{
position: absolute;
left: 35px;
top: 35px;
z-index: 50;
font-size: 28px;
font-weight: 700;
}
#top-ten-slider .slick-bg .iq-title a{
display: none;
}
.topten-title-sm{
display: none;
}
.vertical_s{
position: absolute;
top: 95px;
right: 0;
bottom: 0;
left: 35px;
overflow: hidden;
}
#top-ten-slider-nav{
width: 300px;
height: 100%;
position: relative;
}
#top-ten-slider-nav .slick-list.draggable{
height: 100% !important;
}
#top-ten-slider-nav .slick-prev, #top-ten-slider-nav .slick-next{
left: 0;
right: 0;
margin: 0 auto;
}
#top-ten-slider-nav .NextArrow, #top-ten-slider-nav .PrevArrow{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
border: none;
outline: none;
color: #fff;
font-size: 30px;
width: 60px;
height: 35px;
}
#top-ten-slider .NextArrow, #top-ten-slider .PrevArrow{
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
z-index: 999;
background: rgba(0, 0, 0, 0.5);
border: none;
color: #fff;
font-size: 30px;
width: 35px;
height: 60px !important;
outline: none;
}
#top-ten-slider-nav .NextArrow{
bottom: 0;
}
#top-ten-slider-nav .PrevArrow{
top: 0;
}
#top-ten-slider .NextArrow{
right: 0;
left: auto;
}
#top-ten-slider .PrevArrow{
left: 0;
right: auto;
}
/* we will see about arrow afterwards */
#top-ten-slider-nav .slick-next::before, #top-ten-slider-nav .slick-prev::before, #top-ten-slider .slick-next::before , #top-ten-slider .slick-prev::before{
display: none;
}
.slick-arrow{
cursor: pointer;
}
ul#top-ten-slider .slick-bg::before{
z-index: 0;
}
#top-ten-slider-nav .NextArrow:hover, #top-ten-slider-nav .NextArrow:focus{
outline: none !important;
border: none !important;
}
#top-ten-slider-nav .PrevArrow:hover, #top-ten-slider-nav .PrevArrow:focus{
outline: none !important;
border: none !important;
}
#top-ten-slider .NextArrow{
right: 10px;
}
#top-ten-slider .PrevArrow{
left: 10px;
}
.slick-vertical .slick-slide .block-images::after{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.8) 0% , rgba(20,20,20,0.4) 50% , rgba(83,100,141,0) 100%);
transition: all 0.45s ease 0s;
}
.slick-vertical .slick-slide .block-images{
overflow: visible;
}
.slick-vertical .slick-slide .block-images::before{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
opacity: 0;
transition: all 0.45s ease 0s;
border-left: 6px solid #e50914;
}
.slick-vertical .slick-slide.slick-current.slick-active .block-images::before{
opacity: 1;
transition: all 0.45s ease 0s;
}
.slick-vertical .slick-slide.slick-current.slick-active .block-images{
width: 100%;
overflow: visible;
transform-origin: 100% 100%;
transition: all 0.45s ease 0s;
z-index: 9;
}
.slick-vertical li.slick-slide.slick-current.slick-active{
transition: all 0.45s ease 0s;
}
.slick-vertical .slick-slide{
margin-bottom: 18px;
}
.slick-vertical li.slick-slide:last-child{
margin-bottom: 0 !important;
}
.slick-vertical .block-description .hover-buttons > a{
opacity: 0;
display: none;
transition: all 0.45s ease 0s;
}
.slick-vertical .slick-slide.slick-current.slick-active .block-description .hover-buttons > a{
transition: all 0.45s ease 0s;
opacity: 1;
display: block;
}
/* ************* Responsiveness **************** */
@media (max-width : 991px){
#top-ten-slider .NextArrow, #top-ten-slider .PrevArrow{
display: none;
}
.topten-title{
display: none;
}
}
@media (max-width : 767px){
#top-ten-slider .NextArrow{
right: 10px !important;
}
#top-ten-slider .PrevArrow{
left: 10px !important;
}
.container-fluid{
padding-left: 15px;
padding-right: 15px;
}
#top-ten-slider .NextArrow, #top-ten-slider .PrevArrow{
width: 30px;
height: 30px;
font-size: 23px;
}
.vertical_s{
position: static;
}
#top-ten-slider-nav{
width: 100%;
height: 100%;
}
#top-ten-slider .slick-bg .iq-title a{
display: block;
font-size: 0.7em;
color: #d1d0cf;
}
.vertical_s{
display: none;
}
.topten-title-sm{
display: block;
}
.topten-title{
display: none;
}
#top-ten-slider .slick-bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
background: linear-gradient(90deg, rgba(0,0,0,1) 0% , rgba(20,20,20,1) 35%, rgba(83,100,141,0) 100%);
width: 100%;
z-index: -1;
}
}
/* *************************** */
.s-margin{
margin-top: 40px;
}
/* ***************************** */
li.slide-item .block-description .parallax-ratting span{
font-size: 14px;
}
.parallax-img img{
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
.parallax-window{
height: 100%;
padding: 100px 0;
position: relative;
background: url(images/parallax/avatar.jpg) center center;
background-size: cover;
background-attachment: fixed ;
}
.parallax-window::after{
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
}
.parallaxt-details{
z-index: 9;
position: relative;
}
.parallax-heading{
font-size: 52px;
}
/* *********** responsiveness ********** */
@media (max-width : 991px){
li.slide-item .block-description .parallax-ratting span{
font-size: 10px;
}
}
@media (max-width : 767px){
.parallax-window{
padding: 60px 0;
}
.parallax-heading{
font-size: 35px;
}
}
/* **************************************** */
#trending-slider-nav .slick-arrow, .trending-contens .slick-arrow{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 35px;
height: 60px;
}
#trending-slider-nav .slick-arrow i, .trending-contens .slick-arrow i{
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 60px;
text-align: center;
opacity: 1;
z-index: 9;
top: 0;
background: rgba(0, 0, 0, 0.5);
margin: 0;
line-height: 5px;
box-shadow: 0 9px 19px #01041b0d;
font-size: 0;
transform: none;
color: #fff;
transition: all 0.4s ease-in-out 0s;
}
.trending-contens .slick-arrow.slick-disabled{
opacity: 0;
}
#trending-slider-nav .slick-prev, .trending-contens .slick-prev{
color: #fff;
right: auto;
left: 11px;
z-index: 9;
top: 90px;
}
#trending-slider-nav .slick-next, .trending-contens .slick-next{
left: auto;
color: #fff;
right: 11px;
z-index: 9;
top: 90px;
}
#trending-slider-nav .slick-prev::before, .trending-contens .slick-next::before, .trending-contens .slick-prev::before, .trending-contens .slick-next::before{
font-size: 0;
}
#trending-slider-nav .slick-arrow i, .trending-contens .slick-arrow i{
font-size: 17px;
}
.trending-contens .slick-arrow{
top: 50%;
}
#trending-slider-nav .slick-current.slick-active{
transform: scale3d(1.1,1.1,1) translate3d(0,0,0) perspective(500px);
transform-origin: 50% 50% ;
transition: all 0.6s ease 0s;
box-shadow: 0 0 12px rgba(0,0,0,0.9);
}
#iq-trending{
overflow: hidden;
}
#trending-slider-nav .slick-list{
padding-bottom: 40px !important;
overflow: visible;
}
#trending-slider-nav .movie-slick{
border: 12px solid transparent;
transition: all 0.4s ease;
z-index: -1;
}
#trending-slider-nav .slick-current.slick-active .movie-slick{
transition: all 0.4s ease;
padding: 10px;
background: rgba(20, 20, 20, 0.5) !important;
backdrop-filter: blur(1px);
border: 1px solid #5d5757;
}
#trending-slider-nav .slick-current.slick-active{
transform: scale3d(1.3,1.3,1) translate3d(0,0,0) perspective(500px);
transform-origin: 50% 50% ;
transition: all 0.6s ease 0s;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}
#trending-slider .tranding-block {
background-size: cover;
background-position: top right;
position: relative;
}
.trending-pills{
background: rgba(0, 0, 0, 0.25);
}
.trending-info{
padding: 60px 0;
}
.tab-title-info{
z-index: 99;
}
.trending-content .tab-pane.fade{
display: none;
visibility: hidden;
opacity: 0;
}
.trending-content .tab-pane.fade.active.show{
display: block;
visibility: visible;
opacity: 1;
}
.trending-content .tab-pane{
width: 100%;
height: 100%;
}
.nav-pills .nav-item a{
color: #d1d0cf;
border-radius: 50px;
}
.nav-pills .nav-link.active, .nav-pills .show >.nav-link{
color: #fff;
background: transparent;
}
.nav-pills .nav-link:hover{
color: #e50914;
}
.nav-tabs{
border-bottom: 2px solid #d7d3f8;
margin-bottom: 15px;
}
.nav-tabs .nav-item{
margin-bottom: -2px;
}
.nav-tabs .nav-item a{
color: #d1d0cf;
border: none;
border-bottom: 2px solid transparent;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{
border-bottom: 2px solid #e50914;
color: #e50914;
}
.trending-pills.nav-pills .nav-item a{
position: relative;
overflow: hidden;
border-radius: 0;
text-transform: uppercase;
margin-left: 15px;
margin-right: 15px;
}
.trending-pills.nav-pills .nav-item a::after{
content: "";
position: absolute;
left: 0;
top: 0;
width: 0;
height: 3px;
background: #e50914;
opacity: 0;
transition: all 0.8s linear;
}
.trending-pills.nav-pills .nav-item a::before{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, rgba(83,100,141,0) 0%, rgba(218,64,60,0.3) 85%);
content: "";
opacity: 0;
filter: alpha(opacity=0);
transform: translate3d(0,-50%,0);
transition: all 0.5s ease-in-out;
}
.trending-pills.nav-pills .nav-item a.show::before{
opacity: 1;
filter: alpha(opacity=100);
transform: translate3d(0,0,0);
transition: all 0.5s ease-in-out;
}
.trending-pills.nav-pills .nav-item a.show::after{
opacity: 1;
width: 100%;
}
.trending-pills.nav-pills .nav-item a:hover{
color: #e50914;
}
.trending-content{
padding : 0 50px;
display: flex;
}
.p-btns{
display: flex;
align-items: center;
}
.trending-info .trending-text{
font-size: 60px;
line-height: 100px;
margin: 15px 0;
}
.trending-info .text-details{
font-size: 20px;
font-weight: 500;
letter-spacing: 0.7px;
margin-bottom: 30px;
}
.trending-info .text-detail .badge{
font-size: 20px;
}
.badge.badge-trend{
background: rgba(0, 0, 0, 0.42);
}
.text-detail .trending-year{
position: relative;
padding-left: 30px;
}
.text-detail .trending-year::before{
content: "";
height: 6px;
width: 6px;
background: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 13px;
border-radius: 50%;
}
.overview-tab::before, .slick-bg::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 100%;
background: linear-gradient(90deg, rgba(20,20,20,1) 0%, rgba(36,36,36,1) 35%,
rgba(83,100,141,0) 100%);
z-index: 1;
}
.slick-bg::before{
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(20,20,20,1) 35% ,
rgba(83,100,141,0) 100%);
width: 100%;
z-index: -1;
}
.overlay-tab::before{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(36,36,36,0.8);
z-index: 1;
}
.trending-info{
position: relative;
z-index: 99;
}
.trending-info .trending-dec{
margin-bottom: 30px;
width: 35%;
}
.trending-info .block-social{
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
margin-left: 15px;
display: flex;
align-items: center;
}
.trending-info .block-social a{
position: relative;
display: block;
height: 32px;
width: 32px;
line-height: 26px;
font-size: 26px;
text-align: center;
background: #fff;
color: #e50914;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.45s ease 0s;
}
.trending-info .block-social.social1 a{
background: #e50914;
color: #fff;
}
.trending-list .title{
font-size: 18px;
font-weight: 800;
}
.trending-list .title span{
font-size: 16px;
font-weight: 400;
}
.trending-info .iq-dropdown .form-control{
background: rgba(0, 0, 0, 0.2);
border-radius: 5px;
color: #fff;
}
.iq-custom-select .select2-container--bootstrap4 .select2-selection, .select2-dropdown{
background-color: #191919;
border: none;
border-radius: 0;
color: #fff;
}
.select2-dropdown{
top: 0;
box-shadow: 0 12px 34px rgba(19, 10, 10, 1);
}
.iq-custom-select select{
box-shadow: none;
}
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected = true]{
background-color: #141414;
}
.select2-container--bootstrap4 .select2-results__option--highlighted, .select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected = true]{
background-color: #e50914;
color: #fff;
}
.select2-container .select2-selection--single .select2-selection__rendered{
line-height: calc(1.5em + 1.2rem);
padding-left: 10px;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection{
box-shadow: none;
}
.select2-search--dropdown .select2-search__field{
border-radius: 0;
border: none;
background: rgba(85, 85, 85, 0.65);
color: #fff;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{
border: none;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b::before{
content: '\f107';
position: absolute;
font-family: fontAwesome;
top: 50%;
transform: translateY(-50%);
right: 1px;
color: #fff;
font-size: 16px;
z-index: 99;
transition: all 0.4s ease;
}
.select2-container--bootstrap4.select2-container--open .select2-selection__arrow b::before{
transform: translateY(-50%) rotate(180deg);
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b{
margin-top: 0;
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow{
width: auto;
}
.select2-container--bootstrap4 .select2-selection--single , .select2-container--bootstrap4 .select2-selection--multiple{
height: 40px !important;
}
.select2-container--bootstrap4 .select2-dropdown.select2-dropdown--above{
border-radius: 0;
border: none;
}
.sea-epi .select2-container{
width: 150px !important;
}
.series {
margin-top: 1.5rem;
}
.trending-contens .episodes-contens{
margin-top: 30px;
}
.e-item .episodes-description{
color: #d1d0cf;
background: #141414;
padding: 15px;
}
.e-item:hover .episodes-description{
color: #fff !important;
transition: all 0.4s ease;
}
.episodes-description a:hover{
color: #e50914;
}
.episode-number{
color: #fff;
}
.episode-duration{
position: absolute;
top: 15px;
left: auto;
right: 15px;
font-weight: 700;
background: #e50914;
color: #fff;
padding: 0 5px;
}
.e-item .episodes-description p{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.e-item:hover .episode-number{
opacity: 1;
filter: alpha(opacity=100);
transition: all 0.5s ease-in-out;
}
.episode-play-info{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
filter: alpha(opacity=0);
transition: all 0.5s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.e-item:hover .episode-play-info{
opacity: 1;
filter: alpha(opacity=100);
transition: all 0.5s ease-in-out;
}
.episode-play{
height: 45px;
width: 45px;
line-height: 45px;
text-align: center;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
}
.episode-play a{
position: relative;
display: block;
height: 40px;
width: 40px;
line-height: 26px;
font-size: 20px;
text-align: center;
background: #fff;
color: #e50914;
border-radius: 50%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.45s ease 0s;
}
.episodes-slider1 .owl-nav{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
color: #fff;
}
.episodes-slider1 .owl-nav button.owl-prev, .episodes-slider1 .owl-nav button.owl-next{
float: left;
width: 35px;
height: 60px;
background: rgba(0, 0, 0, 0.5);
line-height: 23px;
font-size: 30px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
outline: none;
border: none;
}
.episodes-slider1 .owl-nav button.owl-next{
float: right !important;
}
/* ****************** responsiveness************ */
@media (max-width: 767px){
.trending-content{
padding: 0;
}
.trending-info .trending-dec{
width: 70%;
}
.trending-pills{
flex-direction: column;
margin-top: 25px;
}
.main-title{
font-size: 1em;
}
.iq-main-header{
margin-bottom: 10px;
}
.iq-main-header .title{
margin-bottom: 50px;
}
.trending-info .block-social.social1{
margin-left: 0 !important;
}
.trending-info .trending-text{
font-size: 35px !important;
line-height: 1.3;
}
.trending-info{
padding: 60px 15px;
}
.episode-name{
flex-direction: column;
align-items: flex-start !important;
}
.text-detail.episode-name .trending-year{
padding-left: 0;
font-size: 24px;
}
.episodes-slider1 .owl-nav button.owl-prev, .episodes-slider1 .owl-nav button.owl-next{
width: 30px;
height: 30px;
font-size: 27px;
}
.episode-name .trending-year::before{
content: none;
}
.overlay-wrapper::before{
background-image: linear-gradient(to bottom, rgba(51,51,51,0), rgba(0,0,0,0.8) 40%, #000 100%);
}
#trending-slider-nav .slick-arrow, #trending-slider-nav .slick-arrow:hover{
background: none;
}
#trending-slider-nav .slick-prev{
left: 0px;
top: 150px;
}
#trending-slider-nav .slick-next{
right: 0px;
top: 150px;
}
}
@media (max-width : 479px){
.banner-caption , .overlay-s-name{
left: 15px;
}
.banner-wrapper .trending-info .trending-dec{
display: none;
}
}
/* ***************** footer **************** */
.footer-top{
padding: 60px 0;
}
footer .footer-standard .widget ul li{
display: inline-block;
padding-right: 30px;
}
footer .footer-standard .widget ul>li>a{
padding: 0;
font-weight: 400;
}
footer .footer-standard .widget ul>li>a::before{
display: none;
}
footer .footer-link-title{
margin-bottom: 20px;
margin-top: 0;
}
footer .widget{
background: transparent;
border: none;
padding: 0;
}
footer .info-share li a{
color: #6c757d;
}
footer .footer-top .info-share li{
margin-right: 15px;
margin-bottom: 15px;
}
footer .footer-top .info-share li:last-child{
margin-right: 0;
}
.iq-bg-dark{
position: relative;
}
footer .footer-top .info-share{
padding-left: 0;
}
footer .footer-top .info-share li{
margin-right: 12px;
display: inline-block;
}
footer .footer-top .info-share li a{
position: relative;
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 0;
color: #fff;
font-size: 17px;
border-radius: 50%;
background: rgba(41, 41, 41, 0.76);
transition: all 0.4s ease 0s;
}
footer .footer-top .info-share li a:hover{
box-shadow: 0 0 10px #bf000a;
text-shadow: 0 0 2px #bf000a;
color: #e50914;
transition: all 0.4s ease 0s;
}
footer .footer-top .info-share li a::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(0.9);
z-index: -1;
border-radius: 50%;
transition: all 0.4s ease 0s;
}
.textwidget .footer-link-title{
width: 100px;
}
<div align="center">
<h3> Then add Js File </h3>
</div>
main.js
(function (jQuery){
"use strict";
jQuery(document).ready(function(){
function activaTav(pill){
jQuery(pill).addClass('active show');
}
// sticky header anmation and height
function headerHeight(){
var height = jQuery("#main-header").height();
jQuery('.iq-height').css('height',height + 'px');
}
jQuery(function(){
var header = jQuery("#main-header"),
yOffset = 0,
triggerPoint = 80;
headerHeight();
jQuery(window).resize(headerHeight);
jQuery(window).in('scroll', function() {
yOffset = jQuery(window).scrollTop();
if(yOffset >= triggerPoint){
header.addClass("menu-sticky animated slideDown");
} else {
header.removeClass("menu-sticky animated slideDown");
}
});
});
// header menu dropdown
jQuery('[data-toggle=more-toggle]').on('click', function () {
jQuery(this).next().toggleClass('show');
});
jQuery(document).on('click', function(e){
let myTargetElement = e.target;
let selector, mainElement;
if(jQuery(myTargetElement).hasClass('search-toggle') || jQuery(myTargetElement).parent().hasClass('search-toggle') || jQuery(myTargetElement).parent().parent().hasClass('search-toggle') ){
if(jQuery(myTargetElement).hasClass('search-toggle')) {
selector = jQuery(myTargetElement).parent();
mainElement = jQuery(myTargetElement);
} else if (jQuery(myTargetElement).parent().hasClass('search-toggle')){
selector = jQuery(myTargetElement).parent().parent();
mainElement = jQuery(myTargetElement).parent();
}else if (jQuery(myTargetElement).parent().parent().hasClass('search-toggle')){
selector = jQuery(myTargetElement).parent().parent().parent();
mainElement = jQuery(myTargetElement).parent().parent();
}
if(!mainElement.hasClass('active') && jQuery('.navbar-list li').find('.active')){
jQuery('.navbar-right li').removeClass('.iq-show');
jQuery('.navbar-right li .search-toggle').removeClass('active');
}
selector.toggleClass('iq-show');
mainElement.toggleClass('active');
e.preventDefault();
} else if (jQuery(myTargetElement).is('search-input')){} else {
jQuery('.navbar-right li').removeClass('.iq-show');
jQuery('.navbar-right li .search-toggle').removeClass('active');
}
});
jQuery(document).on('click', function(event){
var $trigger = jQuery(".main-header .navbar");
if($trigger !== event.target && !$trigger.has(event.target).length){
jQuery(".main-header .navbar-collapse").collapse('hide');
jQuery('body').removeClass('nav-open');
}
});
jQuery('.c-toggler').on("click", function(){
jQuery('body').addClass('nav-open');
});
$('#home-slider').slick({
autoplay : false,
speed : 800,
lazyload : 'progressive',
arrows : true,
dots : false,
prevArrow : '<div class="slick-nav prev-arrow"><i class="fa fa-chevron-right"></i></div>',
nextArrow : '<div class="slick-nav next-arrow"><i class="fa fa-chevron-left"></i></div>',
responsive : [
{
breakpoint : 992,
settings : {
dots : true,
arrows : false,
}
}
]
}).slickAnimation();
$(".slick-nav").on("click touch", function (e){
e.preventDefault();
var arrow = $(this);
if(!arrow.hasClass('animate')){
arrow.addClass('animate');
setTimeout(() => {
arrow.removeClass('animate');
}, 1600);
}
});
jQuery('.favorites-slider').slick({
dots:false,
arrow : true,
infinite : true,
speed : 300,
autoplay : false,
slidesToShow : 4,
slidesToScroll :1,
nextArrow: '<a href="#" class="slick-arrow slick-next"><i class="fa fa-chevron-right"></i></a>',
prevArrow: '<a href="#" class="slick-arrow slick-prev"><i class="fa fa-chevron-left"></i></a>',
responsive : [
{
breakpoint:1200,
settings : {
slidesToShow : 3,
slidesToScroll : 1,
infinite : true,
dots : true
}
},
{
breakpoint:768,
settings : {
slidesToShow : 2,
slidesToScroll : 1
}
},
{
breakpoint:480,
settings : {
slidesToShow : 1,
slidesToScroll : 1
}
},
]
});
jQuery('#top-ten-slider').slick({
slidesToScroll : 1,
slidesToShow : 1,
arrows : false,
fade : true,
asNavFor : '#top-ten-slider-nav',
responsive : [
{
breakpoint : 992,
settings : {
asNavFor : false,
arrows : true ,
nextArrow : '<button class="NextArrow"><i class="fa fa-angle-right"></i></button>',
prevArrow : '<button class="PrevArrow"><i class="fa fa-angle-left"></i></button>',
}
}
]
});
jQuery('#top-ten-slider-nav').slick({
slidesToShow : 3,
slidesToScroll : 1,
asNavFor : '#top-ten-slider',
dots: false,
arrows : true,
infinite : true,
vertical : true,
verticalSwiping : true,
centerMode :false,
nextArrow : '<button class="NextArrow"><i class="fa fa-angle-down"></i></button>',
prevArrow : '<button class="PrevArrow"><i class="fa fa-angle-up"></i></button>',
focusOnSelect : true,
responsive : [
{
breakpoint : 1200,
settings : {
slidesToShow : 2,
}
},
{
breakpoint : 600,
settings : {
asNavFor : false,
}
},
]
});
jQuery("#trending-slider").slick({
slidesToShow : 1,
slidesToScroll : 1,
arrows : false,
fade : true,
draggable : false,
asNavFor : "#trending-slider-nav",
});
jQuery("#trending-slider-nav").slick({
slidesToShow : 5,
slidesToScroll : 1,
asNavFor : "#trending-slider",
dots : false ,
arrows : true ,
nextArrow: '<a href="#" class="slick-arrow slick-next"><i class="fa fa-chevron-right"></i></a>',
prevArrow: '<a href="#" class="slick-arrow slick-prev"><i class="fa fa-chevron-left"></i></a>',
infinite : true,
centerMode : true,
centerPadding : 0,
focusOnSelect : true,
responsive : [
{
breakpoint : 1024,
settings : {
slidesToShow : 2,
slidesToScroll : 1,
}
},
{
breakpoint : 600,
settings : {
slidesToShow : 1,
slidesToScroll : 1,
}
}
]
});
jQuery('.episodes-slider1').owlCarousel({
loop : true,
margin : 20,
nav: true,
navText : ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i> "],
dots : false,
responsive : {
0:{
items : 1
},
600: {
items : 1
},
1000 : {
items : 4
}
}
});
jQuery('.trending-content').each(function(){
var highestBox = 0;
jQuery('.tab-pane', this).each(function(){
if(jQuery(this).height() > highestBox){
highestBox = jQuery(this).height();
}
});
jQuery('.tab-pane', this).height(highestBox);
});
if(jQuery('select').hasClass('season-select')){
jQuery('select').select2({
theme : 'bootstrap4',
allowClear : false,
width : 'resolve'
});
}
});
})(jQuery);
ThankYou
Oldest comments (3)
Wow, nice work...
Does it connects
That's a lot of code though.