diff --git a/Hotstar Clone/README.md b/Hotstar Clone/README.md new file mode 100644 index 0000000..f8b4ba3 --- /dev/null +++ b/Hotstar Clone/README.md @@ -0,0 +1 @@ +# hotstar-clone \ No newline at end of file diff --git a/Hotstar Clone/images/add.png b/Hotstar Clone/images/add.png new file mode 100644 index 0000000..d1df30f Binary files /dev/null and b/Hotstar Clone/images/add.png differ diff --git a/Hotstar Clone/images/disney.png b/Hotstar Clone/images/disney.png new file mode 100644 index 0000000..a828f9a Binary files /dev/null and b/Hotstar Clone/images/disney.png differ diff --git a/Hotstar Clone/images/geographic.png b/Hotstar Clone/images/geographic.png new file mode 100644 index 0000000..6baa2f0 Binary files /dev/null and b/Hotstar Clone/images/geographic.png differ diff --git a/Hotstar Clone/images/logo.png b/Hotstar Clone/images/logo.png new file mode 100644 index 0000000..f2f6ffd Binary files /dev/null and b/Hotstar Clone/images/logo.png differ diff --git a/Hotstar Clone/images/marvel.png b/Hotstar Clone/images/marvel.png new file mode 100644 index 0000000..e59b712 Binary files /dev/null and b/Hotstar Clone/images/marvel.png differ diff --git a/Hotstar Clone/images/nxt.png b/Hotstar Clone/images/nxt.png new file mode 100644 index 0000000..154bbe5 Binary files /dev/null and b/Hotstar Clone/images/nxt.png differ diff --git a/Hotstar Clone/images/pixar.png b/Hotstar Clone/images/pixar.png new file mode 100644 index 0000000..65980d5 Binary files /dev/null and b/Hotstar Clone/images/pixar.png differ diff --git a/Hotstar Clone/images/play.png b/Hotstar Clone/images/play.png new file mode 100644 index 0000000..1c0bb36 Binary files /dev/null and b/Hotstar Clone/images/play.png differ diff --git a/Hotstar Clone/images/poster 1.png b/Hotstar Clone/images/poster 1.png new file mode 100644 index 0000000..8a7136b Binary files /dev/null and b/Hotstar Clone/images/poster 1.png differ diff --git a/Hotstar Clone/images/poster 10.png b/Hotstar Clone/images/poster 10.png new file mode 100644 index 0000000..b1d9480 Binary files /dev/null and b/Hotstar Clone/images/poster 10.png differ diff --git a/Hotstar Clone/images/poster 11.png b/Hotstar Clone/images/poster 11.png new file mode 100644 index 0000000..98f1c03 Binary files /dev/null and b/Hotstar Clone/images/poster 11.png differ diff --git a/Hotstar Clone/images/poster 12.png b/Hotstar Clone/images/poster 12.png new file mode 100644 index 0000000..fe71d98 Binary files /dev/null and b/Hotstar Clone/images/poster 12.png differ diff --git a/Hotstar Clone/images/poster 2.png b/Hotstar Clone/images/poster 2.png new file mode 100644 index 0000000..b80508a Binary files /dev/null and b/Hotstar Clone/images/poster 2.png differ diff --git a/Hotstar Clone/images/poster 3.png b/Hotstar Clone/images/poster 3.png new file mode 100644 index 0000000..077916c Binary files /dev/null and b/Hotstar Clone/images/poster 3.png differ diff --git a/Hotstar Clone/images/poster 4.png b/Hotstar Clone/images/poster 4.png new file mode 100644 index 0000000..e35f788 Binary files /dev/null and b/Hotstar Clone/images/poster 4.png differ diff --git a/Hotstar Clone/images/poster 5.png b/Hotstar Clone/images/poster 5.png new file mode 100644 index 0000000..49760e4 Binary files /dev/null and b/Hotstar Clone/images/poster 5.png differ diff --git a/Hotstar Clone/images/poster 6.png b/Hotstar Clone/images/poster 6.png new file mode 100644 index 0000000..0828b53 Binary files /dev/null and b/Hotstar Clone/images/poster 6.png differ diff --git a/Hotstar Clone/images/poster 7.png b/Hotstar Clone/images/poster 7.png new file mode 100644 index 0000000..27fcb17 Binary files /dev/null and b/Hotstar Clone/images/poster 7.png differ diff --git a/Hotstar Clone/images/poster 8.png b/Hotstar Clone/images/poster 8.png new file mode 100644 index 0000000..79c5afe Binary files /dev/null and b/Hotstar Clone/images/poster 8.png differ diff --git a/Hotstar Clone/images/poster 9.png b/Hotstar Clone/images/poster 9.png new file mode 100644 index 0000000..35a7779 Binary files /dev/null and b/Hotstar Clone/images/poster 9.png differ diff --git a/Hotstar Clone/images/pre.png b/Hotstar Clone/images/pre.png new file mode 100644 index 0000000..304674a Binary files /dev/null and b/Hotstar Clone/images/pre.png differ diff --git a/Hotstar Clone/images/slider 1.png b/Hotstar Clone/images/slider 1.png new file mode 100644 index 0000000..1e499cf Binary files /dev/null and b/Hotstar Clone/images/slider 1.png differ diff --git a/Hotstar Clone/images/slider 2.png b/Hotstar Clone/images/slider 2.png new file mode 100644 index 0000000..2a2a37d Binary files /dev/null and b/Hotstar Clone/images/slider 2.png differ diff --git a/Hotstar Clone/images/slider 3.png b/Hotstar Clone/images/slider 3.png new file mode 100644 index 0000000..6d6fa85 Binary files /dev/null and b/Hotstar Clone/images/slider 3.png differ diff --git a/Hotstar Clone/images/slider 4.png b/Hotstar Clone/images/slider 4.png new file mode 100644 index 0000000..6006942 Binary files /dev/null and b/Hotstar Clone/images/slider 4.png differ diff --git a/Hotstar Clone/images/slider 5.png b/Hotstar Clone/images/slider 5.png new file mode 100644 index 0000000..32ece99 Binary files /dev/null and b/Hotstar Clone/images/slider 5.png differ diff --git a/Hotstar Clone/images/star-wars.png b/Hotstar Clone/images/star-wars.png new file mode 100644 index 0000000..e98b8b4 Binary files /dev/null and b/Hotstar Clone/images/star-wars.png differ diff --git a/Hotstar Clone/index.html b/Hotstar Clone/index.html new file mode 100644 index 0000000..74f5fdf --- /dev/null +++ b/Hotstar Clone/index.html @@ -0,0 +1,280 @@ + + + + + + + Disney+ Clone + + + + + + +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Recommended For You

+
+ + +
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+ +
+

Movie Name

+
Lorem ipsum dolor sit amet.
+ +
+
+
+
+

Popular Shows

+
+ + +
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+ +
+

movie name

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+
+ + + diff --git a/Hotstar Clone/index.js b/Hotstar Clone/index.js new file mode 100644 index 0000000..11955ac --- /dev/null +++ b/Hotstar Clone/index.js @@ -0,0 +1,120 @@ +let movies = [ + { + name: "falcon and the winter soldier", + des: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!", + image: "images/slider 2.png" + }, + { + name: "loki", + des: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!", + image: "images/slider 1.png" + }, + { + name: "wanda vision", + des: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!", + image: "images/slider 3.png" + }, + { + name: "raya and the last dragon", + des: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!", + image: "images/slider 4.png" + }, + { + name: "luca", + des: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit porro et veniam excepturi, eaque voluptatem impedit nulla laboriosam facilis ut laboriosam libero!", + image: "images/slider 5.png" + } +]; + +const carousel = document.querySelector(".carousel"); +let sliders = []; + +let slideIndex = 0; // to track current slide index. + +const createSlide = () => { + if (slideIndex >= movies.length) { + slideIndex = 0; + } + + // creating DOM element + let slide = document.createElement("div"); + var imgElement = document.createElement("img"); + let content = document.createElement("div"); + let h1 = document.createElement("h1"); + let p = document.createElement("p"); + + // attaching all elements + imgElement.appendChild(document.createTextNode("")); + h1.appendChild(document.createTextNode(movies[slideIndex].name)); + p.appendChild(document.createTextNode(movies[slideIndex].des)); + content.appendChild(h1); + content.appendChild(p); + slide.appendChild(content); + slide.appendChild(imgElement); + carousel.appendChild(slide); + + // setting up image + imgElement.src = movies[slideIndex].image; + slideIndex++; + + // setting elements classname + slide.className = "slider"; + content.className = "slide-content"; + h1.className = "movie-title"; + p.className = "movie-des"; + + sliders.push(slide); + + if (sliders.length) { + sliders[0].style.marginLeft = `calc(-${100 * (sliders.length - 2)}% - ${ + 30 * (sliders.length - 2) + }px)`; + } +}; + +for (let i = 0; i < 3; i++) { + createSlide(); +} + +setInterval(() => { + createSlide(); +}, 3000); + +//Video Cards + +const videoCards = [...document.querySelectorAll(".video-card")]; + +videoCards.forEach((item) => { + item.addEventListener("mouseover", () => { + let video = item.children[1]; + video.play(); + }); + item.addEventListener("mouseleave", () => { + let video = item.children[1]; + video.pause(); + }); +}); + +//card sliders + +let cardContainers = [...document.querySelectorAll(".card-container")]; +let preBtns = [...document.querySelectorAll(".pre-btn")]; +let nxtBtns = [...document.querySelectorAll(".nxt-btn")]; + +cardContainers.forEach((item, i) => { + let containerDimensions = item.getBoundingClientRect(); + let containerWidth = containerDimensions.width; + + nxtBtns[i].addEventListener("click", () => { + item.scrollLeft += containerWidth - 200; + }); + + preBtns[i].addEventListener("click", () => { + item.scrollLeft -= containerWidth + 200; + }); +}); diff --git a/Hotstar Clone/package.json b/Hotstar Clone/package.json new file mode 100644 index 0000000..44e0515 --- /dev/null +++ b/Hotstar Clone/package.json @@ -0,0 +1,16 @@ +{ + "name": "hotstar-clone", + "version": "1.0.0", + "description": "", + "main": "index.html", + "scripts": { + "start": "parcel index.html --open", + "build": "parcel build index.html" + }, + "dependencies": {}, + "devDependencies": { + "@babel/core": "7.2.0", + "parcel-bundler": "^1.6.1" + }, + "keywords": [] +} \ No newline at end of file diff --git a/Hotstar Clone/styles.css b/Hotstar Clone/styles.css new file mode 100644 index 0000000..71a359b --- /dev/null +++ b/Hotstar Clone/styles.css @@ -0,0 +1,339 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + width: 100%; + background: #0c111b; + position: relative; + font-family: roboto, sans-serif; +} + +.navbar { + width: 100%; + height: 80px; + position: fixed; + top: 0; + left: 0; + padding: 0 4%; + background: #0c111b; + z-index: 9; + display: flex; + align-items: center; +} + +.brand-logo { + height: 70px; +} + +.nav-links { + margin-top: 10px; + display: flex; + list-style: none; +} + +.nav-items a { + text-decoration: none; + margin-left: 20px; + text-transform: capitalize; + color: #fff; + opacity: 0.9; +} + +.right-container { + display: block; + margin-left: auto; +} + +.search-box { + border: none; + border-bottom: 1px solid #aaa; + background: transparent; + outline: none; + height: 30px; + color: #fff; + width: 250px; + text-transform: capitalize; + font-size: 16px; + font-weight: 500; + transition: 0.5s; +} + +.search-box:focus { + width: 400px; + border-color: #1f80e0; +} + +.sub-btn { + background: #1f80e0; + height: 30px; + padding: 0 20px; + color: #fff; + border-radius: 5px; + border: none; + outline: none; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + margin: 0 10px; +} + +.login-link { + color: #fff; + opacity: 0.9; + text-transform: uppercase; + font-size: 15px; + font-weight: 700; + text-decoration: none; +} + +.carousel-container { + position: relative; + width: 100%; + height: 450px; + padding: 20px 0; + overflow-x: hidden; + margin-top: 80px; +} + +.carousel { + display: flex; + width: 92%; + height: 100%; + position: relative; + margin: auto; +} + +.slider { + flex: 0 0 auto; + margin-right: 30px; + position: relative; + background: rgba(0, 0, 0, 0.5); + border-radius: 5px; + width: 100%; + height: 100%; + left: 0; + transition: 1s; + overflow: hidden; +} + +.slider img { + width: 70%; + min-height: 100%; + object-fit: cover; + display: block; + margin-left: auto; +} + +.slide-content { + position: absolute; + width: 50%; + height: 100%; + z-index: 2; + background: linear-gradient(to right, #030b17 80%, #0c111b00); + color: #fff; +} + +.movie-title { + padding-left: 50px; + text-transform: capitalize; + margin-top: 80px; +} + +.movie-des { + width: 80%; + line-height: 30px; + padding-left: 50px; + margin-top: 30px; + opacity: 0.8; +} + +.video-card-container { + position: relative; + width: 92%; + margin: auto; + height: 10vw; + display: flex; + margin-bottom: 20px; + justify-content: space-between; +} + +.video-card { + position: relative; + min-width: calc(100% / 5 - 10px); + width: calc(100% / 5 - 10px); + height: 100%; + border-radius: 5px; + overflow: hidden; + background: #030b17; +} + +.video-card-image, +.card-video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-video { + position: absolute; +} + +.video-card:hover .video-card-image { + display: none; +} + +.title { + color: #fff; + opacity: 0.9; + padding-left: 4%; + text-transform: capitalize; + font-size: 22px; + font-weight: 500; +} + +.movies-list { + width: 100%; + height: 220px; + position: relative; + margin: 10px 0 20px; +} + +.card-container { + position: relative; + width: 92%; + padding-left: 10px; + height: 220px; + display: flex; + margin: 0 auto; + align-items: center; + overflow-x: auto; + overflow-y: visible; + scroll-behavior: smooth; +} + +.card-container::-webkit-scrollbar { + display: none; +} + +.card { + position: relative; + min-width: 150px; + width: 150px; + height: 200px; + border-radius: 5px; + overflow: hidden; + margin-right: 10px; + transition: 0.5s; +} + +.card-img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card:hover { + transform: scale(1.1); +} + +.card:hover .card-body { + opacity: 1; +} + +.card-body { + opacity: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 2; + background: linear-gradient(to bottom, rgba(4, 8, 15, 0), #192133 90%); + padding: 10px; + transition: 0.5s; +} + +.name { + color: #fff; + font-size: 15px; + font-weight: 500; + text-transform: capitalize; + margin-top: 60%; +} + +.des { + color: #fff; + opacity: 0.8; + margin: 5px 0; + font-weight: 500; + font-size: 12px; +} + +.watchlist-btn { + position: relative; + width: 100%; + text-transform: capitalize; + background: none; + border: none; + font-weight: 500; + text-align: right; + color: rgba(255, 255, 255, 0.5); + margin: 5px 0; + cursor: pointer; + padding: 10px 5px; + border-radius: 5px; +} + +.watchlist-btn::before { + content: ""; + position: absolute; + top: 0; + left: -5px; + height: 35px; + width: 35px; + background-image: url(images/add.png); + background-size: cover; + transform: scale(0.4); +} + +.watchlist-btn:hover { + color: #fff; + background: rgba(255, 255, 255, 0.1); +} + +.pre-btn, +.nxt-btn { + position: absolute; + top: 0; + width: 5%; + height: 100%; + z-index: 2; + border: none; + cursor: pointer; + outline: none; +} + +.pre-btn { + left: 0; + background: linear-gradient(to right, #0c111b 0%, #0c111b00); +} + +.nxt-btn { + right: 0; + background: linear-gradient(to left, #0c111b 0%, #0c111b00); +} + +.pre-btn img, +.nxt-btn img { + width: 15px; + height: 20px; + opacity: 0; +} + +.pre-btn:hover img, +.nxt-btn:hover img { + opacity: 1; +} diff --git a/Hotstar Clone/videos/disney.mp4 b/Hotstar Clone/videos/disney.mp4 new file mode 100644 index 0000000..5ff0c55 Binary files /dev/null and b/Hotstar Clone/videos/disney.mp4 differ diff --git a/Hotstar Clone/videos/geographic.mp4 b/Hotstar Clone/videos/geographic.mp4 new file mode 100644 index 0000000..79ab187 Binary files /dev/null and b/Hotstar Clone/videos/geographic.mp4 differ diff --git a/Hotstar Clone/videos/marvel.mp4 b/Hotstar Clone/videos/marvel.mp4 new file mode 100644 index 0000000..0d8a1a6 Binary files /dev/null and b/Hotstar Clone/videos/marvel.mp4 differ diff --git a/Hotstar Clone/videos/pixar.mp4 b/Hotstar Clone/videos/pixar.mp4 new file mode 100644 index 0000000..3761026 Binary files /dev/null and b/Hotstar Clone/videos/pixar.mp4 differ diff --git a/Hotstar Clone/videos/star-war.mp4 b/Hotstar Clone/videos/star-war.mp4 new file mode 100644 index 0000000..44dd7ce Binary files /dev/null and b/Hotstar Clone/videos/star-war.mp4 differ