Skip to content

Netflix clone #249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nickylakhisarani wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Netflix clone #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
330 changes: 330 additions & 0 deletions netflix clone/netflix clone/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,330 @@
<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"
/>
</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>English</option>
<option value="hindi">Hindi</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>
<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>FAQ</p>
<p>Investor Relations</p>
<p>Privacy</p>
<p>Speed Test</p>
</div>
<div class="column__3">
<p>FAQ</p>
<p>Investor Relations</p>
<p>Privacy</p>
<p>Speed Test</p>
</div>
<div class="column__4">
<p>FAQ</p>
<p>Investor Relations</p>
<p>Privacy</p>
<p>Speed Test</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">Hindi</option>
</select>
</div>
</div>
<div class="footer__row__4">
<p>Netflix India</p>
</div>
</footer>

<script src="src/index.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions netflix clone/netflix clone/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
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";
}
});
}
Loading