How To Create A Complete Movie Website Using HTML And CSS

byPosted at
How To Create A Complete Movie Website Using HTML CSS And JavaScript
How To Create A Complete Movie Website Using HTML, CSS, and JavaScript

We will create a Complete movie website using HTML, CSS, and JavaScript. This Movie website is fully responsive. This website depends upon two pages one is the Home page the second is the Movie Page. On the Home page, you see a Movie slider and some Latest movies Boxes. On the Movie Page, you saw a Trailer button(Go to Trailer), a online play movie button (Play Full Movie Online), and Movie Download Buttons (Use to Download Movie).



How To Create A Complete Movie Website Using HTML, CSS, and JS

  1. 00:00 - 04:00 min : Intro
  2. 04:00 - 102.00 min: Making Movie Website Using HTML, CSS, and JavaScript


Basic HTML Code

This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices. 


  <html>
<head>
<meta charset="utf-8">
<meta content="IE-edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, intial-scale=1.0" name="viewport">
<title>MHD - Full HD Movies</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

Home Page HTML 

  <!--doctype html-->
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--==Title==================================-->
<title>MHD - Full HD Movies</title>

<!--Stylesheet(CSS)==========================-->
<link rel="stylesheet" href="css/style.css"/>

<!--==Fav-icon===============================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--==Import-poppins-font====================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!--==Import-Monoton-Font====================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">

<!--==Using-Font-Awesome======================-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>

<!--==CSS-Swiper==============================-->
<link rel="stylesheet" href="css/swiper-bundle.min.css"/>

</head>

<body>

    <!--==Scroll-Progress-bar=========================-->
    <div id="progress">
        <span id="progress-value"></span>
    </div>

    <!--==Navigation===================================-->
    <nav class="navigation">

        <!--menu-btn--------------->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon"></span>
        </label>


        <!--logo------------------->
        <a href="index.html" class="logo">
            Movies<span>.hd</span>
        </a>

        <!--menu------------------->
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Genre</a></li>
            <li><a href="#">TV Shows</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <!--Search-box------------->
        <form action="" class="search-box">
            <!--input-->
            <input type="text" name="search" placeholder="Search Movie" class="search-input" required/>
            <!--btn-->
            <button type="submit">
                <i class="fas fa-search"></i>
            </button>
        </form>

    </nav>
    <!--nav-end-->




    <!--==slider============================================-->
    <section id="main-slider">

<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">

    <!--1------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="#" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-1.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2014</span>
                        <a href="#">Paranormal Activity: The Marked Ones</strong>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>


      <!--2------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="movie-page.html" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-2.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2017</span>
                        <a href="movie-page.html">Pirates of the Caribbean: Salazar's Revenge</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>


      <!--3------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="#" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-3.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2020</span>
                        <a href="#">BloodShot</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>


      <!--4------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="#" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-4.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Venom: Let There Be Carnage</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>

      <!--5------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="#" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-5.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2018</span>
                        <a href="#">Deadpool 2</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>

      <!--6------------------------------------------>
      <div class="swiper-slide">
        <!--box------------------->
        <div class="main-slider-box">

            <!--overlayer-------->
            <a href="#" class="main-slider-overlay">
                <i class="fas fa-play"></i>
            </a>

            <!--img----------->
            <div class="main-slider-img">
                <img alt="Poster" src="images/p-6.jpg"/>
            </div>

            <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Black Widow</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>

        </div>
      </div>

    </div>
  </div>



  
    </section>
    <!--btns-------------------->
    <div class="slider-btns">
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!--slider-end-------->







    <!--==Latest-Movies==================================-->
    <section id="latest">

        <!--heading-------->
        <div class="latest-heading">
            <h1>Latest Movies</h1>
        </div>

        <!--container------->
        <div class="post-container">

            <!--post-box-1------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-1.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Venom: Let There Be Carnage</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-2------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-2.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">The Tomorrow War</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-3------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-3.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Jungle Cruise</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-4------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-4.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Dune</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-5------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-5.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">The Suicide Squad</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-6------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-6.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">No Time To Die</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-7------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-7.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Old</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-8------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-8.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Rumble</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-9------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-9.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">WandaVision</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-10------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-10.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Prisoners of the Ghostland (2021)</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-11------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-11.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Luca</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>


            <!--post-box-12------------>
            <div class="post-box">
                <!--img-->
                <div class="post-img">
                    <img alt="" src="images/post-12.jpg"/>
                </div>
                <!--text---------->
            <div class="main-slider-text">

                <!--quality----->
                <span class="quality">Full HD</span>

                <!--bottom-text-->
                <div class="bottom-text">

                    <!--name----->
                    <div class="movie-name">
                        <span>2021</span>
                        <a href="#">Annette</a>
                    </div>

                    <!--Category-and-rating---->
                    <div class="category-rating">
                        <!--category-->
                        <div class="category">
                            <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                        </div>
                        <!--rating--->
                        <div class="rating">
                            5.2 <img alt="imbd" src="images/IMDb-icon.png"/>
                        </div>
                    </div>

                </div>

            </div>
            </div>

        </div>
        <!--container-end--->



        <!--page-number=====================-->
        <div class="page-number">
            <a href="#" class="page-active">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            ....
            <a href="#">100</a>
        </div>

    </section>
    <!--latest-post-end------->



    <!--==footer==============================-->
    <footer>
        <!--footer-logo--->
        <a href="index.html" class="logo">
            Movies<span>hd</span>
        </a>
        <!--copyright----->
        <span class="copyright">
            Copyright 2021 - GoingToInternet
        </span>
    </footer>







    <!--==JS-Swiper====================================-->
    <script src="js/swiper-bundle.min.js"></script>
    <!--==jQuery=======================================-->
    <script src="js/jQuery.js"></script>


    <script>
        /*==scroll-progress-bar======================*/
        let scrollPrecentage = () =>{
            let scrollProgress = document.getElementById("progress");
            let progressValue = document.getElementById("progress-value");
            let pos = document.documentElement.scrollTop;
            let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            let scrollValue = Math.round(pos * 100 / calcHeight);
            scrollProgress.style.background = `conic-gradient(#e70634 ${scrollValue}%, #2b2f38 ${scrollValue}%)`;
        }
        window.onscroll = scrollPrecentage;
        window.onload = scrollPrecentage;



        /*Initialize Swiper*/
        var swiper = new Swiper(".mySwiper", {
          slidesPerView: 1,
          spaceBetween: 10,
          pagination: {
            el: ".swiper-pagination",
            clickable: true,
          },
          autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
          navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
          breakpoints: {
            640: {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            768: {
              slidesPerView: 2,
              spaceBetween: 40,
            },
            1024: {
              slidesPerView: 3,
              spaceBetween: 50,
            },
          },
        });

        /*--menu-btn-fixed-when-scroll============*/
        $(window).scroll(function(){
            if($(document).scrollTop() > 20){
                $('.navigation').addClass('fix-icon');
            }
            else{
                $('.navigation').removeClass('fix-icon');
            }
        });
      </script>

</body>

</html>
Movie Page HTML 

  <!--doctype html-->
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--==Title==================================-->
<title>Movie Name - MHD</title>

<!--Stylesheet(CSS)==========================-->
<link rel="stylesheet" href="css/style.css"/>

<!--==Fav-icon===============================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--==Import-poppins-font====================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!--==Import-Monoton-Font====================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">

<!--==Using-Font-Awesome======================-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>


</head>

<body>

    <!--==Scroll-Progress-bar=========================-->
    <div id="progress">
        <span id="progress-value"></span>
    </div>

    <!--==Navigation===================================-->
    <nav class="navigation">

        <!--menu-btn--------------->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon"></span>
        </label>


        <!--logo------------------->
        <a href="index.html" class="logo">
            Movies<span>.hd</span>
        </a>

        <!--menu------------------->
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Genre</a></li>
            <li><a href="#">TV Shows</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <!--Search-box------------->
        <form action="" class="search-box">
            <!--input-->
            <input type="text" name="search" placeholder="Search Movie" class="search-input" required/>
            <!--btn-->
            <button type="submit">
                <i class="fas fa-search"></i>
            </button>
        </form>

    </nav>
    <!--nav-end-->



    <!--==Movie-Banner=========================================-->
    <section class="movie-banner">

        <!--==img==================================-->
        <div class="m-banner-img">
            <img alt="" src="Movie-Data/Pirates-of-the-Caribbean-Salazar&#39;s-Revenge/cover.jpg">
        </div>

        <!--content================================-->
        <div class="banner-container">

            <!--title-container*******************----->
            <div class="title-container">
                <!--title-top===============-->
                <div class="title-top">
                <!--title----->
                <div class="movie-title">
                    <h1>Pirates of the Caribbean Salazar's Revenge</h1>
                </div>
                <!--more-about-movie-->
                <div class="more-about-movie">
                    <span class="quality">Full HD</span>
                    <div class="rating">
                        8.2 <img alt="imbd" src="images/IMDb-icon.png">
                    </div>
                    <span>28 August 2017</span>
                    <span>87min</span>
                </div>
                <!--language--------->
                <div class="language">
                    <span>English</span>
                </div>

                </div>


                <!--Title-botttom==========================-->
                <div class="title-bottom">
                    <!--category------->
                    <div class="category">
                        <strong>Category</strong><br/>
                        <a href="#">Horror</a>,<a href="#">Mistery</a>,<a href="#">Thriller</a>
                    </div>
                    <!--trailer-btn---->
                    <a href="https://www.youtube.com/watch?v=ZgQkEf3dQ08" class="watch-btn">Watch Trailer</a>
                </div>

            </div>

            <!--play-btn******************************--->
            <div class="play-btn-container">
                <div class="play-btn">
                    <a href="javascript:void">
                        <i class="fas fa-play"></i>
                    </a>
                </div>
            </div>

            <!--Video/full-Movie***************************-->
            <div id="play" class="play">
                <!--close-btn--->
                <a href="javascript:void" class="close-movie">
                    <i class="fas fa-times"></i>
                </a>
                <!--movie------->
                <div class="play-movie">
                    <video id="m-video" controls>
                        <source src="Movie-Data/Pirates-of-the-Caribbean-Salazar's-Revenge/Movie.mp4" type="video/mp4">
                    </video>
                </div>
            </div>

        </div>

    </section>
    <!--Banner-end------------->



    <!--details=====================================-->
    <section class="movie-details">
        <strong>Pirates of the Caribean: Salazar's Revenge</strong>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, veniam architecto, debitis quia similique adipisci autem quod eligendi delectus dolorum iusto. Eius, nobis ducimus! Corrupti nobis id itaque facere a.</p>
    </section>


    <!--==ScreenShots===============================-->
    <section class="screenshots">

        <strong>ScreenShots</strong>
        <!--screenshots-container----------->
        <div class="screen-s-container">
            <img alt="" src="Movie-Data/Pirates-of-the-Caribbean-Salazar&#39;s-Revenge/screenshot-1.jpg">
            <img alt="" src="Movie-Data/Pirates-of-the-Caribbean-Salazar&#39;s-Revenge/screenshot-2.jpg">
            <img alt="" src="Movie-Data/Pirates-of-the-Caribbean-Salazar&#39;s-Revenge/screenshot-3.jpg">
            <img alt="" src="Movie-Data/Pirates-of-the-Caribbean-Salazar&#39;s-Revenge/screenshot-4.jpg">
        </div>

    </section>

    <!--Download====================================-->
    <section class="download-movie">

        <!--container----------------->
        <div class="download-container">
            <!--box---->
            <div class="download-box">
                <span><i class="fas fa-server"></i> Server 1</span>
                <span>English</span>
                <span>480p</span>
                <a href="Movie-Data/Pirates-of-the-Caribbean-Salazar's-Revenge/Movie.mkv" download>Download</a>
            </div>
            <!--box---->
            <div class="download-box">
                <span><i class="fas fa-server"></i> Server 2</span>
                <span>English</span>
                <span>720p</span>
                <a href="#">Download</a>
            </div>
            <!--box---->
            <div class="download-box">
                <span><i class="fas fa-server"></i> Server 3</span>
                <span>English</span>
                <span>1080p</span>
                <a href="#">Download</a>
            </div>
        </div>

    </section>


    <!--==footer==============================-->
    <footer>
        <!--footer-logo--->
        <a href="index.html" class="logo">
            Movies<span>hd</span>
        </a>
        <!--copyright----->
        <span class="copyright">
            Copyright 2021 - GoingToInternet
        </span>
    </footer>









    <!--==jQuery=======================================-->
    <script src="js/jQuery.js"></script>


    <script>
        /*==scroll-progress-bar======================*/
        let scrollPrecentage = () =>{
            let scrollProgress = document.getElementById("progress");
            let progressValue = document.getElementById("progress-value");
            let pos = document.documentElement.scrollTop;
            let calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            let scrollValue = Math.round(pos * 100 / calcHeight);
            scrollProgress.style.background = `conic-gradient(#e70634 ${scrollValue}%, #2b2f38 ${scrollValue}%)`;
        }
        window.onscroll = scrollPrecentage;
        window.onload = scrollPrecentage;


        /*--menu-btn-fixed-when-scroll============*/
        $(window).scroll(function(){
            if($(document).scrollTop() > 20){
                $('.navigation').addClass('fix-icon');
            }
            else{
                $('.navigation').removeClass('fix-icon');
            }
        });

        /*==popup-open==================================*/
        $(document).on('click','.play-btn a',function(){
            $('.play').addClass('active-popup');
        });
        /*==popup-Close==================================*/
        $(document).on('click','.close-movie',function(){
            $('.play').removeClass('active-popup');
        });
        /*==auto-play-when-popup-open===================*/
        $('.play-btn a').click(function(){
            $('#m-video')[0].play();
        });
        /*==Close-video-when-poppup-close==============*/
        $('.close-movie').click(function(){
            $('#m-video')[0].pause();
        });

      </script>


</body>

</html>
All CSS 
*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    background-color: #080808;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
::selection{
    background-color: #e70634;
    color: #080808;
}
/*==Hide-Default-Scroll-Bar=================*/
body::-webkit-scrollbar{
    display: none;
}
body{
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/*==navigation===============================*/
.navigation{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 50px;
    max-width: 1400px;
    margin: auto;
    width: 100%;
}
.navigation .menu-icon{
    cursor: pointer;
    float: right;
    padding: 20px 10px;
    z-index: 107;
}
.navigation .menu-icon .nav-icon{
    background-color: #ffffff;
    display: block;
    height: 2px;
    width: 25px;
    position: relative;
    transition: background 0.2s ease-out;
}
.navigation .menu-icon .nav-icon::before,
.navigation .menu-icon .nav-icon::after{
    background-color: #ffffff;
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    transition: all ease-out 0.2s;
}
.navigation .menu-icon .nav-icon::before{
    top: 8px;
}
.navigation .menu-icon .nav-icon::after{
    top: -8px;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
    transform: rotate(-45deg);
    top: 0px;
}
.navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
    transform: rotate(45deg);
    top: 0px;
}
.menu-btn{
    display: none;
}

/*--menu-------------*/
.menu{
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #111111f1;
    z-index: 106;
    display: none;
    justify-content: center;
    align-items: center;
    animation: fade 0.3s;
}
.menu li a{
    color: #ffffff;
    margin: 0px 40px;
    font-size: 2rem;
    font-family: Monoton;
    transition: all ease 0.3s;
}
.menu li a:hover{
    font-size: 2.3rem;
    color: #e70634;
    transition: all ease 0.3s;
}

.navigation .menu-btn:checked ~ .menu{
    display: flex;
}

@keyframes fade{
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
/*--logo--------------*/
.logo{
    color: #e70634;
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 400;
    margin: 0px auto 0px 40px;
    display: flex;
    align-items: center;
    font-family: Monoton;
    letter-spacing: 1px;
}
.logo span{
    font-size: 0.7rem;
    margin-left: 5px;
    font-weight: 700;
    letter-spacing: 2px;
}
/*--search-box----*/
.search-box{
    background-color: #d1d1d111;
    padding: 3px 20px;
    border-radius: 20px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 20px;
}
.search-box input{
    background-color: transparent;
    border: none;
    outline: none;
    color: #ffffff;
}
.search-box input::placeholder{
    color: #ffffff5e;
}
.search-box button{
    background-color: transparent;
    color: #ffffffc9;
    border: none;
    outline: none;
    cursor: pointer;
}
/*==slider===============================*/
#main-slider{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    max-width: 1170px;
    width: 100%;
}
.main-slider-box{
    width: 100%;
    height: 450px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    border: 1px solid #0e0e0ec2;
    position: relative;
    overflow: hidden;
    user-select: none;
}
.main-slider-img{
    width: 100%;
    height: 100%;
}
.main-slider-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.main-slider-text{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(360deg, #161616b9 35%, rgba(73,73,73,0.23) 64%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 25px;
}
.main-slider-text .quality,
.more-about-movie .quality{
    background-color: #e70634;
    color: #080808;
    font-weight: 600;
    padding: 0px 5px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.main-slider-text .movie-name{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.main-slider-text .movie-name span{
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 400;
    color: rgba(240,240,240,0.82);
}
.main-slider-text .movie-name a{
    font-size: 1rem;
    font-weight: 500;
    line-height: 20px;
    margin-top: 10px;
    color: #dfdfdf;
    letter-spacing: 0.5px;
}
.main-slider-text .category{
    color: #969696;
    font-size: 0.8rem;
    font-weight: 500;
}
.main-slider-text .category a{
    color: #e70634;
    margin: 0px 3px;
}
.rating img{
    height: 10px;
    width: 20px;
    object-fit: contain;
    object-position: center;
}
.rating{
    font-size: 0.8rem;
    color: #ffffff;
    letter-spacing: 1px;
}
.main-slider-text .category-rating{
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 20px;
}
.main-slider-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 100%;
    background-color: rgba(27,27,27,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    transition: all ease 0.3s;
    z-index: 2;
}
.main-slider-overlay i{
    font-size: 2rem;
}
.main-slider-box:hover .main-slider-overlay{
    top: 0px;
    transition: all ease 0.3s;
}
.swiper-button-next,
.swiper-button-prev{
    position: static !important;
    transform: translate(0,0);
    margin: 10px 0px 0px 20px !important;
}
.slider-btns{
    display: flex;
    justify-content: flex-end;
    max-width: 1170px;
    width: 100%;
    margin: 10px auto 0px auto;
}
.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 25px !important;
    font-weight: 800;
    color: #ffffff;
}
/*==Latest===================================*/
#latest{
    max-width: 1170px;
    margin: 30px auto;
    width: 100%;
}
.latest-heading{
    width: 100%;
    padding: 10px 20px;
    background-color: #0e0e0ec2;
    border: 1px solid #161616b9;
}
.latest-heading h1{
    color: #dadada;
    font-size: 1.3rem;
    font-weight: 500;
}
.post-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 35px;
    margin: 20px 0px;
}
.post-box{
    width: 100%;
    height: 550px;
    overflow: hidden;
    background-color: #0e0e0ec2;
    border: 1px solid #161616b9;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.15);
    position: relative;
}
.post-box .post-img{
    width: 100%;
    height: 100%;
}
.post-box .post-img img{
    width: 100%;
    height: 100%;
    object-position: top center;
    object-fit: cover;
}
.main-slider-text .movie-name a:hover{
    opacity: 0.5;
    transition: all ease 0.3s;
}
/*page-number-----*/
.page-number{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #464646;
    margin-top: 50px;
}
.page-number a{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    margin: 0px 13px;
    opacity: 0.5;
    transition: all ease 0.3s;
}
.page-number .page-active,
.page-number a:hover{
    opacity: 1;
    transition: all ease 0.3s;
}
/*==footer=========================*/
footer{
    background-color: #0e0e0ec2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10%;
}
footer .copyright{
    color: #4d4d4d;
    font-size: 0.9rem;
}
footer .logo{
    margin: 0px;
    font-size: 2rem;
    font-weight: 400;
}
/*==fix-menu-btn========*/
.fix-icon .menu-icon{
    position: fixed;
    left: 40px;
    top: 40px;
    background-color: #1c1f25;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*==scroll-progress-bar=============*/
#progress{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    position: fixed;
    bottom: 25px;
    right: 25px;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    display: grid;
    place-items: center;
    z-index:105;
}
#progress-value{
    display: block;
    height: calc(100% - 5px);
    width: calc(100% - 5px);
    background-color: #1c1f25;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 0px;
}
/*==Making-Home-page-Responsive==================*/
@media(max-width:1200px){
    #main-slider,
    #latest,
    .slider-btns{
        width: 90%;
    }
    .menu li a{
        margin: 0px;
        font-size: 1.6rem;
    }
    .menu {
        flex-direction: column;
    }
}
@media(max-width:1100px){
    .post-container{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media(max-width:824px){
    .navigation{
        padding: 20px 10px;
        width: 90%;
    }
    .logo,
    footer .logo{
        font-size: 1.3rem;
    }
    .post-container{
        grid-template-columns: 1fr 1fr;
    }
    footer{
        padding: 10px 20px;
        text-align: center;
    }
}
@media(max-width:530px){
    .navigation{
        display: grid;
        grid-template-columns: 60px 1fr;
        grid-template-rows: 1fr 1fr;
        padding: 20px 0px;
    }
    .logo{
        margin: 0px;
    }
    .search-box{
        grid-column-start: 1;
        grid-column-end: 3;
        width: 100%;
        border-radius: 0px;
    }
    .menu li a:hover{
        font-size: 1.8rem;
    }
    .post-container{
        grid-gap: 15px;
    }
    .post-box{
        height: 450px;
    }
    footer .copyright{
        font-size: 0.8rem;
    }
    .fix-icon .menu-icon{
        left: 10px;
        top: 0px;
        border-radius: 4px;
    }
  
}
@media(max-width:480px){
    .post-container{
        grid-template-columns: 1fr;
    }
    .post-box{
        height: 500px;
    }
}

/*==movie-page=============================*/
.movie-banner{
    width: 90%;
    max-width: 1400px;
    margin: 10px auto;
    min-height: 520px;
    padding: 60px 40px 40px 40px;
    position: relative;
    display: flex;
    justify-content: center;
}
.movie-banner::after{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(32,32,32,0.7);
    background: linear-gradient(0deg, rgb(8,8,8) 0%, rgba(0,0,0,0.6) 100%);
}
.m-banner-img{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
}
.m-banner-img::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: rgba(32,32,32,0.7);
    background: linear-gradient(-90deg, rgba(37,37,37,0.2) 0%, rgba(15,15,15,0.3) 100%);
}
.m-banner-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.banner-container{
    z-index: 100;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    position: relative;
}
.title-container{
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.movie-title h1{
    color: #ffffff;
    font-weight: 600;
    font-size: 2.3rem;
    line-height: 50px;
    letter-spacing: 1px;
}
.more-about-movie{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    flex-wrap: wrap;
    color: #e9e9e9;
}
.more-about-movie .rating,
.more-about-movie span{
    margin-right: 20px;
    letter-spacing: 1px;
    font-size: 0.8rem;
}
.language{
    margin-top: 20px;
}
.language span{
    background-color: #dfdfdf0e;
    padding: 5px 10px;
    margin-right: 10px;
    color: #dfdfdf;
    font-size: 0.8rem;
}
.title-bottom{
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    flex-wrap: wrap;
}
.title-bottom .category{
    margin-right: 40px;
    font-size: 0.8rem;
    color: #dadada;
}
.title-bottom .category strong{
    font-weight: 500;
    color: #d8d8d8;
}
.title-bottom .category a{
    color: #e70634;
    margin-right:5px;
}
.watch-btn{
    width: 220px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff09;
    border: 1px solid #ffffff2c;
    border-radius: 3px;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: #ffffff;
    letter-spacing: 1px;
    transition: all ease 0.3s;
}
.watch-btn:hover{
    background-color: #e70634;
    transition: all ease 0.3s;
}
/*--play-btn---*/
.play-btn{
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid #dadada48;
    z-index: 3;
    background-color: rgba(255,0,0,0.185);
    position: relative;
}
.play-btn a{
    width: 65px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all ease 0.3s;
}
.play-btn a:hover{
    background-color: #e70634;
    transition: all ease 0.3s;
}
.play-btn i{
    color: #ffffff;
}
.play-btn-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
    max-width: 500px;
}
.play-btn::before{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    width: 180%;
    height: 180%;
    border: 1px solid #ffffff26;
    background-color: #ffffff18;
    z-index: -1;
}
/*==full-movie-video==================*/
#play{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left:0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(15,15,15,0.7);
    z-index: 108;
    display: none;
}
.play-movie{
    width: 80%;
}
.play-movie video,
.play-movie iframe{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    z-index: 108;
}
.close-movie{
    position: fixed;
    right: 60px;
    top: 60px;
    font-size: 2rem;
    color: #e70634;
    transition: all ease 0.3s;
}
.close-movie:hover{
    opacity: 0.6;
    transition: all ease 0.3s;
}
.active-popup{
    display: flex !important;
}
/*--details=============================*/
.movie-details{
    max-width: 1000px;
    width: 100%;
    margin: 30px auto 20px auto;
    padding: 30px;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.movie-details strong{
    color: #ffffff;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1px;
}
.movie-details p{
    color: #747474;
    margin: 10px 0px;
}
/*==screenshots===================*/
.screenshots{
    width: 100%;
    max-width: 800px;
    margin: 0px auto 50px auto;
}
.screenshots strong{
    color: #e70634;
    font-family: Monoton;
    font-size: 2rem;
    font-weight: 400;
}
.screen-s-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.screen-s-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/*==Download==============================*/
.download-movie{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px 0px;
}
.download-container{
    max-width: 1000px;
    width: 100%;
}
.download-box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: rgba(136,136,136,0.06);
}
.download-box a,
.download-box span{
    padding: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #2a2a2a52;
    color: #d8d8d8;
    letter-spacing: 1px;
}
.download-box span i{
    margin-right: 10px;
}
.download-box a{
    color: #e70634;
    transition: all ease 0.3s;
}
.download-box a:hover{
    color: #c51e3f;
    transition: all ease 0.3s;
}
/*==making-Movie-page-responsive====================*/
@media(max-width:1000px){
    .watch-btn{
        margin-top: 20px;
    }
}
@media(max-width:900px){
    .screenshots,
    .download-container{
        width: 90%;
    }
}
@media(max-width:750px){
    .banner-container{
        grid-template-columns: 1fr;
    }
    .play-btn-container{
        margin-top:50px;
        display: flex;
    }
}
@media(max-width:600px){
    .movie-banner{
        padding: 20px;
    }
    .download-box{
        grid-template-columns: 1fr;
        margin-bottom: 20px;
    }
    .movie-title h1{
        font-size: 1.3rem;
        line-height: 30px;
    }
    .title-container{
        justify-content: flex-start;
    }
    .more-about-movie span{
        margin-top: 10px;
        display: flex;
    }
    .rating{
        margin-bottom: -10px;
    }
    .title-bottom{
        margin-top: 30px;
    }
    .play-btn,
    .play-btn a{
        width: 50px;
        height: 50px;
    }
    .movie-details{
        margin-top: 0px;
    }
    .screenshots strong{
        font-size: 1.5rem;
    }
}





How To Dowload Files
Share
2 comments Labels, ,

Comments

  1. DazzleCatNovember 20, 2021 at 7:22 AM

    Thank you ! 😃

    ReplyDelete
  2. Dezango AdminFebruary 6, 2022 at 8:05 PM

    That great bros

    ReplyDelete

Archive

Contact Form

Send