├── .vscode └── settings.json ├── img ├── bg2.jpg ├── tv.png ├── logo.png ├── plus.png ├── boxshot.png ├── children.png ├── fav-icon.png ├── hero-bg.jpg ├── macbook.png ├── mobile.jpg ├── signinBg.jpg ├── forgotpass.jpg ├── getstarted.png ├── streams-bg.png ├── tv&movies.png ├── download-icon.gif ├── plans&pricing.png ├── whatisnetflix.png ├── supporteddevice.png ├── apple-icon-57x57.png ├── company_assets_bg.png ├── movietiles │ └── AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg └── country-select-background (1).svg ├── video ├── macVideo.m4v └── video-tv-in-0819.m4v ├── desktop.ini ├── help.js ├── signIn.js ├── .github └── workflows │ └── static.yml ├── script.js ├── css ├── FAQ.css ├── help.css ├── signIn.css ├── style.css └── media.css ├── media.js ├── sign In.html ├── FAQ.html ├── index.html └── help.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /img/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/bg2.jpg -------------------------------------------------------------------------------- /img/tv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/tv.png -------------------------------------------------------------------------------- /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/plus.png -------------------------------------------------------------------------------- /img/boxshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/boxshot.png -------------------------------------------------------------------------------- /img/children.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/children.png -------------------------------------------------------------------------------- /img/fav-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/fav-icon.png -------------------------------------------------------------------------------- /img/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/hero-bg.jpg -------------------------------------------------------------------------------- /img/macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/macbook.png -------------------------------------------------------------------------------- /img/mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/mobile.jpg -------------------------------------------------------------------------------- /img/signinBg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/signinBg.jpg -------------------------------------------------------------------------------- /img/forgotpass.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/forgotpass.jpg -------------------------------------------------------------------------------- /img/getstarted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/getstarted.png -------------------------------------------------------------------------------- /img/streams-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/streams-bg.png -------------------------------------------------------------------------------- /img/tv&movies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/tv&movies.png -------------------------------------------------------------------------------- /video/macVideo.m4v: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/video/macVideo.m4v -------------------------------------------------------------------------------- /img/download-icon.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/download-icon.gif -------------------------------------------------------------------------------- /img/plans&pricing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/plans&pricing.png -------------------------------------------------------------------------------- /img/whatisnetflix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/whatisnetflix.png -------------------------------------------------------------------------------- /img/supporteddevice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/supporteddevice.png -------------------------------------------------------------------------------- /img/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/apple-icon-57x57.png -------------------------------------------------------------------------------- /img/company_assets_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/company_assets_bg.png -------------------------------------------------------------------------------- /video/video-tv-in-0819.m4v: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/video/video-tv-in-0819.m4v -------------------------------------------------------------------------------- /desktop.ini: -------------------------------------------------------------------------------- 1 | [.ShellClassInfo] 2 | IconResource=C:\Users\MY PC\Downloads\fav-icon.ico,0 3 | [ViewState] 4 | Mode= 5 | Vid= 6 | FolderType=Generic 7 | -------------------------------------------------------------------------------- /img/movietiles/AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/khushboo-barnoliya/NETFLIX-UI-clone/HEAD/img/movietiles/AAAABQaWHKjzvxUbdBCetC4bT6MPwl1_-3HRIWnuy2X7ZQgMfDmn5oOT0rXRFXM79qHQfvr2aEKtxVNjgPUiVvVUQBpUOgVTBX3xlYz66ICR7bRHamrOKmWQuvOSZFZKCIfP48dG5Q.jpg -------------------------------------------------------------------------------- /help.js: -------------------------------------------------------------------------------- 1 | 2 | var searchBar = document.getElementById("searchBar"); 3 | var fixedSearchBar = document.getElementById("fixedSearcBar"); 4 | 5 | var formSearchBar = document.getElementById('formSearchBar'); 6 | var fixed = formSearchBar.offsetTop; 7 | 8 | console.log(fixed) 9 | 10 | window.addEventListener("scroll", () =>{ 11 | if (window.pageYOffset > fixed){ 12 | fixedSearchBar.classList.add("showSearchBar"); 13 | } 14 | else{ 15 | fixedSearchBar.classList.remove("showSearchBar"); 16 | } 17 | }) -------------------------------------------------------------------------------- /signIn.js: -------------------------------------------------------------------------------- 1 | 2 | // learn more collapse starts 3 | 4 | let learnMore = document.getElementById('learnMore'); 5 | let collapseDown = document.getElementById('collapseDown'); 6 | 7 | learnMore.addEventListener('click', function() { 8 | collapseDown.style.visibility = "visible"; 9 | learnMore.style.visibility = "hidden"; 10 | return true; 11 | }) 12 | 13 | // learn more collapse ends 14 | 15 | 16 | // language btn st 17 | 18 | let langBtn = document.getElementById('langBtn2'); 19 | let langDrop = document.getElementById('langDrop2'); 20 | let langSpan = document.getElementById('langSpan2'); 21 | let langList = document.querySelectorAll('.langList2'); 22 | 23 | langBtn.addEventListener('click', () => { 24 | langDrop.classList.toggle("langDropShow2"); 25 | }) 26 | 27 | langList.forEach(langList => langList.addEventListener('click', langSelectHandler)); 28 | 29 | function langSelectHandler(e){ 30 | langSpan.innerText = e.target.innerText; 31 | langList.forEach((langList)=> langList.classList.remove("langActive")); 32 | 33 | this.classList.add("langActive"); 34 | langDrop.classList.remove("langDropShow2"); 35 | } 36 | 37 | // language btn en -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["main"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v5 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | let langBtn = document.getElementById('langBtn'); 4 | let langDrop = document.getElementById('langDrop'); 5 | let langSpan = document.getElementById('langSpan'); 6 | let langList = document.querySelectorAll('.langList'); 7 | 8 | langBtn.addEventListener('click', () => { 9 | langDrop.classList.toggle("langDropShow"); 10 | }) 11 | 12 | langList.forEach(langList => langList.addEventListener('click', langSelectHandler)); 13 | 14 | function langSelectHandler(e){ 15 | langSpan.innerText = e.target.innerText; 16 | langList.forEach((langList)=> langList.classList.remove("langActive")); 17 | 18 | this.classList.add("langActive"); 19 | langDrop.classList.remove("langDropShow"); 20 | } 21 | 22 | 23 | 24 | 25 | // accordion button starts 26 | 27 | const accorDion = document.getElementsByClassName('accordionMain'); 28 | 29 | for(var i = 0; i < accorDion.length; i++){ 30 | accorDion[i].addEventListener('click', function(){ 31 | this.classList.toggle('accoShow'); 32 | }); 33 | } 34 | 35 | 36 | 37 | let langBtn3 = document.getElementById('langBtn3'); 38 | let langDrop3 = document.getElementById('langDrop3'); 39 | let langSpan3 = document.getElementById('langSpan3'); 40 | let langList3 = document.querySelectorAll('.langList3'); 41 | 42 | langBtn3.addEventListener('click', () => { 43 | langDrop3.classList.toggle("langDropShow3"); 44 | }) 45 | 46 | langList3.forEach(langList3 => langList3.addEventListener('click', langSelectHandler)); 47 | 48 | function langSelectHandler(elem){ 49 | langSpan3.innerText = elem.target.innerText; 50 | langList3.forEach((langList3)=> langList3.classList.remove("langActive3")); 51 | 52 | this.classList.add("langActive3"); 53 | langDrop3.classList.remove("langDropShow3"); 54 | } 55 | 56 | 57 | // accordion button ends 58 | -------------------------------------------------------------------------------- /css/FAQ.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Outfit' !important; 6 | scroll-behavior: smooth !important; 7 | 8 | } 9 | *::selection{ 10 | background-color: #4C4948 !important; 11 | color: white; 12 | 13 | } 14 | 15 | /* navbar starts */ 16 | 17 | .anchorHov:hover{ 18 | text-decoration: underline !important; 19 | color: #000000ab !important; 20 | 21 | } 22 | .anchorBtn:hover{ 23 | border-color: black !important; 24 | background-color: rgb(128 128 128 / 20%) !important; 25 | } 26 | 27 | #signIn:hover{ 28 | background-color: #c11119 !important; 29 | } 30 | 31 | /* navbar ends */ 32 | 33 | 34 | /* searchbar section starts */ 35 | 36 | .searchControlWrapper{ 37 | padding: 2px; 38 | border-radius: 4px; 39 | background: linear-gradient(to right, #e50914 -0.08%, #c94ff5 81.14%, #5b79f1 99.92%); 40 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 41 | } 42 | .inputControl{ 43 | padding: 9px 16px 9px 50px; 44 | border-radius: 2px; 45 | border: 1px solid transparent; 46 | } 47 | 48 | .inputControl:focus{ 49 | border-color: transparent; 50 | outline: transparent; 51 | } 52 | 53 | /* searchbar section ends */ 54 | 55 | /* main content starts */ 56 | 57 | .leftPane{ 58 | width: 68%; 59 | } 60 | 61 | .thinAnchor{ 62 | text-decoration: none; 63 | color: #e50914; 64 | } 65 | .thinAnchor:hover{ 66 | text-decoration: underline; 67 | } 68 | 69 | .contactBtn:hover{ 70 | background-color: rgb(0 0 0 / 70%) !important; 71 | } 72 | 73 | .rightPane{ 74 | width: calc(100% - 68%); 75 | } 76 | 77 | .articleTopics{ 78 | border-top: 6px solid #e50914; 79 | } 80 | /* main content ends */ 81 | 82 | 83 | /* footer starts */ 84 | 85 | .footer{ 86 | background-color: #fafafa; 87 | } 88 | #lang-switcher{ 89 | appearance: none; 90 | -webkit-appearance: none; 91 | color: #8b8a88; 92 | font-size: 1.1rem; 93 | } 94 | #lang-switcher:focus{ 95 | outline: none !important; 96 | } 97 | 98 | .select{ 99 | max-width: 12rem !important; 100 | border: 1px solid #8b8a88 !important; 101 | accent-color: #8b8a88 !important; 102 | transition: all 0.3s ease; 103 | } 104 | 105 | .select:hover{ 106 | background-color: #8b8a88; 107 | } 108 | 109 | .select:hover select{ 110 | color: #ffffff !important; 111 | } 112 | .select:hover select > option{ 113 | color: rgb(0, 0, 0) !important; 114 | } 115 | .select:hover #downArrow > path{ 116 | fill: white; 117 | } 118 | 119 | /* footer ends */ -------------------------------------------------------------------------------- /css/help.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Outfit' !important; 6 | scroll-behavior: smooth !important; 7 | 8 | } 9 | *::selection{ 10 | background-color: #4C4948 !important; 11 | color: white; 12 | 13 | } 14 | 15 | /* navbar starts */ 16 | 17 | .anchorHov:hover{ 18 | text-decoration: underline !important; 19 | color: #000000ab !important; 20 | 21 | } 22 | .anchorBtn:hover{ 23 | border-color: black !important; 24 | background-color: rgb(128 128 128 / 20%) !important; 25 | } 26 | 27 | #signIn:hover{ 28 | background-color: #c11119 !important; 29 | } 30 | 31 | /* navbar ends */ 32 | 33 | 34 | /* searchbar section starts */ 35 | 36 | .searchControlWrapper{ 37 | padding: 2px; 38 | border-radius: 4px; 39 | background: linear-gradient(to right, #e50914 -0.08%, #c94ff5 81.14%, #5b79f1 99.92%); 40 | box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; 41 | } 42 | .inputControl{ 43 | padding: 9px 16px 9px 50px; 44 | border-radius: 2px; 45 | border: 1px solid transparent; 46 | } 47 | 48 | .inputControl:focus{ 49 | border-color: transparent; 50 | outline: transparent; 51 | } 52 | 53 | .search-section p, .search-section p > a{ 54 | color: rgb(0 0 0 / 70%) !important; 55 | } 56 | 57 | .search-section p > a:hover{ 58 | color: rgb(0, 0, 0) !important; 59 | } 60 | 61 | 62 | /* searchbar section ends */ 63 | 64 | 65 | /* help center search starts */ 66 | 67 | #radialBg{ 68 | background: radial-gradient(300% 100% at center top, rgba(169, 185, 250, 0.15) 0%, rgba(251, 251, 251, 0) 25%) !important; 69 | } 70 | 71 | /* help center search ends */ 72 | 73 | 74 | /* main content starts */ 75 | 76 | .anchorLine:hover{ 77 | text-decoration: underline !important; 78 | } 79 | .anchorLine:hover .arrowDown > svg{ 80 | animation: bounce 0.8s linear; 81 | } 82 | 83 | @keyframes bounce{ 84 | 25%{ 85 | transform: translateY(10px); 86 | } 87 | 50%{ 88 | transform: translateY(0px); 89 | } 90 | 75%{ 91 | transform: translateY(10px); 92 | } 93 | 100%{ 94 | transform: translateY(0px); 95 | } 96 | } 97 | 98 | .formFixed{ 99 | max-width: 600px; 100 | 101 | } 102 | 103 | .fixedSearcBar{ 104 | z-index: 100; 105 | opacity: 0; 106 | transform: translateY(-100%); 107 | transition: all 0.2s; 108 | } 109 | 110 | #fixedSearcBar.showSearchBar{ 111 | position: fixed; 112 | opacity: 1; 113 | transform: translateY(0%); 114 | } 115 | 116 | #columMain{ 117 | max-width: 38rem; 118 | } 119 | 120 | 121 | 122 | 123 | /* main content ends */ 124 | 125 | 126 | 127 | 128 | 129 | 130 | /* accordion starts */ 131 | 132 | .accoHelp{ 133 | border: 1px solid rgb(128 128 128 / 40%); 134 | } 135 | 136 | 137 | .accordion-button:not(.collapsed) { 138 | color: var(--bs-accordion-active-color); 139 | background-color: transparent !important; 140 | } 141 | 142 | .accordion-button:focus{ 143 | z-index: 3; 144 | border-color: transparent; 145 | outline: 0; 146 | box-shadow: none !important; 147 | } 148 | /* accordion ends */ 149 | 150 | 151 | /* quick links */ 152 | 153 | .contactBtn:hover{ 154 | background-color: rgb(0 0 0 / 70%) !important; 155 | } 156 | 157 | @media only screen and (max-width: 624px){ 158 | #quickLinks{ 159 | padding: 0 20px !important; 160 | } 161 | } 162 | 163 | /* quick links */ 164 | 165 | 166 | 167 | /* footer starts */ 168 | 169 | .footer{ 170 | background-color: #fafafa; 171 | } 172 | #lang-switcher{ 173 | appearance: none; 174 | -webkit-appearance: none; 175 | color: #8b8a88; 176 | font-size: 1.1rem; 177 | } 178 | #lang-switcher:focus{ 179 | outline: none !important; 180 | } 181 | 182 | .select{ 183 | max-width: 12rem !important; 184 | border: 1px solid #8b8a88 !important; 185 | accent-color: #8b8a88 !important; 186 | transition: all 0.3s ease; 187 | } 188 | 189 | .select:hover{ 190 | background-color: #8b8a88; 191 | } 192 | 193 | .select:hover select{ 194 | color: #ffffff !important; 195 | } 196 | .select:hover select > option{ 197 | color: rgb(0, 0, 0) !important; 198 | } 199 | .select:hover #downArrow > path{ 200 | fill: white; 201 | } 202 | 203 | /* footer ends */ -------------------------------------------------------------------------------- /css/signIn.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Outfit' !important; 5 | scroll-behavior: smooth !important; 6 | } 7 | 8 | *::selection{ 9 | background-color: #4C4948 !important; 10 | color: white; 11 | 12 | } 13 | 14 | #mainBg{ 15 | height: 100%; 16 | width: 100%; 17 | min-height: 100vh; 18 | background-size: cover; 19 | background-image: cover; 20 | overflow: hidden; 21 | } 22 | 23 | #signInner{ 24 | min-height: 650px; 25 | } 26 | 27 | #collapseDown{ 28 | visibility: hidden; 29 | } 30 | 31 | .form-control{ 32 | border: 1px solid rgb(94,96,96) !important; 33 | overflow: hidden !important; 34 | } 35 | 36 | .form-control::placeholder{ 37 | user-select: none !important; 38 | } 39 | 40 | #inpLabel{ 41 | color: #B4B4B4 !important; 42 | width: 80%; 43 | 44 | } 45 | 46 | 47 | 48 | .form-control:focus { 49 | color: #ffffff !important; 50 | background-color: transparent !important; 51 | border-color: #ffffff !important; 52 | outline: 0; 53 | box-shadow: 0 0 0 0.2rem rgba(252, 252, 252, 0.349) !important; 54 | } 55 | 56 | .form-floating>.form-control:focus~label { 57 | font-size: 0.8rem !important; 58 | font-weight: 100 !important; 59 | } 60 | 61 | .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 { 62 | position: absolute; 63 | inset: 1rem 0.2rem; 64 | z-index: -1; 65 | height: 1.5em; 66 | content: ""; 67 | background-color: transparent !important; 68 | } 69 | 70 | .cbx { 71 | position: relative; 72 | top: 1px; 73 | width: 20px; 74 | height: 20px; 75 | border: 1px solid #c8ccd4; 76 | border-radius: 3px; 77 | transition: all 0.1s ease; 78 | cursor: pointer; 79 | display: block; 80 | } 81 | 82 | .cbx:after { 83 | content: ''; 84 | position: absolute; 85 | top: 3px; 86 | left: 7px; 87 | width: 5px; 88 | height: 10px; 89 | opacity: 0; 90 | transform: rotate(45deg) scale(0); 91 | border-right: 2px solid black; 92 | border-bottom: 2px solid black; 93 | transition: all 0.1s ease; 94 | } 95 | 96 | .lbl { 97 | margin-left: 5px; 98 | vertical-align: middle; 99 | cursor: pointer; 100 | } 101 | 102 | #cbx:checked ~ .cbx { 103 | border-color: transparent; 104 | background: white; 105 | } 106 | 107 | #cbx:checked ~ .cbx:after { 108 | opacity: 1; 109 | transform: rotate(45deg) scale(1); 110 | } 111 | 112 | .cntr { 113 | position: relative; 114 | } 115 | 116 | 117 | 118 | .hidden-xs-up { 119 | display: none!important; 120 | } 121 | 122 | .anchorHov:hover{ 123 | text-decoration: underline !important; 124 | } 125 | 126 | footer{ 127 | height: calc(100% - 760.5625px); 128 | } 129 | 130 | 131 | #footerUl li:active > a{ 132 | color: red !important; 133 | } 134 | 135 | #langDrop2.langDropShow2{ 136 | position: absolute; 137 | display: block !important; 138 | } 139 | 140 | .langActive{ 141 | font-weight: bold; 142 | background-color: rgb(216, 216, 216); 143 | 144 | } 145 | 146 | footer #langDrop2{ 147 | min-width: 8.8rem !important; 148 | max-width: 8.8rem !important; 149 | } 150 | 151 | /* #langDrop2{ 152 | top: -220%; 153 | } */ 154 | 155 | footer .col-3 { 156 | flex: 0 0 auto; 157 | width: 50.5%; 158 | } 159 | 160 | @media only screen and (min-width: 600px) { 161 | #signInner{ 162 | max-width: 450px !important; 163 | } 164 | 165 | #mainBg .bgImg{ 166 | min-height: 100%; 167 | min-width: 100%; 168 | 169 | } 170 | .form-floating #inpLabel{ 171 | font-size: 1rem; 172 | text-overflow: ellipsis !important; 173 | white-space: nowrap !important; 174 | 175 | } 176 | } 177 | @media only screen and (max-width: 600px) { 178 | #bgImg{ 179 | opacity: 0 !important; 180 | } 181 | 182 | #signInner{ 183 | max-width: 100% !important; 184 | padding: 0 !important; 185 | margin-bottom: 0 !important; 186 | border-bottom: 1px solid #B4B4B4; 187 | justify-content: start !important; 188 | min-height: 600px; 189 | } 190 | 191 | } 192 | 193 | @media only screen and (max-width: 1280px) { 194 | #navbar{ 195 | padding: 0 !important; 196 | } 197 | #navbarInner{ 198 | margin: 0 16px !important; 199 | padding-left: 0 !important; 200 | padding-right: 0 !important; 201 | } 202 | } 203 | @media only screen and (max-width: 900px) { 204 | #navbarBrand img{ 205 | width: 7rem !important; 206 | } 207 | 208 | } 209 | @media only screen and (max-width: 1000px) { 210 | #footerUl li{ 211 | width: 50% !important; 212 | } 213 | #footCont, #footInner{ 214 | padding: 0 !important; 215 | } 216 | 217 | } 218 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | *{ 4 | margin: 0; 5 | padding: 0; 6 | font-family: 'Outfit' !important; 7 | scroll-behavior: smooth !important; 8 | } 9 | 10 | *::selection{ 11 | background-color: #4C4948 !important; 12 | color: white; 13 | 14 | } 15 | /* navbar starts */ 16 | 17 | header{ 18 | z-index: 5; 19 | } 20 | 21 | .buttonDiv button{ 22 | font-size: 13px !important; 23 | } 24 | 25 | 26 | #langDrop.langDropShow{ 27 | position: absolute; 28 | display: block !important; 29 | } 30 | 31 | #langDrop{ 32 | min-width: 3rem !important; 33 | max-width: 8.8rem !important; 34 | } 35 | 36 | .langActive{ 37 | font-weight: bold; 38 | background-color: rgb(216, 216, 216); 39 | 40 | } 41 | 42 | .buttonDiv button{ 43 | font-size: 18px !important; 44 | font-weight: bold; 45 | } 46 | 47 | .buttonDiv{ 48 | max-width: 100% !important; 49 | /* height: 2rem !important; */ 50 | /* font-size: 0.5rem !important; */ 51 | } 52 | 53 | 54 | 55 | @media only screen and (max-width: 200px){ 56 | 57 | .navbar-brand img{ 58 | width: 100% !important; 59 | } 60 | } 61 | @media only screen and (max-width: 800px){ 62 | 63 | .navbar-brand{ 64 | width: 40% !important; 65 | } 66 | #mail{ 67 | flex-wrap: wrap !important; 68 | } 69 | } 70 | @media only screen and (max-width: 600px){ 71 | #langSpan{ 72 | display: none; 73 | } 74 | .buttonDiv #langBtn{ 75 | padding: 0.5rem !important; 76 | } 77 | #header{ 78 | padding-left: 1.2rem !important; 79 | padding-right: 1.2rem !important; 80 | } 81 | #langDrop{ 82 | font-size: 0.6rem !important; 83 | } 84 | 85 | } 86 | @media only screen and (max-width: 1280px){ 87 | #navbar{ 88 | padding-left: 0 !important; 89 | padding-right: 0 !important; 90 | margin-left: 0 !important; 91 | margin-right: 0 !important; 92 | } 93 | 94 | .navbar-brand img{ 95 | max-width: 100% !important; 96 | } 97 | } 98 | 99 | 100 | #langBtn .dropdown-toggle::after { 101 | font-size: 1rem !important; 102 | } 103 | 104 | /* navbar ends */ 105 | 106 | 107 | /* hero starts */ 108 | 109 | .hero-section{ 110 | min-height: 43rem; 111 | } 112 | .hero-backGround{ 113 | min-height: 43rem !important; 114 | } 115 | 116 | .hero-backGround img{ 117 | height: 100%; 118 | width: 100%; 119 | object-position: center; 120 | object-fit: cover; 121 | position: absolute; 122 | transform: scale(1.25) translateY(-9.5%); 123 | } 124 | 125 | .hero-title{ 126 | height: 100% !important; 127 | width: 100% !important; 128 | background: linear-gradient(180deg, #000000de, #00000060, #000000de); 129 | } 130 | .form-control{ 131 | border: 1px solid rgb(94,96,96) !important; 132 | } 133 | 134 | .form-control::placeholder{ 135 | user-select: none !important; 136 | } 137 | 138 | .inpLabel{ 139 | color: #B4B4B4 !important; 140 | } 141 | 142 | .form-control:focus { 143 | color: #ffffff !important; 144 | background-color: transparent !important; 145 | border-color: #ffffff !important; 146 | outline: 0; 147 | box-shadow: 0 0 0 0.2rem rgba(252, 252, 252, 0.349) !important; 148 | } 149 | 150 | .form-floating>.form-control:focus~label { 151 | font-size: 0.8rem !important; 152 | font-weight: 100 !important; 153 | } 154 | 155 | .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 { 156 | position: absolute; 157 | inset: 1rem 0.2rem; 158 | z-index: -1; 159 | height: 1.5em; 160 | content: ""; 161 | background-color: transparent !important; 162 | } 163 | 164 | .getStarted{ 165 | font-weight: bold !important; 166 | background-color: rgb(229, 9, 20) !important; 167 | } 168 | 169 | 170 | /* hero ends */ 171 | 172 | 173 | /* tv section starts */ 174 | 175 | @media only screen and (max-width: 992px){ 176 | #boxTitle{ 177 | text-align: center !important; 178 | } 179 | } 180 | 181 | /* tv section ends */ 182 | 183 | 184 | /* accordion section starts */ 185 | 186 | .accordionInner{ 187 | background-color: #2D2D2D; 188 | color: white; 189 | font-weight: 500; 190 | cursor: pointer; 191 | transition: 0.3s ease; 192 | } 193 | 194 | .accordionInner:hover{ 195 | background-color: #414141; 196 | } 197 | .accordCollapse{ 198 | border-top: 2px solid black; 199 | background-color: #2D2D2D; 200 | color: white !important; 201 | font-weight: 400; 202 | transition: all 0.5s ease; 203 | display: none; 204 | padding: 1rem; 205 | } 206 | .accordionMain.accoShow .accordCollapse{ 207 | display: block; 208 | 209 | } 210 | 211 | 212 | @media only screen and (max-width: 450px){ 213 | .accordionMain span, .accordCollapse p{ 214 | font-size: 1rem !important; 215 | } 216 | } 217 | 218 | @media only screen and (max-width: 250px){ 219 | .accordionMain span, .accordCollapse p{ 220 | font-size: 0.8rem !important; 221 | } 222 | } 223 | @media only screen and (max-width: 768px){ 224 | #mail{ 225 | flex-direction: column !important; 226 | } 227 | 228 | #mail .form-floating{ 229 | width: 100% !important; 230 | } 231 | } 232 | /* accordion section end */ 233 | 234 | 235 | /* footer starts */ 236 | 237 | #footerUl li:active > a{ 238 | color: red !important; 239 | } 240 | 241 | #langDrop3.langDropShow3{ 242 | position: absolute; 243 | display: block !important; 244 | } 245 | 246 | .langActive3{ 247 | font-weight: bold; 248 | background-color: rgb(216, 216, 216); 249 | 250 | } 251 | 252 | footer #langDrop3{ 253 | min-width: 8.8rem !important; 254 | max-width: 8.8rem !important; 255 | } 256 | 257 | footer .col-3 { 258 | flex: 0 0 auto; 259 | width: 50.5%; 260 | } 261 | 262 | 263 | @media only screen and (max-width: 1000px) { 264 | #footerUl li{ 265 | width: 50% !important; 266 | } 267 | #footCont, #footInner{ 268 | padding: 0 !important; 269 | } 270 | 271 | } 272 | /* footer ends */ 273 | 274 | 275 | -------------------------------------------------------------------------------- /media.js: -------------------------------------------------------------------------------- 1 | let svgSearch = document.getElementById('svgSearch'); 2 | 3 | let svgSearch2 = document.getElementById('svgSearch2'); 4 | 5 | let blackSearchBar = document.getElementById("blackSearchBar"); 6 | 7 | let blackSearchBarMedia = document.getElementById("blackSearchBarMedia"); 8 | 9 | let blackSearchBarMedia2 = document.getElementById("blackSearchBarMedia2"); 10 | 11 | let sBtn = document.querySelectorAll(".sBtn"); 12 | 13 | 14 | svgSearch.addEventListener('click', function(){ 15 | blackSearchBar.style.width = "80%"; 16 | blackSearchBar.style.opacity = "1"; 17 | 18 | blackSearchBarMedia.style.width = "60%"; 19 | blackSearchBarMedia.style.opacity = "1"; 20 | 21 | for(var i = 0; i < sBtn.length; i++){ 22 | sBtn[i].classList.add("opacityShow"); 23 | } 24 | }) 25 | 26 | let sBtn2 = document.querySelectorAll(".sBtn2"); 27 | svgSearch2.addEventListener('click', function(){ 28 | 29 | blackSearchBarMedia2.style.width = "100%"; 30 | blackSearchBarMedia2.style.opacity = "1"; 31 | 32 | for(var a = 0; a < sBtn2.length; a++){ 33 | sBtn2[a].classList.add("opacityShow2"); 34 | } 35 | }) 36 | 37 | function closeBtn(){ 38 | blackSearchBar.style.width = "0%"; 39 | blackSearchBar.style.transition = "all 0.3s ease"; 40 | blackSearchBar.style.opacity = "0"; 41 | 42 | blackSearchBarMedia.style.width = "0%"; 43 | blackSearchBarMedia.style.transition = "all 0.3s ease"; 44 | blackSearchBarMedia.style.opacity = "0"; 45 | 46 | blackSearchBarMedia2.style.width = "0%"; 47 | blackSearchBarMedia2.style.transition = "all 0.3s ease"; 48 | blackSearchBarMedia2.style.opacity = "0"; 49 | } 50 | 51 | 52 | function langSelector(){ 53 | let engDropDown = document.getElementById("englishDropdown"); 54 | 55 | engDropDown.style.transform = "translateY(0%)"; 56 | engDropDown.style.opacity = "1"; 57 | countDrop.style.transform = "translateY(-100%)"; 58 | countDrop.style.opacity = "0" 59 | 60 | } 61 | 62 | function closeLangDrop(){ 63 | var engDropDown = document.getElementById("englishDropdown"); 64 | 65 | engDropDown.style.transform = "translateY(-100%)"; 66 | engDropDown.style.opacity = "0"; 67 | } 68 | 69 | let engDropDown = document.getElementById("englishDropdown"); 70 | let langItems = document.querySelectorAll(".langAnchor"); 71 | let langSpan = document.getElementById("langSpan"); 72 | let tick = document.getElementById("tickMark"); 73 | 74 | 75 | langItems.forEach(langItems => langItems.addEventListener("click", langHandler)); 76 | 77 | function langHandler(espan){ 78 | langSpan.innerText = espan.target.innerText; 79 | // langItems.forEach((tick) => tick.classList.remove("tickShow")); 80 | 81 | 82 | 83 | this.classList.remove("tickShow"); 84 | } 85 | 86 | 87 | var countDrop = document.getElementById("countryDropdown"); 88 | 89 | function countSelector(){ 90 | countDrop.style.transform = "translateY(0%)" 91 | countDrop.style.opacity = "1" 92 | engDropDown.style.transform = "translateY(-100%)"; 93 | engDropDown.style.opacity = "0"; 94 | 95 | } 96 | 97 | function closeCountDrop(){ 98 | countDrop.style.transform = "translateY(-100%)"; 99 | countDrop.style.opacity = "0"; 100 | } 101 | 102 | 103 | var countryDrop = document.getElementById("countSelectDrop"); 104 | var countrySpan = document.getElementById("countrySpan"); 105 | let innerList = document.querySelectorAll(".innerList"); 106 | 107 | function countSelectOpen(){ 108 | countryDrop.classList.toggle("active"); 109 | 110 | } 111 | 112 | innerList.forEach(innerList => innerList.addEventListener('click', countListHandler)); 113 | 114 | 115 | function countListHandler(espan){ 116 | countrySpan.innerText = espan.target.innerText; 117 | innerList.forEach((innerList) => innerList.classList.remove("selected")); 118 | 119 | this.classList.add("selected"); 120 | 121 | }; 122 | 123 | var resDrop = document.getElementById("resDrop"); 124 | 125 | function resOpen(){ 126 | resDrop.classList.toggle("resShow"); 127 | } 128 | 129 | 130 | 131 | let monthBtn = document.getElementById("monthButton"); 132 | let monthList = document.getElementById("monthList"); 133 | var body = document.getElementById("body"); 134 | 135 | monthBtn.addEventListener("click", ()=> { 136 | monthList.classList.add("monthListShow"); 137 | 138 | }) 139 | 140 | let monthSpan = document.getElementById("monthSpan"); 141 | let monthListItem = document.querySelectorAll(".monthListItem"); 142 | 143 | monthListItem.forEach(monthListItem => monthListItem.addEventListener("click", monthHandler)); 144 | 145 | function monthHandler(mspan){ 146 | monthSpan.innerText = mspan.target.innerText; 147 | monthList.classList.remove("monthListShow"); 148 | } 149 | 150 | 151 | 152 | let showMoreBtn = document.getElementById("showMoreBtn"); 153 | let showMoreBtn2 = document.getElementById("showMoreBtn2"); 154 | let showHide = document.getElementById("showHide"); 155 | let showHide2 = document.getElementById("showHide2"); 156 | let span1 = document.getElementById("span1"); 157 | let span2 = document.getElementById("span2"); 158 | let span3 = document.getElementById("span3"); 159 | let span4 = document.getElementById("span4"); 160 | 161 | showMoreBtn.addEventListener("click", function() { 162 | showHide.classList.add("visible"); 163 | span1.style.display = "none"; 164 | span2.style.display = "block"; 165 | }) 166 | showMoreBtn2.addEventListener("click", function() { 167 | showHide2.classList.add("visible"); 168 | span3.style.display = "none"; 169 | span4.style.display = "block"; 170 | }) 171 | 172 | let janBtn = document.getElementById("january"); 173 | let febBtn = document.getElementById("february"); 174 | let marBtn = document.getElementById("march"); 175 | let aprBtn = document.getElementById("april"); 176 | let mayBtn = document.getElementById("may"); 177 | 178 | let febCard = document.getElementById("febCard"); 179 | let marchCard = document.getElementById("marchCard"); 180 | 181 | febBtn.addEventListener("click", () => { 182 | febCard.style.display = "block"; 183 | marchCard.style.display = "none"; 184 | }) 185 | marBtn.addEventListener("click", () => { 186 | marchCard.style.display = "block"; 187 | febCard.style.display = "none"; 188 | }) 189 | 190 | 191 | function sideBarOpen(){ 192 | let sideBar = document.getElementById("sideBar"); 193 | let openSide = document.getElementById("openSide"); 194 | let closeSide = document.getElementById("closeSide"); 195 | 196 | sideBar.style.transform = "translateX(0%)"; 197 | closeSide.style.display = "block"; 198 | openSide.style.display = "none"; 199 | 200 | } 201 | 202 | function sideBarClose(){ 203 | let sideBar = document.getElementById("sideBar"); 204 | let openSide = document.getElementById("openSide"); 205 | let closeSide = document.getElementById("closeSide"); 206 | 207 | sideBar.style.transform = "translateX(-100%)"; 208 | closeSide.style.display = "none"; 209 | openSide.style.display = "block"; 210 | } 211 | 212 | // let closeSideInner = document.getElementById("closeSideInner"); 213 | // let sideBar = document.getElementById("sideBar"); 214 | 215 | // closeSideInner.addEventListener("click", () => { 216 | // sideBar.style.transform = "translate(-100%)"; 217 | // }) 218 | 219 | 220 | 221 | 222 | 223 | // let navToggler = document.getElementById("navbar-toggler"); 224 | 225 | // navToggler.addEventListener("click", function(){ 226 | // alert() 227 | // }) -------------------------------------------------------------------------------- /sign In.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Netflix 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 |
30 | 31 | 32 | 39 | 40 | 41 | 42 | 43 | 44 | 45 |
46 | 47 |
48 |

Sign In

49 | 50 |
51 |
52 | 53 | 54 |
55 | 56 |
57 | 58 | 59 |
60 | 61 | Forgot password? 62 |
63 | 64 | 65 | 66 |
67 |
68 |
69 | 70 | 71 |
72 | 73 |
74 | 75 | New to Netflix?Sign Up Now. 76 | 77 |

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

78 | The information collected by Google reCAPTCHA is subject to the Google 79 | 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). 80 |
81 | 82 | 83 |
84 |
85 | 86 | 87 | 88 | 89 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 |
132 |
133 | 134 | 135 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /img/country-select-background (1).svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /css/media.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0; 4 | padding: 0; 5 | font-family: 'Outfit' !important; 6 | scroll-behavior: smooth !important; 7 | 8 | } 9 | *::selection{ 10 | background-color: #4C4948 !important; 11 | color: white; 12 | 13 | } 14 | html{ 15 | background-color: rgb(22, 22, 22); 16 | } 17 | 18 | /* header starts */ 19 | 20 | #mainBg{ 21 | background-color: #23232338 !important; 22 | } 23 | 24 | #header{ 25 | z-index: 100; 26 | background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(22, 22, 22) 100%); 27 | } 28 | 29 | .navRight button:focus{ 30 | border-color: transparent !important; 31 | outline: none; 32 | } 33 | .navRight button:hover{ 34 | background-color: rgb(255 255 255 / 10%); 35 | } 36 | 37 | .navRight button span{ 38 | font-size: 15px; 39 | } 40 | 41 | .textSymbol{ 42 | font-family: monospace !important; 43 | font-size: 12px !important; 44 | } 45 | 46 | .signin:hover{ 47 | background-color: rgb(168, 4, 12) !important; 48 | } 49 | 50 | .anchorBtn:hover{ 51 | background-color: rgb(255 255 255 / 10%) !important; 52 | } 53 | 54 | #blackSearchBar{ 55 | height: 80px; 56 | width: 0%; 57 | transition: all 0.5s ease; 58 | } 59 | #blackSearchBar input:focus{ 60 | border: 0; 61 | outline: 0; 62 | } 63 | 64 | #svgSearch, #closeBtn{ 65 | cursor: pointer !important; 66 | transition: all 0.5s ease; 67 | } 68 | 69 | .sBtn{ 70 | color: white; 71 | width: 8% !important; 72 | height: 100%; 73 | border: none; 74 | cursor: pointer; 75 | outline: none; 76 | background: none; 77 | display: none; 78 | } 79 | 80 | .sBtn.opacityShow{ 81 | display: inline-block; 82 | } 83 | 84 | .sBtn:hover{ 85 | background-color: transparent !important; 86 | } 87 | 88 | @media only screen and (min-width: 1280px){ 89 | .blackSearchBar{ 90 | box-shadow: inset 0 -1px 0 rgb(41, 58, 127) !important; 91 | background-color: rgb(35, 35, 35) !important; 92 | } 93 | } 94 | 95 | #englishDropdown{ 96 | z-index: 15 !important; 97 | opacity: 0; 98 | transform: translateY(-100%); 99 | transition: all 0.8s ease; 100 | } 101 | 102 | #langHeader{ 103 | 104 | background-color: rgb(35, 35, 35) !important; 105 | padding: 130px 20px 30px 20px !important; 106 | } 107 | 108 | .languageList{ 109 | max-height: 24rem !important; 110 | max-width: 1028px; 111 | width: 100%; 112 | } 113 | 114 | .languageList > a{ 115 | text-decoration: none; 116 | color: white; 117 | padding: 1em 2em 1em calc(3em + 17px); 118 | font-size: 14px; 119 | font-weight: lighter; 120 | position: relative !important; 121 | display: flex; 122 | justify-content: flex-start; 123 | } 124 | .languageList > a.paddingShow{ 125 | padding: 1em 2em; 126 | } 127 | .languageList > a:hover{ 128 | background-color: rgb(255 255 255 / 10%); 129 | 130 | } 131 | 132 | .langBtnClose{ 133 | transition: all 0.5s ease; 134 | } 135 | 136 | .langBtnClose:hover{ 137 | background-color: rgb(255 255 255 / 10%) !important; 138 | } 139 | .langBtnClose:focus{ 140 | border-color: transparent !important; 141 | } 142 | 143 | #langListMain{ 144 | background-color: rgb(22, 22, 22); 145 | } 146 | 147 | #tickMark{ 148 | margin-right: 1em; 149 | opacity: 0; 150 | } 151 | #tickMark.tickShow{ 152 | opacity: 1; 153 | } 154 | 155 | 156 | 157 | #countryDropdown{ 158 | z-index: 10; 159 | opacity: 0; 160 | transform: translateY(-100%); 161 | transition: all 0.8s ease; 162 | } 163 | 164 | #countHeader{ 165 | background-color: rgb(35, 35, 35); 166 | padding: 130px 20px 30px 20px !important; 167 | } 168 | 169 | #countMain{ 170 | display: flex; 171 | justify-content: center; 172 | align-items: center; 173 | background-color: rgb(22, 22, 22); 174 | } 175 | 176 | 177 | .countInner{ 178 | width: 100%; 179 | display: flex !important; 180 | justify-content: center !important; 181 | flex-direction: column; 182 | gap: 2px; 183 | padding: 50px 0 80px; 184 | background-image: url(/img/country-select-background\ \(1\).svg); 185 | background-size: contain; 186 | background-repeat: no-repeat; 187 | background-position-x: 80%; 188 | background-position-y: bottom; 189 | } 190 | 191 | .countSelect{ 192 | width: 36%; 193 | padding: 8px; 194 | border: 1px solid #ffffff33; 195 | background-color: rgb(255 255 255 / 4%); 196 | cursor: pointer; 197 | } 198 | 199 | .countSelect:focus{ 200 | border-color: transparent !important; 201 | outline: 2px solid #4969E4 !important; 202 | } 203 | .countrySelector{ 204 | width: 25rem; 205 | border: 1px solid rgb(255 255 255 / 4%); 206 | background-color: rgb(35, 35, 35); 207 | margin-top: 3rem; 208 | display: none; 209 | } 210 | 211 | .countrySelector.active{ 212 | display: block; 213 | } 214 | 215 | .countList{ 216 | max-height: 20rem; 217 | overflow-y: scroll; 218 | } 219 | .countSearch > form{ 220 | padding: 5px 10px; 221 | border-bottom: 1px solid rgb(255 255 255 / 20%); 222 | } 223 | 224 | 225 | .countInput:focus{ 226 | outline: none !important; 227 | } 228 | 229 | #countUl > li{ 230 | padding: 8px; 231 | font-weight: 100; 232 | font-size: 14px; 233 | } 234 | 235 | .innerList{ 236 | transition: all 0.3s ease; 237 | } 238 | 239 | .innerList.selected{ 240 | background-color: rgb(255 255 255 / 10%); 241 | } 242 | 243 | .innerList:hover{ 244 | background-color: rgb(255 255 255 / 10%); 245 | } 246 | 247 | 248 | /* header ends */ 249 | 250 | /* hero starts */ 251 | 252 | .heroSection{ 253 | width: 100%; 254 | background-image: url(../img/streams-bg.png); 255 | background-repeat: repeat-y; 256 | background-size: 100%; 257 | } 258 | 259 | #heroSectionInner{ 260 | max-width: 35rem; 261 | padding: 128px 16px 48px 16px !important; 262 | } 263 | 264 | /* searchbar section starts */ 265 | 266 | .searchControlWrapper{ 267 | border-radius: 4px; 268 | } 269 | .inputControl{ 270 | padding: 7px 16px 7px 40px; 271 | border-radius: 2px; 272 | border: 1px solid #ffffff33; 273 | } 274 | 275 | .inputControl::placeholder{ 276 | color: rgba(255, 255, 255, 0.637); 277 | font-size: 14px; 278 | } 279 | 280 | .inputControl:focus{ 281 | border-color: transparent; 282 | outline: 2px solid #4969E4; 283 | } 284 | 285 | 286 | .search-section p, .search-section p > a{ 287 | color: rgb(0 0 0 / 70%) !important; 288 | } 289 | 290 | .search-section p > a:hover{ 291 | color: rgb(0, 0, 0) !important; 292 | } 293 | 294 | 295 | #resDrop{ 296 | width: 12rem; 297 | max-width: 12rem !important; 298 | background-color: rgb(45, 45, 45); 299 | overflow: hidden; 300 | top: 40px; 301 | margin-left: -50px; 302 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.644); 303 | display: none; 304 | } 305 | 306 | #resDrop.resShow{ 307 | display: block; 308 | } 309 | 310 | #resDrop ul li:hover{ 311 | background-color: rgb(255 255 255 / 10%); 312 | } 313 | 314 | /* searchbar section ends */ 315 | 316 | 317 | #filmSection{ 318 | background-color: rgb(22, 22, 22); 319 | border-bottom: 1px solid #ffffff33; 320 | } 321 | 322 | .monthBtn:hover{ 323 | background-color: rgb(255 255 255 / 10%) !important; 324 | } 325 | .monthBtn:focus{ 326 | outline: 2px solid #4969E4 !important; 327 | } 328 | .monthBtn:focus #chevDown{ 329 | transform: rotate(180deg); 330 | } 331 | 332 | #monthList{ 333 | background-color: #232323; 334 | top: -12rem; 335 | left: -1rem; 336 | width: 9rem; 337 | max-width: 9rem; 338 | z-index: 500; 339 | display: none; 340 | } 341 | 342 | #monthList.monthListShow{ 343 | display: block; 344 | } 345 | 346 | #monthList ul li:hover{ 347 | background-color: rgb(255 255 255 / 10%) !important; 348 | } 349 | #monthList ul li:hover #tickMark{ 350 | opacity: 1; 351 | } 352 | 353 | .filmText{ 354 | color: #ececec; 355 | font-size: 14px; 356 | } 357 | 358 | #filmBtn{ 359 | transition: all 0.3s ease; 360 | } 361 | #filmBtn:hover{ 362 | background-color: rgb(57, 82, 177) !important; 363 | } 364 | /* hero ends */ 365 | 366 | /* cards starts */ 367 | 368 | #cardMain{ 369 | background-color: rgb(22, 22, 22); 370 | } 371 | 372 | #card{ 373 | width: 15rem; 374 | transition: all 0.5s ease; 375 | } 376 | #card:hover{ 377 | transform: scale(1.05); 378 | } 379 | .cardR{ 380 | width: 16.8rem; 381 | } 382 | .cardText{ 383 | font-size: 14px; 384 | } 385 | /* cards ends */ 386 | 387 | #showHide{ 388 | display: none; 389 | } 390 | 391 | #showHide.visible{ 392 | display: block; 393 | } 394 | #showHide2{ 395 | display: none; 396 | } 397 | 398 | #showHide2.visible{ 399 | display: block; 400 | } 401 | 402 | 403 | #showMoreBtn{ 404 | border: 1px solid rgb(255 255 255 / 40%); 405 | font-size: 14px; 406 | color: rgb(255, 255, 255); 407 | transition: all 0.3s ease; 408 | } 409 | #showMoreBtn:hover{ 410 | background-color: rgb(255 255 254 / 10%) !important; 411 | } 412 | #showMoreBtn2{ 413 | border: 1px solid rgb(255 255 255 / 40%); 414 | font-size: 14px; 415 | color: rgb(255, 255, 255); 416 | transition: all 0.3s ease; 417 | } 418 | #showMoreBtn2:hover{ 419 | background-color: rgb(255 255 254 / 10%) !important; 420 | } 421 | 422 | #febCard, #marchCard{ 423 | animation: fadeIn 1s linear; 424 | } 425 | 426 | @keyframes fadeIn{ 427 | 0%{ 428 | opacity: 0; 429 | transform: translateY(10px); 430 | } 431 | 100%{ 432 | opacity: 1; 433 | transform: translateY(0); 434 | } 435 | } 436 | 437 | #febCard{ 438 | display: none; 439 | } 440 | 441 | #span1{ 442 | display: block; 443 | } 444 | 445 | #span2{ 446 | display: none; 447 | } 448 | #span3{ 449 | display: block; 450 | } 451 | 452 | #span4{ 453 | display: none; 454 | } 455 | 456 | #navbar-toggler{ 457 | border: none; 458 | } 459 | #navbar-toggler:focus{ 460 | box-shadow: none; 461 | } 462 | 463 | 464 | @media only screen and (max-width: 430px){ 465 | #nav2Logo{ 466 | max-width: 50% !important; 467 | } 468 | #mc{ 469 | font-size: 0.5rem; 470 | } 471 | } 472 | @media only screen and (min-width: 1280px){ 473 | #sideBar{ 474 | display: none !important; 475 | } 476 | #blackSearchBarMedia{ 477 | display: none !important; 478 | } 479 | } 480 | @media only screen and (max-width: 1280px){ 481 | #navRight{ 482 | display: none !important; 483 | } 484 | 485 | #navbar-toggler{ 486 | display: inline-block !important; 487 | } 488 | #blackSearchBar{ 489 | display: none !important; 490 | } 491 | } 492 | 493 | #blackSearchBarMedia{ 494 | background-color: transparent; 495 | height: 90px; 496 | width: 0%; 497 | backdrop-filter: blur(5px); 498 | transition: all 0.5s ease; 499 | right: 80px !important; 500 | opacity: 0; 501 | } 502 | #blackSearchBarMedia input:focus{ 503 | border: 0; 504 | outline: 0; 505 | } 506 | #blackSearchBarMedia input::placeholder{ 507 | color: rgba(255, 255, 255, 0.726); 508 | font-weight: lighter !important; 509 | } 510 | 511 | 512 | 513 | 514 | #blackSearchBarMedia2{ 515 | background-color: transparent; 516 | height: 100%; 517 | width: 100%; 518 | backdrop-filter: blur(5px); 519 | transition: all 0.5s ease; 520 | top: 0; 521 | } 522 | #blackSearchBarMedia2 input:focus{ 523 | border: 0; 524 | outline: 0; 525 | } 526 | #blackSearchBarMedia2 input::placeholder{ 527 | color: rgba(255, 255, 255, 0.726); 528 | font-weight: lighter !important; 529 | } 530 | 531 | /* .sBtn2{ 532 | color: white; 533 | width: 8% !important; 534 | height: 100%; 535 | border: none; 536 | cursor: pointer; 537 | outline: none; 538 | background: none; 539 | display: none; 540 | } 541 | 542 | .sBtn2.opacityShow2{ 543 | display: inline-block !important; 544 | } 545 | 546 | .sBtn2:hover{ 547 | background-color: transparent !important; 548 | } */ 549 | 550 | #svgSearch2, #closeBtn{ 551 | cursor: pointer !important; 552 | transition: all 0.5s ease; 553 | } 554 | 555 | #blbmMain{ 556 | display: none !important; 557 | } 558 | 559 | @media only screen and (min-width: 991px){ 560 | #sideBar{ 561 | width: 50% !important; 562 | } 563 | #blbmMain{ 564 | display: block !important; 565 | } 566 | } 567 | 568 | @media only screen and (max-width: 400px){ 569 | #sideBar{ 570 | width: 100% !important; 571 | } 572 | } 573 | 574 | @media only screen and (max-width: 992px){ 575 | #navRight{ 576 | display: none !important; 577 | } 578 | 579 | #navbar-toggler{ 580 | display: inline-block !important; 581 | } 582 | #navBar{ 583 | display: none !important; 584 | } 585 | #navBarTwo{ 586 | display: block !important; 587 | } 588 | #closeSideInner{ 589 | display: inline-block !important; 590 | } 591 | } 592 | 593 | #closeSideInner{ 594 | display: none; 595 | } 596 | 597 | #navBarTwo{ 598 | display: none; 599 | background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgb(22, 22, 22) 100%); 600 | } 601 | 602 | /* sidebar starts */ 603 | 604 | #sideBar{ 605 | z-index: 500; 606 | pointer-events: none; 607 | transform: translateX(-100%); 608 | transition: all 0.5s ease; 609 | } 610 | 611 | #openSide{ 612 | display: inline-block; 613 | } 614 | 615 | #closeSide{ 616 | display: none; 617 | } 618 | 619 | .sideBar{ 620 | width: 400px; 621 | max-width: 100% !important; 622 | height: 100vh !important; 623 | pointer-events: all; 624 | background-color: rgb(22, 22, 22); 625 | } 626 | 627 | .sideBtn{ 628 | font-size: 14px; 629 | border: 1px solid rgb(255 255 255 / 40%); 630 | transition: all 0.3s ease; 631 | } 632 | 633 | .sideBtn, .sideBtn > span{ 634 | text-overflow: ellipsis !important; 635 | white-space: nowrap !important; 636 | overflow: hidden !important; 637 | } 638 | .sideBtn:hover{ 639 | background-color: rgb(255 255 254 / 10%) !important; 640 | } 641 | 642 | .sideButtons, .sideListItems{ 643 | border-bottom: 1px solid rgb(255 255 255 / 20%); 644 | } 645 | 646 | .sideListItems{ 647 | font-size: 18px; 648 | } 649 | 650 | /* sidebar ends */ 651 | 652 | 653 | /* latestNews starts */ 654 | 655 | #latestNewsMain{ 656 | background-color: #232323; 657 | 658 | } 659 | 660 | #latestNewsMainInner{ 661 | overflow: auto; 662 | } 663 | 664 | #boxMain{ 665 | min-width: 1200px; 666 | } 667 | 668 | .box{ 669 | width: calc(35% - 3rem) !important; 670 | height: 19rem; 671 | 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); 672 | background-repeat: no-repeat; 673 | background-size: cover; 674 | background-position: left; 675 | min-height: 312px; 676 | box-shadow: 0 0 15px black; 677 | padding: 0 36px; 678 | display: flex; 679 | align-items: center; 680 | 681 | } 682 | 683 | .vr{ 684 | background-color: rgb(255 255 255 / 20%); 685 | } 686 | .vr { 687 | display: inline-block; 688 | align-self: stretch; 689 | margin-top: -1rem; 690 | width: 1px; 691 | height: 21rem; 692 | background-color: rgb(255 255 255 / 20%) !important; 693 | opacity: 1 !important; 694 | } 695 | 696 | .rmAnchor{ 697 | background-color: transparent; 698 | border: 1px solid rgb(255 255 255 / 40%) !important; 699 | color: white !important; 700 | font-weight: lighter !important; 701 | font-size: 12px !important; 702 | padding: 12px 15px !important; 703 | } 704 | .rmAnchor:hover{ 705 | background-color: rgb(255 255 255 / 10%) !important; 706 | } 707 | 708 | .newRmAnchor{ 709 | font-size: 14px !important; 710 | } 711 | /* latestNews ends */ 712 | 713 | 714 | /* company assets starts */ 715 | 716 | #assetsOuter{ 717 | background-image: url(../img/company_assets_bg.png); 718 | background-repeat: no-repeat; 719 | background-position: center center; 720 | background-size: cover; 721 | } 722 | 723 | #assetsMain{ 724 | padding: 80px 10% 80px !important; 725 | background: linear-gradient(270deg, #0F0F0F 15.47%, rgba(15, 15, 15, 0.731185) 49%, rgba(15, 15, 15, 0.34) 75.16%); 726 | 727 | } 728 | 729 | .goAnchor{ 730 | font-size: 15px !important; 731 | } 732 | 733 | /* company assets ends */ 734 | 735 | 736 | /* footer starts */ 737 | 738 | #footMain{ 739 | background-color: rgb(22, 22, 22); 740 | } 741 | #footSpan{ 742 | font-size: 12px; 743 | color: rgb(255 255 255 / 70%) !important; 744 | } 745 | 746 | #footerUl li a{ 747 | font-size: 15px !important; 748 | /* font-weight: 300 !important; */ 749 | } 750 | 751 | @media only screen and (max-width: 575px){ 752 | #footer{ 753 | display: flex; 754 | flex-direction: column; 755 | gap: 10px; 756 | } 757 | #colThreeFoot{ 758 | display: flex; 759 | flex-direction: column; 760 | width: 100%; 761 | } 762 | } 763 | 764 | /* footer ends */ -------------------------------------------------------------------------------- /FAQ.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | What is Netflix? | Netflix Help Center 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |
31 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 |
66 |
67 | 68 | 69 | 70 | 71 |
72 |
73 |
74 | 77 | 78 |
79 |
80 |
81 | 82 | 83 |
84 | 85 |
86 | 87 |
88 |

What is Netflix?

89 |
90 | 91 |
92 | 93 |
94 |

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

95 | 96 |

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.

97 | 98 |

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

99 |
100 |
101 | 102 |
103 | 104 |
105 |

TV Shows & Movies

106 |
107 | 108 |
109 | 110 |
111 | 112 |

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.

113 | 114 | 115 |

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

116 | 117 |
118 |
119 | 120 |
121 | 122 |
123 |

Supported Devices

124 |
125 | 126 |
127 | 128 |
129 | 130 |

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.

131 | 132 |

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

133 | 134 |

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

135 | 136 |

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.

137 | 138 |
139 |
140 | 141 |
142 | 143 |
144 |

Plans and Pricing

145 |
146 | 147 |
148 | 149 |
150 | 151 |

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

152 | 153 | 154 |

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

155 | 156 |
157 |
158 | 159 |
160 | 161 |
162 |

Get Started

163 |
164 | 165 |
166 | 167 |
168 | 169 |

To start watching Netflix:

170 | 171 |
    172 |
  1. Visit netflix.com/signup.
    2. 173 |
  2. Choose a Plan.
    3. 174 |
  3. Create an account by entering your email address and creating a password.
    4. 175 |
  4. Enter a payment method.
    5. 176 |
177 | 178 |

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

179 | 180 |
181 | 182 |
183 | 184 |

Was this article helpful? YesNo

185 | 186 |
187 | 188 |

Need more help? Contact Us

189 |
190 | 191 |
192 | 193 | 194 | 195 |
196 |
197 |
198 |
199 |
Related Articles
200 | 201 |
202 | 243 |
244 |
245 |
246 |
247 |
248 | 249 |
250 | 251 |
252 |
253 | 254 | 255 | 256 | 257 | 258 | 259 | 344 | 345 | 346 | 347 | 348 | 349 | 350 |
351 | 352 | 353 | 354 | 355 | 356 | 357 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Netflix India - Watch TV Shows Online, Watch Movies Online | Khushboo Coding 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 |
62 |
63 | 64 |
65 |
66 |

Unlimited movies, TV shows and more

67 |
68 |

Watch anywhere. Cancel anytime.

69 |

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

70 |
71 |
72 | 73 | 74 |
75 | 77 |
78 |
79 |
80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 |
88 |
89 |
90 |
91 | 92 |
93 |

Enjoy on your TV

94 |

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

95 |
96 | 97 |
98 | 99 | 100 |
101 | 102 |
103 |
104 | 105 |
106 |
107 |
108 |
109 | 110 | 111 | 112 | 113 | 114 | 115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 |

Download your shows to watch offline

124 |

Save your favourites easily and always have something to watch.

125 |
126 | 127 | 128 |
129 | 130 | 131 | 132 |
133 | 134 | 135 | 136 |
137 |
Stranger Things
138 |
Downloading...
139 |
140 | 141 | 142 | 143 | 144 |
145 |
146 | 147 | 148 |
149 |
150 |
151 |
152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 |
160 |
161 |
162 |
163 | 164 |
165 |

Watch Everywhere

166 |

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

167 |
168 | 169 |
170 | 171 | 172 |
173 | 174 |
175 |
176 | 177 |
178 |
179 |
180 |
181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 |
189 |
190 |
191 |
192 | 193 | 194 | 195 |
196 |

Create profiles for kids

197 |

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

198 |
199 | 200 | 201 |
202 | 203 | 204 | 205 |
206 | 207 | 208 |
209 |
210 |
211 |
212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 |
222 |
223 |
224 | 225 |

frequently asked questions

226 | 227 |
228 |
229 | What is Netflix? 230 | 231 |
232 | 233 |
234 |

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!

235 |
236 |
237 | 238 |
239 |
240 | How much does Netflix cost? 241 | 242 |
243 | 244 |
245 |

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.

246 |
247 |
248 | 249 |
250 |
251 | Wher can I watch? 252 | 253 |
254 | 255 |
256 |

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.

257 |
258 |
259 | 260 |
261 |
262 | How do I cancel? 263 | 264 |
265 | 266 |
267 |

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.

268 |
269 |
270 | 271 |
272 |
273 | What can I watch on Netflix? 274 | 275 |
276 | 277 |
278 |

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.

279 |
280 |
281 | 282 |
283 |
284 | Is Netflix good for kids? 285 | 286 |
287 | 288 |
289 |

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.

290 |
291 |
292 | 293 |
294 |

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

295 |
296 |
297 | 298 | 299 |
300 | 302 |
303 |
304 |
305 | 306 | 307 |
308 |
309 | 310 | 311 | 312 | 313 | 314 | 315 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 |
366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | -------------------------------------------------------------------------------- /help.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Netflix Help Center 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 |
31 | 58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 |
66 |
67 | 70 | 71 |
72 |
73 |
74 | 75 | 76 | 77 | 78 |
79 | 80 | 81 | 82 |
83 |
84 |
85 | 98 |
99 |
100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
109 | 110 | 111 |
Explore Topics
112 |

113 | 114 | 115 |
116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 |
124 | 125 | 126 |
127 |
128 | 129 | 130 | Account and Billing 131 |
132 | 133 | 134 |
135 |
136 |

137 | 140 |

141 |
142 |
143 | 205 |
206 |
207 |
208 | 209 | 210 |
211 |

212 | 215 |

216 |
217 |
218 | 250 |
251 |
252 |
253 |
254 |
255 | 256 | 257 | 258 | 259 | 260 | 261 |
262 |
263 | 264 | 265 | Fix a Problem 266 |
267 | 268 | 269 |
270 |
271 |

272 | 275 |

276 |
277 |
278 | 310 |
311 |
312 |
313 | 314 | 315 |
316 |

317 | 320 |

321 |
322 |
323 | 355 |
356 |
357 |
358 | 359 | 360 |
361 |

362 | 365 |

366 |
367 |
368 | 420 |
421 |
422 |
423 | 424 | 425 |
426 |

427 | 430 |

431 |
432 |
433 | 485 |
486 |
487 |
488 |
489 |
490 | 491 | 492 | 493 | 494 | 495 | 496 |
497 |
498 | 499 | 500 | Watching and Playing 501 |
502 | 503 | 504 |
505 |
506 |

507 | 510 |

511 |
512 |
513 | 545 |
546 |
547 |
548 | 549 | 550 |
551 |

552 | 555 |

556 |
557 |
558 | 610 |
611 |
612 |
613 | 614 | 615 |
616 |

617 | 620 |

621 |
622 |
623 | 665 |
666 |
667 |
668 | 669 | 670 |
671 |

672 | 675 |

676 |
677 |
678 | 720 |
721 |
722 |
723 | 724 |
725 |

726 | 729 |

730 |
731 |
732 | 754 |
755 |
756 |
757 |
758 |
759 | 760 | 761 | 762 | 763 | 764 |
765 |
766 | 767 | 768 | Getting Started 769 |
770 | 771 | 772 |
773 |
774 |

775 | 778 |

779 |
780 |
781 | 833 |
834 |
835 |
836 | 837 | 838 |
839 |

840 | 843 |

844 |
845 |
846 | 898 |
899 |
900 |
901 |
902 |
903 | 904 |
905 | 906 | 907 | 908 | 909 | 910 | 973 | 974 | 975 | 976 | 977 | 978 |
979 |
980 |

Need more help?

981 | Contact Us 982 |
983 |
984 | 985 | 986 | 987 | 988 |
989 | 990 | 991 | 992 |
993 |
994 | 995 |
996 | 1061 | 1062 | 1063 | 1064 | 1065 |
1066 | 1067 |
1068 | 1074 |
1075 |
1076 |
1077 |
1078 | 1079 | 1080 | 1081 | 1082 | 1083 |
1084 | 1085 | 1086 | 1087 | 1088 | 1089 | 1090 | --------------------------------------------------------------------------------