diff --git a/NetFlix Clone By Ayush Sarfare/home.html b/NetFlix Clone By Ayush Sarfare/home.html new file mode 100644 index 0000000..3eec0b8 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/home.html @@ -0,0 +1,48 @@ + + + + + + + Netflix Clone | Ayush Sarfare + + + + + + + + + + + + + +
+
+ + + + + \ No newline at end of file diff --git a/NetFlix Clone By Ayush Sarfare/index.html b/NetFlix Clone By Ayush Sarfare/index.html new file mode 100644 index 0000000..8f317ca --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/index.html @@ -0,0 +1,377 @@ + + + + + + + + + + + + + + Netflix India - Watch TV Shows Online, Watch Movies Online + + + + +
+ +
+ + +
+
+
+ netflix background image +
+
+ +
+

+ Unlimited Movies, TV
+ Shows and More. +

+

Watch anywhere. Cancel anytime.

+

+ Ready to watch? Enter your email to create or restart your + membership . +

+ + + + +
+
+ + + +
+ +
+
+

Enjoy on your TV.

+
+ Watch on smart TVs, PlayStation, Xbox, Chromecast, Apple TV, + Blu-ray players and more. +
+
+
+ Feature image +
+ +
+
+
+ + +
+
+

+ Download your shows to watch offline. +

+
+ Save your favourites easily and always have something to watch. +
+
+
+ Feature image +
+
+ poster +
+
+

Stranger Things

+
Downloading...
+
+
+ downloading gif +
+
+
+
+ + +
+
+

Watch everywhere.

+
+ Stream unlimited movies and TV shows on your phone, tablet, + laptop, and TV. +
+
+
+ Feature image +
+ +
+
+
+ + +
+
+

Create profiles for children.

+
+ Send children on adventures with their favourite characters in a + space made just for them—free with your membership. +
+
+
+ Feature image +
+
+
+ + + +
+

Frequently Asked Questions

+
+
+ +
+

+ 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. +

+

+ 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! +

+
+
+
+ +
+

+ 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. +

+
+
+
+ +
+

+ 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. +

+

+ 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. +

+
+
+
+ +
+

+ 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. +

+
+
+
+ +
+

+ 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. +

+
+
+
+ +
+

+ 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. +

+

+ 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. +

+
+
+
+
+

+ Ready to watch? Enter your email to create or restart your + membership. +

+ +
+
+
+ + + + + + + + diff --git a/NetFlix Clone By Ayush Sarfare/login.html b/NetFlix Clone By Ayush Sarfare/login.html new file mode 100644 index 0000000..19438b5 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/login.html @@ -0,0 +1,51 @@ + + + + + + Netflix SignIn Page | Ayush Sarfare + + + + + +
+
+ netflix background image +
+
+
+
+

Sign In

+
+
+ + +
+
+ + +
+ +
+
+ + +
+ Need help? +
+
+

New to Netflix? Sign up now

+ + This page is protected by Google reCAPTCHA to ensure you're not a bot. + Learn more. + +
+ + \ No newline at end of file diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS1.png b/NetFlix Clone By Ayush Sarfare/resources/SS1.png new file mode 100644 index 0000000..2e194b6 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS1.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS2.png b/NetFlix Clone By Ayush Sarfare/resources/SS2.png new file mode 100644 index 0000000..857f130 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS2.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS3.png b/NetFlix Clone By Ayush Sarfare/resources/SS3.png new file mode 100644 index 0000000..4d98150 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS3.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS4.png b/NetFlix Clone By Ayush Sarfare/resources/SS4.png new file mode 100644 index 0000000..7d03aef Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS4.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS5.png b/NetFlix Clone By Ayush Sarfare/resources/SS5.png new file mode 100644 index 0000000..06e2dcb Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS5.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS6.png b/NetFlix Clone By Ayush Sarfare/resources/SS6.png new file mode 100644 index 0000000..75334e5 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS6.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/SS7.png b/NetFlix Clone By Ayush Sarfare/resources/SS7.png new file mode 100644 index 0000000..b506792 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/SS7.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/boxshot.png b/NetFlix Clone By Ayush Sarfare/resources/boxshot.png new file mode 100644 index 0000000..be67e56 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/boxshot.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/children.png b/NetFlix Clone By Ayush Sarfare/resources/children.png new file mode 100644 index 0000000..20c3f81 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/children.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/download-icon.gif b/NetFlix Clone By Ayush Sarfare/resources/download-icon.gif new file mode 100644 index 0000000..a894717 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/download-icon.gif differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/hero-img.jpg b/NetFlix Clone By Ayush Sarfare/resources/hero-img.jpg new file mode 100644 index 0000000..84a97bf Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/hero-img.jpg differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/logo.svg b/NetFlix Clone By Ayush Sarfare/resources/logo.svg new file mode 100644 index 0000000..4756646 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/resources/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/NetFlix Clone By Ayush Sarfare/resources/mobile.jpg b/NetFlix Clone By Ayush Sarfare/resources/mobile.jpg new file mode 100644 index 0000000..00c8f01 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/mobile.jpg differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/netflix-bg.jpg b/NetFlix Clone By Ayush Sarfare/resources/netflix-bg.jpg new file mode 100644 index 0000000..d28e768 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/netflix-bg.jpg differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/netflix-logo.png b/NetFlix Clone By Ayush Sarfare/resources/netflix-logo.png new file mode 100644 index 0000000..9fedca4 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/netflix-logo.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/tv-1.png b/NetFlix Clone By Ayush Sarfare/resources/tv-1.png new file mode 100644 index 0000000..31c0a25 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/tv-1.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/tv-2.png b/NetFlix Clone By Ayush Sarfare/resources/tv-2.png new file mode 100644 index 0000000..50a87f7 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/tv-2.png differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/video-1.m4v b/NetFlix Clone By Ayush Sarfare/resources/video-1.m4v new file mode 100644 index 0000000..602309d Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/video-1.m4v differ diff --git a/NetFlix Clone By Ayush Sarfare/resources/video-2.m4v b/NetFlix Clone By Ayush Sarfare/resources/video-2.m4v new file mode 100644 index 0000000..05a2c01 Binary files /dev/null and b/NetFlix Clone By Ayush Sarfare/resources/video-2.m4v differ diff --git a/NetFlix Clone By Ayush Sarfare/src/home.css b/NetFlix Clone By Ayush Sarfare/src/home.css new file mode 100644 index 0000000..d5df326 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/src/home.css @@ -0,0 +1,212 @@ +/* Normalise css */ +html,body{ + background-color: #141414; + padding:0; + margin: 0; + font-family: Helvetica,Arial ,sans-serif; +} +.container{ + width: 100%; + max-width: 1250px; + margin: 0 auto; +} +*{ + box-sizing: border-box; +} +*::-webkit-scrollbar{ + display: none; +} + +/* Header Css */ +header{ + background-color: transparent; + position: fixed; + z-index: 100; + left:0; + top: 0; + width: 100%; + transition: all ease 600ms; +} +header.black-bg{ + background-color: rgb(20, 20, 20); +} +.header-cont{ + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.left-cont, .right-cont{ + display: flex; + flex-direction: row; + align-items: center; +} +.header-brand{ + max-width: 110px; +} +.main-nav{ + list-style: none; + display: inline-flex; + flex-direction: row; +} +.nav-item{ + margin-right: 20px; + color: #e5e5e5; + opacity: .83; +} +.nav-item.active{ + color: white; + opacity: 1; + font-weight: 500; +} +.right-cont svg, .right-cont img{ + margin-right: 22px; + cursor: pointer; +} +.right-cont svg{ + color: white; +} +.right-cont img{ + max-width:40px; +} + + + +/* Movies Section CSS */ +.movies-section{ + margin: 41px 0; +} +.movie-section-heading{ + font-size: 20px; + font-weight: 700; + line-height: 1.2; + color: white; + cursor: pointer; + margin-bottom: 10px; +} +.explore-nudge{ + color: #54b9c5; + font-size: 12px; + display: none; +} +.movie-section-heading:hover .explore-nudge{ + display: inline-block; +} +.movies-row{ + display: flex; + flex-direction: row; + align-items: center; + flex-wrap: nowrap; + overflow-x:auto; + overflow-y: hidden; +} +.movie-item{ + width: 245px; + object-fit: contain; + margin-right: 6px; + border-radius: 4px; + position: relative; +} +.move-item-img{ + width: inherit; +} +.movie-item .iframe-wrap{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + display: none; + border: none; + outline: none; +} +.movie-item:hover .iframe-wrap{ + display: block; +} +.movie-item:hover{ + transform: scale(1.3); + transition: transform linear 300ms; +} + + +/* Banner Section */ +.banner-section{ + background-repeat: no-repeat; + background-size: cover; + min-height: 98vh; + padding-top: 80px; + position: relative; +} +.banner-content{ + display: flex; + flex-direction: column; + padding-top: 70px; +} +.banner__title{ + color: white; + font-size: 84px; + line-height: 1.1; + margin: 0; + margin-bottom: 16px; + max-width: 40%; +} +.banner__info{ + margin-bottom: 14px; + font-size: 22px; + font-weight: 700; + line-height: 1.5; + color: white; +} +.banner__overview{ + font-size: 16.4px; + color: white; + line-height: 1.3; + max-width: 40%; +} +.action-buttons-cont{ + display: flex; + flex-direction: row; + align-items: center; +} +.action-button{ + border:none; + background-color: white; + padding: 8px 23px; + margin-right: 11px; + border-radius: 4px; + display: flex; + align-items: center; + flex-direction: row; + font-size: 16px; + font-weight: 700; + cursor:pointer; +} +.action-button:last-child{ + background-color: rgba(109, 109, 110, 0.7); + color:white; +} +.banner_fadeBottom{ + height: 120px; + background:linear-gradient(180deg, + transparent, + rgba(37,37,37,.61), + #141414 + ); + position: absolute; + left:0; + bottom: 0; + width: 100%; +} + + + +/* RESPONSIVE CSS */ +@media (max-width:767px) { + .main-nav{ + display: none; + } + .banner__overview, .banner__title{ + max-width: 100%; + } +} \ No newline at end of file diff --git a/NetFlix Clone By Ayush Sarfare/src/home.js b/NetFlix Clone By Ayush Sarfare/src/home.js new file mode 100644 index 0000000..79ff01f --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/src/home.js @@ -0,0 +1,143 @@ +// Consts +const apikey = "7543524441a260664a97044b8e2dc621"; +const apiEndpoint = "https://api.themoviedb.org/3" +const imgPath = "https://image.tmdb.org/t/p/original"; + + +const apiPaths = { + fetchAllCategories: `${apiEndpoint}/genre/movie/list?api_key=${apikey}`, + fetchMoviesList: (id) => `${apiEndpoint}/discover/movie?api_key=${apikey}&with_genres=${id}`, + fetchTrending:`${apiEndpoint}/trending/all/day?api_key=${apikey}&language=en-US`, + searchOnYoutube: (query) => `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${query}&key=AIzaSyC0SZJkHFX-fQ7NrsxdI4l4mGwYuY4l7P8` +} + + +// Boots up the app +function init() { + fetchTrendingMovies(); + fetchAndBuildAllSections(); +} + +function fetchTrendingMovies(){ + fetchAndbuildMovieSection(apiPaths.fetchTrending, 'Trending Now') + .then(list => { + const randomIndex = parseInt(Math.random() * list.length); + buildBannerSection(list[randomIndex]); + }).catch(err=>{ + console.error(err); + }); +} + +function buildBannerSection(movie){ + const bannerCont = document.getElementById('banner-section'); + + bannerCont.style.backgroundImage = `url('${imgPath}${movie.backdrop_path}')`; + + const div = document.createElement('div'); + + div.innerHTML = ` + + + +
+ + +
+ `; + div.className = "banner-content container"; + + bannerCont.append(div); +} + + +function fetchAndBuildAllSections(){ + fetch(apiPaths.fetchAllCategories) + .then(res => res.json()) + .then(res => { + const categories = res.genres; + if (Array.isArray(categories) && categories.length) { + categories.forEach(category => { + fetchAndbuildMovieSection( + apiPaths.fetchMoviesList(category.id), + category.name + ); + }); + } + // console.table(movies); + }) + .catch(err=>console.error(err)); +} + +function fetchAndbuildMovieSection(fetchUrl, categoryName){ + console.log(fetchUrl,categoryName); + return fetch(fetchUrl) + .then(res => res.json()) + .then(res => { + // console.table(res.results); + const movies = res.results; + if (Array.isArray(movies) && movies.length) { + buildMoviesSection(movies.slice(0,6), categoryName); + } + return movies; + }) + .catch(err=>console.error(err)) +} + +function buildMoviesSection(list, categoryName){ + console.log(list, categoryName); + + const moviesCont = document.getElementById('movies-cont'); + + const moviesListHTML = list.map(item => { + return ` +
+ ${item.title} +
+
`; + }).join(''); + + const moviesSectionHTML = ` +

${categoryName} Explore All

+
+ ${moviesListHTML} +
+ ` + + const div = document.createElement('div'); + div.className = "movies-section" + div.innerHTML = moviesSectionHTML; + + // append html into movies container + moviesCont.append(div); +} + +function searchMovieTrailer(movieName, iframId) { + if (!movieName) return; + + fetch(apiPaths.searchOnYoutube(movieName)) + .then(res => res.json()) + .then(res => { + const bestResult = res.items[0]; + + const elements = document.getElementById(iframId); + console.log(elements, iframId); + + const div = document.createElement('div'); + div.innerHTML = `` + + elements.append(div); + + }) + .catch(err=>console.log(err)); +} + + +window.addEventListener('load',function() { + init(); + window.addEventListener('scroll', function(){ + // header ui update + const header = document.getElementById('header'); + if (window.scrollY > 5) header.classList.add('black-bg') + else header.classList.remove('black-bg'); + }) +}) diff --git a/NetFlix Clone By Ayush Sarfare/src/index.js b/NetFlix Clone By Ayush Sarfare/src/index.js new file mode 100644 index 0000000..567d858 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/src/index.js @@ -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"; + } + }); +} diff --git a/NetFlix Clone By Ayush Sarfare/src/login.css b/NetFlix Clone By Ayush Sarfare/src/login.css new file mode 100644 index 0000000..3d83e18 --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/src/login.css @@ -0,0 +1,179 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Roboto', sans-serif; +} + +body { + background: #000; +} + +body::before { + content: ""; + position: absolute; + left: 0; + top: 0; + opacity: 0.5; + width: 100%; + height: 100%; + background: url("resources/hero-img.jpg"); + background-position: center; +} + +nav { + position: fixed; + padding: 25px 60px; + z-index: 1; +} + +nav a img { + width: 167px; +} + +.form-wrapper { + position: absolute; + left: 50%; + top: 50%; + border-radius: 4px; + padding: 70px; + width: 450px; + transform: translate(-50%, -50%); + background: rgba(0, 0, 0, .75); +} + +.form-wrapper h2 { + color: #fff; + font-size: 2rem; +} + +.form-wrapper form { + margin: 25px 0 65px; +} + +form .form-control { + height: 50px; + position: relative; + margin-bottom: 16px; +} + +.form-control input { + height: 100%; + width: 100%; + background: #333; + border: none; + outline: none; + border-radius: 4px; + color: #fff; + font-size: 1rem; + padding: 0 20px; +} + +.form-control input:is(:focus, :valid) { + background: #444; + padding: 16px 20px 0; +} + +.form-control label { + position: absolute; + left: 20px; + top: 50%; + transform: translateY(-50%); + font-size: 1rem; + pointer-events: none; + color: #8c8c8c; + transition: all 0.1s ease; +} + +.form-control input:is(:focus, :valid)~label { + font-size: 0.75rem; + transform: translateY(-130%); +} + +form button { + width: 100%; + padding: 16px 0; + font-size: 1rem; + background: #e50914; + color: #fff; + font-weight: 500; + border-radius: 4px; + border: none; + outline: none; + margin: 25px 0 10px; + cursor: pointer; + transition: 0.1s ease; +} + +form button:hover { + background: #c40812; +} + +.form-wrapper a { + text-decoration: none; +} + +.form-wrapper a:hover { + text-decoration: underline; +} + +.form-wrapper :where(label, p, small, a) { + color: #b3b3b3; +} + +form .form-help { + display: flex; + justify-content: space-between; +} + +form .remember-me { + display: flex; +} + +form .remember-me input { + margin-right: 5px; + accent-color: #b3b3b3; +} + +form .form-help :where(label, a) { + font-size: 0.9rem; +} + +.form-wrapper p a { + color: #fff; +} + +.form-wrapper small { + display: block; + margin-top: 15px; + color: #b3b3b3; +} + +.form-wrapper small a { + color: #0071eb; +} + +@media (max-width: 740px) { + body::before { + display: none; + } + + nav, .form-wrapper { + padding: 20px; + } + + nav a img { + width: 140px; + } + + .form-wrapper { + width: 100%; + top: 43%; + } + + .form-wrapper form { + margin: 25px 0 40px; + } +} \ No newline at end of file diff --git a/NetFlix Clone By Ayush Sarfare/src/styles.css b/NetFlix Clone By Ayush Sarfare/src/styles.css new file mode 100644 index 0000000..cc25a7e --- /dev/null +++ b/NetFlix Clone By Ayush Sarfare/src/styles.css @@ -0,0 +1,792 @@ +* { + 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%; +} + +.Netflix-logo { + width: 100%; + height: 100%; +} + +.language-dropdown { + background: transparent; + border: none; + color: white; +} + +.language-dropdown:focus { + outline: none; +} + +.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; +} + +.netflix-bg-container { + width: 100%; + height: 80vh; +} + +.netflix-bg-image { + width: 100%; + height: 100%; + object-fit: cover; +} + +.netflix-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% + ); +} + +.netflix-card { + position: absolute; + top: 20%; + text-align: center; + display: flex; + flex-direction: column; + gap: 10px; +} + +.netflix-title { + color: #fff; + font-weight: 600; + font-size: 2rem; +} + +.netflix-subtitle, +.netflix-description { + color: #fff; + font-weight: 400; + font-size: 1rem; +} + +.netflix-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-heading { + font-size: 25px; + font-weight: 600; + margin: 10px 0; +} + +.feature-sub-heading { + font-size: 15px; + font-weight: 400; +} + +.feature-image-container { + width: 100%; + position: relative; +} +.feature-image { + width: 100%; +} + +.feature-bg-video-container { + position: absolute; + width: 100%; + top: 20%; + left: 13%; + height: 100%; + max-width: 73%; + max-height: 54%; + z-index: -2; +} + +.feature-bg-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-bg-video-container { + max-width: 63%; + max-height: 47%; + z-index: -2; + top: 9%; + left: 19%; +} + +.FAQ-question { + 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-answer { + background-color: #303030; + border-top: 1px solid black; + max-height: 0; + overflow: hidden; + transition: max-height 0.5s ease-in-out; +} + +.FAQ-answer > 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-email { + text-align: center; +} + +.FAQ-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; + font-size: 13px; + flex-wrap: wrap; + justify-content: space-between; + gap: 50px; +} + +.footer-row-1 > h4 { + font-size: 16px; + font-weight: 500; + padding-top: 25px; +} + +.footer-row-3 > .dropdown-container { + width: fit-content; + border: 1px solid #757575; + color: #757575; +} + +.footer-row-3 > .dropdown-container > .language-dropdown { + color: #757575; +} + + +@media (min-width: 768px) { + .netflix-bg-container { + height: 100vh; + } + + .netflix-bg-overlay { + height: 100vh; + } + + .netflix-card { + top: 40%; + left: 30%; + transform: translate(-20%, -20%); + } + .netflix-title { + font-size: 3rem; + } + + .netflix-subtitle { + font-size: 1.5rem; + } + + .netflix-description { + padding-top: 15px; + font-size: 1.2rem; + } + + .feature { + padding: 4rem; + } + + .feature-heading { + font-size: 35px; + } + + .feature-sub-heading { + 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-email { + width: 75%; + display: flex; + flex-direction: column; + justify-content: center; + transform: translateX(15%); + } +} + +@media (min-width: 1024px) { + .navbar { + padding: 2% 4%; + } + + .navbar-brand { + width: 150px; + } + + .Netflix-logo { + width: 95%; + height: 95%; + } + + .signin-button { + padding: 7px 20px; + font-size: 15px; + } + .dropdown-container { + padding: 5px 5px; + } + + .navbar-nav-items { + gap: 30px; + } + + .netflix-card { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .form-container { + width: 75%; + } + + .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-heading { + font-size: 40px; + } + + .feature-sub-heading { + font-size: 20px; + } + + .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-email { + transform: translateX(16%); + } + + .FAQ-email > .email-form-container > .form-container { + width: 55%; + } + + footer { + padding: 2rem 13rem; + justify-content: flex-start; + text-align: left; + align-items: flex-start; + } + + .footer-row-2 { + padding-top: 15px; + padding-left: 10px; + padding-right: 50px; + justify-content: space-between; + align-items: flex-start; + flex-wrap: nowrap; + gap: 100px; + } + + .footer-row-1, + .footer-row-3, + .footer-row-4 { + align-self: flex-start; + } + + .column-1, + .column-2, + .column-3, + .column-4 { + width: 100%; + } + .column-1 > p, + .column-2 > p, + .column-3 > p, + .column-4 > p { + padding-bottom: 15px; + } + + div.footer-row-3 > .dropdown-container { + padding: 10px 5px; + } +} + + + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { + .navbar { + top: 15px; + } + + .Netflix-logo { + padding-right: 10px; + } + + .dropdown-container { + padding: 0.1rem; + padding-left: 0.4rem; + padding-right: 0.4rem; + } + + .signin-button { + padding: 0.35rem 0.5rem; + } + + .navbar-nav-items { + gap: 12px; + } + + .netflix-bg-container { + height: 95vh; + } + + .netflix-bg-overlay { + height: 95vh; + } + + .netflix-title { + font-size: 1.625rem; + } + + .footer-row-1 > h4 { + font-size: 1em; + font-weight: 500; + padding-top: 20px; + padding-bottom: 15px; + padding-left: 20px; + } + + .footer-row-2 { + padding-left: 20px; + padding-right: 30px; + padding-bottom: 15px; + text-align: left; + justify-content: space-between; + align-items: flex-start; + gap: 20px; + } + + .footer-row-3 { + padding-bottom: 10px; + padding-left: 20px; + } + .footer-row-4 { + padding-left: 20px; + font-size: 0.8rem; + } + + .FAQ-email { + padding-bottom: 20px; + } + + .FAQ-email > h3 { + padding-left: 25px; + padding-right: 25px; + font-size: 18px; + } +} + +@media (min-device-width: 360px) and (max-device-width: 640px) { + .netflix-bg-container { + height: 80vh; + } + + .netflix-bg-overlay { + height: 80vh; + } + + .footer-row-2 { + padding-left: 20px; + padding-right: 20px; + } + + .column-1, + .column-2, + .column-3, + .column-4 { + width: 45%; + } + + .column-1 > p, + .column-2 > p, + .column-3 > p, + .column-4 > p { + padding-bottom: 10px; + } +} + +@media (min-device-width: 540px) and (max-device-width: 720px) { + .navbar { + top: 15px; + } + + .dropdown-container { + padding: 0.1rem; + padding-left: 0.4rem; + padding-right: 0.4rem; + } + + .signin-button { + padding: 0.35rem 0.5rem; + } + + .navbar-nav-items { + gap: 12px; + } + + .footer-row-2 { + padding-left: 30px; + gap: 0; + } + + .column-1, + .column-2, + .column-3, + .column-4 { + width: 40%; + } + + .footer-row-1 > h4, + .footer-row-3, + .footer-row-4 { + padding-left: 30px; + } +} + + +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { + .netflix-bg-container { + height: 80vh; + } + + .netflix-bg-overlay { + height: 80vh; + } + + .footer-row-1 > h4 { + padding-left: 30px; + } + .footer-row-2 { + padding-top: 20px; + padding-left: 30px; + padding-right: 30px; + gap: 0; + } + + .column-1, + .column-2, + .column-3, + .column-4 { + width: 25%; + } + + .column-1 > p, + .column-2 > p, + .column-3 > p, + .column-4 > p { + padding-bottom: 20px; + } + + .footer-row-3, + .footer-row-4 { + padding-left: 30px; + } +} + + +@media only screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (min-device-width: 768px) and (max-device-width: 1007px) { + .navbar { + top: 15px; + } + + .Netflix-logo { + height: 2.1rem; + width: 6.75rem; + padding-right: 10px; + } + + .dropdown-container { + font-size: 15px; + padding-left: 0.5rem; + padding-right: 0.5rem; + } + + .signin-button { + font-size: 15px; + padding: 0.55rem 0.9rem; + } + + .navbar-nav-items { + gap: 25px; + } + + .footer-row-2 { + padding-top: 20px; + padding-left: 30px; + padding-right: 40px; + gap: 10px; + } + + .column-1, + .column-2, + .column-3, + .column-4 { + width: 15%; + } + .column-1 > p, + .column-2 > p, + .column-3 > p, + .column-4 > p { + padding-bottom: 10px; + } +}