diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3b66410 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "git.ignoreLimitWarning": true +} \ No newline at end of file diff --git a/FAQ.html b/FAQ.html new file mode 100644 index 0000000..2e3a266 --- /dev/null +++ b/FAQ.html @@ -0,0 +1,357 @@ + + + + + + What is Netflix? | Netflix Help Center + + + + + + + + + + + + + + + + + + +
+ + + + +
+ +
+ + + + + + +
+
+ + + + +
+
+
+ + +
+
+
+ + +
+ +
+ +
+

What is Netflix?

+
+ +
+ +
+

Netflix is a subscription-based streaming service that allows our members to watch TV shows and movies on an internet-connected device.

+ +

Depending on your plan, you can also download TV shows and movies to your iOS, Android, or Windows 10 device and watch without an internet connection.

+ +

If you're already a member and would like to learn more about using Netflix, visit Getting started with Netflix.

+
+
+ +
+ +
+

TV Shows & Movies

+
+ +
+ +
+ +

Netflix content varies by region and may change over time. You can watch a variety of award-winning Netflix originals, TV shows, movies, documentaries, and more.

+ + +

The more you watch, the better Netflix gets at recommending TV shows and movies.

+ +
+
+ +
+ +
+

Supported Devices

+
+ +
+ +
+ +

You can watch Netflix through any internet-connected device that offers the Netflix app, including smart TVs, game consoles, streaming media players, set-top boxes, smartphones, and tablets. You can also watch Netflix on your computer using an internet browser. You can review the system requirements for web browser compatibility, and check our internet speed recommendations to achieve the best performance.

+ +

NOTE:A small percentage of devices may not be supported by all plans.

+ +

Need help getting set up? Search our Help Center for the manufacturer of the device you're using.

+ +

NOTE:The Netflix app may come pre-loaded on certain devices, or you may need to download the Netflix app onto your device. Netflix app functionality may differ between devices.

+ +
+
+ +
+ +
+

Plans and Pricing

+
+ +
+ +
+ +

Each Netflix Plan determines the number of devices you can watch Netflix on at the same time and whether you can watch in High Definition (HD), Full High Definition (FHD), or Ultra High Definition (UHD).

+ + +

You can change your plan or cancel online at any time.

+ +
+
+ +
+ +
+

Get Started

+
+ +
+ +
+ +

To start watching Netflix:

+ +
    +
  1. Visit netflix.com/signup.
    2. +
  2. Choose a Plan.
    3. +
  3. Create an account by entering your email address and creating a password.
    4. +
  4. Enter a payment method.
    5. +
+ +

As a Netflix member, you are charged once a month on the date you signed up.

+ +
+ +
+ +

Was this article helpful? YesNo

+ +
+ +

Need more help? Contact Us

+
+ +
+ + + +
+
+
+
+
Related Articles
+ +
+ +
+
+
+
+
+ +
+ +
+
+ + + + + + + + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/css/FAQ.css b/css/FAQ.css new file mode 100644 index 0000000..97661e6 --- /dev/null +++ b/css/FAQ.css @@ -0,0 +1,119 @@ + +*{ + margin: 0; + padding: 0; + font-family: 'Outfit' !important; + scroll-behavior: smooth !important; + +} +*::selection{ + background-color: #4C4948 !important; + color: white; + +} + +/* navbar starts */ + +.anchorHov:hover{ + text-decoration: underline !important; + color: #000000ab !important; + +} +.anchorBtn:hover{ + border-color: black !important; + background-color: rgb(128 128 128 / 20%) !important; +} + +#signIn:hover{ + background-color: #c11119 !important; +} + +/* navbar ends */ + + +/* searchbar section starts */ + +.searchControlWrapper{ + padding: 2px; + border-radius: 4px; + background: linear-gradient(to right, #e50914 -0.08%, #c94ff5 81.14%, #5b79f1 99.92%); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} +.inputControl{ + padding: 9px 16px 9px 50px; + border-radius: 2px; + border: 1px solid transparent; +} + +.inputControl:focus{ + border-color: transparent; + outline: transparent; +} + +/* searchbar section ends */ + +/* main content starts */ + +.leftPane{ + width: 68%; +} + +.thinAnchor{ + text-decoration: none; + color: #e50914; +} +.thinAnchor:hover{ + text-decoration: underline; +} + +.contactBtn:hover{ + background-color: rgb(0 0 0 / 70%) !important; +} + +.rightPane{ + width: calc(100% - 68%); +} + +.articleTopics{ + border-top: 6px solid #e50914; +} +/* main content ends */ + + +/* footer starts */ + +.footer{ + background-color: #fafafa; +} +#lang-switcher{ + appearance: none; + -webkit-appearance: none; + color: #8b8a88; + font-size: 1.1rem; +} +#lang-switcher:focus{ + outline: none !important; +} + +.select{ + max-width: 12rem !important; + border: 1px solid #8b8a88 !important; + accent-color: #8b8a88 !important; + transition: all 0.3s ease; +} + +.select:hover{ + background-color: #8b8a88; +} + +.select:hover select{ + color: #ffffff !important; +} +.select:hover select > option{ + color: rgb(0, 0, 0) !important; +} +.select:hover #downArrow > path{ + fill: white; +} + +/* footer ends */ \ No newline at end of file diff --git a/css/help.css b/css/help.css new file mode 100644 index 0000000..4d522fc --- /dev/null +++ b/css/help.css @@ -0,0 +1,203 @@ + +*{ + margin: 0; + padding: 0; + font-family: 'Outfit' !important; + scroll-behavior: smooth !important; + +} +*::selection{ + background-color: #4C4948 !important; + color: white; + +} + +/* navbar starts */ + +.anchorHov:hover{ + text-decoration: underline !important; + color: #000000ab !important; + +} +.anchorBtn:hover{ + border-color: black !important; + background-color: rgb(128 128 128 / 20%) !important; +} + +#signIn:hover{ + background-color: #c11119 !important; +} + +/* navbar ends */ + + +/* searchbar section starts */ + +.searchControlWrapper{ + padding: 2px; + border-radius: 4px; + background: linear-gradient(to right, #e50914 -0.08%, #c94ff5 81.14%, #5b79f1 99.92%); + box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; +} +.inputControl{ + padding: 9px 16px 9px 50px; + border-radius: 2px; + border: 1px solid transparent; +} + +.inputControl:focus{ + border-color: transparent; + outline: transparent; +} + +.search-section p, .search-section p > a{ + color: rgb(0 0 0 / 70%) !important; +} + +.search-section p > a:hover{ + color: rgb(0, 0, 0) !important; +} + + +/* searchbar section ends */ + + +/* help center search starts */ + +#radialBg{ + background: radial-gradient(300% 100% at center top, rgba(169, 185, 250, 0.15) 0%, rgba(251, 251, 251, 0) 25%) !important; +} + +/* help center search ends */ + + +/* main content starts */ + +.anchorLine:hover{ + text-decoration: underline !important; +} +.anchorLine:hover .arrowDown > svg{ + animation: bounce 0.8s linear; +} + +@keyframes bounce{ + 25%{ + transform: translateY(10px); + } + 50%{ + transform: translateY(0px); + } + 75%{ + transform: translateY(10px); + } + 100%{ + transform: translateY(0px); + } +} + +.formFixed{ + max-width: 600px; + +} + +.fixedSearcBar{ + z-index: 100; + opacity: 0; + transform: translateY(-100%); + transition: all 0.2s; +} + +#fixedSearcBar.showSearchBar{ + position: fixed; + opacity: 1; + transform: translateY(0%); +} + +#columMain{ + max-width: 38rem; +} + + + + +/* main content ends */ + + + + + + +/* accordion starts */ + +.accoHelp{ + border: 1px solid rgb(128 128 128 / 40%); +} + + +.accordion-button:not(.collapsed) { + color: var(--bs-accordion-active-color); + background-color: transparent !important; +} + +.accordion-button:focus{ + z-index: 3; + border-color: transparent; + outline: 0; + box-shadow: none !important; +} +/* accordion ends */ + + +/* quick links */ + +.contactBtn:hover{ + background-color: rgb(0 0 0 / 70%) !important; +} + +@media only screen and (max-width: 624px){ + #quickLinks{ + padding: 0 20px !important; + } +} + +/* quick links */ + + + +/* footer starts */ + +.footer{ + background-color: #fafafa; +} +#lang-switcher{ + appearance: none; + -webkit-appearance: none; + color: #8b8a88; + font-size: 1.1rem; +} +#lang-switcher:focus{ + outline: none !important; +} + +.select{ + max-width: 12rem !important; + border: 1px solid #8b8a88 !important; + accent-color: #8b8a88 !important; + transition: all 0.3s ease; +} + +.select:hover{ + background-color: #8b8a88; +} + +.select:hover select{ + color: #ffffff !important; +} +.select:hover select > option{ + color: rgb(0, 0, 0) !important; +} +.select:hover #downArrow > path{ + fill: white; +} + +/* footer ends */ \ No newline at end of file diff --git a/css/media.css b/css/media.css new file mode 100644 index 0000000..bf0b346 --- /dev/null +++ b/css/media.css @@ -0,0 +1,764 @@ + +*{ + margin: 0; + padding: 0; + font-family: 'Outfit' !important; + scroll-behavior: smooth !important; + +} +*::selection{ + background-color: #4C4948 !important; + color: white; + +} +html{ + background-color: rgb(22, 22, 22); +} + +/* header starts */ + +#mainBg{ + background-color: #23232338 !important; +} + +#header{ + z-index: 100; + background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(22, 22, 22) 100%); +} + +.navRight button:focus{ + border-color: transparent !important; + outline: none; +} +.navRight button:hover{ + background-color: rgb(255 255 255 / 10%); +} + +.navRight button span{ + font-size: 15px; +} + +.textSymbol{ + font-family: monospace !important; + font-size: 12px !important; +} + +.signin:hover{ + background-color: rgb(168, 4, 12) !important; +} + +.anchorBtn:hover{ + background-color: rgb(255 255 255 / 10%) !important; +} + +#blackSearchBar{ + height: 80px; + width: 0%; + transition: all 0.5s ease; +} +#blackSearchBar input:focus{ + border: 0; + outline: 0; +} + +#svgSearch, #closeBtn{ + cursor: pointer !important; + transition: all 0.5s ease; +} + +.sBtn{ + color: white; + width: 8% !important; + height: 100%; + border: none; + cursor: pointer; + outline: none; + background: none; + display: none; +} + +.sBtn.opacityShow{ + display: inline-block; +} + +.sBtn:hover{ + background-color: transparent !important; +} + +@media only screen and (min-width: 1280px){ + .blackSearchBar{ + box-shadow: inset 0 -1px 0 rgb(41, 58, 127) !important; + background-color: rgb(35, 35, 35) !important; + } +} + +#englishDropdown{ + z-index: 15 !important; + opacity: 0; + transform: translateY(-100%); + transition: all 0.8s ease; +} + +#langHeader{ + + background-color: rgb(35, 35, 35) !important; + padding: 130px 20px 30px 20px !important; +} + +.languageList{ + max-height: 24rem !important; + max-width: 1028px; + width: 100%; +} + +.languageList > a{ + text-decoration: none; + color: white; + padding: 1em 2em 1em calc(3em + 17px); + font-size: 14px; + font-weight: lighter; + position: relative !important; + display: flex; + justify-content: flex-start; +} +.languageList > a.paddingShow{ + padding: 1em 2em; +} +.languageList > a:hover{ + background-color: rgb(255 255 255 / 10%); + +} + +.langBtnClose{ + transition: all 0.5s ease; +} + +.langBtnClose:hover{ + background-color: rgb(255 255 255 / 10%) !important; +} +.langBtnClose:focus{ + border-color: transparent !important; +} + +#langListMain{ + background-color: rgb(22, 22, 22); +} + +#tickMark{ + margin-right: 1em; + opacity: 0; +} +#tickMark.tickShow{ + opacity: 1; +} + + + +#countryDropdown{ + z-index: 10; + opacity: 0; + transform: translateY(-100%); + transition: all 0.8s ease; +} + +#countHeader{ + background-color: rgb(35, 35, 35); + padding: 130px 20px 30px 20px !important; +} + +#countMain{ + display: flex; + justify-content: center; + align-items: center; + background-color: rgb(22, 22, 22); +} + + +.countInner{ + width: 100%; + display: flex !important; + justify-content: center !important; + flex-direction: column; + gap: 2px; + padding: 50px 0 80px; + background-image: url(/img/country-select-background\ \(1\).svg); + background-size: contain; + background-repeat: no-repeat; + background-position-x: 80%; + background-position-y: bottom; +} + +.countSelect{ + width: 36%; + padding: 8px; + border: 1px solid #ffffff33; + background-color: rgb(255 255 255 / 4%); + cursor: pointer; +} + +.countSelect:focus{ + border-color: transparent !important; + outline: 2px solid #4969E4 !important; +} +.countrySelector{ + width: 25rem; + border: 1px solid rgb(255 255 255 / 4%); + background-color: rgb(35, 35, 35); + margin-top: 3rem; + display: none; +} + +.countrySelector.active{ + display: block; +} + +.countList{ + max-height: 20rem; + overflow-y: scroll; +} +.countSearch > form{ + padding: 5px 10px; + border-bottom: 1px solid rgb(255 255 255 / 20%); +} + + +.countInput:focus{ + outline: none !important; +} + +#countUl > li{ + padding: 8px; + font-weight: 100; + font-size: 14px; +} + +.innerList{ + transition: all 0.3s ease; +} + +.innerList.selected{ + background-color: rgb(255 255 255 / 10%); +} + +.innerList:hover{ + background-color: rgb(255 255 255 / 10%); +} + + +/* header ends */ + +/* hero starts */ + +.heroSection{ + width: 100%; + background-image: url(../img/streams-bg.png); + background-repeat: repeat-y; + background-size: 100%; +} + +#heroSectionInner{ + max-width: 35rem; + padding: 128px 16px 48px 16px !important; +} + +/* searchbar section starts */ + +.searchControlWrapper{ + border-radius: 4px; +} +.inputControl{ + padding: 7px 16px 7px 40px; + border-radius: 2px; + border: 1px solid #ffffff33; +} + +.inputControl::placeholder{ + color: rgba(255, 255, 255, 0.637); + font-size: 14px; +} + +.inputControl:focus{ + border-color: transparent; + outline: 2px solid #4969E4; +} + + +.search-section p, .search-section p > a{ + color: rgb(0 0 0 / 70%) !important; +} + +.search-section p > a:hover{ + color: rgb(0, 0, 0) !important; +} + + +#resDrop{ + width: 12rem; + max-width: 12rem !important; + background-color: rgb(45, 45, 45); + overflow: hidden; + top: 40px; + margin-left: -50px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.644); + display: none; +} + +#resDrop.resShow{ + display: block; +} + +#resDrop ul li:hover{ + background-color: rgb(255 255 255 / 10%); +} + +/* searchbar section ends */ + + +#filmSection{ + background-color: rgb(22, 22, 22); + border-bottom: 1px solid #ffffff33; +} + +.monthBtn:hover{ + background-color: rgb(255 255 255 / 10%) !important; +} +.monthBtn:focus{ + outline: 2px solid #4969E4 !important; +} +.monthBtn:focus #chevDown{ + transform: rotate(180deg); +} + +#monthList{ + background-color: #232323; + top: -12rem; + left: -1rem; + width: 9rem; + max-width: 9rem; + z-index: 500; + display: none; +} + +#monthList.monthListShow{ + display: block; +} + +#monthList ul li:hover{ + background-color: rgb(255 255 255 / 10%) !important; +} +#monthList ul li:hover #tickMark{ + opacity: 1; +} + +.filmText{ + color: #ececec; + font-size: 14px; +} + +#filmBtn{ + transition: all 0.3s ease; +} +#filmBtn:hover{ + background-color: rgb(57, 82, 177) !important; +} +/* hero ends */ + +/* cards starts */ + +#cardMain{ + background-color: rgb(22, 22, 22); +} + +#card{ + width: 15rem; + transition: all 0.5s ease; +} +#card:hover{ + transform: scale(1.05); +} +.cardR{ + width: 16.8rem; +} +.cardText{ + font-size: 14px; +} +/* cards ends */ + +#showHide{ + display: none; +} + +#showHide.visible{ + display: block; +} +#showHide2{ + display: none; +} + +#showHide2.visible{ + display: block; +} + + +#showMoreBtn{ + border: 1px solid rgb(255 255 255 / 40%); + font-size: 14px; + color: rgb(255, 255, 255); + transition: all 0.3s ease; +} +#showMoreBtn:hover{ + background-color: rgb(255 255 254 / 10%) !important; +} +#showMoreBtn2{ + border: 1px solid rgb(255 255 255 / 40%); + font-size: 14px; + color: rgb(255, 255, 255); + transition: all 0.3s ease; +} +#showMoreBtn2:hover{ + background-color: rgb(255 255 254 / 10%) !important; +} + +#febCard, #marchCard{ + animation: fadeIn 1s linear; +} + +@keyframes fadeIn{ + 0%{ + opacity: 0; + transform: translateY(10px); + } + 100%{ + opacity: 1; + transform: translateY(0); + } +} + +#febCard{ + display: none; +} + +#span1{ + display: block; +} + +#span2{ + display: none; +} +#span3{ + display: block; +} + +#span4{ + display: none; +} + +#navbar-toggler{ + border: none; +} +#navbar-toggler:focus{ + box-shadow: none; +} + + +@media only screen and (max-width: 430px){ + #nav2Logo{ + max-width: 50% !important; + } + #mc{ + font-size: 0.5rem; + } +} +@media only screen and (min-width: 1280px){ + #sideBar{ + display: none !important; + } + #blackSearchBarMedia{ + display: none !important; + } +} +@media only screen and (max-width: 1280px){ + #navRight{ + display: none !important; + } + + #navbar-toggler{ + display: inline-block !important; + } + #blackSearchBar{ + display: none !important; + } +} + +#blackSearchBarMedia{ + background-color: transparent; + height: 90px; + width: 0%; + backdrop-filter: blur(5px); + transition: all 0.5s ease; + right: 80px !important; + opacity: 0; +} +#blackSearchBarMedia input:focus{ + border: 0; + outline: 0; +} +#blackSearchBarMedia input::placeholder{ + color: rgba(255, 255, 255, 0.726); + font-weight: lighter !important; +} + + + + +#blackSearchBarMedia2{ + background-color: transparent; + height: 100%; + width: 100%; + backdrop-filter: blur(5px); + transition: all 0.5s ease; + top: 0; +} +#blackSearchBarMedia2 input:focus{ + border: 0; + outline: 0; +} +#blackSearchBarMedia2 input::placeholder{ + color: rgba(255, 255, 255, 0.726); + font-weight: lighter !important; +} + +/* .sBtn2{ + color: white; + width: 8% !important; + height: 100%; + border: none; + cursor: pointer; + outline: none; + background: none; + display: none; +} + +.sBtn2.opacityShow2{ + display: inline-block !important; +} + +.sBtn2:hover{ + background-color: transparent !important; +} */ + +#svgSearch2, #closeBtn{ + cursor: pointer !important; + transition: all 0.5s ease; +} + +#blbmMain{ + display: none !important; +} + +@media only screen and (min-width: 991px){ + #sideBar{ + width: 50% !important; + } + #blbmMain{ + display: block !important; + } +} + +@media only screen and (max-width: 400px){ + #sideBar{ + width: 100% !important; + } +} + +@media only screen and (max-width: 992px){ + #navRight{ + display: none !important; + } + + #navbar-toggler{ + display: inline-block !important; + } + #navBar{ + display: none !important; + } + #navBarTwo{ + display: block !important; + } + #closeSideInner{ + display: inline-block !important; + } +} + +#closeSideInner{ + display: none; +} + +#navBarTwo{ + display: none; + background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(22, 22, 22) 100%); +} + +/* sidebar starts */ + +#sideBar{ + z-index: 500; + pointer-events: none; + transform: translateX(-100%); + transition: all 0.5s ease; +} + +#openSide{ + display: inline-block; +} + +#closeSide{ + display: none; +} + +.sideBar{ + width: 400px; + max-width: 100% !important; + height: 100vh !important; + pointer-events: all; + background-color: rgb(22, 22, 22); +} + +.sideBtn{ + font-size: 14px; + border: 1px solid rgb(255 255 255 / 40%); + transition: all 0.3s ease; +} + +.sideBtn, .sideBtn > span{ + text-overflow: ellipsis !important; + white-space: nowrap !important; + overflow: hidden !important; +} +.sideBtn:hover{ + background-color: rgb(255 255 254 / 10%) !important; +} + +.sideButtons, .sideListItems{ + border-bottom: 1px solid rgb(255 255 255 / 20%); +} + +.sideListItems{ + font-size: 18px; +} + +/* sidebar ends */ + + +/* latestNews starts */ + +#latestNewsMain{ + background-color: #232323; + +} + +#latestNewsMainInner{ + overflow: auto; +} + +#boxMain{ + min-width: 1200px; +} + +.box{ + width: calc(35% - 3rem) !important; + height: 19rem; + background-image: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(5, 5, 5, 0.67) 44.01%, rgba(15, 15, 15, 0) 100%), url(https://images.ctfassets.net/4cd45et68cgf/1dfMR0nteyJACp2f4nCYcQ/24a5dc4ce5def971c1a559d42b69b09b/Netflix_Entertainment_Evergreen_2.jpg?w=552&h=367); + background-repeat: no-repeat; + background-size: cover; + background-position: left; + min-height: 312px; + box-shadow: 0 0 15px black; + padding: 0 36px; + display: flex; + align-items: center; + +} + +.vr{ + background-color: rgb(255 255 255 / 20%); +} +.vr { + display: inline-block; + align-self: stretch; + margin-top: -1rem; + width: 1px; + height: 21rem; + background-color: rgb(255 255 255 / 20%) !important; + opacity: 1 !important; +} + +.rmAnchor{ + background-color: transparent; + border: 1px solid rgb(255 255 255 / 40%) !important; + color: white !important; + font-weight: lighter !important; + font-size: 12px !important; + padding: 12px 15px !important; +} +.rmAnchor:hover{ + background-color: rgb(255 255 255 / 10%) !important; +} + +.newRmAnchor{ + font-size: 14px !important; +} +/* latestNews ends */ + + +/* company assets starts */ + +#assetsOuter{ + background-image: url(../img/company_assets_bg.png); + background-repeat: no-repeat; + background-position: center center; + background-size: cover; +} + +#assetsMain{ + padding: 80px 10% 80px !important; + background: linear-gradient(270deg, #0F0F0F 15.47%, rgba(15, 15, 15, 0.731185) 49%, rgba(15, 15, 15, 0.34) 75.16%); + +} + +.goAnchor{ + font-size: 15px !important; +} + +/* company assets ends */ + + +/* footer starts */ + +#footMain{ + background-color: rgb(22, 22, 22); +} +#footSpan{ + font-size: 12px; + color: rgb(255 255 255 / 70%) !important; +} + +#footerUl li a{ + font-size: 15px !important; + /* font-weight: 300 !important; */ +} + +@media only screen and (max-width: 575px){ + #footer{ + display: flex; + flex-direction: column; + gap: 10px; + } + #colThreeFoot{ + display: flex; + flex-direction: column; + width: 100%; + } +} + +/* footer ends */ \ No newline at end of file diff --git a/css/signIn.css b/css/signIn.css new file mode 100644 index 0000000..c032ee0 --- /dev/null +++ b/css/signIn.css @@ -0,0 +1,218 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Outfit' !important; + scroll-behavior: smooth !important; +} + +*::selection{ + background-color: #4C4948 !important; + color: white; + +} + +#mainBg{ + height: 100%; + width: 100%; + min-height: 100vh; + background-size: cover; + background-image: cover; + overflow: hidden; +} + +#signInner{ + min-height: 650px; +} + +#collapseDown{ + visibility: hidden; +} + +.form-control{ + border: 1px solid rgb(94,96,96) !important; + overflow: hidden !important; +} + +.form-control::placeholder{ + user-select: none !important; +} + +#inpLabel{ + color: #B4B4B4 !important; + width: 80%; + +} + + + +.form-control:focus { + color: #ffffff !important; + background-color: transparent !important; + border-color: #ffffff !important; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(252, 252, 252, 0.349) !important; +} + +.form-floating>.form-control:focus~label { + font-size: 0.8rem !important; + font-weight: 100 !important; +} + +.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after { + position: absolute; + inset: 1rem 0.2rem; + z-index: -1; + height: 1.5em; + content: ""; + background-color: transparent !important; +} + +.cbx { + position: relative; + top: 1px; + width: 20px; + height: 20px; + border: 1px solid #c8ccd4; + border-radius: 3px; + transition: all 0.1s ease; + cursor: pointer; + display: block; + } + + .cbx:after { + content: ''; + position: absolute; + top: 3px; + left: 7px; + width: 5px; + height: 10px; + opacity: 0; + transform: rotate(45deg) scale(0); + border-right: 2px solid black; + border-bottom: 2px solid black; + transition: all 0.1s ease; + } + + .lbl { + margin-left: 5px; + vertical-align: middle; + cursor: pointer; + } + + #cbx:checked ~ .cbx { + border-color: transparent; + background: white; + } + + #cbx:checked ~ .cbx:after { + opacity: 1; + transform: rotate(45deg) scale(1); + } + + .cntr { + position: relative; + } + + + + .hidden-xs-up { + display: none!important; + } + + .anchorHov:hover{ + text-decoration: underline !important; + } + +footer{ + height: calc(100% - 760.5625px); +} + + +#footerUl li:active > a{ + color: red !important; +} + +#langDrop2.langDropShow2{ + position: absolute; + display: block !important; +} + +.langActive{ + font-weight: bold; + background-color: rgb(216, 216, 216); + +} + +footer #langDrop2{ + min-width: 8.8rem !important; + max-width: 8.8rem !important; +} + +/* #langDrop2{ + top: -220%; +} */ + +footer .col-3 { + flex: 0 0 auto; + width: 50.5%; +} + +@media only screen and (min-width: 600px) { + #signInner{ + max-width: 450px !important; + } + + #mainBg .bgImg{ + min-height: 100%; + min-width: 100%; + + } + .form-floating #inpLabel{ + font-size: 1rem; + text-overflow: ellipsis !important; + white-space: nowrap !important; + + } +} +@media only screen and (max-width: 600px) { + #bgImg{ + opacity: 0 !important; + } + + #signInner{ + max-width: 100% !important; + padding: 0 !important; + margin-bottom: 0 !important; + border-bottom: 1px solid #B4B4B4; + justify-content: start !important; + min-height: 600px; + } + +} + +@media only screen and (max-width: 1280px) { + #navbar{ + padding: 0 !important; + } + #navbarInner{ + margin: 0 16px !important; + padding-left: 0 !important; + padding-right: 0 !important; + } +} +@media only screen and (max-width: 900px) { + #navbarBrand img{ + width: 7rem !important; + } + +} +@media only screen and (max-width: 1000px) { + #footerUl li{ + width: 50% !important; + } + #footCont, #footInner{ + padding: 0 !important; + } + +} + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..fc75414 --- /dev/null +++ b/css/style.css @@ -0,0 +1,274 @@ + + +*{ + margin: 0; + padding: 0; + font-family: 'Outfit' !important; + scroll-behavior: smooth !important; +} + +*::selection{ + background-color: #4C4948 !important; + color: white; + +} +/* navbar starts */ + +header{ + z-index: 5; +} + +.buttonDiv button{ + font-size: 13px !important; +} + + +#langDrop.langDropShow{ + position: absolute; + display: block !important; +} + +#langDrop{ + min-width: 3rem !important; + max-width: 8.8rem !important; +} + +.langActive{ + font-weight: bold; + background-color: rgb(216, 216, 216); + +} + +.buttonDiv button{ + font-size: 18px !important; + font-weight: bold; +} + +.buttonDiv{ + max-width: 100% !important; + /* height: 2rem !important; */ + /* font-size: 0.5rem !important; */ +} + + + +@media only screen and (max-width: 200px){ + + .navbar-brand img{ + width: 100% !important; + } +} +@media only screen and (max-width: 800px){ + + .navbar-brand{ + width: 40% !important; + } + #mail{ + flex-wrap: wrap !important; + } +} +@media only screen and (max-width: 600px){ + #langSpan{ + display: none; + } + .buttonDiv #langBtn{ + padding: 0.5rem !important; + } + #header{ + padding-left: 1.2rem !important; + padding-right: 1.2rem !important; + } + #langDrop{ + font-size: 0.6rem !important; + } + +} +@media only screen and (max-width: 1280px){ + #navbar{ + padding-left: 0 !important; + padding-right: 0 !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + + .navbar-brand img{ + max-width: 100% !important; + } +} + + +#langBtn .dropdown-toggle::after { + font-size: 1rem !important; +} + +/* navbar ends */ + + +/* hero starts */ + +.hero-section{ + min-height: 43rem; +} +.hero-backGround{ + min-height: 43rem !important; +} + +.hero-backGround img{ + height: 100%; + width: 100%; + object-position: center; + object-fit: cover; + position: absolute; + transform: scale(1.25) translateY(-9.5%); +} + +.hero-title{ + height: 100% !important; + width: 100% !important; + background: linear-gradient(180deg, #000000de, #00000060, #000000de); +} +.form-control{ + border: 1px solid rgb(94,96,96) !important; +} + +.form-control::placeholder{ + user-select: none !important; +} + +.inpLabel{ + color: #B4B4B4 !important; +} + +.form-control:focus { + color: #ffffff !important; + background-color: transparent !important; + border-color: #ffffff !important; + outline: 0; + box-shadow: 0 0 0 0.2rem rgba(252, 252, 252, 0.349) !important; +} + +.form-floating>.form-control:focus~label { + font-size: 0.8rem !important; + font-weight: 100 !important; +} + +.form-floating>.form-control-plaintext~label::after, .form-floating>.form-control:focus~label::after, .form-floating>.form-control:not(:placeholder-shown)~label::after, .form-floating>.form-select~label::after { + position: absolute; + inset: 1rem 0.2rem; + z-index: -1; + height: 1.5em; + content: ""; + background-color: transparent !important; +} + +.getStarted{ + font-weight: bold !important; + background-color: rgb(229, 9, 20) !important; +} + + +/* hero ends */ + + +/* tv section starts */ + +@media only screen and (max-width: 992px){ + #boxTitle{ + text-align: center !important; + } +} + +/* tv section ends */ + + +/* accordion section starts */ + +.accordionInner{ + background-color: #2D2D2D; + color: white; + font-weight: 500; + cursor: pointer; + transition: 0.3s ease; +} + +.accordionInner:hover{ + background-color: #414141; +} +.accordCollapse{ + border-top: 2px solid black; + background-color: #2D2D2D; + color: white !important; + font-weight: 400; + transition: all 0.5s ease; + display: none; + padding: 1rem; +} +.accordionMain.accoShow .accordCollapse{ + display: block; + +} + + +@media only screen and (max-width: 450px){ + .accordionMain span, .accordCollapse p{ + font-size: 1rem !important; + } +} + +@media only screen and (max-width: 250px){ + .accordionMain span, .accordCollapse p{ + font-size: 0.8rem !important; + } +} +@media only screen and (max-width: 768px){ + #mail{ + flex-direction: column !important; + } + + #mail .form-floating{ + width: 100% !important; + } +} +/* accordion section end */ + + +/* footer starts */ + +#footerUl li:active > a{ + color: red !important; +} + +#langDrop3.langDropShow3{ + position: absolute; + display: block !important; +} + +.langActive3{ + font-weight: bold; + background-color: rgb(216, 216, 216); + +} + +footer #langDrop3{ + min-width: 8.8rem !important; + max-width: 8.8rem !important; +} + +footer .col-3 { + flex: 0 0 auto; + width: 50.5%; +} + + +@media only screen and (max-width: 1000px) { + #footerUl li{ + width: 50% !important; + } + #footCont, #footInner{ + padding: 0 !important; + } + +} +/* footer ends */ + + diff --git a/desktop.ini b/desktop.ini new file mode 100644 index 0000000..7f42279 --- /dev/null +++ b/desktop.ini @@ -0,0 +1,6 @@ +[.ShellClassInfo] +IconResource=C:\Users\MY PC\Downloads\fav-icon.ico,0 +[ViewState] +Mode= +Vid= +FolderType=Generic diff --git a/help.html b/help.html new file mode 100644 index 0000000..67975dc --- /dev/null +++ b/help.html @@ -0,0 +1,1090 @@ + + + + + + Netflix Help Center + + + + + + + + + + + + + + + + + + +
+ + + + +
+ +
+ + + + + +
+
+
+ + +
+
+
+ + + + +
+ + + +
+
+
+ +
+
+ + + + + + + + +
+ + +
Explore Topics
+

+ + +
+ + + + + + + +
+ + +
+
+ + + Account and Billing +
+ + +
+
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

+
+
+ +
+
+
+
+
+ + + + + + +
+
+ + + Fix a Problem +
+ + +
+
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

+ +
+ + +
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

+ +
+
+
+ + + + + + +
+
+ + + Watching and Playing +
+ + +
+
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

+ +
+ + +
+

+ +

+ +
+ +
+

+ +

+
+
+ +
+
+
+
+
+ + + + + +
+
+ + + Getting Started +
+ + +
+
+

+ +

+
+
+ +
+
+
+ + +
+

+ +

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

Need more help?

+ Contact Us +
+
+ + + + +
+ + + +
+
+ +
+ + + + + +
+ +
+ +
+
+
+
+ + + + + +
+ + + + + + + \ No newline at end of file diff --git a/help.js b/help.js new file mode 100644 index 0000000..6594b68 --- /dev/null +++ b/help.js @@ -0,0 +1,17 @@ + +var searchBar = document.getElementById("searchBar"); +var fixedSearchBar = document.getElementById("fixedSearcBar"); + +var formSearchBar = document.getElementById('formSearchBar'); +var fixed = formSearchBar.offsetTop; + +console.log(fixed) + +window.addEventListener("scroll", () =>{ + if (window.pageYOffset > fixed){ + fixedSearchBar.classList.add("showSearchBar"); + } + else{ + fixedSearchBar.classList.remove("showSearchBar"); + } +}) \ No newline at end of file diff --git a/img/apple-icon-57x57.png b/img/apple-icon-57x57.png new file mode 100644 index 0000000..12e6cbf Binary files /dev/null and b/img/apple-icon-57x57.png differ diff --git a/img/bg2.jpg b/img/bg2.jpg new file mode 100644 index 0000000..bf08435 Binary files /dev/null and b/img/bg2.jpg differ diff --git a/img/boxshot.png b/img/boxshot.png new file mode 100644 index 0000000..be67e56 Binary files /dev/null and b/img/boxshot.png differ diff --git a/img/children.png b/img/children.png new file mode 100644 index 0000000..3c87f0f Binary files /dev/null and b/img/children.png differ diff --git a/img/company_assets_bg.png b/img/company_assets_bg.png new file mode 100644 index 0000000..a6b21e6 Binary files /dev/null and b/img/company_assets_bg.png differ diff --git a/img/country-select-background (1).svg b/img/country-select-background (1).svg new file mode 100644 index 0000000..11cd4c7 --- /dev/null +++ b/img/country-select-background (1).svg @@ -0,0 +1,3 @@ + + + diff --git a/img/download-icon.gif b/img/download-icon.gif new file mode 100644 index 0000000..a894717 Binary files /dev/null and b/img/download-icon.gif differ diff --git a/img/fav-icon.png b/img/fav-icon.png new file mode 100644 index 0000000..fa0cce9 Binary files /dev/null and b/img/fav-icon.png differ diff --git a/img/forgotpass.jpg b/img/forgotpass.jpg new file mode 100644 index 0000000..98ae4b3 Binary files /dev/null and b/img/forgotpass.jpg differ diff --git a/img/getstarted.png b/img/getstarted.png new file mode 100644 index 0000000..b1d3924 Binary files /dev/null and b/img/getstarted.png differ diff --git a/img/hero-bg.jpg b/img/hero-bg.jpg new file mode 100644 index 0000000..ae90d78 Binary files /dev/null and b/img/hero-bg.jpg differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..f9d58ae Binary files /dev/null and b/img/logo.png differ diff --git a/img/macbook.png b/img/macbook.png new file mode 100644 index 0000000..50a87f7 Binary files /dev/null and b/img/macbook.png differ diff --git a/img/mobile.jpg b/img/mobile.jpg new file mode 100644 index 0000000..00c8f01 Binary files /dev/null and b/img/mobile.jpg differ diff --git a/img/movietiles/AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg b/img/movietiles/AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg new file mode 100644 index 0000000..3a900d2 Binary files /dev/null and b/img/movietiles/AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg differ diff --git a/img/plans&pricing.png b/img/plans&pricing.png new file mode 100644 index 0000000..017d20a Binary files /dev/null and b/img/plans&pricing.png differ diff --git a/img/plus.png b/img/plus.png new file mode 100644 index 0000000..afadb21 Binary files /dev/null and b/img/plus.png differ diff --git a/img/signinBg.jpg b/img/signinBg.jpg new file mode 100644 index 0000000..f2d7e51 Binary files /dev/null and b/img/signinBg.jpg differ diff --git a/img/streams-bg.png b/img/streams-bg.png new file mode 100644 index 0000000..a65bd42 Binary files /dev/null and b/img/streams-bg.png differ diff --git a/img/supporteddevice.png b/img/supporteddevice.png new file mode 100644 index 0000000..e2ec675 Binary files /dev/null and b/img/supporteddevice.png differ diff --git a/img/tv&movies.png b/img/tv&movies.png new file mode 100644 index 0000000..e3a82c3 Binary files /dev/null and b/img/tv&movies.png differ diff --git a/img/tv.png b/img/tv.png new file mode 100644 index 0000000..31c0a25 Binary files /dev/null and b/img/tv.png differ diff --git a/img/whatisnetflix.png b/img/whatisnetflix.png new file mode 100644 index 0000000..64ba1d9 Binary files /dev/null and b/img/whatisnetflix.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..9dfdd1b --- /dev/null +++ b/index.html @@ -0,0 +1,373 @@ + + + + + + Netflix India - Watch TV Shows Online, Watch Movies Online | Khushboo Coding + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + + + + +
+
+ +
+
+

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.

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

Download your shows to watch offline

+

Save your favourites easily and always have something to watch.

+
+ + +
+ + + +
+ + + +
+
Stranger Things
+
Downloading...
+
+ + + + +
+
+ + +
+
+
+
+ + + + + + + +
+
+
+
+ +
+

Watch Everywhere

+

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

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

Create profiles for kids

+

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

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

frequently asked questions

+ +
+
+ What is Netflix? + +
+ +
+

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!

+
+
+ +
+
+ How much does Netflix cost? + +
+ +
+

Watch Netflix on your smartphone, tablet, Smart TV, laptop, or streaming device, all for one fixed monthly fee. Plans range from ₹149 to ₹649 a month. No extra costs, no contracts.

+
+
+ +
+
+ Wher can I watch? + +
+ +
+

Watch anywhere, anytime. 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.

+
+
+ +
+
+ How do I cancel? + +
+ +
+

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.

+
+
+ +
+
+ What can I watch on Netflix? + +
+ +
+

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.

+
+
+ +
+
+ Is Netflix good for kids? + +
+ +
+

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.

+
+
+ + +
+ +
+
+
+ + +
+
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + + + \ No newline at end of file diff --git a/media.html b/media.html new file mode 100644 index 0000000..9f23e47 --- /dev/null +++ b/media.html @@ -0,0 +1,1278 @@ + + + + + + Netflix Media Center + + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+
+
What language do you speak? +
+
+
+
+ اللغة العربية + 简体中文 + 繁體中文 + English + Français + Deutsch + Ελληνικά + Bahasa Indonesia + Italiano + 日本語 + 한국어 + polski + Português (Brasil) + Português (Portugal) + română + Español (LatAm) + Español (España) + ไทย + Türkçe +
+
+
+ + + + + + +
+
+
What Country do you cover? +
+
+
+
+

Select a country to see information specific to your coverage region.

+ +
+ India + + +
+
+
+
+ + +
+
+ +
+
    +
  • + + India +
    • + +
  • + + Afghanistan +
    • + +
  • + + Åland Islands +
    • + +
  • + + Albania +
    • + +
  • + + Algeria +
    • + +
  • + + American Samoa +
    • + +
  • + + Andorra +
    • + +
  • + + Bahamas +
    • + +
  • + + Bangladesh +
    • + +
  • + + Belize +
    • + +
  • + + Bermuda +
    • + +
  • + + Bosnia +
    • + +
  • + + Comoros +
    • + +
  • + + Cook Islands +
    • + +
  • + + Costa Rica +
    • + +
  • + + Curaçao +
    • + +
  • + + Czechia +
    • + +
  • + + France +
    • + +
  • + + French Polynesia +
    • + +
  • + + Gambia +
    • + +
  • + + Georgia +
    • + +
  • + + Ghana +
    • + +
  • + + Heard +
    • + +
  • + + Ireland +
    • + +
  • + + Israel +
    • + +
  • + + Italy +
    • + +
  • + + Kenya +
    • + +
  • + + Kyrgyzstan +
    • + +
  • + + Lesotho +
    • + +
  • + + Maldives +
    • + +
  • + + Martinique +
    • + +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + +
+ + + +
+
+

Discover stories and experiences to share with India.

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

I'm interested in covering titles releasing in

+ + + + + +
+ +
+ + + + + + + + + +
+
+
+ + + + + + +
+
+ + +
+
+ +
+ Title +
+

February 2, 2024

+
+
+ +
+ Title +
+

February 2, 2024

+
+
+ +
+
+ Title +
+
+

February 7, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + +
+
+
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+ + + + + +
+ Title +
+

February 8, 2024

+
+
+ +
+ Title +
+

February 8, 2024

+
+
+
+
+ + +
+ +
+ + +
+
+ + +
+
+ +
+ Title +
+

March 2, 2024

+
+
+ +
+ Title +
+

March 2, 2024

+
+
+ +
+ Title +
+

March 7, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + +
+
+
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

+
+
+ + + + + +
+ Title +
+

March 8, 2024

+
+
+ +
+ Title +
+

March 8, 2024

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

Latest News

+
+
+
+
+
+ United States, Global +

True-Crime Docuseries, 'Homicide: New York', From the Creator of 'Law & Order,' Coming to Netflix on March 20

+ Read More +
+
+ +
+ +
+
+ Saudi Arabia, Kuwait, Global +

'Honeymoonish' Brings Together Nour AlGhandour and Mahmoud Boushahri for a Romantic Adventure on Netflix

+ Read More +
+
+ +
+ +
+
+ Global, Sweden, Denmark, Norway +

New Seasons of the Norwegian Hit Drama Series 'Porni 'Will Launch on Netflix

+ Read More +
+
+
+
+ +
+ Read more news in the Newsroom +
+ +
+
+ + + + + + + +
+
+

Looking for company assets?

+

Get more images and information about Netflix on our company site.

+
+ Go to about Netflix +
+ +
+
+ + + + + + + + +
+
+ +
+
+ + + + + + + +
+ + + + + + + \ No newline at end of file diff --git a/media.js b/media.js new file mode 100644 index 0000000..60b1442 --- /dev/null +++ b/media.js @@ -0,0 +1,227 @@ +let svgSearch = document.getElementById('svgSearch'); + +let svgSearch2 = document.getElementById('svgSearch2'); + +let blackSearchBar = document.getElementById("blackSearchBar"); + +let blackSearchBarMedia = document.getElementById("blackSearchBarMedia"); + +let blackSearchBarMedia2 = document.getElementById("blackSearchBarMedia2"); + +let sBtn = document.querySelectorAll(".sBtn"); + + +svgSearch.addEventListener('click', function(){ + blackSearchBar.style.width = "80%"; + blackSearchBar.style.opacity = "1"; + + blackSearchBarMedia.style.width = "60%"; + blackSearchBarMedia.style.opacity = "1"; + + for(var i = 0; i < sBtn.length; i++){ + sBtn[i].classList.add("opacityShow"); + } +}) + +let sBtn2 = document.querySelectorAll(".sBtn2"); +svgSearch2.addEventListener('click', function(){ + + blackSearchBarMedia2.style.width = "100%"; + blackSearchBarMedia2.style.opacity = "1"; + + for(var a = 0; a < sBtn2.length; a++){ + sBtn2[a].classList.add("opacityShow2"); + } +}) + +function closeBtn(){ + blackSearchBar.style.width = "0%"; + blackSearchBar.style.transition = "all 0.3s ease"; + blackSearchBar.style.opacity = "0"; + + blackSearchBarMedia.style.width = "0%"; + blackSearchBarMedia.style.transition = "all 0.3s ease"; + blackSearchBarMedia.style.opacity = "0"; + + blackSearchBarMedia2.style.width = "0%"; + blackSearchBarMedia2.style.transition = "all 0.3s ease"; + blackSearchBarMedia2.style.opacity = "0"; +} + + +function langSelector(){ + let engDropDown = document.getElementById("englishDropdown"); + + engDropDown.style.transform = "translateY(0%)"; + engDropDown.style.opacity = "1"; + countDrop.style.transform = "translateY(-100%)"; + countDrop.style.opacity = "0" + +} + +function closeLangDrop(){ + var engDropDown = document.getElementById("englishDropdown"); + + engDropDown.style.transform = "translateY(-100%)"; + engDropDown.style.opacity = "0"; +} + +let engDropDown = document.getElementById("englishDropdown"); +let langItems = document.querySelectorAll(".langAnchor"); +let langSpan = document.getElementById("langSpan"); +let tick = document.getElementById("tickMark"); + + +langItems.forEach(langItems => langItems.addEventListener("click", langHandler)); + +function langHandler(espan){ + langSpan.innerText = espan.target.innerText; + // langItems.forEach((tick) => tick.classList.remove("tickShow")); + + + + this.classList.remove("tickShow"); +} + + +var countDrop = document.getElementById("countryDropdown"); + +function countSelector(){ + countDrop.style.transform = "translateY(0%)" + countDrop.style.opacity = "1" + engDropDown.style.transform = "translateY(-100%)"; + engDropDown.style.opacity = "0"; + +} + +function closeCountDrop(){ + countDrop.style.transform = "translateY(-100%)"; + countDrop.style.opacity = "0"; +} + + +var countryDrop = document.getElementById("countSelectDrop"); +var countrySpan = document.getElementById("countrySpan"); +let innerList = document.querySelectorAll(".innerList"); + +function countSelectOpen(){ + countryDrop.classList.toggle("active"); + +} + +innerList.forEach(innerList => innerList.addEventListener('click', countListHandler)); + + +function countListHandler(espan){ + countrySpan.innerText = espan.target.innerText; + innerList.forEach((innerList) => innerList.classList.remove("selected")); + + this.classList.add("selected"); + +}; + +var resDrop = document.getElementById("resDrop"); + +function resOpen(){ + resDrop.classList.toggle("resShow"); +} + + + +let monthBtn = document.getElementById("monthButton"); +let monthList = document.getElementById("monthList"); +var body = document.getElementById("body"); + +monthBtn.addEventListener("click", ()=> { + monthList.classList.add("monthListShow"); + +}) + +let monthSpan = document.getElementById("monthSpan"); +let monthListItem = document.querySelectorAll(".monthListItem"); + +monthListItem.forEach(monthListItem => monthListItem.addEventListener("click", monthHandler)); + +function monthHandler(mspan){ + monthSpan.innerText = mspan.target.innerText; + monthList.classList.remove("monthListShow"); +} + + + +let showMoreBtn = document.getElementById("showMoreBtn"); +let showMoreBtn2 = document.getElementById("showMoreBtn2"); +let showHide = document.getElementById("showHide"); +let showHide2 = document.getElementById("showHide2"); +let span1 = document.getElementById("span1"); +let span2 = document.getElementById("span2"); +let span3 = document.getElementById("span3"); +let span4 = document.getElementById("span4"); + +showMoreBtn.addEventListener("click", function() { + showHide.classList.add("visible"); + span1.style.display = "none"; + span2.style.display = "block"; +}) +showMoreBtn2.addEventListener("click", function() { + showHide2.classList.add("visible"); + span3.style.display = "none"; + span4.style.display = "block"; +}) + +let janBtn = document.getElementById("january"); +let febBtn = document.getElementById("february"); +let marBtn = document.getElementById("march"); +let aprBtn = document.getElementById("april"); +let mayBtn = document.getElementById("may"); + +let febCard = document.getElementById("febCard"); +let marchCard = document.getElementById("marchCard"); + +febBtn.addEventListener("click", () => { + febCard.style.display = "block"; + marchCard.style.display = "none"; +}) +marBtn.addEventListener("click", () => { + marchCard.style.display = "block"; + febCard.style.display = "none"; +}) + + +function sideBarOpen(){ + let sideBar = document.getElementById("sideBar"); + let openSide = document.getElementById("openSide"); + let closeSide = document.getElementById("closeSide"); + + sideBar.style.transform = "translateX(0%)"; + closeSide.style.display = "block"; + openSide.style.display = "none"; + +} + +function sideBarClose(){ + let sideBar = document.getElementById("sideBar"); + let openSide = document.getElementById("openSide"); + let closeSide = document.getElementById("closeSide"); + + sideBar.style.transform = "translateX(-100%)"; + closeSide.style.display = "none"; + openSide.style.display = "block"; +} + +// let closeSideInner = document.getElementById("closeSideInner"); +// let sideBar = document.getElementById("sideBar"); + +// closeSideInner.addEventListener("click", () => { +// sideBar.style.transform = "translate(-100%)"; +// }) + + + + + +// let navToggler = document.getElementById("navbar-toggler"); + +// navToggler.addEventListener("click", function(){ +// alert() +// }) \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..06e15bb --- /dev/null +++ b/script.js @@ -0,0 +1,57 @@ + + +let langBtn = document.getElementById('langBtn'); +let langDrop = document.getElementById('langDrop'); +let langSpan = document.getElementById('langSpan'); +let langList = document.querySelectorAll('.langList'); + +langBtn.addEventListener('click', () => { + langDrop.classList.toggle("langDropShow"); +}) + +langList.forEach(langList => langList.addEventListener('click', langSelectHandler)); + +function langSelectHandler(e){ + langSpan.innerText = e.target.innerText; + langList.forEach((langList)=> langList.classList.remove("langActive")); + + this.classList.add("langActive"); + langDrop.classList.remove("langDropShow"); +} + + + + +// accordion button starts + +const accorDion = document.getElementsByClassName('accordionMain'); + +for(var i = 0; i < accorDion.length; i++){ + accorDion[i].addEventListener('click', function(){ + this.classList.toggle('accoShow'); + }); +} + + + +let langBtn3 = document.getElementById('langBtn3'); +let langDrop3 = document.getElementById('langDrop3'); +let langSpan3 = document.getElementById('langSpan3'); +let langList3 = document.querySelectorAll('.langList3'); + +langBtn3.addEventListener('click', () => { + langDrop3.classList.toggle("langDropShow3"); +}) + +langList3.forEach(langList3 => langList3.addEventListener('click', langSelectHandler)); + +function langSelectHandler(elem){ + langSpan3.innerText = elem.target.innerText; + langList3.forEach((langList3)=> langList3.classList.remove("langActive3")); + + this.classList.add("langActive3"); + langDrop3.classList.remove("langDropShow3"); +} + + +// accordion button ends diff --git a/sign In.html b/sign In.html new file mode 100644 index 0000000..5ef5d4f --- /dev/null +++ b/sign In.html @@ -0,0 +1,139 @@ + + + + + + Netflix + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + + + + + + +
+ +
+

Sign In

+ +
+
+ + +
+ +
+ + +
+ + Forgot password? +
+ + + +
+
+
+ + +
+ +
+ + New to Netflix?Sign Up Now. + +

This page is protected by Google reCAPTCHA to ensure you're not a bot.

+ The information collected by Google reCAPTCHA is subject to the Google + Privacy Policy and Terms and Service, and is used for providing, maintaining, and improving the reCAPTCHA service and for general security purposes (it is not used for personalised advertising by Google). +
+ + +
+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + + + \ No newline at end of file diff --git a/signIn.js b/signIn.js new file mode 100644 index 0000000..2c49a27 --- /dev/null +++ b/signIn.js @@ -0,0 +1,37 @@ + +// learn more collapse starts + +let learnMore = document.getElementById('learnMore'); +let collapseDown = document.getElementById('collapseDown'); + +learnMore.addEventListener('click', function() { + collapseDown.style.visibility = "visible"; + learnMore.style.visibility = "hidden"; + return true; +}) + +// learn more collapse ends + + +// language btn st + +let langBtn = document.getElementById('langBtn2'); +let langDrop = document.getElementById('langDrop2'); +let langSpan = document.getElementById('langSpan2'); +let langList = document.querySelectorAll('.langList2'); + +langBtn.addEventListener('click', () => { + langDrop.classList.toggle("langDropShow2"); +}) + +langList.forEach(langList => langList.addEventListener('click', langSelectHandler)); + +function langSelectHandler(e){ + langSpan.innerText = e.target.innerText; + langList.forEach((langList)=> langList.classList.remove("langActive")); + + this.classList.add("langActive"); + langDrop.classList.remove("langDropShow2"); +} + +// language btn en \ No newline at end of file diff --git a/video/macVideo.m4v b/video/macVideo.m4v new file mode 100644 index 0000000..05a2c01 Binary files /dev/null and b/video/macVideo.m4v differ diff --git a/video/video-tv-in-0819.m4v b/video/video-tv-in-0819.m4v new file mode 100644 index 0000000..602309d Binary files /dev/null and b/video/video-tv-in-0819.m4v differ