How To Make a Responsive Movie Website Using HTML


How To Make a Responsive Movie Website Using HTML CSS

Movie Website HTML

Learn how to create a responsive Movie Website using HTML, CSS, and JavaScript. you can easily make a Movie Website using HTML, CSS, and JavaScript. You also make this Movie Website by following my youtube tutorial which, I have given below. This Movie Website is fully responsive all browsers compatible.



How to Make a Responsive Movie Website using HTML, CSS, and jQuery

  1. 0.0 - 2.0 min : Intro
  2. 1.0 - 45.0 min: Create a Responsive Responsive Movie Website Using HTML, CSS and, jQuery


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.


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

<body>
</body>
</html>


Movie Website Code

You can easily make this Movie Website on your website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML, CSS, and JavaScript code that I give below. Paste this HTML, CSS, and JavaScript code into your HTML, CSS, and JavaScript file. On the youtube video tutorial, I tell you all the important points which help you to make the Movie Website like that for your website. So I recommended you watch the Movie Website video Tutorial on how can I make this Movie Website. This Movie Website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Movie Website video tutorial on how I make this. You can use this without any copyright.

Movie Website HTML Code have given below.


 <!--navigation-------------->
    <nav>
        <!--logo--------------->
        <a href="#" class="logo">
            <img src="images/logo.png"/>
        </a>
        <!--menu--btn----------------->
        <input type="checkbox" class="menu-btn" id="menu-btn"/>
        <label class="menu-icon" for="menu-btn">
            <span class="nav-icon"></span>
        </label>
        <!--menu-------------->
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Movies</a></li>
            <li><a href="#">TV Shows</a></li>
            <li><a href="#">Hollywood</a></li>
            <li><a href="#">Horror</a></li>
        </ul>
        <!--search------------->
        <div class="search">
            <input type="text" placeholder="Find Your Favourtie Movies"/>
            <!--search-icon----------->
            <i class="fas fa-search"></i>
        </div>
    </nav>
    <section id="main">
        <!--showcase----------------------->
        <!--heading------------->
        <h1 class="showcase-heading">Showcase</h1>
        
        <ul id="autoWidth" class="cs-hidden">
        
        <!--box-1--------------------------->
        <li class="item-a">
            <!--showcase-box------------------->
           <div class="showcase-box">
               <img src="images/s-1.jpg"/>
           </div>
               </li>
            <!--box-2--------------------------->
            <li class="item-b">
                <!--showcase-box------------------->
               <div class="showcase-box">
                   <img src="images/s-2.jpg"/>
               </div>
                   </li>
                <!--box-3--------------------------->
            <li class="item-c">
                <!--showcase-box------------------->
               <div class="showcase-box">
                   <img src="images/s-3.jpg"/>
               </div>
                   </li>
                <!--box-4--------------------------->
            <li class="item-d">
                <!--showcase-box------------------->
               <div class="showcase-box">
                   <img src="images/s-4.jpg"/>
               </div>
                   </li>
                   <!--box-5--------------------------->
            <li class="item-e">
                <!--showcase-box------------------->
               <div class="showcase-box">
                   <img src="images/s-5.png"/>
               </div>
                   </li>

          </ul>

        
    </section>
    <!--latest-movies---------------------->
    <section id="latest">
        <h2 class="latest-heading">Latest Movies</h2>
        <!--slider------------------->
        <ul id="autoWidth2" class="cs-hidden">
            <!--slide-box-1------------------>
            <li class="item-a">
                <div class="latest-box">
                    <!--img-------->
                    <div class="latest-b-img">
                        <img src="images/m-1.jpg">
                    </div>
                    <!--text---------->
                    <div class="latest-b-text">
                        <strong>Kin 2018</strong>
                        <p>Action Movie</p>
                    </div>

                </div>
            </li>
    <!--slide-box-2------------------>
    <li class="item-b">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-2.jpg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
    <!--slide-box-3------------------>
    <li class="item-c">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-3.jpg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
    <!--slide-box-4------------------>
    <li class="item-d">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-4.jpg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
    <!--slide-box-5------------------>
    <li class="item-e">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-5.jpg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
    <!--slide-box-6------------------>
    <li class="item-f">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-6.jpg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
    <!--slide-box-7------------------>
    <li class="item-g">
        <div class="latest-box">
            <!--img-------->
            <div class="latest-b-img">
                <img src="images/m-7.jpeg">
            </div>
            <!--text---------->
            <div class="latest-b-text">
                <strong>Kin 2018</strong>
                <p>Action Movie</p>
            </div>

        </div>
    </li>
          </ul>
    </section>
    <!--movies---------------------------->
    <div class="movies-heading">
        <h2>Movies</h2>
    </div>
    <section id="movies-list">
        <!--box-1------------------------>
        <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-1.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-2------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-2.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-3------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-3.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-4------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-4.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-5------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-5.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-6------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-6.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-7------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-7.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
         <!--box-8------------------------>
         <div class="movies-box">
            <!--img------------>
            <div class="movies-img">
                <div class="quality">HDRip</div>
                <img src="images/l-8.jpg">
            </div>
            <!--text--------->
            <a href="#">
                Tin (2018) Full Movie[In English] With English Subtitles | HDRip 1080p HD
            </a>
        </div>
    </section>
<!--btns--------------->
    <div class="btns">
        <a href="#">Previous</a>
        <a href="#">Next</a>
    </div>
    <!--footer------------------>
    <footer>
        <p>Going To Internet, Ltd Consumer Website</p>
        <p>Copyright 2020 - GoingToInternet</p>
    </footer>


Font Awesome Link


  <!--using FontAwesome--------------->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
  

Movie Website CSS Code have given below.

body{
    margin:0px;
    padding: 0px;
    font-family: poppins;
    background-color: rgba(151,151,151,0.03);
}
*{
    box-sizing: border-box;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width:100%;
    border:1px solid rgba(0,0,0,0.04);
    background-color: #ffffff;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}
.logo img{
    height: 35px;
}
nav .menu{
    display: flex;
}
nav .menu li a{
    height: 40px;
    line-height: 43px;
    margin: 0px;
    padding: 0px 22px;
    display: flex;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
    color:#585858;
    letter-spacing: 1px;
}
.search{
    width:250px;
    height: 40px;
    background-color: rgba(245,245,245,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 0px 20px;
}
.search input{
    width:100%;
    height: 30px;
    border:none;
    outline: none;
    background-color: transparent;
}
.search i{
    color:#3a3a3a;
}
nav .menu li a:hover{
    background-color: #242424;
    color:#ffffff;
    box-shadow: 5px 10px 30px rgba(53,53,53,0.1);
    transition: all ease 0.2s;
}
#main{
    padding-top: 80px;
    background-color: #ffffff;
}
.showcase-box{
    width:430px;
    height: 250px;
    box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
    border-radius: 10px;
    margin:0px 20px 10px 20px;
    overflow: hidden;
}
.showcase-box img{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}
.showcase-heading{
    padding-left: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1.2rem;
    color: #1a1a1a;
}
.cs-hidden{
    overflow: visible !important;
}
#latest{
    border-top: 1px solid rgba(53,53,53,0.1);
}
.latest-heading{
    margin: 30px 30px 0px 30px;
    font-weight: 500;
    font-size: 1.3rem;
}
.latest-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
    margin: 20px 10px;
    border-radius: 10px;
    overflow:hidden;
    width:200px;
    background-color: #ffffff;
}
.latest-b-img{
    width:100%;
    height: 270px;
}
.latest-b-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.latest-b-text strong{
    color:#3a3a3a;
    margin: 0px;
}
.latest-b-text{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 10px;
}
.latest-b-text p{
    color:#979797;
    margin: 0px;
}
.movies-heading h2{
    font-weight: 400;
    margin: 0px;
    padding: 1px 20px;
    background-color: rgba(0,0,0,0.01);
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 1.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
}
.movies-heading{
    display: flex;
    margin:0px 2%;
}
.movies-box{
    width:300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
    margin: 20px;
    border-radius: 5px;
    overflow: hidden;
    border-top: 3px solid #292929;
}
.movies-img{
    width:100%;
    height: 400px;
    position: relative;
}
.movies-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.movies-box a{
    text-align:center;
    display: block;
    font-weight: 600;
    display: -webkit-box;
    max-width: 80%;
    -webkit-line-clamp: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #3a3a3a;
    margin: 20px;
}
.movies-box:hover{
    transform: translateY(-10px);
    transition: all ease 0.2s;
}
#movies-list{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.quality{
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f1f1f;
    color: #ffffff;
    padding: 5px 20px;
    font-weight: 500;
    border-radius: 0px 0px 10px 10px;
    box-shadow: 5px 10px 30px rgba(0,0,0,0.4);
}
.btns{
    display: flex;
    justify-content: center;
    align-items: center;
}
.btns a{
    width: 130px;
    height: 40px;
    border:none;
    outline: none;
    color: #ffffff;
    background-color: #3963f0;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
}
.btns a:hover{
    background-color: #284fd1;
}
footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.1);

}
footer p{
    color:#5e5e5e;
    margin: 10px 0px;
    font-size: 0.9rem;
}
nav .menu-btn{
    display: none;
}
@media(max-width:1100px){
    nav{
        justify-content: space-between;
        height: 70px;
        padding: 0px 10px;
    }
    nav .menu{
       display: none;
        position: absolute;
        top: 65px;
        left: 0px;
        background: #fff;
        border-bottom:4px solid #242424;
        width:100%;
        padding:0px;
        margin:0px;
    }
    .menu li{
        width:100%;
    }
    nav .menu li a{
        width: 100%;
        height: 40px;
        align-items: center;
        margin: 0px;
        padding:25px;
        border:1px solid rgba(38,38,38,0.03);
    }

    nav .menu-icon{
        cursor: pointer;
        float: right;
        padding:28px 20px;
        position: relative;
        user-select: none;
        display: block;
    }
    nav .menu-icon .nav-icon{
        background-color: #333333;
        display: block;
        height: 2px;
        position: relative;
        transition: background 0.2s ease-out;
        width: 18px;
    }
    nav .menu-icon .nav-icon:before,
    nav .menu-icon .nav-icon:after{
        background: #333333;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all ease-out 0.2s;
        width: 100%;
    }
    nav .menu-icon .nav-icon:before{
        top:5px;
    }
    nav .menu-icon .nav-icon:after{
        top:-5px;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon{
        background: transparent;

    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
        transform: rotate(-45deg);
        top: 0;
    }
    nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
        transform: rotate(45deg);
        top: 0;
    }
    nav .menu-btn{
        display: none;
    }
    nav .menu-btn:checked ~ .menu{
        display: block;
    }
}
@media(max-width:680px){
    .showcase-box{
        max-width: 300px;
        height: 180px;
        margin: 10px;
    }
    .latest-box{
        width:190px;
        margin: 20px 5px;
    }
    .movies-box{
        flex-direction: row;
        width:90%;
        border: 1px solid rgba(0,0,0,0.2);
    }
    .movies-box a{
        width:65%;
    }
    footer{
        justify-content: space-between;
        padding:0px 20px;
        text-align: center;
    }
}
@media(max-width:440px){
    .movies-box a,.movies-box{
        width: 100%;
    }
    .movies-box{
        flex-direction: column;
    }
    .logo img{
        height: 30px;
    }
    .search{
        width: 90%;
        height: 40px;
    }
}

➤ Movie website slider JavaScript Code have given below.

    $(document).ready(function() {
    $('#autoWidth,#autoWidth2').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth,#autoWidth2').removeClass('cS-hidden');
        } 
    });  
  });




How To Dowload Files

Comments

  1. i'm not able to see that controls on my screen

    ReplyDelete
    Replies
    1. Make a new folder "img" name (img) must be same. Past control img here, after doing this just refresh your browser window you see the controls. You find Control IMG in files.rar which I provide you above in this post.

      Delete
  2. i can't download image please give me google drive link

    ReplyDelete
  3. can u update this, because didn't work

    ReplyDelete
  4. I AM NOT ABLE TO SEE MY SHOWCASE AND LATEST

    ReplyDelete
  5. the photos are not orgonized what should i do

    ReplyDelete
  6. The images are not arrange in horizontal (showcase) they are all in a list

    ReplyDelete
  7. hey everyone ,, you need to link the jquery

    ReplyDelete
  8. I can not acces this and can not Download This File Why?

    ReplyDelete
  9. To upload on WordPress, we need .php file. Please if possible give me that file.

    ReplyDelete
    Replies
    1. Go to my GitHub account "SaquibHussain" and download it from there and Enjoy!!!!

      Delete
  10. i cannot see images in a horizontal order it shows only vertical

    ReplyDelete
  11. i cannot extract the files they are saying that the operation is broken or files are corrupted

    ReplyDelete
  12. hi please help me how iam active search box
    and navigation bar please help me
    thank you ....

    ReplyDelete
  13. Hello admin, I need this template for my final year project
    I can't download, I have some download issues. Please can you send me.

    ReplyDelete
  14. my javascript is not working what should i do

    ReplyDelete
  15. bro please make theme for blogger users in " xml " please

    ReplyDelete
  16. I appreciate your efforts which you have put into this article. Genuinely it is a useful article to increase our knowledge graphic designer vancouver wa. Thanks for share an article like this.

    ReplyDelete

Archive

Contact Form

Send