K.I.E.T.

Group of Institution, Ghaziabad

A report for the partial fulfilment of the requirement for the

awards of degree of

BACHELORS OF TECHNOLOGY
IN
COMPUTER SCIENCE AND ENGINEERING
MINI PROJECT REPORT
ON
“NETFLIX CLONE” SUBMITTED
BY:
Omendra Rajput
ROLL NO. 2300290109005
 TABLE OF CONTENT

• Certificate
• Acknowledgement
• Introduction
• History of Netflix
• Objective
• Methodology
• Problem Statement
• Result
• Screenshot of Project
• Conclusion
• References
 INTRODUCTION
The internet has revolutionized the way we
consume media, with streaming services like
Netflix becoming increasingly popular. This
project aims to replicate the user interface and
basic functionality of Netflix through a clone
created using HTML, CSS, and
JavaScript. By developing this clone, we aim to
gain a deeper understanding of web
development concepts and enhance our skills
in front-end development.
A Netflix clone is essentially a custom-built
application or website that replicates the
features and functionalities of the original
Netflix platform. The objective is to provide
users with a similar streaming experience,
allowing them to access a vast library of
movies, TV shows, documentaries, and other
content on-demand.
 HISTORY OF NETFLIX
Netflix was founded by Marc Randolph and Reed
Hastings on August 29, 1997, in Scotts Valley,
California. Hastings, a computer scientist and
mathematician, was a co-founder of Pure Software,
which was acquired by Rational Software that year
for $750 million, the then biggest acquisition in
Silicon Valley history. Although Netflix is now a
streaming service, it did not begin that way. Netflix
was originally operated as a mail-order service. The
company would mail DVDs to customers, including
a prepaid return envelope for returning the DVD.
Founded in 1997, Netflix's website launched in
April 1998 with around 900 titles to choose from.
On that first day, their website crashed due to the
unprecedented amount of web traffic. After
purchasing additional servers, they booked 137
orders.
 OBJECTIVE
The main objective of this project is to create a
functional replica of the Netflix interface using
fundamental web technologies such as HTML, CSS,
and JavaScript. Through this project, we aim to:

• Gain practical experience in front-end web

development.

• Understand the structure and layout of a complex

web application like Netflix.

• Implement basic functionality such as browsing

titles, playing videos, and user authentication.

• Improve our skills in HTML, CSS, and JavaScript

programming languages.
 METHODOLOGY
The project will be developed using a combination
of HTML for structure, CSS for styling, and JavaScript
for interactivity. The methodology involves the
following steps:

1. Planning: Define the structure of the Netflix clone,

including layout, navigation, and key features.

2. Design: Create wireframes and design mock-ups to

visualize the user interface.

3. Development: Write HTML, CSS, and JavaScript

code to implement the planned features.

4. Testing: Conduct thorough testing to ensure the

functionality and responsiveness of the clone across
different devices and browsers.
 HTML FUNDAMENTAL
• HTML stands for Hyper Text Markup Language.

• HTML is the standard markup language for creating web pages.

• HTML describes the structure of a Web page.

• HTML consists of a series of elements.

• HTML elements tell the browser how to display the content.

• HTML was created by Berners-Lee in 1991. HTML Attributes:-

• All HTML elements can have attributes.

• Attributes provide additional information about elements.

• Attributes are always specified in the start tag.

• Attributes usually come in name/value pairs like: name="value"

• The href attribute of specifies the URL of the page the link goes to

• The src attribute specifies the path to the image to be displayed.

• The style attribute is used to add styles to an element, such as color,

font, size, and more

• The lang attribute of the tag declares the language of the Web page
 CSS INTRODUCTION
1. CSS stands for Cascading Style Sheets
2. CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
3. CSS saves a lot of work. It can control the layout of multiple web
pages all at once
4. External style sheet are stored in css.

CSS Syntax
A CSS rule consists of a selector and a declaration
block.

I. The selector points to the HTML element you want to

style.

II. The declaration block contains one or more declarations

separated by semicolons.

III. Each declaration includes a CSS property name and a

value, separated by a colon.

IV. Multiple CSS declarations are separated with semicolons,

and declaration blocks are surrounded by curly braces.
 JAVASCRIPT INTRODUCTION

• JavaScript is the Programming Language for the Web.

• JavaScript can update and change both HTML and CSS.
JavaScript can calculate, manipulate and validate data.

➔ JavaScript Can Change HTML Content

One of many JavaScript HTML methods is getElementById().

document.getElementById("demo").innerHTML = "Hello";

➔ JavaScript Can Change HTML Styles (CSS)

document.getElementById("demo").style.fontSize = "40px";

➔ JavaScript Can Hide HTML Elements

document.getElementById("demo").style.display = "none";

➔ JavaScript Can Show HTML Elements

document.getElementById("demo").style.display = "block";

JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are
constructed:

var x, y, z; // Declare Variables

x = 5; y = 6; // Assign Values z

= x + y; // Compute Values
 PROBLEM STATEMENT
The challenge lies in replicating the complex user
interface and functionality of Netflix using only HTML,
CSS, and JavaScript. Key problems to address include:

• Designing a responsive layout that adapts to various

screen sizes.

• Implementing features such as video playback, browsing

categories, and user authentication.

• Ensuring cross-browser compatibility and consistent

performance.
 RESULT
Upon completion of the project, we successfully
developed a functional Netflix clone using HTML,
CSS, and JavaScript. The clone includes features
such as:

• Responsive layout for desktop and mobile devices.

• Browse categories with thumbnail previews.

• Video playback with customizable player controls.

• User authentication and account management.

 CONCLUSION
The development of the Netflix clone using HTML,
CSS, and JavaScript has been a rewarding learning
experience. Through this project, we have gained
practical knowledge in front-end web development,
improved our programming skills, and deepened
our understanding of complex web applications.
The clone serves as a testament to our capabilities
in creating interactive and visually appealing user
interfaces. Moving forward, we aim to further
enhance the clone with additional features and
optimizations, continuing our journey of growth
and learning in web development.
SCREENSHOT OF THE PROJECT
 Source Code:
HTML File:
<html>
<head>
<meta name="description" content="Hello this is my first web page!." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="src/styles.css" />
<link
rel="stylesheet"
href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link

href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1
,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<title>Netflix India - Watch TV Shows Online, Watch Movies Online</title>
<link
rel="icon"
href="http://pngimg.com/uploads/netflix/small/netflix_PNG15.png"
/>
</head>
<body>
<header>
<nav class="navbar">
<div class="navbar__brand">
<img
src="https://www.freepnglogos.com/uploads/netflix-logo-0.png"
alt="logo"
class="brand__logo"
/>
</div>

<div class="navbar__nav__items">
<div class="nav__item">
<div class="dropdown__container">
<i class="fas fa-globe"></i>
<select
name="languages"
id="languagesSelect"
 class="language__drop__down"
>
<option value="english" selected style="color: black;">English</option>
<option value="hindi" style="color: black;">हिन्दी</option>
</select>
</div>
</div>

<div class="nav__item">
<button class="signin__button">Sign in</button>
</div>
</div>
</nav>
</header>

<main>
<section class="hero">
<div class="hero__bg__image__container">
<img
src="https://assets.nflxext.com/ffe/siteui/vlv3/9c5457b8-9ab0-4a04-9fc1-e608d5670f1a/710d74e0-7158-408e-8d9b-
23c219dee5df/IN-en-20210719-popsignuptwoweeks-perspective_alpha_website_small.jpg"
alt="BG hero image"
class="hero__bg__image"
/>
</div>
<div class="hero__bg__overlay"></div>

<div class="hero__card">
<h1 class="hero__title">
Unlimited Movies TV,<br />
Shows and More.
</h1>
<p class="hero__subtitle">Watch anywhere and cancel anytime.</p>
<p class="hero__description">
Ready to watch? Enter your email to create or restart your
membership .
</p>

<div class="email__form__container">
<div class="form__container">
<input type="email" class="email__input" placeholder=" " />
<label class="email__label">Email Address</label>
</div>
<button class="primary__button">
Get Started <i class="fal fa-chevron-right"></i>
</button>
 </div>
</div>
</section>
<section class="features__container">
<!-- Feature 1 -->
<div class="feature">
<div class="feature__details">
<h3 class="feature__title">Enjoy on your TV.</h3>
<h5 class="feature__sub__title">
Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV,
Blu-ray players and more.
</h5>
</div>
<div class="feature__image__container">
<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/tv.png"
alt="Feature image"
class="feature__image"
/>
<div class="feature__backgroud__video__container">
<video
autoplay=""
loop=""
muted=""
class="feature__backgroud__video"
>
<source
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-tv-in-0819.m4v"
type="video/mp4"
/>
</video>
</div>
</div>
</div>
<!-- Feature 2 -->
<div class="feature">
<div class="feature__details">
<h3 class="feature__title">
Download your shows to watch offline.
</h3>
<h5 class="feature__sub__title">
Save your favourites easily and always have something to watch.
</h5>
</div>
<div class="feature__image__container">
<img
 src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/mobile-0819.jpg"
alt="Feature image"
class="feature__image"
/>
<div class="feature__2__poster__container">
<div class="poster__container">
<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/boxshot.png"
alt="poster"
class="poster"
/>
</div>
<div class="poster__details">
<h4>Stranger Things</h4>
<h6>Downloading...</h6>
</div>
<div class="download__gif__container">
<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/download-icon.gif"
alt="downloading gif"
class="gif"
/>
</div>
</div>
</div>
</div>
<!-- Feature 3 -->
<div class="feature">
<div class="feature__details">
<h3 class="feature__title">Watch everywhere.</h3>
<h5 class="feature__sub__title">
Stream unlimited movies and TV shows on your phone, tablet,
laptop, and TV.
</h5>
</div>
<div class="feature__image__container feature__3__image__container">
<img
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/device-pile-in.png"
alt="Feature image"
class="feature__image feature__3__image"
/>
<div
class="feature__backgroud__video__container feature__3__backgroud__video__container"
>
<video
autoplay=""
 loop=""
muted=""
class="feature__backgroud__video feature__3__backgroud__video"
>
<source
src="https://assets.nflxext.com/ffe/siteui/acquisition/ourStory/fuji/desktop/video-devices-in.m4v"
type="video/mp4"
/>
</video>
</div>
</div>
</div>
<!-- Feature 4 -->
<div class="feature">
<div class="feature__details">
<h3 class="feature__title">Create profiles for children.</h3>
<h5 class="feature__sub__title">
Send children on adventures with their favourite characters in a
space made just for them—free with your membership.
</h5>
</div>
<div class="feature__image__container">
<img
src="https://occ-0-4023-2164.1.nflxso.net/dnm/api/v6/19OhWN2dO19C9txTON9tvTFtefw/AAAABVxdX2WnFSp49eXb1do0euaj-
F8upNImjofE77XStKhf5kUHG94DPlTiGYqPeYNtiox-82NWEK0Ls3CnLe3WWClGdiJP.png?r=5cf"
alt="Feature image"
class="feature__image"
/>
</div>
</div>
</section>
<section class="FAQ__list__container">
<h1 class="FAQ__heading">Frequently Asked Questions</h1>
<div class="FAQ__list">
<div class="FAQ__accordian">
<button class="FAQ__title">
What is Netflix?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
Netflix is a streaming service that offers a wide variety of
award-winning TV shows, movies, anime, documentaries and more –
on thousands of internet-connected devices.
</p>
<p>
You can watch as much as you want, whenever you want, without a
 single ad – all for one low monthly price. There's always
something new to discover, and new TV shows and movies are added
every week!
</p>
</div>
</div>
<div class="FAQ__accordian">
<button class="FAQ__title">
How much does netflix cost?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
Watch Netflix on your smartphone, tablet, Smart TV, laptop, or
streaming device, all for one fixed monthly fee. Plans range
from ₹ 199 to ₹ 799 a month. No extra costs, no contracts.
</p>
</div>
</div>
<div class="FAQ__accordian">
<button class="FAQ__title">
Where can i watch?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
Watch anywhere, anytime, on an unlimited number of devices. Sign
in with your Netflix account to watch instantly on the web at
netflix.com from your personal computer or on any
internet-connected device that offers the Netflix app, including
smart TVs, smartphones, tablets, streaming media players and
game consoles.
</p>
<p>
You can also download your favourite shows with the iOS,
Android, or Windows 10 app. Use downloads to watch while you're
on the go and without an internet connection. Take Netflix with
you anywhere.
</p>
</div>
</div>
<div class="FAQ__accordian">
<button class="FAQ__title">
How do I cancel?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
Netflix is flexible. There are no annoying contracts and no
 commitments. You can easily cancel your account online in two
clicks. There are no cancellation fees – start or stop your
account anytime.
</p>
</div>
</div>
<div class="FAQ__accordian">
<button class="FAQ__title">
What can I watch from Netflix?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
Netflix has an extensive library of feature films,
documentaries, TV shows, anime, award-winning Netflix originals,
and more. Watch as much as you want, anytime you want.
</p>
</div>
</div>
<div class="FAQ__accordian">
<button class="FAQ__title">
Is Netflix good for kids?<i class="fal fa-plus"></i>
</button>
<div class="FAQ__visible">
<p>
The Netflix Kids experience is included in your membership to
give parents control while kids enjoy family-friendly TV shows
and films in their own space.
</p>
<p>
Kids profiles come with PIN-protected parental controls that let
you restrict the maturity rating of content kids can watch and
block specific titles you don’t want kids to see.
</p>
</div>
</div>
</div>
<div class="FAQ__get__started__email">
<h3>
Ready to watch? Enter your email to create or restart your
membership.
</h3>
<div class="email__form__container">
<div class="form__container">
<input type="email" class="email__input" placeholder=" " />
<label class="email__label">Email Address</label>
</div>
 <button class="primary__button">
Get Started <i class="fal fa-chevron-right"></i>
</button>
</div>
</div>
</section>
</main>

<footer>
<div class="footer__row__1">
<h4>Questions? Call 000-800-040-1843</h4>
</div>
<div class="footer__row__2">
<div class="column__1">
<p>FAQ</p>
<p>Investor Relations</p>
<p>Privacy</p>
<p>Speed Test</p>
</div>
<div class="column__2">
<p>Help Centre</p>
<p>Jobs</p>
<p>Cookie Preferences</p>
<p>Legal Notices</p>
</div>
<div class="column__3">
<p>Account</p>
<p>Ways to Watch</p>
<p>Corporate Information</p>
<p>Only on Netflix</p>
</div>
<div class="column__4">
<p>Media Centre</p>
<p>Terms of Use</p>
<p>Contact Us</p>
</div>
</div>
<div class="footer__row__3">
<div class="dropdown__container">
<i class="fas fa-globe"></i>
<select
name="languages"
id="languagesSelect"
class="language__drop__down"
>
<option value="english" selected>English</option>
 <option value="hindi">हिन्दी</option>
</select>
</div>
</div>
<div class="footer__row__4">
<p>Netflix India</p>
</div>
</footer>

<script src="src/index.js"></script>
</body>
</html>

CSS File:
*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

background-color: black;

color: white;

font-family: "Poppins", sans-serif;

.navbar {

position: absolute;

top: 0;

width: 100%;

display: flex;
 justify-content: space-between;

padding: 3% 5%;

z-index: 10;

.navbar__brand {

width: 100px;

height: 100%;

.brand__logo {

width: 100%;

height: 100%;

.language__drop__down {

background: transparent;

border: none;

color: white;

.language__drop__down:focus {

outline: none;

.language__drop__down option {
 background-color: black;

.dropdown__container {

border: 1px solid white;

padding: 0.4rem;

border-radius: 4px;

background: rgba(0, 0, 0, 0.4);

.signin__button {

background-color: #dc030f;

border: 1px solid #dc030f;

color: white;

padding: 0.25rem 0.5rem;

border-radius: 4px;

.navbar__nav__items {

display: flex;

gap: 10px;

.hero__bg__image__container {

width: 100%;

height: 80vh;
}

.hero__bg__image {

width: 100%;

height: 100%;

object-fit: cover;

.hero__bg__overlay {

position: absolute;

inset: 0;

width: 100%;

height: 80vh;

background: rgba(0, 0, 0, 0.4);

background-image: linear-gradient(

to top,

rgba(0, 0, 0, 0.8) 0,

rgba(0, 0, 0, 0) 60%,

rgba(0, 0, 0, 0.8) 100%

);

.hero__card {

position: absolute;

top: 20%;

text-align: center;
 display: flex;

flex-direction: column;

gap: 10px;

.hero__title {

font-weight: 600;

font-size: 2rem;

.hero__subtitle,

.hero__description {

font-weight: 400;

font-size: 1rem;

.hero__description {

margin: 0 50px;

.email__input {

border: none;

background: transparent;

width: 100%;

height: 100%;

padding-left: 7px;
}

.email__label {

color: black;

position: absolute;

top: 28%;

left: 2%;

color: rgb(153, 149, 149);

transition: 0.5s;

.email__form__container {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 15px;

.form__container {

background-color: white;

width: 90%;

height: 50px;

position: relative;

.email__input:focus + .email__label {
 top: 0.2rem;

font-size: 10px;

.email__input:not(:placeholder-shown).email__input:not(:focus) + .email__label {

top: 0.2rem;

font-size: 10px;

.email__input:focus-visible {

outline: none;

.primary__button {

background-color: #dc030f;

border: 1px solid #dc030f;

color: white;

padding: 0.8rem 1.2rem;

border-radius: 2px;

font-size: 15px;

letter-spacing: 1px;

.feature {

border-top: 8px solid #222;

padding: 2rem 1rem;

}

.feature__details {

text-align: center;

.feature__title {

font-size: 25px;

font-weight: 600;

margin: 10px 0;

.feature__sub__title {

font-size: 15px;

font-weight: 400;

.feature__image__container {

width: 100%;

position: relative;

.feature__image {

width: 100%;

.feature__backgroud__video__container {
 position: absolute;

width: 100%;

top: 20%;

left: 13%;

height: 100%;

max-width: 73%;

max-height: 54%;

z-index: -2;

.feature__backgroud__video {

width: 100%;

.feature__2__poster__container {

position: absolute;

bottom: 8%;

left: 50%;

transform: translateX(-50%);

width: 100%;

max-width: 16em;

display: flex;

align-items: center;

background-color: black;

border: 2px solid rgba(255, 255, 255, 0.25);

border-radius: 10px;
 height: 60px;

padding: 0.25rem 0.6rem;

gap: 15px;

.poster__container {

width: 20%;

.poster {

width: 100%;

height: 100%;

.poster__details {

width: 60%;

.poster__details > h4 {

font-size: 13px;

font-weight: 500;

.poster__details > h6 {

font-size: 12px;

font-weight: 400;

color: rgb(63, 63, 246);

}
.download__gif__container {

width: 20%;

height: 100%;

.gif {

width: 100%;

height: 100%;

.feature__3__backgroud__video__container {

max-width: 63%;

max-height: 47%;

z-index: -2;

top: 9%;

left: 19%;

.FAQ__accordian {

width: 100%;

.FAQ__title {

width: 100%;

display: flex;

justify-content: space-between;

padding: 15px 20px;

font-size: 18px;
 background-color: #303030;

border: 1px solid #303030;

color: white;

.FAQ__visible {

background-color: #303030;

border-top: 1px solid black;

max-height: 0;

overflow: hidden;

transition: max-height 0.5s ease-in-out;

.FAQ__visible > p {

margin: 1rem;

.FAQ__list__container {

border-top: 8px solid #222;

padding: 2rem 0;

.FAQ__heading {

font-size: 20px;

text-align: center;

font-weight: 600;

margin: 1rem 3rem;

}
.FAQ__list {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 10px;

.FAQ__get__started__email {

text-align: center;

.FAQ__get__started__email > h3 {

font-size: 18px;

font-weight: 400;

margin: 2rem 0;

footer {

border-top: 8px solid #333;

padding: 2rem 1rem;

color: #757575;

display: flex;

flex-direction: column;

gap: 20px;
}

.footer__row__2 {

display: flex;

flex-wrap: wrap;

justify-content: space-around;

gap: 20px;

.footer__row__1 > h4 {

font-size: 15px;

font-weight: 500;

.footer__row__3 > .dropdown__container {

width: fit-content;

border: 1px solid #757575;

color: #757575;

.footer__row__3 > .dropdown__container > .language__drop__down {

color: #757575;

@media (min-width: 768px) {

.hero__bg__image__container {
 height: 100vh;

.hero__bg__overlay {

height: 100vh;

.hero__card {

top: 40%;

left: 30%;

transform: translate(-20%, -20%);

.hero__title {

font-size: 3rem;

.hero__subtitle,

.hero__description {

font-size: 1.3rem;

.feature {

padding: 4rem;

.feature__title {

font-size: 35px;

}
.feature__sub__title {

font-size: 20px;

.feature__2__poster__container {

max-width: 26em;

height: 85px;

.poster__container {

width: 15%;

.download__gif__container {

width: 3rem;

height: 3rem;

.poster__details > h4 {

font-size: 18px;

.poster__details > h6 {

font-size: 14px;

.FAQ__title {

font-size: 20px;

.FAQ__heading {
 font-size: 38px;

font-weight: 500;

letter-spacing: 1px;

.FAQ__list {

padding: 1rem 5rem;

.FAQ__get__started__email {

width: 75%;

display: flex;

flex-direction: column;

justify-content: center;

transform: translateX(15%);

@media (min-width: 1024px) {

.navbar {

padding: 2% 5%;

.navbar__brand {

width: 150px;

.signin__button {
 padding: 10px 20px;

font-size: 18px;

.dropdown__container {

padding: 10px 5px;

.navbar__nav__items {

gap: 30px;

.hero__card {

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

.form__container {

width: 50%;

.email__form__container {

flex-direction: row;

align-items: center;

gap: 1px;

.primary__button {
 height: 50px;

.feature {

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

.feature__details {

text-align: left;

padding: 0 6rem;

.feature__title {

font-size: 50px;

.feature__sub__title {

font-size: 25px;

.feature__image__container {

max-width: 500px;

}
.feature:nth-child(even) {

flex-direction: row-reverse;

.feature__2__poster__container {

max-width: 20em;

height: 100px;

padding: 1rem;

.poster__container {

width: 20%;

.FAQ__list {

padding: 1rem 25rem;

.FAQ__get__started__email {

transform: translateX(16%);

footer {

padding: 2rem 20rem;

justify-content: flex-start;

text-align: left;

align-items: flex-start;

}
 .footer__row__2 {

justify-content: space-between;

align-items: flex-start;

flex-wrap: nowrap;

.footer__row__1,

.footer__row__3,

.footer__row__4 {

align-self: flex-start;

@media (min-width: 1254px) {

JavaScript file:
let accordian = document.getElementsByClassName("FAQ__title");

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

accordian[i].addEventListener("click", function () {

if (this.childNodes[1].classList.contains("fa-plus")) {

this.childNodes[1].classList.remove("fa-plus");

this.childNodes[1].classList.add("fa-times");

} else {

this.childNodes[1].classList.remove("fa-times");

this.childNodes[1].classList.add("fa-plus");

}
 let content = this.nextElementSibling;

if (content.style.maxHeight) {

content.style.maxHeight = null;

} else {

content.style.maxHeight = content.scrollHeight + "px";

});

}
 REFRENCES
Following website links help for the
completion of this project-

i. https://www.youtube.com/

ii. https://www.wikipedia.org/

iii. https://www.geeksforgeeks.org/html-css/

iv. https://www.w3schools.com/html/