How To Make a Responsive Movie Website Using HTML

byPosted at

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
Share
22 comments Labels, ,

Comments

  1. UnknownNovember 16, 2020 at 3:06 PM

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

    ReplyDelete
    Replies
    1. Going-To InternetNovember 17, 2020 at 12:02 AM

      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. UnknownJanuary 13, 2021 at 6:05 PM

      can u send me controls

      Delete
  2. Fokrul Aslam OfficialNovember 19, 2020 at 11:43 AM

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

    ReplyDelete
  3. UnknownDecember 7, 2020 at 12:52 PM

    can u update this, because didn't work

    ReplyDelete
  4. AYESHA HANNUREJanuary 5, 2021 at 2:51 PM

    I AM NOT ABLE TO SEE MY SHOWCASE AND LATEST

    ReplyDelete
  5. AnonymousJanuary 17, 2021 at 3:23 PM

    the photos are not orgonized what should i do

    ReplyDelete
  6. UnknownFebruary 23, 2021 at 10:41 AM

    Can't open the file

    ReplyDelete
  7. UnknownMarch 2, 2021 at 7:18 AM

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

    ReplyDelete
  8. 7/6April 2, 2021 at 12:09 AM

    hey everyone ,, you need to link the jquery

    ReplyDelete
  9. www.omgbloggerspot.comApril 24, 2021 at 3:38 PM

    I can not acces this and can not Download This File Why?

    ReplyDelete
  10. AnimeYMApril 29, 2021 at 9:16 AM

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

    ReplyDelete
    Replies
    1. UnknownMay 8, 2021 at 2:24 PM

      Go to my GitHub account "SaquibHussain" and download it from there and Enjoy!!!!

      Delete
    2. UnknownDecember 16, 2021 at 5:58 PM

      thx bro you are a legend

      Delete
  11. Ramya ReddyMay 3, 2021 at 8:45 PM

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

    ReplyDelete
  12. UnknownJune 11, 2021 at 6:52 PM

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

    ReplyDelete
  13. UnknownJune 14, 2021 at 6:17 PM

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

    ReplyDelete
  14. UnknownJuly 12, 2021 at 2:38 PM

    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
  15. The Palace Of Lifestyles ♪September 26, 2021 at 2:11 PM

    BV

    ReplyDelete
  16. UnknownDecember 20, 2021 at 8:22 PM

    my javascript is not working what should i do

    ReplyDelete
  17. YaseenMay 3, 2022 at 11:43 AM

    bro please make theme for blogger users in " xml " please

    ReplyDelete

Archive

Contact Form

Send