├── README.md ├── dis img ├── hs.jpeg ├── nxt.png ├── pre.png ├── sp.png ├── ava.webp ├── dahan.webp ├── dis 1.webp ├── dis.webp ├── free.webp ├── geo 1.webp ├── hot 1.webp ├── hot.webp ├── hots.webp ├── hotst.webp ├── junc.webp ├── logo.png ├── mar 3.webp ├── nat.webp ├── pic 1.webp ├── pic 2.webp ├── pic 3.webp ├── pic 4.webp ├── pic 5.webp ├── pic 6.webp ├── pix.webp ├── pixa.png ├── rudra.webp ├── sec.webp ├── star.webp ├── logo 1.jpeg ├── download.jpeg ├── slider 1.webp ├── slider 10.webp ├── slider 11.webp ├── slider 2.webp ├── slider 3.webp ├── slider 4.webp ├── slider 5.webp ├── slider 6.webp ├── slider 7.webp ├── slider 8.webp ├── slider 9.webp ├── Desktop - Shortcut.lnk ├── Hotstar_Specials.webp ├── disney-plus-logo-0.png ├── 1368141-i-0afa15e1ae92.webp ├── 1370557-i-000f74f23389.webp ├── 1375333-i-e44f367bc7fa.webp ├── 1375390-i-e84e2e51b750.webp ├── 1410767-i-c49c10eea7be.webp ├── 1418867-t-be59a5149015.webp ├── 1419414-t-3299149a02eb.webp ├── 1424207-t-aa48f8b0eba9.webp ├── 1438077-i-feb2ab0976ee.webp ├── 1440725-t-df424dc3b792.webp ├── 1443136-i-3ef74303e41f.webp ├── 1543375-i-ddf54333d74a.webp ├── 1544804-i-fff713deb430.webp ├── 1561965-t-a6aecea624e2.webp ├── Screenshot 2023-10-08 073620.png ├── Screenshot 2023-10-11 092859.png ├── Screenshot 2023-10-11 092908.png ├── Screenshot 2023-10-11 093136.png ├── 29-291927_disney-plus-logo-png-transparent-png.png ├── 29-291927_disney-plus-logo-png-transparent-png (1).png ├── disneyplus-hotstar-logo-freelogovectors.net_-400x400.webp └── 149-1495908_disney-pixar-png-clip-art-free-download-disney.png ├── disney video ├── 1on5cf_1587393232549.mp4 ├── a6lr0r_1587393331483.mp4 ├── ojerhm_1587393280208.mp4 ├── qc9clm_1669284974594.mp4 ├── qh3yh_1587393133132.mp4 └── utwmfd_1587393376512 (1).mp4 ├── index.js ├── style.css └── index.html /README.md: -------------------------------------------------------------------------------- 1 | # Disney_website 2 | disney plus clone using html css javascript 3 | -------------------------------------------------------------------------------- /dis img/hs.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/hs.jpeg -------------------------------------------------------------------------------- /dis img/nxt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/nxt.png -------------------------------------------------------------------------------- /dis img/pre.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pre.png -------------------------------------------------------------------------------- /dis img/sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/sp.png -------------------------------------------------------------------------------- /dis img/ava.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/ava.webp -------------------------------------------------------------------------------- /dis img/dahan.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/dahan.webp -------------------------------------------------------------------------------- /dis img/dis 1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/dis 1.webp -------------------------------------------------------------------------------- /dis img/dis.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/dis.webp -------------------------------------------------------------------------------- /dis img/free.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/free.webp -------------------------------------------------------------------------------- /dis img/geo 1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/geo 1.webp -------------------------------------------------------------------------------- /dis img/hot 1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/hot 1.webp -------------------------------------------------------------------------------- /dis img/hot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/hot.webp -------------------------------------------------------------------------------- /dis img/hots.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/hots.webp -------------------------------------------------------------------------------- /dis img/hotst.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/hotst.webp -------------------------------------------------------------------------------- /dis img/junc.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/junc.webp -------------------------------------------------------------------------------- /dis img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/logo.png -------------------------------------------------------------------------------- /dis img/mar 3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/mar 3.webp -------------------------------------------------------------------------------- /dis img/nat.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/nat.webp -------------------------------------------------------------------------------- /dis img/pic 1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 1.webp -------------------------------------------------------------------------------- /dis img/pic 2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 2.webp -------------------------------------------------------------------------------- /dis img/pic 3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 3.webp -------------------------------------------------------------------------------- /dis img/pic 4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 4.webp -------------------------------------------------------------------------------- /dis img/pic 5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 5.webp -------------------------------------------------------------------------------- /dis img/pic 6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pic 6.webp -------------------------------------------------------------------------------- /dis img/pix.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pix.webp -------------------------------------------------------------------------------- /dis img/pixa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/pixa.png -------------------------------------------------------------------------------- /dis img/rudra.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/rudra.webp -------------------------------------------------------------------------------- /dis img/sec.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/sec.webp -------------------------------------------------------------------------------- /dis img/star.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/star.webp -------------------------------------------------------------------------------- /dis img/logo 1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/logo 1.jpeg -------------------------------------------------------------------------------- /dis img/download.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/download.jpeg -------------------------------------------------------------------------------- /dis img/slider 1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 1.webp -------------------------------------------------------------------------------- /dis img/slider 10.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 10.webp -------------------------------------------------------------------------------- /dis img/slider 11.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 11.webp -------------------------------------------------------------------------------- /dis img/slider 2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 2.webp -------------------------------------------------------------------------------- /dis img/slider 3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 3.webp -------------------------------------------------------------------------------- /dis img/slider 4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 4.webp -------------------------------------------------------------------------------- /dis img/slider 5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 5.webp -------------------------------------------------------------------------------- /dis img/slider 6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 6.webp -------------------------------------------------------------------------------- /dis img/slider 7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 7.webp -------------------------------------------------------------------------------- /dis img/slider 8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 8.webp -------------------------------------------------------------------------------- /dis img/slider 9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/slider 9.webp -------------------------------------------------------------------------------- /dis img/Desktop - Shortcut.lnk: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Desktop - Shortcut.lnk -------------------------------------------------------------------------------- /dis img/Hotstar_Specials.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Hotstar_Specials.webp -------------------------------------------------------------------------------- /dis img/disney-plus-logo-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/disney-plus-logo-0.png -------------------------------------------------------------------------------- /dis img/1368141-i-0afa15e1ae92.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1368141-i-0afa15e1ae92.webp -------------------------------------------------------------------------------- /dis img/1370557-i-000f74f23389.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1370557-i-000f74f23389.webp -------------------------------------------------------------------------------- /dis img/1375333-i-e44f367bc7fa.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1375333-i-e44f367bc7fa.webp -------------------------------------------------------------------------------- /dis img/1375390-i-e84e2e51b750.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1375390-i-e84e2e51b750.webp -------------------------------------------------------------------------------- /dis img/1410767-i-c49c10eea7be.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1410767-i-c49c10eea7be.webp -------------------------------------------------------------------------------- /dis img/1418867-t-be59a5149015.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1418867-t-be59a5149015.webp -------------------------------------------------------------------------------- /dis img/1419414-t-3299149a02eb.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1419414-t-3299149a02eb.webp -------------------------------------------------------------------------------- /dis img/1424207-t-aa48f8b0eba9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1424207-t-aa48f8b0eba9.webp -------------------------------------------------------------------------------- /dis img/1438077-i-feb2ab0976ee.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1438077-i-feb2ab0976ee.webp -------------------------------------------------------------------------------- /dis img/1440725-t-df424dc3b792.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1440725-t-df424dc3b792.webp -------------------------------------------------------------------------------- /dis img/1443136-i-3ef74303e41f.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1443136-i-3ef74303e41f.webp -------------------------------------------------------------------------------- /dis img/1543375-i-ddf54333d74a.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1543375-i-ddf54333d74a.webp -------------------------------------------------------------------------------- /dis img/1544804-i-fff713deb430.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1544804-i-fff713deb430.webp -------------------------------------------------------------------------------- /dis img/1561965-t-a6aecea624e2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/1561965-t-a6aecea624e2.webp -------------------------------------------------------------------------------- /disney video/1on5cf_1587393232549.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/1on5cf_1587393232549.mp4 -------------------------------------------------------------------------------- /disney video/a6lr0r_1587393331483.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/a6lr0r_1587393331483.mp4 -------------------------------------------------------------------------------- /disney video/ojerhm_1587393280208.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/ojerhm_1587393280208.mp4 -------------------------------------------------------------------------------- /disney video/qc9clm_1669284974594.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/qc9clm_1669284974594.mp4 -------------------------------------------------------------------------------- /disney video/qh3yh_1587393133132.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/qh3yh_1587393133132.mp4 -------------------------------------------------------------------------------- /dis img/Screenshot 2023-10-08 073620.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Screenshot 2023-10-08 073620.png -------------------------------------------------------------------------------- /dis img/Screenshot 2023-10-11 092859.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Screenshot 2023-10-11 092859.png -------------------------------------------------------------------------------- /dis img/Screenshot 2023-10-11 092908.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Screenshot 2023-10-11 092908.png -------------------------------------------------------------------------------- /dis img/Screenshot 2023-10-11 093136.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/Screenshot 2023-10-11 093136.png -------------------------------------------------------------------------------- /disney video/utwmfd_1587393376512 (1).mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/disney video/utwmfd_1587393376512 (1).mp4 -------------------------------------------------------------------------------- /dis img/29-291927_disney-plus-logo-png-transparent-png.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/29-291927_disney-plus-logo-png-transparent-png.png -------------------------------------------------------------------------------- /dis img/29-291927_disney-plus-logo-png-transparent-png (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/29-291927_disney-plus-logo-png-transparent-png (1).png -------------------------------------------------------------------------------- /dis img/disneyplus-hotstar-logo-freelogovectors.net_-400x400.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/disneyplus-hotstar-logo-freelogovectors.net_-400x400.webp -------------------------------------------------------------------------------- /dis img/149-1495908_disney-pixar-png-clip-art-free-download-disney.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abinaya2601/Disney_website/HEAD/dis img/149-1495908_disney-pixar-png-clip-art-free-download-disney.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | let movies = [ 2 | { 3 | name: 'Secret Invasion', 4 | des: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!', 5 | image: 'sec.webp' 6 | }, 7 | 8 | { 9 | name: 'The Night manager', 10 | des: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!', 11 | image: 'slider 10.webp' 12 | }, 13 | 14 | { 15 | name: 'Avathar', 16 | des: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!', 17 | image: 'ava.webp' 18 | }, 19 | 20 | 21 | ]; 22 | 23 | const carousel = document.querySelector('.carousel'); 24 | let sliders = []; 25 | 26 | let slideIndex = 0; // to track current slide index. 27 | 28 | const createSlide = () => { 29 | if(slideIndex >= movies.length){ 30 | slideIndex = 0; 31 | } 32 | 33 | // creating DOM element 34 | let slide = document.createElement('div'); 35 | let imgElement = document.createElement('img'); 36 | let content = document.createElement('div'); 37 | let h1 = document.createElement('h1'); 38 | let p = document.createElement('p'); 39 | 40 | 41 | 42 | // attaching all elements 43 | imgElement.appendChild(document.createTextNode('')); 44 | h1.appendChild(document.createTextNode(movies[slideIndex].name)); 45 | p.appendChild(document.createTextNode(movies[slideIndex].des)); 46 | content.appendChild(h1); 47 | content.appendChild(p); 48 | slide.appendChild(content); 49 | slide.appendChild(imgElement); 50 | carousel.appendChild(slide); 51 | 52 | 53 | 54 | // setting up image 55 | imgElement.src = movies[slideIndex].image; 56 | slideIndex++; 57 | 58 | 59 | // setting elements classname 60 | slide.className = 'slider'; 61 | content.className = 'slide-content'; 62 | h1.className = 'movie-title'; 63 | p.className = 'movie-des'; 64 | 65 | sliders.push(slide); 66 | 67 | 68 | if(sliders.length){ 69 | sliders[0].style.marginLeft = `calc(-${100 * (sliders.length - 2)}% - ${30 * (sliders.length - 2)}px)`; 70 | } 71 | } 72 | 73 | for(let i = 0; i < 3; i++) 74 | createSlide(); 75 | setInterval(() => { 76 | createSlide(); 77 | }, 3000); 78 | 79 | /// video cards 80 | 81 | const videoCards = [...document.querySelectorAll('.video-card')]; 82 | 83 | videoCards.forEach(item => { 84 | item.addEventListener('mouseover', () => { 85 | let video =item.children[1]; 86 | video.play(); 87 | }) 88 | item.addEventListener('mouseleave', () => { 89 | let video=item.children[1]; 90 | video.pause(); 91 | }) 92 | }) 93 | 94 | // card sliders 95 | 96 | let cardContainers = [...document.querySelectorAll('.card-container')]; 97 | let preBtns = [...document.querySelectorAll('.pre-btn')]; 98 | let nxtBtns = [...document.querySelectorAll('.nxt-btn')]; 99 | 100 | cardContainers.forEach((item, i) => { 101 | let containerDimensions = item.getBoundingClientRect(); 102 | let containerWidth = containerDimensions.width; 103 | 104 | nxtBtns[i].addEventListener('click', () => { 105 | item.scrollLeft += containerWidth - 200; 106 | }) 107 | 108 | preBtns[i].addEventListener('click', () => { 109 | item.scrollLeft -= containerWidth + 200; 110 | }) 111 | }) 112 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | width: 100%; 9 | background: #0c111b; 10 | position: relative; 11 | font-family: roboto, sans-serif; 12 | } 13 | 14 | .navbar{ 15 | width: 100%; 16 | height: 80px; 17 | position: fixed; 18 | top: 0; 19 | left: 0; 20 | padding: 0 4%; 21 | background: #0c111b; 22 | z-index: 9; 23 | display: flex; 24 | align-items: center; 25 | } 26 | 27 | .brand-logo{ 28 | height: 70px; 29 | } 30 | 31 | .nav-links{ 32 | margin-top: 10px; 33 | display: flex; 34 | list-style:none; 35 | } 36 | 37 | .nav-items a{ 38 | text-decoration: none; 39 | margin-left: 20px; 40 | text-transform: capitalize; 41 | color: #fff; 42 | opacity: 0.9; 43 | } 44 | 45 | .right-container{ 46 | display: block; 47 | margin-left: auto; 48 | } 49 | 50 | .search-box{ 51 | border: none; 52 | border-bottom: 1px solid #aaa; 53 | background: transparent; 54 | outline: none; 55 | height: 30px; 56 | color:#fff; 57 | width: 250px; 58 | text-transform: capitalize; 59 | font-size: 16px; 60 | font-weight: 500; 61 | transition: .5s; 62 | } 63 | 64 | .search-box:focus{ 65 | width: 400px; 66 | border-color: #1f80e0; 67 | } 68 | 69 | .sub-btn{ 70 | background: #1f80e0; 71 | height: 30px; 72 | padding: 0 20px; 73 | color: #fff; 74 | border-radius: 5px; 75 | border: none; 76 | outline: none; 77 | text-transform: uppercase; 78 | font-weight: 700; 79 | font-size: 12px; 80 | margin: 0 10px; 81 | } 82 | 83 | .login-link{ 84 | color: #fff; 85 | opacity: 0.9; 86 | text-transform: uppercase; 87 | font-size: 15px; 88 | font-weight: 700; 89 | text-decoration: none; 90 | } 91 | 92 | .carousel-container{ 93 | position: relative; 94 | width: 100%; 95 | height: 450px; 96 | padding: 20px 0; 97 | overflow-x: hidden; 98 | margin-top: 80px; 99 | } 100 | 101 | .carousel{ 102 | display: flex; 103 | width: 92%; 104 | height: 100%; 105 | position: relative; 106 | margin: auto; 107 | } 108 | 109 | .slider{ 110 | flex: 0 0 auto; 111 | margin-right: 30px; 112 | position: relative; 113 | background: rgba(0, 0, 0,0.5); 114 | border-radius: 5px; 115 | width: 100%; 116 | height: 100%; 117 | left: 0; 118 | transition: 1s; 119 | overflow: hidden; 120 | } 121 | 122 | .slider img{ 123 | width: auto; 124 | min-width: 20px; 125 | min-height: 100%; 126 | object-fit: cover; 127 | display: block; 128 | margin-left: auto; 129 | } 130 | 131 | .slide-content{ 132 | position: absolute; 133 | width: 50%; 134 | height: 100%; 135 | z-index: 2; 136 | background: linear-gradient(to right, #030b17 80%, #0c111b00); 137 | color: #fff; 138 | } 139 | 140 | .movie-title{ 141 | padding-left: 50px; 142 | text-transform: capitalize; 143 | margin-top: 80px; 144 | } 145 | 146 | .movie-des{ 147 | width: 80%; 148 | line-height: 30px; 149 | padding-left: 50px; 150 | margin-top: 30px; 151 | opacity: 0.8; 152 | } 153 | 154 | .video-card-container{ 155 | position: relative; 156 | width: 92%; 157 | margin: auto; 158 | height: 10vw; 159 | display: flex; 160 | margin-bottom: 20px; 161 | justify-content: space-between; 162 | } 163 | 164 | .video-card{ 165 | position: relative; 166 | min-width: calc(100%/5 - 10px); 167 | width: calc(100%/5 - 10px); 168 | height: 100%; 169 | border-radius: 5px; 170 | overflow: hidden; 171 | background: #030b17; 172 | } 173 | 174 | .video-card-image, 175 | .card-video{ 176 | width: 100%; 177 | height: 100%; 178 | object-fit: cover; 179 | } 180 | 181 | .card-video{ 182 | position: absolute; 183 | } 184 | 185 | .video-card:hover .video-card-image{ 186 | display: none; 187 | } 188 | 189 | .title{ 190 | color: #fff; 191 | opacity: 0.9; 192 | padding-left: 4%; 193 | text-transform: capitalize; 194 | font-size: 22px; 195 | font-weight: 500; 196 | } 197 | 198 | .movies-list{ 199 | width: 100%; 200 | height: 220px; 201 | position: relative; 202 | margin: 10px 0 20px; 203 | } 204 | 205 | .card-container{ 206 | position: relative; 207 | width: 92%; 208 | padding-left: 10px; 209 | height: 220px; 210 | display: flex; 211 | margin: 0 auto; 212 | align-items: center; 213 | overflow-x: auto; 214 | overflow-y: visible; 215 | scroll-behavior: smooth; 216 | } 217 | 218 | .card-container::-webkit-scrollbar{ 219 | display: none; 220 | } 221 | 222 | .card{ 223 | position: relative; 224 | min-width: 150px; 225 | width: 150px; 226 | height: 200px; 227 | border-radius: 5px; 228 | overflow: hidden; 229 | margin-right: 10px; 230 | transition: .5s; 231 | } 232 | 233 | .card-img{ 234 | width: 100%; 235 | height: 100%; 236 | object-fit: cover; 237 | } 238 | 239 | .card:hover{ 240 | transform: scale(1.1); 241 | } 242 | 243 | .card:hover .card-body{ 244 | opacity: 1; 245 | } 246 | 247 | .card-body{ 248 | opacity: 0; 249 | width: 100%; 250 | height: 100%; 251 | position: absolute; 252 | top: 0; 253 | left: 0; 254 | z-index: 2; 255 | background: linear-gradient(to bottom, rgba(4, 8, 15, 0), #192133 90%); 256 | padding: 10px; 257 | transition: 0.5s; 258 | } 259 | 260 | .name{ 261 | color: #fff; 262 | font-size: 15px; 263 | font-weight: 500; 264 | text-transform: capitalize; 265 | margin-top: 60%; 266 | } 267 | 268 | .des{ 269 | color: #fff; 270 | opacity: 0.8; 271 | margin: 5px 0; 272 | font-weight: 500; 273 | font-size: 12px; 274 | } 275 | 276 | .watchlist-btn{ 277 | position: relative; 278 | width: 100%; 279 | text-transform: capitalize; 280 | background: none; 281 | border: none; 282 | font-weight: 500; 283 | text-align: right; 284 | color: rgba(255, 255, 255, 0.5); 285 | margin: 5px 0; 286 | cursor: pointer; 287 | padding: 10px 5px; 288 | border-radius: 5px; 289 | } 290 | 291 | .watchlist-btn::before{ 292 | content: ''; 293 | position: absolute; 294 | top: 0; 295 | left: -5px; 296 | height: 35px; 297 | width: 35px; 298 | background-image: url(images/add.png); 299 | background-size: cover; 300 | transform: scale(0.4); 301 | } 302 | 303 | .watchlist-btn:hover{ 304 | color: #fff; 305 | background: rgba(255, 255, 255, 0.1); 306 | } 307 | 308 | .pre-btn, 309 | .nxt-btn{ 310 | position: absolute; 311 | top: 0; 312 | width: 5%; 313 | height: 100%; 314 | z-index: 2; 315 | border: none; 316 | cursor: pointer; 317 | outline: none; 318 | } 319 | 320 | .pre-btn{ 321 | left: 0; 322 | background: linear-gradient(to right, #0c111b 0%, #0c111b00); 323 | } 324 | 325 | .nxt-btn{ 326 | right: 0; 327 | background: linear-gradient(to left, #0c111b 0%, #0c111b00); 328 | } 329 | 330 | .pre-btn img, 331 | .nxt-btn img{ 332 | width: 15px; 333 | height: 20px; 334 | opacity: 0; 335 | } 336 | 337 | .pre-btn:hover img, 338 | .nxt-btn:hover img{ 339 | opacity: 1; 340 | } 341 | 342 | 343 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Disney plus hotstar 7 | 8 | 9 | 10 | 11 | 12 | 27 | 28 |
29 |
30 | 31 | 38 |
39 |
40 | 41 |
42 |
43 | 44 | 45 |
46 |
47 | 48 | 49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 | 61 |
62 |
63 |

Popular shows

64 |
65 | 66 | 67 |
68 |
69 | 70 |
71 |

Jhansi

72 |
Lorem ipsum dolor sit amet consectetur.
73 | 74 |
75 |
76 |
77 | 78 |
79 |

Masoom

80 |
Lorem ipsum dolor sit amet consectetur.
81 | 82 |
83 |
84 |
85 | 86 |
87 |

Dhagan

88 |
Lorem ipsum dolor sit amet consectetur.
89 | 90 |
91 |
92 |
93 | 94 |
95 |

Parampara

96 |
Lorem ipsum dolor sit amet consectetur.
97 | 98 |
99 |
100 |
101 | 102 |
103 |

Fall

104 |
Lorem ipsum dolor sit amet consectetur.
105 | 106 |
107 |
108 |
109 | 110 |
111 |

Untouchable

112 |
Lorem ipsum dolor sit amet consectetur.
113 | 114 |
115 |
116 |
117 | 118 |
119 |

shaitan

120 |
Lorem ipsum dolor sit amet consectetur.
121 | 122 |
123 |
124 |
125 | 126 |
127 |

Madhagam

128 |
Lorem ipsum dolor sit amet consectetur.
129 | 130 |
131 |
132 |
133 | 134 |
135 |

The night manager

136 |
Lorem ipsum dolor sit amet consectetur.
137 | 138 |
139 |
140 |
141 | 142 |
143 |

Trial

144 |
Lorem ipsum dolor sit amet consectetur.
145 | 146 |
147 |
148 |
149 | 150 |
151 |

Fall

152 |
Lorem ipsum dolor sit amet consectetur.
153 | 154 |
155 |
156 |
157 | 158 |
159 |

Dhagan

160 |
Lorem ipsum dolor sit amet consectetur.
161 | 162 |
163 |
164 |
165 | 166 |
167 |

1920

168 |
Lorem ipsum dolor sit amet consectetur.
169 | 170 |
171 |
172 |
173 | 174 |
175 |

Madhagam

176 |
Lorem ipsum dolor sit amet consectetur.
177 | 178 |
179 |
180 |
181 | 182 | 183 |

Recommended for you

184 |
185 | 186 | 187 |
188 |
189 | 190 |
191 |

Jungle book

192 |
Lorem ipsum dolor sit amet consectetur.
193 | 194 |
195 |
196 | 197 |
198 |
199 | 200 |
201 |

Untouchable

202 |
Lorem ipsum dolor sit amet consectetur.
203 | 204 |
205 |
206 |
207 |
208 | 209 |
210 |

Chhichore

211 |
Lorem ipsum dolor sit amet consectetur.
212 | 213 |
214 |
215 |
216 |
217 | 218 |
219 |

The night manager

220 |
Lorem ipsum dolor sit amet consectetur.
221 | 222 |
223 |
224 |
225 |
226 | 227 |
228 |

The trial

229 |
Lorem ipsum dolor sit amet consectetur.
230 | 231 |
232 |
233 |
234 |
235 | 236 |
237 |

1920

238 |
Lorem ipsum dolor sit amet consectetur.
239 | 240 |
241 |
242 |
243 |
244 | 245 |
246 |

Mathagam

247 |
Lorem ipsum dolor sit amet consectetur.
248 | 249 |
250 |
251 |
252 |
253 | 254 |
255 |

The first responder

256 |
Lorem ipsum dolor sit amet consectetur.
257 | 258 |
259 |
260 |
261 |
262 | 263 |
264 |

Billions

265 |
Lorem ipsum dolor sit amet consectetur.
266 | 267 |
268 | 269 |
270 |
271 | 272 |
273 |

Billions

274 |
Lorem ipsum dolor sit amet consectetur.
275 | 276 |
277 | 278 |
279 |
280 | 281 |
282 |

Billions

283 |
Lorem ipsum dolor sit amet consectetur.
284 | 285 |
286 |
287 |
288 | 289 |
290 |

Billions

291 |
Lorem ipsum dolor sit amet consectetur.
292 | 293 |
294 |
295 |
296 | 297 |
298 |

Billions

299 |
Lorem ipsum dolor sit amet consectetur.
300 | 301 |
302 |
303 |
304 | 305 |
306 |

Billions

307 |
Lorem ipsum dolor sit amet consectetur.
308 | 309 |
310 |
311 | 312 | 313 | 314 | 315 | 316 | 317 | --------------------------------------------------------------------------------