diff --git a/netflix clone/netflix clone/index.html b/netflix clone/netflix clone/index.html new file mode 100644 index 0000000..ae802dd --- /dev/null +++ b/netflix clone/netflix clone/index.html @@ -0,0 +1,330 @@ + + + + + + + + + + + +
+ +
+ +
+
+
+ BG hero image +
+
+ +
+

+ Unlimited Movies TV,
+ Shows and More. +

+

Watch anywhere and 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. +

+
+
+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/netflix clone/netflix clone/script.js b/netflix clone/netflix clone/script.js new file mode 100644 index 0000000..4450f83 --- /dev/null +++ b/netflix clone/netflix clone/script.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"; + } + }); +} \ No newline at end of file diff --git a/netflix clone/netflix clone/style.css b/netflix clone/netflix clone/style.css new file mode 100644 index 0000000..4ebc971 --- /dev/null +++ b/netflix clone/netflix clone/style.css @@ -0,0 +1,522 @@ +* { + 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; +} + +.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 25rem; + 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) { +} \ No newline at end of file