Movie Website
Create New

Movie Website

Project period

10/14/2019 - 11/01/2019

Views

32

4



Movie Website
Movie Website

Usually, it can be an exciting experience searching around at websites in particular industries to learn about the current trends and to study how they differ from those in other industries. In this project, we will have a clear idea about the websites of major motion pictures to see what types of websites are being created. Nowadays movies play a big part in the entertainment sector, and recently these movie websites have become increasingly important to their overall success. Movies are made to keep people entertained, and movie websites are created for the same reason. In order to attract visitors' attention and to encourage them to watch a movie, a website needs to display all the information on what they are looking for and keep them entertained as well. Present movie websites make it easy to take a couple of minutes and watch a few trailers for all movies on a single page and thus allows them to decide which movie to see. Usually many movie websites, doe not include more than just the movie it also provides information along with the trailer. At times, games and activities to entertain customers are also very common. Such elements can make the website more attractive or fun for visitors it also helps in promoting the movie.

Why: Problem statement

The primary purpose of a movie website has to be discussed in detail and considered before going into the dept of a specific movie website. As we all knew very well that,  for a movie to be successful in all terns, it needs to do well at the box office. today many moviegoers use the Internet to find movies to watch tailors and to buy tickets. Having things like trailers and other informations on one web page helps the visitors to find or overview a good movie. This movie trailer website project consists of server-side code to store a list of movie titles, along with its respective posters, trailer links, movie release date, and one line describing the story. This frame is written in Python by HTML and CSS. This creates an HTML based segment in an error browser, painting the number of videos wherever user pressure quickly follows the event by a possible crack. Onward by sample models, best sessions and a fast summary are also provided to users. To perform that project, you need to stay Python 2.x.

How: Solution description

 

 

The website is the one-stop destination for movie lovers where they can view the data served as a web page allowing visitors to review the movies and watch the trailers.

An eligible and complete UI is developed for the component design. The performance is so intense that the user won’t realize it allowing to receive and grip. To run the project, you oblige have involved python 2.x on your PC. Individual Show Pack Website in Python information with source code is cleared to download. Utilize for reading plan totally! For the prototype demo, maintain a look at the video inappropriate.

How is it different from competition

Suppose people want to book tickets for a movie he/she has to go through the overview of the movie. So they have to search for movie details separately on a website and trailer on another website. A cleaned and straightforward UI is presented for this great program. This information is so easy that the user won’t feel tough to control and use. To deliver and execute the project, you must qualify the attached Python 2.x on your PC. Open Film Trailer Website in Python object with support clarification is reasonable to download. Work for showing view entirely! During all program demo, use a display at the video forward. This website serves you with a combination of youtube and googles on the same website. Displaying more number of movies where user can easily watch the trailer by a single click and in a single page. With every movie posters, release dates and a short description of the story are also shown to visitors.

Creating such technological projects is an excellent platform for students to learn and execute in class. Students will be able to use these movie website projects for their assignments, hence it results in a  great way to integrate the knowledge of every subject of their curriculum.

Who are your customers

The public, Movie lovers, Audience, and people in the world are the customers of this project.

Project Phases and Schedule

Phase 1: Entertainment centre

Phase 2: Media file

Phase 3: Website file

Resources Required

Anaconda - Python version 3.6

HTML

CSS

Download:
Project Code Code copy
/* Your file Name : Website.html */
/* Your coding Language : html */
/* Your code snippet start here */

<head>
    <meta charset="utf-8">
    <title>Movie Website!</title>

    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
            background-color: #333;
            color: #CCC;
        }
        #trailer .modal-dialog {
            margin-top: 200px;
            width: 640px;
            height: 480px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .movie-tile {
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .movie-tile:hover {
            background-color: #444;
            cursor: pointer;
        }
        .movie-tile img {
            box-shadow: 7px 7px 12px #222;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: white;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal', function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-tile', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
          });
        });
    </script>
</head>

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>                            
        </div>
      </div>
    </div>
    
    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="WX9TDlEoQFo" data-toggle="modal" data-target="#trailer">
    <img src="https://upload.wikimedia.org/wikipedia/en/3/30/Nerkonda_Paarvai_poster.jpg" width="220" height="342">
    <h2>Nerkonda Parvai</h2>
    <p>Remake of hindi PINK</p>
    <p>Release date: Aug 10, 2019</p>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="TcMBFSGVi1c" data-toggle="modal" data-target="#trailer">
    <img src="https://m.media-amazon.com/images/M/MV5BMTc5MDE2ODcwNV5BMl5BanBnXkFtZTgwMzI2NzQ2NzM@._V1_.jpg" width="220" height="342">
    <h2>Avengers: EndGame</h2>
    <p>The Avengers take a final stand against Thanos</p>
    <p>Release date: April 26, 2019</p>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="Nt9L1jCKGnE" data-toggle="modal" data-target="#trailer">
    <img src="https://terrigen-cdn-dev.marvel.com/content/prod/1x/sffh_venice-high-res.jpg" width="220" height="342">
    <h2>Spider-Man: FFH</h2>
    <p>Following the events of Avengers: Endgame,</p>
    <p>Release date: July 5, 2019</p>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="azvR__GRQic" data-toggle="modal" data-target="#trailer">
    <img src="https://m.media-amazon.com/images/M/MV5BMjAwNDgxNTI0M15BMl5BanBnXkFtZTgwNTY4MDI1NzM@._V1_.jpg" width="220" height="342">
    <h2>X-Men: Dark Phoenix</h2>
    <p>Jean Grey begins to develop incredible powers</p>
    <p>Release date: June 7, 2019</p>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="uilJZZ_iVwY" data-toggle="modal" data-target="#trailer">
    <img src="https://m.media-amazon.com/images/M/MV5BYTE0Yjc1NzUtMjFjMC00Y2I3LTg3NGYtNGRlMGJhYThjMTJmXkEyXkFqcGdeQXVyNTI4MzE4MDU@._V1_.jpg" width="220" height="342">
    <h2>Shazam!</h2>
    <p>An effortlessly entertaining blend of humor and heart</p>
    <p>Release date: April 5, 2019</p>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="EMa-KFfatT0" data-toggle="modal" data-target="#trailer">
    <img src="https://m.media-amazon.com/images/M/MV5BYmI4NDNiMmQtZTFkYi00ZDVmLThlYTAtMWJlMjU1M2I2ZmViXkEyXkFqcGdeQXVyNjg2NjQwMDQ@._V1_SY1000_CR0,0,674,1000_AL_.jpg" width="220" height="342">
    <h2>Annabelle Comes Home</h2>
    <p>Determined to keep Annabelle from wreaking more havoc</p>
    <p>Release date: June 26, 2019</p>
</div>

    </div>
  </body>
</html>
View on Github
Movie website

Comments

Leave a Comment

Post a Comment