Header V3
<!-- ========== HEADER ========== -->
<header id="header" class="header left-aligned-navbar"
data-hs-header-options='{
"fixMoment": 1000,
"fixEffect": "slide"
}'>
<div class="header-section shadow-soft bg-royal-blue header-white-nav-links font-secondary">
<div id="logoAndNav" class="container-fluid px-md-5 py-2 py-xl-0">
<!-- Nav -->
<nav class="js-mega-menu navbar navbar-expand-xl py-0 position-static justify-content-start">
<!-- Responsive Toggle Button -->
<button type="button" class="navbar-toggler btn btn-icon btn-sm rounded-circle mr-2d"
aria-label="Toggle navigation"
aria-expanded="false"
aria-controls="navBar"
data-toggle="collapse"
data-target="#navBar">
<span class="navbar-toggler-default">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M17.4,6.2H0.6C0.3,6.2,0,5.9,0,5.5V4.1c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,5.9,17.7,6.2,17.4,6.2z M17.4,14.1H0.6c-0.3,0-0.6-0.3-0.6-0.7V12c0-0.4,0.3-0.7,0.6-0.7h16.9c0.3,0,0.6,0.3,0.6,0.7v1.4C18,13.7,17.7,14.1,17.4,14.1z"/>
</svg>
</span>
<span class="navbar-toggler-toggled">
<svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</span>
</button>
<!-- End Responsive Toggle Button -->
<!-- Logo -->
<a class="navbar-brand" href="../home/index.html" aria-label="Vodi">
<svg class="v2 w-100 w-xl-auto" width="138" height="30px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 187.9 40" style="enable-background:new 0 0 187.9 40;" xml:space="preserve">
<style type="text/css">
.vodi-sports0{fill:#FFFFFF;}
.vodi-sports1{fill:#51C9F0;}
</style>
<g>
<path class="vodi-sports0" d="M72.8,12.7c0-2.7,0-1.8,0-4.4c0-0.9,0-1.8,0-2.8C73,3,74.7,1.4,77,1.4s4.1,1.8,4.2,4.2c0,1,0,2.1,0,3.1
c0,6.5,0,9.4,0,15.9c0,4.7-1.7,8.8-5.6,11.5c-4.5,3.1-9.3,3.5-14.1,0.9c-4.7-2.5-7.1-6.7-7-12.1c0.1-7.8,6.3-13.6,14.1-13.2
c0.7,0,1.4,0.2,2.1,0.3C71.3,12.2,72,12.4,72.8,12.7z M67.8,19.8c-2.9,0-5.2,2.2-5.2,5c0,2.9,2.3,5.3,5.2,5.3
c2.8,0,5.2-2.4,5.2-5.2C73,22.2,70.6,19.8,67.8,19.8z"></path>
<path class="vodi-sports0" d="M39.9,38.6c-7.3,0-13.3-6.1-13.3-13.5c0-7.5,5.9-13.4,13.4-13.4s13.4,6,13.4,13.5
C53.4,32.6,47.4,38.6,39.9,38.6z M39.9,30.6c3.2,0,5.6-2.3,5.6-5.6c0-3.2-2.3-5.5-5.5-5.5s-5.6,2.2-5.6,5.4
C34.4,28.2,36.7,30.6,39.9,30.6z"></path>
<path class="vodi-sports0" d="M14.6,27c0.6-1.4,1.1-2.6,1.6-3.8c1.2-2.9,2.5-5.8,3.7-8.8c0.7-1.7,2-2.8,4-2.7c3,0,4.9,2.6,3.8,5.4
c-0.5,1.3-1.2,2.6-1.8,3.9c-2.4,5-4.9,10-7.3,15c-0.8,1.6-2,2.6-3.9,2.6c-2,0-3.3-0.8-4.2-2.6c-2.7-5.6-5.3-11.1-8-16.7
c-0.3-0.7-0.6-1.3-0.9-2c-0.8-1.8-0.3-3.7,1.1-4.8c1.5-1.2,4-1.3,5.3,0c0.7,0.6,1.2,1.5,1.6,2.3C11.3,18.8,12.9,22.7,14.6,27z"></path>
<path class="vodi-sports0" d="M90.9,25.1c0,3.1,0,6.2,0,9.4c0,1.9-1.2,3.4-2.9,4c-1.7,0.5-3.5,0-4.5-1.6c-0.5-0.8-0.8-1.8-0.8-2.6
c-0.1-6.1-0.1-11.3,0-17.5c0-2.2,1.5-3.9,3.5-4.2c2.1-0.3,4.1,0.9,4.7,2.9c0.1,0.5,0.2,1.1,0.2,1.6C90.9,20,90.9,22.1,90.9,25.1
L90.9,25.1z"></path>
<path class="vodi-sports1" d="M90.2,4.7L86,2.3c-1.3-0.8-3,0.2-3,1.7v4.8c0,1.5,1.7,2.5,3,1.7l4.2-2.4C91.5,7.4,91.5,5.5,90.2,4.7z"></path>
</g>
<g>
<path class="vodi-sports0" d="M106.3,18.6c-0.7-0.9-2.4-1.7-4.7-1.7c-3.2,0-5.8,1.5-6,2.9c-0.2,1,2.4,1.3,4.6,1.5c1.8,0.2,3.7,0.4,5.2,1
c2.4,1,2.6,2.8,2.4,4.1c-0.5,2.9-4.4,5.2-8.7,5.2c-3.9,0-6.7-1.8-7-4.2c0.9-0.6,2-0.6,2.6,0.1c0.6,1,2.3,1.8,4.8,1.8
c3.3,0,5.8-1.5,6-2.9c0.4-2-2.1-2.4-5.9-2.9c-3.2-0.4-6.8-0.8-6.3-3.9c0.5-2.9,4.4-5.2,8.8-5.2c3.8,0,6.6,1.7,6.9,4
C108,19.4,106.9,19.4,106.3,18.6z"></path>
<path class="vodi-sports0" d="M117.3,31.8c-1.5,0-2.9-0.3-4-1c-1-0.6-1.2-2-0.4-3.1c0.1-0.1,0.1-0.2,0.3-0.3c1,1.3,2.6,2.1,4.6,2.1
c3.5,0,6.7-2.8,7.3-6.2c0.6-3.5-1.7-6.3-5.1-6.3c-4,0-7,2.4-7.7,6.3l-2.2,12.5c-0.2,1.2-1.4,2.2-2.7,2.2l2.6-14.7
c0.9-5.1,5.1-8.6,10.4-8.6c4.7,0,7.9,3.8,7.1,8.6C126.6,27.9,122.1,31.8,117.3,31.8z"></path>
<path class="vodi-sports0" d="M135.4,31.8c-5,0-8.4-3.8-7.6-8.5c0.8-4.7,5.6-8.6,10.6-8.6s8.4,3.9,7.6,8.6C145.2,27.9,140.5,31.8,135.4,31.8
z M138.1,17c-3.7,0-7.3,2.8-7.9,6.3c-0.6,3.4,1.9,6.2,5.7,6.2c3.7,0,7.3-2.8,7.9-6.2C144.3,19.8,141.8,17,138.1,17z"></path>
<path class="vodi-sports0" d="M156.4,17.5c-0.5-0.3-1.1-0.5-1.8-0.5c-2.1,0-4.2,1.7-4.5,3.9l-1.5,8.7c-0.2,1.2-1.4,2.2-2.6,2.2h-0.1
l1.9-10.9c0.6-3.4,3.9-6.2,7.3-6.2c1.9,0,3.5,0.9,4.4,2.3C158.6,17.8,157.3,18,156.4,17.5z"></path>
<path class="vodi-sports0" d="M163.7,31.8c-3.4,0-5.7-2.7-5.1-6.2l3.1-17.9h0.1c1.2,0,2.1,1,1.8,2.2l-0.8,4.7h5.2v0.1
c-0.2,1.2-1.4,2.2-2.7,2.2h-2.9l-1.5,8.6c-0.4,2.1,1,3.9,3.2,3.9c0.6,0,1.2-0.1,1.7-0.4c1.1-0.5,2.2-0.1,2.7,0.8
C167.2,31,165.4,31.8,163.7,31.8z"></path>
<path class="vodi-sports0" d="M183,18.6c-0.7-0.9-2.4-1.7-4.7-1.7c-3.2,0-5.8,1.5-6,2.9c-0.2,1,2.4,1.3,4.6,1.5c1.8,0.2,3.7,0.4,5.2,1
c2.4,1,2.6,2.8,2.4,4.1c-0.5,2.9-4.4,5.2-8.7,5.2c-3.9,0-6.7-1.8-7-4.2c0.9-0.6,2-0.6,2.6,0.1c0.6,1,2.3,1.8,4.8,1.8
c3.3,0,5.8-1.5,6-2.9c0.4-2-2.1-2.4-5.9-2.9c-3.2-0.4-6.8-0.8-6.3-3.9c0.5-2.9,4.4-5.2,8.8-5.2c3.8,0,6.6,1.7,6.9,4
C184.8,19.4,183.6,19.4,183,18.6z"></path>
</g>
</svg>
</a>
<!-- End Logo -->
<!-- Navigation -->
<div id="navBar" class="collapse navbar-collapse order-1 order-xl-0">
<div class="navbar-body header-abs-top-inner">
<ul class="navbar-nav">
<!-- Home -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="homeMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Home</a>
<!-- Home - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="homeMegaMenu">
<div class="container px-4 px-md-5 space-1">
<div class="row row-cols-xl-5 text-md-center">
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/index.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img1.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v1</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v2.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img2.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v2</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v3.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img3.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v3</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v4.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img4.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v4</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl">
<a href="../home/home-v5.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img5.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">Home v5</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v6.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img6.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Prime
<div>Home v6 ( Light )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v7.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img7.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Prime
<div>Home v7 ( Dark )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v8.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img8.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Stream
<div>Home v8</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl border-right border-w-lg-d-0">
<a href="../home/home-v9.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img9.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Tube
<div>Home v9 ( Light )</div>
</div>
</a>
</div>
<div class="col-md-6 col-lg-3 col-xl">
<a href="../home/home-v10.html" class="h-g1-primary d-block mb-4">
<img class="d-none d-md-block img-fluid mb-3 rounded-sm shadow-2" src="../../assets/img/260x260/img10.jpg" alt="Image Description">
<div class="h-g1-primary font-size-13 font-weight-bold">
Vodi Tube
<div>Home v10 ( Dark )</div>
</div>
</a>
</div>
</div>
</div>
</div>
<!-- End Home - Mega Menu -->
</li>
<!-- End Home -->
<!-- Pages -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="pagesMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="pagesSubMenu">Pages</a>
<!-- Pages - Submenu -->
<div id="pagesSubMenu" class="hs-sub-menu dropdown-menu mega-menu-sub-menu-lg" aria-labelledby="pagesMegaMenu">
<div class="px-4 px-md-6 pt-md-2 pb-4">
<div class="row row-cols-md-3 font-size-14">
<div class="col-md">
<div class="font-weight-bold line-height-xl">Archive Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/movies.html">Movies</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/tv-shows.html">TV Shows</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../archive/videos.html">Videos</a>
<div class="font-weight-bold line-height-xl">Single Movies</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v1.html">Movie v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v2.html">Movie v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v3.html">Movie v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v4.html">Movie v4</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v5.html">Movie v5</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v6.html">Movie v6</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-movies/single-movies-v7.html">Movie v7</a>
</div>
<div class="col-md">
<div class="font-weight-bold line-height-xl">Single Videos</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v1.html">Video v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v2.html">Video v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v3.html">Video v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v4.html">Video v4</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v5.html">Video v5</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-video/single-video-v6.html">Video v6</a>
<div class="font-weight-bold line-height-xl">Other Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/landing-v1.html">Landing v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/landing-v2.html">Landing v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../other/coming-soon.html">Coming Soon</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-tv-show/single-tv-show.html">Single TV Show</a>
</div>
<div class="col-md">
<div class="font-weight-bold line-height-xl">Single Episodes</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v1.html">Episode v1</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v2.html">Episode v2</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v3.html">Episode v3</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../single-episodes/single-episodes-v4.html">Episode v4</a>
<div class="font-weight-bold line-height-xl">Blog Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../blog/blog.html">Blog</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../blog/blog-single.html">Single Blog</a>
<div class="font-weight-bold line-height-xl">Static Pages</div>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../static/contact.html">Contact Us</a>
<a class="dropdown-item h-fw-bold px-0 py-1 font-size-14" href="../static/404.html">404</a>
</div>
</div>
</div>
</div>
<!-- End Submenu -->
</li>
<!-- End Pages -->
<!-- Movies -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="moviesMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Movies</a>
<!-- Movies - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="moviesMegaMenu">
<div class="mega-menu-body">
<div class="container px-lg-5">
<div class="row row-cols-md-3 mx-lg-n5">
<div class="col-md px-lg-5 mb-4 mb-md-0 border-right">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movie of the Day
</div>
<div class="row mx-n2 product">
<div class="col-auto">
<div class="product-image mb-2">
<a href="../single-movies/single-movies-v1.html" class="d-inline-block position-relative stretched-link">
<img class="img-fluid" src="../../assets/img/174x260/img1.jpg" alt="Image Description">
</a>
</div>
</div>
<div class="col">
<div class="product-meta font-size-12 mb-1">
<span><a href="#" class="h-g-primary">2020</a></span>
<span><a href="#" class="h-g-primary">Action</a></span>
<span><a href="#" class="h-g-primary">Comedy</a></span>
<span><a href="#" class="h-g-primary">Mystery</a></span>
</div>
<div class="product-title font-weight-bold font-size-1 mb-2d"><a href="../single-movies/single-movies-v1.html">The Big Sick</a></div>
<p class="text-gray-7100 font-size-13 line-clamp-5">Pakistan-born comedian Kumail Nanjiani and grad student Emily Gardner fall in love but struggle as their cultures clash. When Emily contracts a mysterious illness.</p>
<div class="d-flex">
<a href="../single-movies/single-movies-v1.html" class="font-size-14 font-secondary font-weight-bold mr-4">Watch Now</a>
<a href="../single-movies/single-movies-v1.html" class="font-size-14 font-secondary font-weight-bold h-g1-primary">+ Playlist</a>
</div>
</div>
</div>
</div>
<div class="col-md px-lg-5 mb-4 mb-md-0 border-right">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movies Genre
</div>
<ul class="column-count-2 v2 list-unstyled mb-0">
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Action</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Adventure</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Animation</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Comedy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Crime</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Drama</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Fantacy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Horror</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Mystrey</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Romance</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Adventure</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Animation</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Comedy</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Crime</a>
</li>
<li class="py-1">
<a class="h-b-primary py-1 font-size-14" href="../single-movies/single-movies-v2.html">Drama</a>
</li>
</ul>
</div>
<div class="col-md px-lg-5 mb-4 mb-md-0 dark">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Movie Trailer
</div>
<div class="product position-relative mb-3">
<div class="gradient-x-overlay-1">
<div>
<img class="img-fluid" src="../../assets/img/480x270/img2.jpg" alt="Image-Descrition">
</div>
<div class="position-absolute bottom-0 pl-4 pr-3 pb-2">
<div class="product-title font-size-15 font-weight-bold text-lh-1">
<a href="../single-movies/single-movies-v3.html">Sensational Points That Will Impress Yous</a>
</div>
<div>
<span class="font-size-12 text-gray-1300">28 views</span>
<span class="product-comment font-size-12 text-gray-1300">1 year ago</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Movies - Mega Menu -->
</li>
<!-- End Movies -->
<!-- TV Shows -->
<li class="hs-has-mega-menu navbar-nav-item">
<a id="tvshowsMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">TV Shows</a>
<!-- TV Shows - Mega Menu -->
<div class="hs-mega-menu dropdown-menu w-100" aria-labelledby="tvshowsMegaMenu">
<div class="mega-menu-body">
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col-auto px-lg-5 border-right">
<div class="min-w-224">
<ul class="list-unstyled mb-0">
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Trending TV Shows</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Popular Now</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">New This Month</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Vodi Exclusives</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Just for Kids</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">Featured Shows</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Show Genres</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Series: Drama</a>
</li>
<li class="py-1">
<a class="h-b-primary font-weight-bold font-size-14" href="../single-episodes/single-episodes-v1.html">TV Series: Comedy</a>
</li>
</ul>
</div>
</div>
<div class="col px-lg-5">
<div class="font-size-14 text-dark font-weight-bold mb-3">
Picked for You: Madras Themes
</div>
<div class="row row-cols-md-3 row-cols-xl-5 mx-n2">
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v2.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img1.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v2.html">
<span class="text-gray-1300 font-size-12">S01E02</span>
<h6 class="mb-0">15 Million Merit</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v3.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img2.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v3.html">
<span class="text-gray-1300 font-size-12">S01E02</span>
<h6 class="mb-0">2020-4-5</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v4.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img3.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v4.html">
<span class="text-gray-1300 font-size-12">S04E0</span>
<h6 class="mb-0">A Good Treason</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-4 mb-md-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v1.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img4.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v1.html">
<span class="text-gray-1300 font-size-12">S02E05</span>
<h6 class="mb-0">A Harday's Night</h6>
</a>
</div>
</div>
<div class="col-md px-2">
<div class="product mb-0">
<div class="product-image mb-1">
<a class="d-block position-relative stretched-link" href="../single-episodes/single-episodes-v2.html">
<img class="img-fluid w-100" src="../../assets/img/206x117/img5.jpg" alt="Image-Description">
</a>
</div>
<a class="d-inline-block" href="../single-episodes/single-episodes-v2.html">
<span class="text-gray-1300 font-size-12">S02E05</span>
<h6 class="mb-0">A Hen in the Wolf House</h6>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End TV Shows - Mega Menu -->
</li>
<!-- End TV Shows -->
<!-- Blog -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="blogMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false" aria-labelledby="blogSubMenu">Blog</a>
<!-- Blog - Submenu -->
<div id="blogSubMenu" class="hs-sub-menu dropdown-menu" aria-labelledby="blogMegaMenu" style="min-width: 230px;">
<a class="dropdown-item" href="../blog/blog.html">Blog</a>
<a class="dropdown-item" href="../blog/blog-single.html">Blog Single</a>
</div>
<!-- End Submenu -->
</li>
<!-- End Blog -->
<!-- Docs -->
<li class="hs-has-sub-menu navbar-nav-item">
<a id="docsMegaMenu" class="hs-mega-menu-invoker py-xl-3d line-height-lg nav-link nav-link-toggle font-secondary" href="javascript:;" aria-haspopup="true" aria-expanded="false">Docs</a>
<!-- Docs - Submenu -->
<div class="hs-sub-menu dropdown-menu mega-menu-sub-menu-md" aria-labelledby="docsMegaMenu">
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="../../documentation/index.html">
<div class="media align-items-center">
<i class="fas fa-book font-size-34 mr-2d"></i>
<div class="media-body">
<span class="navbar-promo-title">
Documentation
<span class="badge badge-primary badge-pill ml-1">v1.0</span>
</span>
<small class="navbar-promo-text">Development guides</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
<!-- Promo Item -->
<div class="navbar-promo-item">
<a class="navbar-promo-link" href="../../snippets/index.html">
<div class="media align-items-center">
<i class="fas fa-cut font-size-34 mr-2d"></i>
<div class="media-body">
<span class="navbar-promo-title">Snippets</span>
<small class="navbar-promo-text">Start building</small>
</div>
</div>
</a>
</div>
<!-- End Promo Item -->
</div>
<!-- End Docs - Submenu -->
</li>
<!-- End Docs -->
</ul>
</div>
</div>
<!-- End Navigation -->
<div class="d-flex align-items-center ml-auto">
<div class="d-inline-flex ml-md-5">
<ul class="d-flex list-unstyled mb-0 align-items-center position-xl-relative">
<li class="px-3 d-none d-xl-block"><a href="#" class="text-primary-light">Replays</a></li>
<li class="px-3 d-none d-xl-block"><a href="#" class="text-primary-light">Highlights</a></li>
<li class="px-3 d-none d-xl-block"><a href="#" class="text-primary-light">Guide</a></li>
<li class="col position-static px-0 px-sm-2">
<!-- Search -->
<div class="hs-unfold mr-sm-2 position-static">
<a class="js-hs-unfold-invoker btn btn-icon btn-ghost-secondary font-size-20 text-white" href="javascript:;"
data-hs-unfold-options='{
"target": "#searchClassic",
"type": "css-animation",
"animationIn": "slideInUp"
}'>
<i class="fas fa-search la-lg"></i>
</a>
<div id="searchClassic" class="hs-unfold-content bg-transparent shadow-none dropdown-menu w-100 border-0 rounded-0 p-0 ml-0 mr-4 top-0 mb-0 mt-1 right-0 left-0">
<form class="input-group input-group-sm input-group-merge">
<input type="text" class="form-control search-form-control rounded-pill border-0" placeholder="Search..." aria-label="Search...">
<div class="input-group-append">
<button type="button" class="btn">
<i class="fas fa-search"></i>
</button>
</div>
</form>
</div>
</div>
<!-- End Search -->
</li>
<li class="col pr-xl-0 px-2 px-sm-3">
<!-- Unfold (Dropdown) -->
<div class="hs-unfold">
<a class="js-hs-unfold-invoker dropdown-nav-link dropdown-toggle py-2 position-relative d-flex align-items-center" href="javascript:;"
data-hs-unfold-options='{
"target": "#basicDropdownHover",
"type": "css-animation",
"event": "hover"
}'>
<svg width="32px" height="32px">
<image x="0px" y="0px" width="32px" height="32px" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACB1BMVEW7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu7vLu3t7eys7KztLO4uLi6u7q0tbSxsrG2t7awsrC7vLu8vLy1trW8vby1tbWysrK6urq3uLe5urm9vr24ubitrq2wsbCsrazV1dXs7Oz29vb39/fw8PDe3t6vsK/v7+/////5+vnLy8urrKuxsbHGx8aur67k5OT4+Pizs7P9/f3R0tGurq7Oz87j4+OsrqzU1NTo6OiusK7+/v7k5eT4+fjGyMa7u7v6+vrMzMyrq6u+vr7Ky8ri4uLt7e3u7u7m5+bT1NOwsLC+v77Q0NDe397f39/T09O/v7/FxsX5+fn09PS9vb37+/v09fTNzs3g4ODh4uHX2Nf8/PzY2djIyMjIycjU1dTl5uXx8fHm5ubV1tVi3+TsAAAAUnRSTlMADleWxOHwxphZESftmiuDiBvN0iAq8TAW9xzX340dI5ymCPj9VV+lydDl5/P05srRnqdjCvr+EKCqipTd5Pb7IfI31NmLkAQvojIVn+PLoWIYYNJBTgAAAAFiS0dEca8HXOIAAAAHdElNRQfjBQECDwMxTbKCAAACG0lEQVQ4y21T90PTQBQ+RKpY3FisExcuEHEvFPdeXLikJLnakjbVgjESSEutqIiKIo66R90L/SNtbzTp+H66e9/37r17A4ACqqZUT63xeGqmTa+dAcrhra7rhEIXQl2iFPDMnFXKz0bdoqzIBIosdqM5RfTceYKKZRdwUJhf7/AL6iD35lAU6Gvg/ELfJe4eCgd62FGT/IuYYDGkPI5E9RASYiK9anAJyw8yFx1evhLv7buKYwoJqMCleX4ZUskVG+iaSXC936ICFS3PCRoHyItKUOw1OQZtYsMDKwBYuUqgEaxEgTeTQxFiE1dXgTWdlFdxyhGYN9LM2gQaJVoB46aLN4ctWg19LVjH/nDrtltwJ42IFa4HG8JUMFLpBTm8ETSHeA53K+SAmkELE8jWqMPfY7/ICzYFWHfcdbhv40KIVok3Z+RBH6XHHj7ivYWbQZvOL+N6+vHEk6fPnoejCh8dfQuo5SHkjB158fLV6zdvg3aGj4e6FWzbTkqtida74SQN8T4xGBM0UuodOwHYlW+WZosT7jok1HROgfXduW7WI1HRoviDWYT4eEzLtdubH4g98GOmZ8wsQVY2NLiXjtQ+Q/pkliE+ZLTzod/fb1bA5wMdfKwbDn4p57/6DzmL0XH42/diOvXjiLdot47+TLgkqdFfx46XLOeJtpbffyaT2Wxy8u8//8lTFfb7dNOZ1rMeX/u58xcuOtb/keQ/CDzeyUsAAAAASUVORK5CYII=">
</image>
</svg>
</a>
<div id="basicDropdownHover" class="hs-unfold-content dropdown-menu my-account-dropdown">
<!-- Modal Trigger -->
<a class="dropdown-item" href="javascript:;" data-toggle="modal" data-target="#loginModal">Sign in</a>
<a class="dropdown-item" href="javascript:;" data-toggle="modal" data-target="#loginModal">Register</a>
<!-- End Modal Trigger -->
</div>
</div>
<!-- End Unfold (Dropdown) -->
</li>
</ul>
</div>
</div>
</nav>
<!-- End Nav -->
</div>
</div>
<div class="bg-white py-2d line-height-lg d-none d-xl-block">
<div class="container-fluid px-md-5">
<div class="d-wd-flex font-secondary">
<div class="font-weight-bold font-size-14 mb-2 mb-wd-0">Quick links:</div>
<ul class="list-unstyled mb-0 nav mx-n1 mx-wd-n2d">
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img1.png" alt="Image-Description">
2020 Soccer World Cup
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img2.png" alt="Image-Description">
Formula 1
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img3.png" alt="Image-Description">
MotoGP
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img4.png" alt="Image-Description">
World Rowing
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img5.png" alt="Image-Description">
International Rugby
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img6.png" alt="Image-Description">
ATP World
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img7.png" alt="Image-Description">
WTA
</a>
</li>
<li class="px-1 px-wd-2d">
<a href="#" class="h-d-black font-size-14 d-block">
<img class="img-fluid mr-2" src="../../assets/img/44x26/img8.png" alt="Image-Description">
World Rally
</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<!-- ========== END HEADER ========== -->
<!-- ========== SECONDARY CONTENTS ========== -->
<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<button type="button" class="close position-absolute top-0 right-0 z-index-2 mt-3 mr-3" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
</svg>
</button>
<!-- Body -->
<div class="modal-body">
<form class="js-validate">
<!-- Login -->
<div id="login">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Sign In to Vodi</h3>
<p>Login to manage your account.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signinEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-3">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signinPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<div class="d-flex justify-content-end mb-4">
<a class="js-animation-link small link-underline" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#forgotPassword",
"groupName": "idForm"
}'>Forgot Password?
</a>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign In</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<i class="fab fa-google mr-2"></i>
Sign In with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Do not have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#signup",
"groupName": "idForm"
}'>Sign Up
</a>
</div>
</div>
<!-- Signup -->
<div id="signup" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Create your account</h3>
<p>Fill out the form to get started.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="signupEmail" placeholder="Email" aria-label="Email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="password" id="signupPassword" placeholder="Password" aria-label="Password" required
data-msg="Your password is invalid. Please try again.">
</div>
</div>
<!-- End Input Group -->
<!-- Input Group -->
<div class="js-form-message mb-4">
<label class="input-label">Confirm Password</label>
<div class="input-group input-group-sm mb-2">
<input type="password" class="form-control" name="confirmPassword" id="signupConfirmPassword" placeholder="Confirm Password" aria-label="Confirm Password" required
data-msg="Password does not match the confirm password.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Sign Up</button>
</div>
<div class="text-center mb-3">
<span class="divider divider-xs divider-text">OR</span>
</div>
<a class="btn btn-sm btn-ghost-secondary btn-block mb-2" href="#">
<span class="d-flex justify-content-center align-items-center">
<i class="fab fa-google mr-2"></i>
Sign Up with Google
</span>
</a>
<div class="text-center">
<span class="small text-muted">Already have an account?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm"
}'>Sign In
</a>
</div>
</div>
<!-- End Signup -->
<!-- Forgot Password -->
<div id="forgotPassword" style="display: none; opacity: 0;">
<!-- Title -->
<div class="text-center mb-7">
<h3 class="mb-0">Recover password</h3>
<p>Instructions will be sent to you.</p>
</div>
<!-- End Title -->
<!-- Input Group -->
<div class="js-form-message">
<label class="sr-only" for="recoverEmail">Your email</label>
<div class="input-group input-group-sm mb-2">
<input type="email" class="form-control" name="email" id="recoverEmail" placeholder="Your email" aria-label="Your email" required
data-msg="Please enter a valid email address.">
</div>
</div>
<!-- End Input Group -->
<div class="mb-3">
<button type="submit" class="btn btn-sm btn-primary btn-block">Recover Password</button>
</div>
<div class="text-center mb-4">
<span class="small text-muted">Remember your password?</span>
<a class="js-animation-link small font-weight-bold" href="javascript:;"
data-hs-show-animation-options='{
"targetSelector": "#login",
"groupName": "idForm"
}'>Login
</a>
</div>
</div>
<!-- End Forgot Password -->
</form>
</div>
<!-- End Body -->
</div>
</div>
</div>
<!-- End Login Modal -->
<!-- ========== END SECONDARY CONTENTS ========== -->
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" href="../../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.css">
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
<script src="../../assets/vendor/hs-header/dist/hs-header.min.js"></script>
<script src="../../assets/vendor/hs-mega-menu/dist/hs-mega-menu.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(window).on('ready', function () {
// initialization of HSMegaMenu component
var megaMenu = new HSMegaMenu($('.js-mega-menu')).init();
});
$(document).on('ready', function () {
// initialization of header
var header = new HSHeader($('#header')).init();
// initialization of unfold
var unfold = new HSUnfold('.js-hs-unfold-invoker').init();
});
</script>