MOVIE PLATFORM

PROJECT REPORT
OF MINI PROJECT

B-TECH IN COMPUTER SCIENCE

SUBMITTED BY:

KARTIKEYA SINGH(2301380100026)
SAKSHI PANDEY(2301380100043)
SAKSHI MISHRA(2301380100042)

PROJECT SUPERVISOR : PROF. PRASHANT SIR

BBS COLLEGE OF ENGINEERING AND TECHNOLOGY

PHAPHAMAU, PRAYAGRAJ
AFFILIATED BY ABDUL KALAM TECHNICAL UNIVERSITY
LUCKNOW
 CERTIFICATE

This is to certify that the mini-project titled “Movie Platform

Website” is a genuine work carried out by Group[Kartikeya
Singh, Sakshi Pandey, Sakshi Mishra], a student of BBS College
of Engineering and Technology, in partial fulfilment of the
requirements for the award of the Bachelor of Computer
Science.
The project embodies the design and development of a website
aimed at providing a Movie platform which showcase the
movies made by MARVEL Cinematic Universe. The work has
been carried out under Supervision and guidance of Er. Prasant
Sir and has not been submitted elsewhere for any other
degree .

Project Guide/Supervisor Head of Department

Er. Prashant Sir Er. Prashant Sir
BBS College of Engineering
& Technology
 AKNOWLEDGEMENT

I would like to express my heartfelt gratitude to everyone who

has contributed to the successful completion of my mini-project
titled “MOVIE PLATFORM” .
First and foremost, I am deeply thankful to Er. Prashant Sir,
HOD of Computer Science, BBS College of Engineering and
Technology, for their invaluable guidance, continuous support,
and constructive feedback throughout the development of this
project. Their expertise and encouragement have been
instrumental in shaping the project to its current form.
I am also grateful to Er. Prashant Sir, HOD of Computer Science
for providing me with the opportunity and resources to work on
this project.
A special thanks to my friends and classmates for their support
and collaboration during various stages of the project.
Lastly, I extend my sincere gratitude to my family for their
unwavering support, patience, and motivation, which have
been my strength throughout this journey.
This project has been a significant learning experience, and I am
grateful for the opportunity to apply my knowledge and skills in
developing a platform that aims to provide accurate and timely
information about government job notifications and exam
results.

Kartikeya Singh
Sakshi Pandey
Sakshi Mishra
B. Tech in Computer Science
BBS College of Engineering and Technology
Date:
WELCOME
 INDEX

Sr. No. Index Page No.

1. INTRODUCTION OF PROJECT 1-2
2. ABOUT HTML 3-4
3. ABOUT CSS 5-6
4. ABOUT JAVASCRIPT 7-8
5. FUTURE SCOPE 9
6. GIT AND GITHUB LINKS 10
7. SOURCE CODE 11-25
8. SNAP-SHOTS 26-28
9. HARDWARE &SOFTWARE REQUIREMENTS 29
10. REFERENCES 30
11. CONCLUSION 31
 ABOUT HTML

HTML is a standardized system for tagging text files that

creates the structure for just about every page that we find
and use on the web. It’s HTML that adds in page breaks,
paragraphs, bold lettering, italics, and more. HTML works to
build this structure by using tags that tell browsers what to
do with text.

HTML is the skeleton of just about any website. It provides

the bones that underpin everything else on site. Common
things that HTML is used to define are:

.Paragraphs
The HTML paragraph element is one of the most
common elements and as you might have guessed it defines
a paragraph.
.Line Breaks
As with print media, a paragraph creates a line break
below it to visually separate it from other paragraphs. This is
used to emphasize a semantic separation of content. The
same structure is used in a novel or a magazine.
.Block Elements
Elements that create the spacing below themselves on
a page are called block elements. Block elements appear
vertically down the left-hand side of a page at least until they
are styled by CSS. Examples of block elements are <div>,
<article>, <table>, and many more. This feature allows HTML
to start separating a web page into different sections.

.Headings
Paragraphs and headings work in concert to create the
majority of the text content of a web page and its structure.
HTML has six heading elements, which are numbered 1
through 6. h1 is the most significant and usually contains the
title of the content – Not to be confused with the title that
appears in the browser tab. h2 represents a subsection. h3
and so on represent identifiers of further subjects in
subsections until we get to h6.

HTML works by using a series of tags to inform a browser

what it should be doing with text on page and where it
should be loading further resources from. There are over 100
HTML tags currently available to use, although most sites will
only need a handful of these to work as they should.
There are three HTML tags that are necessary for each
page. These are <html>, <head>, and <body>. To indicate
to a web page that you are using HTML, each page will
open with <html> and close with </html>. The <head> tag
contains metadata not visible on-page but important for
functionality, and the <body> tag denotes where the body
content of a page resides. Each of these necessary
elements can only be used once per page .
 ABOUT CSS
CSS stands for Cascading style sheets. It describes to the
user how to display HTML elements on the screen in a
proper format. CSS is the language that is used to style
HTML documents. In simple words, cascading style sheets
are a language used to simplify the process of making a web
page.

CSS is used to handle some parts of the web page. With the
help of CSS, we can control the color of text and style of
fonts, and we can control the spacing between the
paragraph and many more things. CSS is easy to understand
but provides strong control on the Html documents.CSS is
combined with HTML.

Here are the following advantages of CSS, such as:

Faster page speed: It has a faster page speed than

other code's page speeds. With the help of the CSS
rule, we can apply it to all occurrences of certain tags
in HTML documents.
Better user experience: CSS makes a web page very
attractive to the eyes. Also, CSS makes it user-friendly.
When the button or text is in a proper format, it
improves the user experience.
Quicker Development time: With the help of CSS, we
can specify the format and style the multiple pages
into one code string. In cascading style sheet, we can
make a duplicate copy of several website pages.
If we make a web page, it has the same formatting,
looks, and feel, so with the help of the CSS rule for one
page, and it is sufficient for all the pages.
Easy Formatting changes: In CSS, if we need to make
changes in the format, it is very easy; we only need to
change the one-page format it will automatically apply
to the other pages of CSS.
There is no need to correct individual pages in a CSS style
sheet. If we fix a CSS style sheet, it will
automatically update the other CSS style sheet.
Compatibility: Compatibility is very important in
today's age. If we create any web page, it should be
very responsive and user-friendly. CSS is used with
Html to make web page design responsive.

 CSS provides efficiency in web page design: It also provides

updates so our web page works appropriately. With the help
of CSS, we can create and apply those rules within the
website. If we create a web page design separately, we can
make changes in our style sheet, and it will affect all the style
sheets.

 CSS provides faster page download: CSS helps with

faster page download because when we download a
page, we get the cache that helps to load a page, but
with the help of CSS, we can lead to load a lighter
page which helps to improve the performance.
 CSS is easy to work: In CSS, we can visual aspect of the
website separate entirely from the content; using CSS, we
can create a website that allows us to make quick layou0074
 ABOUT JAVASCRIPT

JavaScript is a dynamic computer programming language. It

is lightweight and most commonly used as a part of web
pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an
interpreted programming language with object-oriented
capabilities.
JavaScript is a single-threaded programming language that
we can use for client-side or server-side development. It is a
dynamically typed programming language, which means
that we don’t care about variable data types while writing
the JavaScript code. Also, it contains the control statements,
operators, and objects like Array, Math, Data, etc.
JavaScript was first known as Live Script, but Netscape
changed its name to JavaScript, possibly because of the
excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name Live
Script. The general-purpose core of the language has been
embedded in Netscape and other web browsers.

The merits of using JavaScript are −

 Less server interaction − You can validate user input before

sending the page off to the server. This saves server traffic,
which means less load on your server.
 Immediate feedback to the visitors − They don't have to
wait for a page reload to see if they have forgotten to enter
something.
 Increased interactivity − You can create interfaces that
react when the user hovers over them with a mouse or
activates them via the keyboard.

 Richer interfaces − You can use JavaScript to include such

items as drag-and-drop components and sliders to give a
Rich Interface to your site visitors.
We cannot treat JavaScript as a full-fledged programming
language.

It lacks the following important features −

Client-side JavaScript does not allow the reading or writing

of files. This has been kept for security reasons.
JavaScript cannot be used for networking applications
because no such support is available.
JavaScript doesn't have any multi-threading capabilities.
Once again, JavaScript is a lightweight, interpreted
programming language that allows you to build interactivity
into otherwise static HTML pages.
 INTRODUCTION OF PROJECT

The MOVIE PLATFORM web page designed to showcase and

search for movies within the Marvel Cinematic Universe (MCU)
. The current iteration includes core elements like movie
posters, titles, IMDB ratings, and a concise description.
The presence of a search bar indicates an attempt to provide
user interactivity and facilitate movie discovery. The search bar
provides a very user friendly and as well as interactive bar to
search movies available on the platform.

This platform, with further development, has the potential to

become a comprehensive and engaging hub for Marvel movie
enthusiasts.

Strengths and Potential:

1. Clean and Minimalistic Design: The page adheres to a

clean and uncluttered aesthetic. The grid layout effectively
organizes the movie posters, making it easy for users to
browse through the available titles. This simplicity
enhances user experience and ensures a visually appealing
presentation.

2. Core Functionality: The inclusion of essential movie

information such as titles, posters, IMDB ratings, and brief
descriptions provides users with a basic understanding of
each movie. This information is crucial for initial
exploration and decision-making.

3. Search Functionality: The search bar is a valuable

addition. It allows users to quickly find specific movies
they are interested in. A well-implemented search
function can significantly enhance user experience and
make the platform more efficient to use.
 4. Potential for Expansion: The current version serves as a
solid foundation for a more comprehensive platform.
There's ample room to add features and functionalities
that can significantly enrich the user experience.

The Marvel Movie Platform presented has the potential to

evolve into a comprehensive and engaging online destination
for Marvel fans. By focusing on user experience, implementing
advanced features, and continuously refining the platform
based on user feedback, it can become a valuable resource for
exploring, discovering, and connecting with the vast world of
the MCU.
 FUTURE SCOPE

 Streaming Capability: Integrate video streaming if your

platform is intended to host actual movies and trailers .
 Back-end Development: Add a back-end using Node.js, Python
(Django/Flask), or PHP to handle user data, movie database,
and dynamic updates.
 Interactive UI: Use JavaScript libraries or frameworks like
React or Angular for a more dynamic and modern interface.
 API Integration: Use APIs like TMDb (The Movie Database) or
OMDb to fetch movie details dynamically, reducing manual
work.
 Visual Enhancements: While the current design is functional, it
can be further enhanced with better styling and more engaging
visuals. Consider:
 CSS Styling: Customize the look and feel of the page using
CSS. Experiment with different color schemes, fonts, and
layouts to create a more visually appealing experience.
 Background Images: Incorporate relevant background
images or videos to enhance the overall aesthetic and
immerse users in the Marvel universe.
 Animations: Add subtle animations to elements like the
search bar, movie posters, or page transitions to create a
more dynamic and engaging user interface.
 User Interaction and Engagement: Enhancing user interaction
will significantly improve the platform's appeal. Consider
implementing features like:
 User Accounts: Allow users to create accounts, save their
favorite movies, track their watch list, and personalize
their experience.
 Social Media Integration: Enable users to share movies
with friends on social media platforms.
 Community Features: Create a forum or discussion board
where users can connect, discuss movies, and share their
opinions.
 GIT AND GITHUB LINKS :
 KARTIKEYA SINGH :
 https://github.com/kartik1525/mini-project

 SAKSHI PANDEY:
 https://github.com/SAKSHI060405/MINI-PROJECT

 SAKSHI MISHRA:
 https://github.com/SAKSHIMISHRA271106/MINI-PROJECT
 SOURCE CODE

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>ANEFLEX</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="header">
<div class="logo">
<img class="logo-img" src="./pngwing.com (8).png"
alt="Avengers logo">
</div>
<div class="search">
<div class="searchbar">
<input type="text" id="search"
onkeyup="searchmovie()" class="boxx" placeholder="Search
Movie">
<img onclick="searchmovie()" src="./pngegg.png"
alt="png" class="searchpng">
 </div>

</div>
</header>

<section class="movies" id="movies">

</section>

<script src="./script.js"></script>
<div id="footer">
<div id="footer-content-table">
<div class="footer-box contact-us">
<div class="footer-box-title">
Contact Us
</div>
<div id="footer-contacts-list">
<a class="footer-contact" >
<img src="./pngwing.com (8).png" alt="logo
class='lo'">
</a>
</div>
</div>
<div class="footer-box other-links">
<div class="footer-box-title">
Other Links
</div>
<div id="footer-links-list">
 <a href="/about" class="footer-link">About Us</a>
<a href="/report" class="footer-link">Report a
Problem</a>
</div>
</div>
</div>
<div>
<p>Designed by- Kartikeya Singh
, Sakshi Pandey
, Sakshi Mishra
</p>
</div>
</div>
</body>
</html>
CSS FILE :

*
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header
{
width: 100%;
height: 80px;
background-color: rgb(0, 0, 0);
padding-left: 5%;
padding-right: 5%;
display: flex;
justify-content: space-between;
}
.logo
{
padding-top: 20px;
width: 20%;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.search
{
padding-top: 25px;
width: 30%;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.logo-img
{
height: 45px;
}
.searchbar
{
width: 80%;
height: 30px;
background-color: white;
display: flex;
align-items: center;
column-gap: 10px;
border-radius: 8px;
overflow: hidden;
}
.boxx
{
width: 80%;
height: 30px;
font-size: 17px;
text-indent: 20px;
border: none;
outline: none;
}
.searchpng
{
height: 16px;
}
.movies
{
width: 100%;
padding: 50px 5%;
background-color: grey;
display: flex;
flex-wrap: wrap;
column-gap: 6.5%;
row-gap: 25px;
}
.movie
{
background-color: brown;
width: 20%;
 height: 300px;
overflow: hidden;
border-radius: 10px;
position: relative;

}
.overlay
{
width: 100%;
height: 100%;
background-color:rgb(0, 0, 0) ;
position: absolute;
opacity: 0;
transition: .3s;
cursor: pointer;

}
.overlay:hover
{
opacity: 1;
}
.video
{
width: 100%;
height: 50%;
}
.details
{
width: 100%;
height: 50%;
color: white;
font-size: small;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding-left: 7px;
display: flex;
flex-direction: column;
row-gap: 8px;
}
.poster
{
width: 100%;
 height: 100%;

}
#footer {
background-color: #000000;
color: #fff;
padding: 20px 0;
text-align: center;
}

#footer-content-table {
display: table;
width: 100%;
margin: 0 auto;
}

.footer-box {
display: table-cell;
padding: 10px;
vertical-align: top;
}

.contact-us .footer-box-title {
margin-bottom: 10px;
}

.footer-contact {
display: block;
}

.footer-contact img {
width: 70px;
height: 50px;
}

.other-links .footer-box-title {
margin-bottom: 10px;
}
.footer-link {
color: inherit;
text-decoration: none;
margin-bottom: 5px;
display: block;
}

.footer-link:hover {
color: #ddd;
}
JAVASCRIPT FILE :

let movies=[
{
name:"Deadpool & Wolverine",
rating:7.9,

poster:"https://cdn.marvel.com/content/1x/deadpoolandwolve
rine_lob_crd_03.jpg",
description:"Deadpool's peaceful existence comes crashing
down when the Time Variance Authority recruits him to help
safeguard the multiverse. He soon unites with his would-be pal,
Wolverine, to complete the mission and save his world from an
existential threa"
},
{
name:"Avengers: Infinity War",
rating:8.4,

poster:"https://cdn.marvel.com/content/1x/avengersinfinitywa
r_lob_crd_02_1.jpg",
description:"As Thanos sets about his quest for finding the
infinity stones and carrying out his twisted scheme, the
Avengers join forces with their allies to stop him from causing
chaos and destruction."
},
{
name:"Avengers: Age of Ultron",
rating:7.4,

poster:"https://cdn.marvel.com/content/1x/avengersageofultr
on_lob_crd_03.jpg",
description:"Tony Stark builds an artificial intelligence
system named Ultron with the help of Bruce Banner. When the
sentient Ultron makes plans to wipe out the human race, the
Avengers set out to stop him."
},
 {
name:"Thor: Ragnarok",
rating:7.9,

poster:"https://cdn.marvel.com/content/1x/thorragnarok_lob_
crd_03.jpg",
description:"Deprived of his mighty hammer Mjolnir, Thor
must escape the other side of the universe to save his home,
Asgard, from Hela, the goddess of death."
},
{
name:"Doctor Strange",
rating:8,

poster:"https://cdn.marvel.com/content/1x/doctorstrange_lob
_crd_01_6.jpg",
description:"In an accident, Stephen Strange, a famous
neurosurgeon, loses the ability to use his hands. He goes to visit
the mysterious Ancient One to heal himself and becomes a
great sorcerer under her tutelage."
},
{
name:"Spider-Man: Far From Home",
rating:7.3,
poster:"https://cdn.marvel.com/content/1x/spider-
manfarfromhome_lob_crd_04_3.jpg",
description:"Peter Parker, the beloved superhero Spider-
Man, faces four destructive elemental monsters while on
holiday in Europe. Soon, he receives help from Mysterio, a
fellow hero with mysterious origins."
},
{
name:"Black Panther",
rating:7.3,

poster:"https://cdn.marvel.com/content/1x/blackpanther_lob_
crd_01_4.jpg",
description:"After his father's death, T'Challa returns home
to Wakanda to inherit his throne. However, a powerful enemy
related to his family threatens to attack his nation."
},
 {
name:"The Avengers",
rating:8,

poster:"https://cdn.marvel.com/content/1x/theavengers_lob_c
rd_03.jpg",
description:"S.H.I.E.L.D. leader Nick Fury is compelled to
launch the Avengers programme when Loki poses a threat to
planet Earth. But the superheroes must learn to work together
if they are to stop him in time."
},
{
name:"Avengers: Endgame",
rating:8.4,

poster:"https://cdn.marvel.com/content/1x/avengersendgame
_lob_crd_05_2.jpg",
description:"After Thanos, an intergalactic warlord,
disintegrates half of the universe, the Avengers must reunite
and assemble again to reinvigorate their trounced allies and
restore balance."
},
{
name:"Daredevil",
rating:6,

poster:"https://cdn.marvel.com/content/1x/daredevil_lob_crd
_03.jpg",
description:"Matt Murdoch, a blind lawyer, vows to fight
crime in New York City and assumes a secret identity of
Daredevil. However, his mission attracts the ire of Kingpin, who
is determined to kill him"
},
{
name:"Venom",
rating:6.6,

poster:"https://cdn.marvel.com/content/1x/venom_lob_crd_0
1.jpg",
description:"While trying to take down Carlton, the CEO of
Life Foundation, Eddie, a journalist, investigates experiments of
human trials. Unwittingly, he gets merged with a symbiotic
alien with lethal abilities"
},
{
name:"Spider-Man: Homecoming",
rating:7,
poster:"https://cdn.marvel.com/content/1x/spider-
manhomecoming_lob_crd_02.jpg",
description:"Peter Parker tries to stop Adrian 'The Vulture'
Toomes from selling weapons made with advanced Chitauri
technology while trying to balance his life as an ordinary high
school student"
},
{
name:"Captain America: Civil War",
rating:7.8,

poster:"https://cdn.marvel.com/content/1x/captainamericacivil
war_lob_crd_01_9.jpg",
description:"When the collective governments decide to
ratify the Sokovia Accords, a legal document that regulates
superhuman activity, it leads to a discordance between Captain
America and Iron Man."
},
{
name:"Black Widow",
rating:6,

poster:"https://cdn.marvel.com/content/1x/blackwidow_lob_c
rd_06.jpg",
description:"Natasha Romanoff, a member of the Avengers
and a former KGB spy, is forced to confront her dark past when
a conspiracy involving her old handler arises."
},
{
name:"Iron Man 3",
rating:7.4,

poster:"https://cdn.marvel.com/content/1x/ironman3_lob_crd
_01_10.jpg",
description:"Suffering from PTSD, Tony Stark encounters a
formidable foe called the Mandarin. When he watches his
world fall apart, he must rely on his own instincts as he
embarks on a journey of retribution."
},
{
name:"Guardians of the Galaxy",
rating:8,

poster:"https://cdn.marvel.com/content/1x/guardiansofthegala
xy_lob_crd_03.jpg",
description:"A bunch of skilled criminals led by brash
adventurer Peter Quill join hands to fight a villain named Ronan
the Accuser who wants to control the universe with the help of
a mystical orb."
}
]

function searchmovie()
{
let movieName = document.getElementById('search').value;

if(movieName!=="")
{

let result =movies.filter(function(movie)

{
return
movie.name.toUpperCase().includes(movieName.toUpperCase(
))
})

if(result.length==0)
{

displayMovies(result);
 }

else
{
displayMovies(movies);
}

function displayMovies(data)
{

document.getElementById("movies").innerHTML="";

let htmlString = ``;

for(let i=0;i<data.length;i++)
{

htmlString=htmlString+`
<div class="movie">
<div class="overlay">

<div class="video">

</div>

<div class="details">

<h1>${data[i].name}</h1>
<h2>IMDB : ${data[i].rating}</h2>
<p>${data[i].description}</p>

</div>
 </div>
<img class="poster" src="${data[i].poster}"
alt="poster">

</div>
`
}

console.log(htmlString);

document.getElementById("movies").innerHTML=htmlString;

displayMovies(movies);
 SNAP-SHOTS

HEADER :

MAIN PAGE :
FOOTER :

SEARCH BAR :
DESCRIPTION , RATINGS :
HARDWARE AND SOFTWARE REQUIREMENTS

Hardware Requirements:

 Computer: A computer with a decent processor (like Intel

Core i5 or AMD Ryzen 5), sufficient RAM (at least 4GB),
and a reliable internet connection is sufficient for most
development tasks.
 Server : For hosting the website on your own server, you'll
need a dedicated server or a virtual private server (VPS)
with appropriate specifications based on the expected
traffic and resource demands.

Software Requirements:

 Text Editor: A text editor like Visual Studio Code, Sublime

Text, or Notepad++ is essential for writing and editing
HTML, CSS, and JavaScript code.
 Web Browser: Chrome, Firefox, Safari, or Edge are
necessary for testing the website in different browsers
and ensuring cross-browser compatibility.
 Version Control System (Optional): Git is highly
recommended for version control. It allows you to track
changes to your code, collaborate with others, and revert
to previous versions if needed.
 REFERENCES

1. www.google.com
2. www.wikipedia.com
3. www.javapoint.com
4. www.letsupgrade.com
5. www.github.com
 CONCLUSION

The development of this Marvel movie platform has been a

rewarding experience. While the current iteration provides a
basic foundation with core functionalities like movie listings,
search, and basic information, it serves as a strong starting
point for a more comprehensive and engaging user experience.

The project has demonstrated the potential to create a valuable

resource for Marvel fans. By incorporating features such as
detailed movie pages, user accounts, personalized
recommendations, and interactive elements, we can
significantly enhance the platform's appeal and create a vibrant
online community for Marvel enthusiasts.

Moving forward, the focus will be on refining the existing

features, addressing user feedback, and implementing new
functionalities to create a more robust and user-friendly
platform.
THANK YOU