diff --git a/README.md b/README.md new file mode 100644 index 0000000..afdefe2 Binary files /dev/null and b/README.md differ diff --git a/images/add.png b/images/add.png new file mode 100644 index 0000000..8dc018f Binary files /dev/null and b/images/add.png differ diff --git a/images/disney.PNG b/images/disney.PNG new file mode 100644 index 0000000..a01c6a4 Binary files /dev/null and b/images/disney.PNG differ diff --git a/images/geographic.PNG b/images/geographic.PNG new file mode 100644 index 0000000..6baa2f0 Binary files /dev/null and b/images/geographic.PNG differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..f2f6ffd Binary files /dev/null and b/images/logo.png differ diff --git a/images/marvel.PNG b/images/marvel.PNG new file mode 100644 index 0000000..af91011 Binary files /dev/null and b/images/marvel.PNG differ diff --git a/images/nxt.png b/images/nxt.png new file mode 100644 index 0000000..3d0fc6a Binary files /dev/null and b/images/nxt.png differ diff --git a/images/pixar.PNG b/images/pixar.PNG new file mode 100644 index 0000000..9548096 Binary files /dev/null and b/images/pixar.PNG differ diff --git a/images/play.png b/images/play.png new file mode 100644 index 0000000..6ac1a91 Binary files /dev/null and b/images/play.png differ diff --git a/images/poster 1.png b/images/poster 1.png new file mode 100644 index 0000000..e9f6b24 Binary files /dev/null and b/images/poster 1.png differ diff --git a/images/poster 10.png b/images/poster 10.png new file mode 100644 index 0000000..7e57a98 Binary files /dev/null and b/images/poster 10.png differ diff --git a/images/poster 11.png b/images/poster 11.png new file mode 100644 index 0000000..30a3ef2 Binary files /dev/null and b/images/poster 11.png differ diff --git a/images/poster 12.png b/images/poster 12.png new file mode 100644 index 0000000..4edf000 Binary files /dev/null and b/images/poster 12.png differ diff --git a/images/poster 2.png b/images/poster 2.png new file mode 100644 index 0000000..cce8ef2 Binary files /dev/null and b/images/poster 2.png differ diff --git a/images/poster 3.png b/images/poster 3.png new file mode 100644 index 0000000..077916c Binary files /dev/null and b/images/poster 3.png differ diff --git a/images/poster 4.png b/images/poster 4.png new file mode 100644 index 0000000..e35f788 Binary files /dev/null and b/images/poster 4.png differ diff --git a/images/poster 5.png b/images/poster 5.png new file mode 100644 index 0000000..49760e4 Binary files /dev/null and b/images/poster 5.png differ diff --git a/images/poster 6.png b/images/poster 6.png new file mode 100644 index 0000000..da966d1 Binary files /dev/null and b/images/poster 6.png differ diff --git a/images/poster 7.png b/images/poster 7.png new file mode 100644 index 0000000..27fcb17 Binary files /dev/null and b/images/poster 7.png differ diff --git a/images/poster 8.png b/images/poster 8.png new file mode 100644 index 0000000..79c5afe Binary files /dev/null and b/images/poster 8.png differ diff --git a/images/poster 9.png b/images/poster 9.png new file mode 100644 index 0000000..35a7779 Binary files /dev/null and b/images/poster 9.png differ diff --git a/images/pre.png b/images/pre.png new file mode 100644 index 0000000..927dc9c Binary files /dev/null and b/images/pre.png differ diff --git a/images/slider 1.PNG b/images/slider 1.PNG new file mode 100644 index 0000000..d9cf8c3 Binary files /dev/null and b/images/slider 1.PNG differ diff --git a/images/slider 2.PNG b/images/slider 2.PNG new file mode 100644 index 0000000..16dd06a Binary files /dev/null and b/images/slider 2.PNG differ diff --git a/images/slider 3.PNG b/images/slider 3.PNG new file mode 100644 index 0000000..9170f98 Binary files /dev/null and b/images/slider 3.PNG differ diff --git a/images/slider 4.PNG b/images/slider 4.PNG new file mode 100644 index 0000000..c36e570 Binary files /dev/null and b/images/slider 4.PNG differ diff --git a/images/slider 5.PNG b/images/slider 5.PNG new file mode 100644 index 0000000..dfb9c06 Binary files /dev/null and b/images/slider 5.PNG differ diff --git a/images/star-wars.PNG b/images/star-wars.PNG new file mode 100644 index 0000000..454a89c Binary files /dev/null and b/images/star-wars.PNG differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d33fdf5 --- /dev/null +++ b/index.html @@ -0,0 +1,303 @@ + + + + + + + + Hotstar+ clone. + + + + + + + +
+
+ +
+
+ +
+
+ disney + +
+ +
+ pixar + +
+ +
+ marvel + +
+ +
+ star wars + +
+ +
+ geographic + +
+
+ +

Recommended For You

+
+ + + +
+
+ p1 +
+

Loki

+
This is best marvel movie
+ +
+
+ +
+ p2 +
+

mulkan

+
This is best marvel movie
+ +
+
+ +
+ p3 +
+

felcon and the winter soldier

+
This is best marvel movie
+ +
+
+ +
+ p4 +
+

avengers

+
This is best marvel movie
+ +
+
+ +
+ p5 +
+

thor ragnarok

+
This is best marvel movie
+ +
+
+ +
+ p6 +
+

Avengers

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

Pirates Of The Carribean:Salazar's Revenge

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

Soul

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

Raya And The Last Dragon

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

Luca

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

Ford Vs Farrari

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

X-man: Dark Pheonix

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

Popular Shows

+
+ + +
+
+ +
+

X-man: Dark Pheonix

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

Ford Vs Farrari

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

Luca

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

Raya And The Last Dragon

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

Soul

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

Pirates Of The Carribean:Salazar's Revenge

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

Avengers

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

Thor Ragnarok

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

Avengers:Endgame

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

The Falcon And The Winter Soldier

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

Mulan

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

Loki

+
Lorem ipsum dolor sit amet consectetur.
+ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..76861aa --- /dev/null +++ b/main.js @@ -0,0 +1,114 @@ +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; + }); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..59a5d61 --- /dev/null +++ b/style.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; +} + +.card-image, +.card-video { + width: 100%; + height: 100%; + object-fit: cover; +} + +.card-video { + position: absolute; +} + +.video-card:hover .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; +} \ No newline at end of file diff --git a/videos/disney.mp4 b/videos/disney.mp4 new file mode 100644 index 0000000..5ff0c55 Binary files /dev/null and b/videos/disney.mp4 differ diff --git a/videos/geographic.mp4 b/videos/geographic.mp4 new file mode 100644 index 0000000..79ab187 Binary files /dev/null and b/videos/geographic.mp4 differ diff --git a/videos/marvel.mp4 b/videos/marvel.mp4 new file mode 100644 index 0000000..0d8a1a6 Binary files /dev/null and b/videos/marvel.mp4 differ diff --git a/videos/pixar.mp4 b/videos/pixar.mp4 new file mode 100644 index 0000000..3761026 Binary files /dev/null and b/videos/pixar.mp4 differ diff --git a/videos/star-war.mp4 b/videos/star-war.mp4 new file mode 100644 index 0000000..44dd7ce Binary files /dev/null and b/videos/star-war.mp4 differ