A

REPORT
On
" Movie hub ”

( Under Industrial Training)

Submitted to Rajasthan Technical University

In partial fulfillment of the required for the award of the degree of

Bachelor of Technology
In
COMPUTER SCIENCE & ENGINEERING

Submitted By-
Vikram
(21EVJCS099)
Under the Guidance of
Ms. Rama Bhardwaj
( Asst. Professor, Department of CSE)
At

VIVEKANANDA INSTITUTE OF TECHNOLOGY, JAIPUR

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
November 2023

1
Certificate Copy

2
VIVEKANANDA INSTITUTE OF TECHNOLOGY
( Approved by AICTE, New Delhi | Affiliated to RTU Kota, Rajasthan)

CANDIDATE’S DECLARATION

It is hereby declared that the work, which is being presented in the

Industrial Report titled " Movie Hub ” in partial fulfillment of the award
of Bachelor of Technology in Computer Science and Engineering and
submitted in the department of Computer Science Engineering of
Vivekananda Institute of Technology, Jaipur is an authentic record of the
work under the supervision and valuable guidance of Ms. Rama Bhardwaj
Asst. Professor, Dept. of Computer Science & Engineering. The matter
presented in the report embodies the result of the studies carried out by
the student and has not been submitted for the award of any other degree
in this or any other institute.

Name : Vikram
Roll No : 21EVJCS099
Place: Jaipur
Date:10-Aug-2023 to 10-sept-2023
(i)

3
ACKNOWLEDGMENT

We take this opportunity to express my deepest gratitude to those who

have generously helped me in providing valuable knowledge and expertise
during my training.
It is a pleasure to represent this report on the project named “ Movie
Hub ” undertaken by me as part of my B.Tech (CSE) curriculum. I am
thankful to the Vivekananda Institute of Technology for offering me
such a wonderful and challenging opportunity.
It is a pleasure that we find ourselves penning down these lines to
express our sincere thanks to the people who helped us along the way
in completing our project. We find inadequate words to express our
sincere gratitude towards them.
I express my sincere gratitude to Dr. Surendra Yadav (Principal, VIT)
for providing me with an opportunity to undergo this major project as
part of the curriculum. I am thankful to Mrs. Sudha Kumari (Assistant
Professor) for her support, co-operation, and motivation provided to me
during training for constant inspiration, and blessings. I would also like
to thank Mrs. Rama Bhradwaj for her valuable suggestions which helped
a lot in the completion of this project
Lastly, I would like to thank the almighty and my parents for moral
support and friends with whom I share my day-to-day experience and
receive lots of suggestions that improve my quality of work.

Name : Vikram
Roll No.: 21EVJCS099
( ii)

4
ABSTRACT

This report documents the front-end development process undertaken to create an engaging
and user-friendly website for a café. The objective of this project was to design and
implement a visually appealing, responsive, and intuitive interface that caters to the needs
of both desktop and mobile users. The project employed modern web development
technologies and best practices to ensure a seamless and enjoyable experience for visitors.

The report begins by outlining the project's scope, objectives, and target audience. It then
delves into the design phase, where user experience (UX) and user interface (UI)
considerations were carefully addressed. Wireframes and prototypes were created to
visualize the layout and navigation structure, incorporating feedback from stakeholders to
refine the design.

The implementation section discusses the choice of front-end technologies, including

HTML5, CSS3, and JavaScript, to build a responsive and cross-browser compatible
website. Responsive design principles were adopted to ensure optimal viewing experiences
across a variety of devices and screen sizes.

Accessibility features were incorporated to make the website usable for individuals with
diverse abilities. This includes adherence to web content accessibility guidelines (WCAG)
to ensure a high level of inclusivity.

The report also highlights the integration of third-party libraries and frameworks, such as
Bootstrap or React, to streamline development and enhance the website's functionality.
Performance optimization techniques were employed to minimize page load times and
create a smooth browsing experience.

Testing procedures, including usability testing and cross-browser testing, were conducted
to identify and resolve potential issues. Feedback from testing phases informed iterative
improvements to the user interface and overall user experience.

The conclusion summarizes the key findings, challenges faced, and lessons learned
throughout the front-end development process. Recommendations for future enhancements
or updates to the website are also provided, acknowledging the dynamic nature of web
technologies.

In conclusion, this report serves as a comprehensive overview of the front-end development

journey for the café website, emphasizing the importance of user experience, responsive
design, accessibility, and performance optimization in creating a successful online presence
for the café.
(iii)

5
TABLE OF CONTENTS

CONTENT PAGE NO

i
Declaration
Acknowledgment ii
Abstract iii
Table of content iv
Contents v

CONTENTS Page no

CHAPTER – 1 INTRODUCTION 8
1.1 Objectives 8
1.2 Project Goals 8

CHAPTER – 2 PROJECT ENTERPRISE 9

2.1 About the Institution 9

CHAPTER – 3 COURSE CONTENT and TOOLS 10-19

3.1 Introduction to Front-end Web Development 10
3.1.1 HTML- The Backbone of Web Pages 10-11
3.1.2 CSS 11
3.1.3 Javascript 12

6
3.2 Front End Frameworks 12
3.2.1 Benefits Of Front end Frameworks 13-14
3.2.2 Popular Front end Frameworks 13-19
3.2.2.1 Angular 13-15
3.2.2.2 Bootstrap - A comprehensive CSS framework 15-17
3.2..2.3 React - A javascript Library 17-19
3.2.3 Choosing right front end Library 19

CHAPTER – 4 Projects during the Training 20-55

4.1 Introduction 20
4.2 Files and codes 20-55
4.2.1 Index.html 20-40
4.2.1.1 Meta Tags and External Resources 20
4.2.1.2 Navigation section 21
4.2.1.3 Banner section 21-26
4.2.1.4 Movie Section 26-39
4.2.1.5 Footer section 39-40
4.2.2 Style.css 40-55

4.3 Final Output 56-58

Fig 4.3.1 Home Page 56
Fig 4.3.2 login 57
Fig 4.3.3 about us 57
Fig 4.3.4 genre 58
Fig 4.3.5 contact us 58
CONCLUSION 59
BIBLOGRAPHY 60
(v)

7
Chapter - 1 INTRODUCTION

The purpose of this report is to give a brief idea about the training
Front end web development.. In this report, we have mentioned all the
tools and technologies used for the completion of the training. We had
also given a brief detail about the organization and the frameworks used
for the completion of the project.

1.1 Objective
● Develop a user friendly and engaging front end web application that
emulates the core functionalities of the landing page and front end of a movie
website.
● Utilize modern front end development tools and techniques to create
a responsive and adaptive application.
● Highlight the implementation of innovative features like dynamic menus
and interactive elements.
● Convey the efforts to mirror the physical ambiance of the theater in the
digital environment.

1.2 Project goals

After the completion of the project, we were able to -
● Develop a website that provides a seamless and enjoyable experience
across various devices, including desktops, tablets, and smartphones. ●
Design an aesthetically pleasing and user-friendly interface to engage
visitors and encourage exploration.
● Showcase the movie menu with visually appealing layouts, high-quality
images, and clear descriptions.
● Visual Appeal: Create an aesthetically pleasing and visually engaging frontend
design to captivate users.
● User-Friendly Interface: Develop an intuitive and user-friendly interface for
effortless navigation and interaction.
● Responsive Design: Implement responsive design principles to ensure optimal
functionality across various devices.

8
Chapter - 2
PROJECT ENTERPRISE

2.1 About the Institution

Reports and Insights consistently meets international benchmarks in the market
research industry and maintains keen focus of providing only the highest
quality of reports and analysis outlooks across markets, industries, domains,
sectors, and verticals. We have been catering to varying market needs and do
not compromise on quality and research efforts in our objective to deliver only
the very best to our clients globally. We cater to customized research and
analysis needs, offer syndicated reports, provide customization for client-
specific requirements, and deliver dedicated services along the entire research
chain till fruition of desired objectives and goals. We ensure that our data and
information is factual, accurate, and extensively researched and verified
through relevant and reliable sources, experts, industry leaders, and panels
before it reaches the target audiences. We also certainly follow a stringent
procedure with zero room for error or compromise with regard to our output
and quality.

Our use of leading analytical software and tools is supported by our expertise in
subject matter and decades of experience in relevant fields and verticals.
Besides covering an extensive list of titles under chemicals & materials,
defense, energy & natural resources, food & beverages, heavy engineering
equipment, packaging, automotive and transport, consumer goods and services,
electronics & semiconductors, factory automation, healthcare, IT & telecom,
and pharmaceuticals, aeronautics & space, we also study and research niche
markets and industries, and offer our findings in a market where these may not
be widely or easily available. Our primary strength is that we understand the
needs of our clients through extensive and meaningful interaction and
discussion, and ensure all research areas are included, covered, and addressed,
and the client experience exceeds expectation.

9
Chapter - 3
COURSE CONTENT

Front End Web Development is the development of the graphical user

interface of a website , through the use of HTML,CSS,JavaScript,Bootstrap and
JQuery ,so that user can view and interact with the website.

3.1 Introduction to front end web development:

In the ever evolving landscape of the digital world, front end web
development stands as a crucial pillar in shaping user experiences. It
encompasses the meticulous crafting of the visual elements and interactive
components that users directly engage with, transforming static web pages
into dynamic and engaging platforms. This intricate process involves the
skillful interplay of three fundamental technologies html, css and javascript.
Concepts and components that focus on the front end of a system include:
● Design and markup languages like HTML, CSS and JavaScript.
● Search engine optimization (SEO).
● Usability and accessibility testing.
● Graphic design and image editing tools.
● Web performance and browser compatibility.
● Frontend Frameworks and Libraries like Angular.js, React.js, Vue.js,
jQuery

3.1.1 HTML-The Backbone of Web Pages

The Hypertext Markup Language or HTML is the standard markup

language for documents designed to be displayed in a web browser. It can
be assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.
In other words, Html or hyper Web browsers receive HTML documents from
a web server or from local storage and render the documents into
multimedia web pages. HTML describes the structure of a web page
semantically and originally included cues for the appearance of the document.
In other words, HTML or hypertext markup language serves as bedrock
upon which pages are constructed. It provides the essential structure and
defines the content that users see when they visit a website. Through a

10
well defined set of tags, each with specific attribute HTML outlines the
hierarchy of elements from headings and paragraphs to images and links.
This structured approach ensures that web pages are organized and
comprehensible, both for many users and search engines.
The enclosing tags can make a word or image hyperlink to somewhere
else, can italicize words, can make the font bigger or smaller, and so on.
HTML concepts learnt in training are:
● HTML Tags
● Texts, Images, Videos
● Lists, Forms, Tables
● Links, Anchor tags
● HTML Divs and many more...

3.1.2 CSS :
While HTML provides the skeletal framework, CSS breathes life into the
visual aspects of a website. Cascading style sheets as the name suggests,
cascade down the hierarchy of estimated elements applying styles and
formatting to control their appearance. CSS empowers web developers to
wield a virtual paintbrush meticulously crafting the visual identity of a
website.From font styles and colors to background and positioning CSS
allows developers to transform plain text into visually appalling and user
friendly interfaces.
Cascading Style Sheets (CSS) is a stylesheet language used to describe
the presentation of a document written in HTML or XML (including XML
dialects such as SVG, MathML or XHTML). CSS describes how elements
should be rendered on screen, on paper, in speech, or on other media.
CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images
or colors are used, layout designs, variations in display for different devices
and screen sizes as well as a variety of other effects.

CSS concepts learnt during training are:

● Inline vs Internal vs External styling
● CSS Display
● CSS Font Styling, background, margin, padding
● Styling Lists, Tables, Forms
● Font Awesome

11
3.1.3 JavaScript:
JavaScript (js) is a light-weight object-oriented programming language
which is used by several websites for scripting the webpages. It is an
interpreted, full- fledged programming language that enables dynamic
interactivity on websites when applied to an HTML document. It was
introduced in the year 1995 for adding programs to the webpages in the
Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers.
With JavaScript, users can build modern web applications to interact
directly without reloading the page every time. The traditional website uses
js to provide several forms of interactivity and simplicity
Javascript alleviates front end web development beyond mere static
displays.introducing entire activity and dynamic behavior to web pages.
This is scripting language actors, the Maestro orchestrating the interactions
that bring the website to life throughout the.power of javascript developers
can create a limited response to user action, such as clicking buttons,
opening over links or scrolling the pages. This dynamic nature allows
websites to provide feedback, adapt to user preferences and deliver
engaging experiences that captivate the attention of visitors. Javascript is
primarily known as the “ Language of the browsers ”.and it is used for
web based applications.
3.2 Front End Frameworks :
In the dynamic diamond development front end frameworks emerged as
valuable tools empowering developers to create visually appealing
interactive applications with greater efficiency and consistency. These
frameworks provide a structured approach to front end development,
offering a collection of usual component library and utility that streams in
the process of building user interfaces, handling events, managing
application states and interacting with APIs.

3.2.1 Benefits of using Front-End Frameworks:

The adoption of front end frameworks has revolutionized web
development, offering a plethora of benefits that enhance the development
process:
● Increase developer productivity: Front end frameworks provide a
standardized code base and prebuilt components, reducing the time
and effort required to read repetitive code. This allows developers
to focus on the core functionalities and unique aspects of their
applications.
12
● Improve code reusability: Front end frameworks promotes code
usability by providing a collection of modular components that can easily
integrated into different parts of an application. This promotes consistent
code structure and reduces the need for repetitive development.
● Enhancement maintainability: Front end frameworks adhere to
well established conventions and best practices, making code more
organized, readable and maintainable. This facilitates easier collaboration
among developers and simplifies future modifications.

3.2.2 Popular Front End Frameworks:

The landscape of front end frame vs constantly evolving with new options,
emerging and existing frameworks gaining traction. Among the worst widely
used front end frameworks are:

3.2.2.1 Angular :
Angular is a comprehensive front end javascript framework developed
by Google. It provides a structured opinion approach to web
development, offering a wide range of features and tools to streamline
the process of building complex, single page applications.

Key Features of Angular :

1. Component - Based Architecture: Angular promotes code reusability
and maintainability by organizing applications into modular components.
Each responsible for a specific portion of the user interface.
2. Data Binding: Angular utilizes 2 way data binding ensuring.that
changes in the applications data are automatically reflected in the user
interface and vice versa. This simplifies data management and reduces
the need for manual synchronization.

3. Dependency Injection : Angular dependency injection mechanism

provides a structured way to manage dependencies between components
making core most testable and easier to maintain.

13
4. Routing : Angular built in routing system handles the navigation
between different pages in a spa, ensuring smooth transition and a
seamless user experience.

5. Directives: Angular provides a rich set of directives specialized

attributes that extend the capabilities of HTML element, enabling
developers to create custom functionalities and enhance the behavior of
web pages.

Benefits of using Angular :

Angular offers numerous advantages that make it a popular choice for web
development projects:

1. Reduced Development time: Angular’s prebuilt component libraries and

tools accelerate the development process, allowing developers to focus on
the core functionalities of their applications. 2 . Enhanced Code
Maintainability : Angular instructed code base and component based
architecture promote maintainability, making it easier to understand, modify
and extend code in the future.

2. Improved Performance : Angular's use of change detection and data

binding optimizes performance by minimizing unnecessary DOM
manipulation.

3. Reduced Testing Efforts : Angular's dependency injection and well

defined component structure simplify unit testing and integration
testing, making it easier to ensure the quality of the code.

4. Large and Active Community : Angular boasts a vast and supportive

community of developers, providing access to extensive
documentation, tutorials and online forums for travel shooting and
learning.

Applications of Angular :
1. Single Page Applications : Angular's dynamic data binding and routing
capabilities make it ideal for building SPAs that provide a seamless and
responsive user experience.

14
2. Enterprise Applications : Angular’s scalability and maintainability make
it a suitable choice for large - scale enterprise applications with complex
requirements .

3. Progressive Web Apps : Angular's compatibility with web standards

and its ability to handle offline functionality. Make it a viable choice for
developing PWAs that offer native app like experiences.

3.2.2.2 Bootstrap- A comprehensive CSS framework:

In the realm of front-end web development, Bootstrap has established
itself as a widely adopted CSS framework, providing a comprehensive set
of tools and pre-built components for creating responsive and
mobilefriendly web pages. Its popularity stems from its ease of use,
flexibility, and adherence to web standards.

Key Features of Bootstrap :

Bootstrap distinguishes itself from other CSS frameworks through its

emphasis on:

1. Responsive Design: Bootstrap's responsive grid system and media queries

allow web pages to adapt seamlessly to different screen sizes, ensuring an
optimal user experience across devices.

2. Component-Based Approach: Bootstrap provides a collection of pre-

built components, such as buttons, forms, and navigation bars, reducing
the need for repetitive coding and promoting consistent styling.

3. Customizable Styles: Bootstrap's default styles can be easily customized

to match specific branding guidelines or design preferences, while
maintaining a cohesive overall aesthetic.

4. Cross-Browser Compatibility: Bootstrap is meticulously crafted to

ensure compatibility with major web browsers, ensuring consistent rendering
and behavior across different platforms .

5. Extensive Documentation and Community: Bootstrap boasts

comprehensive documentation and a vibrant online community, providing
15
developers with ample resources for learning, troubleshooting, and extending
the framework.

Benefits of Using Bootstrap:

Bootstrap offers numerous advantages that make it a popular choice for

web development projects:

1. Rapid Prototyping and Development: Bootstrap's pre-built components

and grid system accelerate the process of creating web pages, allowing
developers to quickly establish the layout and basic functionality of their
applications.

2. Reduced Design Burden: Bootstrap's default styles and component

designs provide a solid foundation for visually appealing and user-
friendly interfaces, reducing the need for extensive custom design work.

3. Mobile-First Approach: Bootstrap's responsive grid system is designed

with mobile devices in mind, ensuring that web pages adapt seamlessly
to smaller screens, a crucial aspect of modern web development.

4. Maintainable and Scalable Code: Bootstrap's consistent styling and

component-based approach promote maintainable code, making it easier
to manage and extend web applications as they grow.

5. Accessible and Inclusive Design: Bootstrap adheres to accessibility

guidelines, ensuring that web pages are usable by individuals with
disabilities, promoting inclusivity and broadening the reach of
applications.

6. Applications of Bootstrap:
7. Bootstrap is well-suited for a wide range of web development projects,
including:

8. Marketing and Landing Pages: Bootstrap's clean and modern aesthetics

make it ideal for creating visually appealing landing pages and marketing
websites that effectively capture user attention.

16
9. E-commerce Websites: Bootstrap's responsive layout and component
library make it suitable for building e-commerce websites that provide
seamless navigation and a consistent shopping experience across devices.

10.Business Websites: Bootstrap's professional and customizable styles

make it a viable choice for corporate websites, ensuring a polished and
consistent brand identity.

11.Personal Portfolios and Blogs: Bootstrap's versatility extends to

personal portfolios and blogs, providing a foundation for visually
engaging and user-friendly online platforms.

12.Rapid Application Prototypes: Bootstrap's rapid development

capabilities make it ideal for creating quick prototypes of web
applications, allowing developers to test ideas and gather feedback before
committing to more detailed design and implementation .

3.2.2.3 React-A JavaScript Library :

In the dynamic realm of front-end web development, React has emerged

as a popular JavaScript library for building user interfaces, revolutionizing
the way developers create interactive and dynamic web applications. Its
component-based approach and declarative programming paradigm have
gained widespread adoption, making it a favourite among developers for
its simplicity, efficiency, and flexibility.

Key Features of React

React stands out from other front-end development tools due to its
emphasis on:

1. Component-Based Architecture: React promotes modularity and

reusability by organizing applications into reusable components, each
responsible for a specific portion of the user interface. This approach
simplifies code management and enhances maintainability.

2. Declarative Programming: React employs a declarative programming

paradigm, focusing on describing the desired state of the user
interface rather than explicitly detailing the steps to achieve it. This
leads to more concise and less error-prone code.
17
3. Virtual DOM: React utilizes a virtual DOM, an in-memory
representation of the real DOM (Document Object Model), to
efficiently update the user interface. This optimization minimizes
DOM manipulations, resulting in improved performance.

4. JSX: React introduces JSX, an extension to JavaScript that allows

developers to write HTML-like syntax directly within JavaScript code.
This facilitates the creation of UI components in a familiar and
intuitive manner.

Benefits of Using React

React offers numerous advantages that make it a popular choice for web
development projects:

1. Faster Development: React's component-based approach and

declarative programming paradigm accelerate the development process,
allowing developers to focus on the core functionalities of their
applications.

2. Reusable Components: React's emphasis on reusable components

promotes code reusability, reducing development time and improving
maintainability.

3. Enhanced Maintainability: React's declarative programming style and

component-based architecture make code more organized, readable, and
easier to maintain over time.
4. Interactive User Interfaces: React's ability to handle state changes
and dynamic data updates enables the creation of highly interactive
and responsive user interfaces
i. .
5. Rich Ecosystem of Tools and Libraries: React boasts a vast and
active community that has developed a rich ecosystem of tools,
libraries, and frameworks, providing developers with a wide range of
options for extending and customizing their applications.

Applications of React:

React's versatility makes it suitable for a variety of web development

projects, including:

18
1. Single-Page Applications (SPAs): React's ability to manage complex
state changes and dynamic data updates makes it ideal for building
SPAs that provide a seamless and engaging user experience.

2. User Interfaces for Large-Scale Applications: React's component-based

architecture and efficient rendering make it wellsuited for developing
user interfaces for large-scale applications, ensuring scalability and
performance.

3. Interactive Web Apps: React's ability to handle user interactions and

data updates makes it a valuable tool for building interactive web
applications, such as games, chat applications, and data visualizations.

4. Reusable UI Components: React's component-based approach promotes

the creation of reusable UI components that can be shared across
different projects or applications.

5. Learning and Experimentation: React's accessibility and extensive

documentation make it an attractive choice for beginners to learn and
experiment with front-end web development.
3.2.3 Choosing the Right Front End Framework:
The choice of a front end framework depends upon various factors,
including the project's requirements, team expertise, scalability needs and
personal preferences. Developers should carefully evolve the features,
strains and limitations of each framework to determine the best fit for
their specific project.

19
Chapter - 4
PROJECT DURING INTERNSHIP

4.1 Introduction :
During the internship, a project was undertaken to create a front end movie
website . The front-end internship involved developing a visually appealing and
responsive café website. Utilizing HTML, CSS, and JavaScript, the project
focused on enhancing user experience, showcasing the menu, and implementing
online entertainment. With a focus on performance optimization and fast loading
times, our website aims to deliver content swiftly and efficiently.

4.2 File and code :

4.2.1 Index.html :
The index.html file serves as the main entry point for the movie hub. It
establishes the document structure, includes necessary meta tags,
stylesheets, and scripts. This file contains the HTML structure for the
header, banner section, movie section, menu section, and footer. It also
integrates external resources, such as Font Awesome icons.
This file is the central document that establishes the structure of the movie site
.
4.2.1.1 Meta Tags and External Resources :
5. <!DOCTYPE html>
6. <html lang="en">
7. <head>
8. <meta charset="UTF-8">
9. <meta http-equiv="X-UA-Compatible" content="IE=edge">
10. <meta name="viewport" content="width=device-width, initial-
scale=1.0">
11. <title>Movies Website</title>
12. <link rel="stylesheet" href="style.css">
13. <link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
14. <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.2.1/css/all.min.css" integrity="sha512-
MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK
+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
15. </head>

20
4.2.1.2 Nav Section :

<nav>

<div class="logo">
<h1>Movies<span>Hub</span></h1>
</div>

<div class="right">

<ul>

<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">contact</a></li>
<li><a
href="file:///C:/Users/vikra/OneDrive/Desktop/tanishq%20project/Movies%20Websi
te/login.html">login</a></li>

</ul>

</div>

</nav>

4.2.1.3 Banner Section :

<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">

<div class="image">

<div class="black">

<h1>Death on the Nile</h1>

<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>

21
</div>
<p>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit.
Consectetur distinctio quis, ea commodi
repellendus
fugiat aspernatur perspiciatis optio pariatur quod
est,
nihil enim nemo saepe possimus sequi consequuntur,
neque
eius.
</p>
<div class="genre">

<a href="#" class="category">Action</a>

<a href="#" class="category">Drama</a>
<a href="#" class="category"><span>4K</span></a>

</div>
<div class="watch">
<i class="fa-solid fa-play"></i>
<p>watch the trailer</p>
</div>

</div>

<img src="image/background.jpg">

</div>

</div>

<div class="swiper-slide">

<div class="image">

<div class="black">

<h1>The Maze Runer</h1>

<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>

22
Lorem, ipsum dolor sit amet consectetur
adipisicing elit.
Consectetur distinctio quis, ea commodi
repellendus
fugiat aspernatur perspiciatis optio pariatur quod
est,
nihil enim nemo saepe possimus sequi consequuntur,
neque
eius.
</p>
<div class="genre">

<a href="#" class="category">Action</a>

<a href="#" class="category">Drama</a>
<a href="#" class="category"><span>4K</span></a>

</div>
<div class="watch">
<i class="fa-solid fa-play"></i>
<p>watch the trailer</p>
</div>

</div>

<img src="image/background_1.jpg">

</div>

</div>

<div class="swiper-slide">

<div class="image">

<div class="black">

<h1>The Avengers</h1>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit.

23
Consectetur distinctio quis, ea commodi
repellendus
fugiat aspernatur perspiciatis optio pariatur quod
est,
nihil enim nemo saepe possimus sequi consequuntur,
neque
eius.
</p>
<div class="genre">

<a href="#" class="category">Action</a>

<a href="#" class="category">Drama</a>
<a href="#" class="category"><span>4K</span></a>

</div>
<div class="watch">
<i class="fa-solid fa-play"></i>
<p>watch the trailer</p>
</div>

</div>

<img src="image/background_2.jpg">

</div>

</div>

<div class="swiper-slide">

<div class="image">

<div class="black">

<h1>Fullmetal Alchemist: Final Transmutation</h1>

<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit.
Consectetur distinctio quis, ea commodi
repellendus

24
fugiat aspernatur perspiciatis optio pariatur quod
est,
nihil enim nemo saepe possimus sequi consequuntur,
neque
eius.
</p>
<div class="genre">

<a href="#" class="category">Action</a>

<a href="#" class="category">Drama</a>
<a href="#" class="category"><span>4K</span></a>

</div>
<div class="watch">
<i class="fa-solid fa-play"></i>
<p>watch the trailer</p>
</div>

</div>

<img src="image/background_4.jpg">

</div>

</div>

<div class="swiper-slide">

<div class="image">

<div class="black">

<h1>Apocalypto</h1>
<div class="star">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
</div>
<p>
Lorem, ipsum dolor sit amet consectetur
adipisicing elit.
Consectetur distinctio quis, ea commodi
repellendus
fugiat aspernatur perspiciatis optio pariatur quod
est,

25
nihil enim nemo saepe possimus sequi consequuntur,
neque
eius.
</p>
<div class="genre">

<a href="#" class="category">Action</a>

<a href="#" class="category">Drama</a>
<a href="#" class="category"><span>4K</span></a>

</div>
<div class="watch">
<i class="fa-solid fa-play"></i>
<p>watch the trailer</p>
</div>

</div>

<img src="image/background_5.jpg">

</div>

</div>

</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>

</section>

4.2.1.4 movie Section :

<div class="second">

<div class="latest">

<h1>Popular Movies</h1>

<div class="box">

26
<div class="card">

<div class="details">

<div class="left">

<p class="name">Gajaman</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>
<p class="category">Animation/Comedy</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>9.2</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/gajaman.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Black Panther: Wakanda Forever</p>

27
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Action/Adventure</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>7.1</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/Black_Panther.webp">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Interceptor</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Action/Adventure</p>

<div class="info">

28
<div class="rate">
<i class="fa-solid fa-star"></i>
<p>4.6</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/Interceptor.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Thor: Love and Thunder</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Action/Adventure</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>6.3</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

29
</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/Thor.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Black Adam</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Action/Adventure</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>6.4</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

30
</div>

</div>

<img src="image/Black_Adam.jpg">

</div>

</div>

</div>

</div>

<div class="upcoming">

<div class="movies_box">

<h1>Upcoming Movies</h1>

<div class="box">

<div class="card">

<div class="details">

<div class="left">

<p class="name">Plane</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>
<p class="category">Action/Thriller</p>

<div class="info">

<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

31
<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/plane.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">John Wick: Chapter 4</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>
<p class="category">Action/Neo-noir</p>

<div class="info">

<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/john_wick.jfif">

</div>

32
<div class="card">

<div class="details">

<div class="left">

<p class="name">Meg 2: The Trench</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>
<p class="category">Adventure</p>

<div class="info">

<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/meg.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Aquaman and the Lost Kingdom</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>

33
<p class="category">Action/Fantasy</p>

<div class="info">

<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/aquaman.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Ant-Man and the Wasp:

Quantumania</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2023</p>
</div>
<p class="category">Action/Adventure</p>

<div class="info">

<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

34
</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/ant_man.jpg">

</div>

</div>

</div>

</div>

<div class="show">

<div class="tv_show">

<h1>World Best TV Show</h1>

<div class="box">

<div class="card">

<div class="details">

<div class="left">

<p class="name">Money Heist</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2017</p>
</div>
<p class="category">Thriller</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>8.2</p>
</div>
<div class="time">

35
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/money_heist.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Wednseday</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Comedy</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>8.2</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

36
<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/wednesday.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">1899</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2022</p>
</div>
<p class="category">Mystery</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>7.4</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

37
<img src="image/1899.jpg">

</div>

<div class="card">

<div class="details">

<div class="left">

<p class="name">Game of Thrones</p>

<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2011</p>
</div>
<p class="category">Drama</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>9.2</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/game_of_thrones.jpg">

</div>

<div class="card">

<div class="details">

38
<div class="left">

<p class="name">Arrow</p>
<div class="date_quality">
<p class="quality">HD</p>
<p class="date">2012</p>
</div>
<p class="category">Drama</p>

<div class="info">

<div class="rate">
<i class="fa-solid fa-star"></i>
<p>7.5</p>
</div>
<div class="time">
<i class="fa-regular fa-clock"></i>
<p>120min</p>
</div>

</div>

</div>

<div class="right">

<i class="fa-solid fa-play"></i>

</div>

</div>

<img src="image/arrow.jpg">

</div>

</div>

</div>

</div>

4.2.1.5 footer Section :

39
<div class="newsletter">
<h1>Newsletter</h1>
<div class="news_card">
<input type="email" name="" id="" placeholder="Enter your email">
<button type="submit">Subscribe</button>
</div>
</div>
<p class="end">Design By<span><i class="fa-solid fa-face-grin"></i>Tanishq
Joshi</span></p>
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-
bundle.min.js"></script>

<!-- Initialize Swiper -->

<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
spaceBetween: 30,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>

4.2.3 Style.css File :

The `style.css` file is responsible for styling the HTML document. Here's an
explanation without code:

CODE:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}

section{
width: 100%;

40
height: 100vh;
background: #171717;
}

section nav{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 5% 8px 5%;
margin-bottom: 20px;
background: #171717;
}

section nav .logo h1{

font-size: 25px;
color: #fff;
cursor: pointer;
}

section nav .logo h1 span{

color: #ffe100;
margin-left: 8px;
text-decoration: underline;
}

section nav .right ul{

list-style: none;
}

section nav .right ul li{

display: inline-block;
margin: 0 5px;
}

section nav .right ul li a{

color: #fff;
text-decoration: none;
transition: 0.4s;
}

section nav .right ul li a:hover{

color: #ffe100;
}

.swiper {
width: 95%;
height: 85%;

41
border-radius: 20px;
overflow: hidden;
}

.swiper::selection{
user-select: none;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-slide .image .black{

width: 100%;
height: 100%;
position: absolute;
background: linear-gradient(to bottom, rgba(0,0,0,0.0),rgba(0,0,0,0.9));
}

.swiper-slide .image .black h1{

font-size: 30px;
text-align: left;
position: relative;
top: 60%;
left: 5%;
color: #fff;
}

.swiper-slide .image .black .star{

color: #ffd500;
text-align: left;
font-size: 16px;
margin: 10px 0;
position: relative;
top: 60%;
left: 5%;
}

.swiper-slide .image .black p{

width: 550px;
text-align: justify;
font-size: 16px;
color: #cccccc;

42
margin: 10px 0;
position: relative;
top: 60%;
left: 5%;
line-height: 23px;
font-family: "Ink Free";
}

.swiper-slide .image .black .genre{

text-align: left;
font-size: 16px;
margin: 13px 0;
position: relative;
top: 60%;
left: 5%;
}

.swiper-slide .image .black .genre a.category{

background: #282931;
text-decoration: none;
color: #cccccc;
padding: 2px 7px;
}

.swiper-slide .image .black .genre a.category span{

color: #ffe100;
}

.swiper-slide .image .black .watch{

width: 700px;
text-align: left;
display: flex;
font-size: 16px;
margin: 10px 0;
position: relative;
top: 60%;
left: 5%;
}

.swiper-slide .image .black .watch i{

width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
background-color: #ffe100;
border-radius: 50%;
cursor: pointer;

43
}

.swiper-slide .image .black .watch p{

position: relative;
left: 15px;
font-family: sans-serif;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper {
margin-left: auto;
margin-right: auto;
}

.second{
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 25px;
background: #171717;
}

.second .latest{
width: 95%;
margin: 0 auto;
}

.second .latest h1{

font-size: 20px;
color: #fff;
margin-bottom: 20px;
}

.second .latest .box{

display: flex;
align-items: center;
justify-content: space-between;
}

.second .latest .box .card{

width: 250px;
height: 370px;

44
margin: 10px;
overflow: hidden;
border-radius: 8px;
}

.second .latest .box .card .details{

width: 250px;
height: 370px;
overflow: hidden;
position: absolute;
border-radius: 8px;
transition: 0.3s;
opacity: 0;
}

.second .latest .box .card:hover .details{

opacity: 1;
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.7));
}

.second .latest .box .card .details .left{

position: absolute;
bottom: 0;
color: #fff;
transform: translateX(-100px);
transition: 0.4s;
opacity: 0;
}

.second .latest .box .card:hover .details .left{

opacity: 1;
transform: translateX(0);
}

.second .latest .box .card .details .left p.name{

width: 100%;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-bottom: 10px;
}

.second .latest .box .card .details .left .date_quality{

display: flex;
align-items: center;
}

.second .latest .box .card .details .left .date_quality p.quality{

45
width: 30px;
font-size: 13px;
background: #ffe100;
color: #282931;
margin-left: 10px;
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}

.second .latest .box .card .details .left .date_quality p.date{

color: #fff;
font-size: 15px;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-bottom: 8px;
}

.second .latest .box .card .details .left p.category{

margin-left: 10px;
font-size: 13px;
margin-bottom: 8px;
}

.second .latest .box .card .details .left .info{

display: flex;
align-items: center;
margin-bottom: 10px;
}

.second .latest .box .card .details .left .info .rate{

display: flex;
align-items: center;
margin-left: 10px;
margin-right: 10px;
}

.second .latest .box .card .details .left .info .rate i{

font-size: 12px;
color: #ffd500;
margin-right: 5px;
}

.second .latest .box .card .details .left .info .rate p{

font-size: 12px;
}

46
.second .latest .box .card .details .left .info .time{
display: flex;
align-items: center;
}

.second .latest .box .card .details .left .info .time i{

font-size: 12px;
color: #ffd500;
margin-left: 5px;
}

.second .latest .box .card .details .left .info .time p{

font-size: 12px;
margin-left: 5px;
}

.second .latest .box .card .details .right{

position: absolute;
right: 0;
bottom: 0;
color: #fff;
transform: translateX(100px);
transition: 0.4s;
opacity: 0;
}

.second .latest .box .card:hover .details .right{

opacity: 1;
transform: translateX(0);
}

.second .latest .box .card .details .right i{

width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
background-color: #ffe100;
border-radius: 50%;
cursor: pointer;
color: #282931;
margin: 0 10px 8px 0;
}

.second .latest .box .card img{

width: 100%;
height: 100%;
object-fit: cover;

47
object-position: center;
}
.upcoming{
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 25px;
background-color: #171717;
}

.upcoming .movies_box{
width: 95%;
margin: 0 auto;
}

.upcoming .movies_box h1{

font-size: 20px;
color: #fff;
margin-bottom: 20px;
}
.upcoming .movies_box .box{
display: flex;
align-items: center;
justify-content: space-between;
}

.upcoming .movies_box .box .card{

width: 250px;
height: 370px;
margin: 10px;
overflow: hidden;
border-radius: 8px;
}

.upcoming .movies_box .box .card .details{

width: 250px;
height: 370px;
overflow: hidden;
position: absolute;
border-radius: 8px;
transition: 0.3s;
opacity: 0;
}

.upcoming .movies_box .box .card:hover .details{

opacity: 1;
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.7));
}

48
.upcoming .movies_box .box .card .details .left{
position: absolute;
bottom: 0;
color: #fff;
transform: translateX(-100px);
transition: 0.4s;
opacity: 0;
}

.upcoming .movies_box .box .card:hover .details .left{

opacity: 1;
transform: translateX(0);
}

.upcoming .movies_box .box .card .details .left p.name{

width: 100%;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-bottom: 10px;
}

.upcoming .movies_box .box .card .details .left .date_quality{

display: flex;
align-items: center;
}

.upcoming .movies_box .box .card .details .left .date_quality p.quality{

width: 30px;
font-size: 13px;
background: #ffe100;
color: #282931;
margin-left: 10px;
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}

.upcoming .movies_box .box .card .details .left .date_quality p.date{

color: #fff;
font-size: 15px;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-bottom: 8px;
}

49
.upcoming .movies_box .box .card .details .left p.category{
margin-left: 10px;
font-size: 13px;
margin-bottom: 8px;
}

.upcoming .movies_box .box .card .details .left .info{

display: flex;
align-items: center;
margin-bottom: 10px;
}

.upcoming .movies_box .box .card .details .left .info .time{

display: flex;
align-items: center;
}

.upcoming .movies_box .box .card .details .left .info .time i{

font-size: 12px;
color: #ffd500;
margin-left: 5px;
}

.upcoming .movies_box .box .card .details .left .info .time p{

font-size: 12px;
margin-left: 5px;
}

.upcoming .movies_box .box .card .details .right{

position: absolute;
right: 0;
bottom: 0;
color: #fff;
transform: translateX(100px);
transition: 0.4s;
opacity: 0;
}

.upcoming .movies_box .box .card:hover .details .right{

opacity: 1;
transform: translateX(0);
}

.upcoming .movies_box .box .card .details .right i{

width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;

50
text-align: center;
background-color: #ffe100;
border-radius: 50%;
cursor: pointer;
color: #282931;
margin: 0 10px 8px 0;
}

.upcoming .movies_box .box .card img{

width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.show{
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 25px;
background-color: #171717;
}

.show .tv_show{
width: 95%;
margin: 0 auto;
}

.show .tv_show h1{

font-size: 20px;
color: #fff;
margin-bottom: 20px;
}

.show .tv_show .box{

display: flex;
align-items: center;
justify-content: space-between;
}

.show .tv_show .box .card{

width: 250px;
height: 370px;
margin: 10px;
overflow: hidden;
border-radius: 8px;
}

51
.show .tv_show .box .card .details{
width: 250px;
height: 370px;
overflow: hidden;
position: absolute;
border-radius: 8px;
transition: 0.3s;
opacity: 0;
}

.show .tv_show .box .card:hover .details{

opacity: 1;
background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.7));
}

.show .tv_show .box .card .details .left{

position: absolute;
bottom: 0;
color: #fff;
transform: translateX(-100px);
transition: 0.4s;
opacity: 0;
}

.show .tv_show .box .card:hover .details .left{

opacity: 1;
transform: translateX(0);
}

.show .tv_show .box .card .details .left p.name{

width: 100%;
font-size: 20px;
font-weight: bold;
margin-left: 10px;
margin-bottom: 10px;
}

.show .tv_show .box .card .details .left .date_quality{

display: flex;
align-items: center;
}

.show .tv_show .box .card .details .left .date_quality p.quality{

width: 30px;
font-size: 13px;
background: #ffe100;
color: #282931;
margin-left: 10px;

52
margin-bottom: 8px;
text-align: center;
font-weight: bold;
}

.show .tv_show .box .card .details .left .date_quality p.date{

color: #fff;
font-size: 15px;
font-weight: bold;
text-align: left;
margin-left: 10px;
margin-bottom: 8px;
}

.show .tv_show .box .card .details .left p.category{

margin-left: 10px;
font-size: 13px;
margin-bottom: 8px;
}

.show .tv_show .box .card .details .left .info{

display: flex;
align-items: center;
margin-bottom: 10px;
}

.show .tv_show .box .card .details .left .info .rate{

display: flex;
align-items: center;
margin-left: 10px;
margin-right: 10px;
}

.show .tv_show .box .card .details .left .info .rate i{

font-size: 12px;
color: #ffd500;
margin-right: 5px;
}

.show .tv_show .box .card .details .left .info .rate p{

font-size: 12px;
}

.show .tv_show .box .card .details .left .info .time{

display: flex;
align-items: center;
}

53
.show .tv_show .box .card .details .left .info .time i{
font-size: 12px;
color: #ffd500;
margin-left: 5px;
}

.show .tv_show .box .card .details .left .info .time p{

font-size: 12px;
margin-left: 5px;
}

.show .tv_show .box .card .details .right{

position: absolute;
right: 0;
bottom: 0;
color: #fff;
transform: translateX(100px);
transition: 0.4s;
opacity: 0;
}

.show .tv_show .box .card:hover .details .right{

opacity: 1;
transform: translateX(0);
}

.show .tv_show .box .card .details .right i{

width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
background-color: #ffe100;
border-radius: 50%;
cursor: pointer;
color: #282931;
margin: 0 10px 8px 0;
}

.show .tv_show .box .card img{

width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

.newsletter{
width: 100%;

54
height: auto;
padding: 0 0 40px 0;
background-color: #171717;
}

.newsletter h1{
text-align: center;
color: #ffe100;
}

.newsletter .news_card{
width: 550px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.newsletter .news_card input{

width: 550px;
height: 55px;
margin-top: 20px;
border-radius: 35px;
border: 3px solid #ffe100;
padding: 0 10px;
outline: none;
background: none;
color: #cccccc;
}

.newsletter .news_card button{

position: absolute;
right: 0;
width: 100px;
height: 45px;
border-radius: 25px;
margin-top: 20px;
margin-right: 8px;
border: 0;
outline: none;
background-color: #ffe100;
font-weight: bold;
font-size: 15px;
cursor: pointer;
}
p.end{
background: #171717;

55
text-align: center;
color: #cccccc;
padding: 15px 0;
}

p.end span{
color: #ffe100;
}

p.end span i{
margin: 0 8px;
}

4.3 Final Output :

Here are the images of the project of “Movie Hub” using HTML, CSS :

Fig 4.3.1 Home Page of movie hub

56
fig 4.3.2 login section of the website

fig 4.3.3 About us and blog section

57
fig 4.3.4 genre section

fig4.3.5 contact us section

58
CONCLUSION

Front end frameworks have become indispensable tools in the modern

web development landscape, empowering developers to create
sophisticated and engaging web applications with greater efficiency and
consistency. By leveraging the power of these frameworks. Developers
can focus on innovation and program solving while the frameworks
handle the underlying complexities of front and development.

59
BIBLOGRAPHY
1. https://www.codewithharry.com/notes/
2. https://chat.openai.com/c/dfa91362-05eb-432c-9deb-b3c2d33139f8

60