+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+ recommended for you
+ +
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 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.
+ +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.
+ +latest & trending
+ +
+
+
+
+
+
+
+
diff --git a/projects/Disney+Hostar/index.js b/projects/Disney+Hostar/index.js
new file mode 100644
index 00000000..ff19069b
--- /dev/null
+++ b/projects/Disney+Hostar/index.js
@@ -0,0 +1,122 @@
+let movies = [
+ {
+ name: "falcon and the winter soldier",
+ des:
+ "Following the events of Avengers: Endgame, Sam Wilson and Bucky Barnes team up in a global adventure that tests their abilities and their patience.",
+ image: "images/slider 2.PNG"
+ },
+ {
+ name: "loki",
+ des:
+ "The mercurial villain Loki resumes his role as the God of Mischief in a new series that takes place after the events of Avengers Endgame.",
+ image: "images/slider 1.PNG"
+ },
+ {
+ name: "wanda vision",
+ des:
+ "Living idealized suburban lives, super-powered beings Wanda and Vision begin to suspect that everything is not as it seems.",
+ image: "images/slider 3.PNG"
+ },
+ {
+ name: "raya and the last dragon",
+ des:
+ "Raya, a warrior, sets out to track down Sisu, a dragon, who transferred all her powers into a magical gem which is now scattered all over the kingdom of Kumandra, dividing its people.",
+ image: "images/slider 4.PNG"
+ },
+ {
+ name: "luca",
+ des:
+ "Set in a beautiful seaside town on the Italian Riviera, the original animated feature is a coming-of-age story about one young boy experiencing an unforgettable summer filled with gelato, pasta and endless scooter rides. ",
+ image: "images/slider 5.PNG"
+ }
+];
+
+const carousel = document.querySelector(".carousel");
+let sliders = [];
+
+let slideIndex = 0;
+
+const createSlide = () => {
+ if (slideIndex >= movies.length) {
+ slideIndex = 0;
+ }
+
+ //creating DOM element
+ let slide = document.createElement("div");
+ let imgElement = document.createElement("img");
+ let content = document.createElement("div");
+ let h1 = document.createElement("h1");
+ let p = document.createElement("p");
+
+ //attaching all the 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);
+
+ //adding sliding effect
+ 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/projects/Disney+Hostar/package.json b/projects/Disney+Hostar/package.json
new file mode 100644
index 00000000..2fa52a6c
--- /dev/null
+++ b/projects/Disney+Hostar/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "hotstar-clone",
+ "version": "1.0.0",
+ "description": "I have created a Disney+ Hotstar Clone site using HTML, CSS and JavaScript. All the source code, images, videos are provided. Thanks to Devtown for this.",
+ "main": "index.html",
+ "scripts": {
+ "start": "serve",
+ "build": "echo This is a static template, there is no bundler or bundling involved!"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/codesandbox-app/static-template.git"
+ },
+ "keywords": [],
+ "author": "Ives van Hoorne",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/codesandbox-app/static-template/issues"
+ },
+ "homepage": "https://github.com/codesandbox-app/static-template#readme",
+ "devDependencies": {
+ "serve": "^11.2.0"
+ }
+}
\ No newline at end of file
diff --git a/projects/Disney+Hostar/sandbox.config.json b/projects/Disney+Hostar/sandbox.config.json
new file mode 100644
index 00000000..5866ed74
--- /dev/null
+++ b/projects/Disney+Hostar/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+ "template": "static"
+}
diff --git a/projects/Disney+Hostar/style.css b/projects/Disney+Hostar/style.css
new file mode 100644
index 00000000..d45b990b
--- /dev/null
+++ b/projects/Disney+Hostar/style.css
@@ -0,0 +1,360 @@
+@font-face {
+ font-family: "Roboto";
+ font-style: normal;
+ font-weight: 400;
+ src: url("../fonts/roboto-v30-latin-regular.eot"); /* IE9 Compat Modes */
+ src: local(""),
+ url("../fonts/roboto-v30-latin-regular.eot?#iefix")
+ format("embedded-opentype"),
+ /* IE6-IE8 */ url("../fonts/roboto-v30-latin-regular.woff2") format("woff2"),
+ /* Super Modern Browsers */ url("../fonts/roboto-v30-latin-regular.woff")
+ format("woff"),
+ /* Modern Browsers */ url("../fonts/roboto-v30-latin-regular.ttf")
+ format("truetype"),
+ /* Safari, Android, iOS */
+ url("../fonts/roboto-v30-latin-regular.svg#Roboto") format("svg"); /* Legacy iOS */
+}
+
+* {
+ 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: 35px;
+}
+
+.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;
+}
+
+.nav-items a:hover {
+ color: lightgray;
+}
+
+.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: 22px;
+ width: 90;
+ padding: 0 10px;
+ 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;
+}
+
+.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: 700;
+}
+
+.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: 700;
+ 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: 33px;
+ width: 33px;
+ 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/projects/Disney+Hostar/thumbnail.jpg b/projects/Disney+Hostar/thumbnail.jpg
new file mode 100644
index 00000000..b894bc22
Binary files /dev/null and b/projects/Disney+Hostar/thumbnail.jpg differ
diff --git a/projects/Disney+Hostar/videos/disney.mp4 b/projects/Disney+Hostar/videos/disney.mp4
new file mode 100644
index 00000000..5ff0c551
Binary files /dev/null and b/projects/Disney+Hostar/videos/disney.mp4 differ
diff --git a/projects/Disney+Hostar/videos/geographic.mp4 b/projects/Disney+Hostar/videos/geographic.mp4
new file mode 100644
index 00000000..79ab1872
Binary files /dev/null and b/projects/Disney+Hostar/videos/geographic.mp4 differ
diff --git a/projects/Disney+Hostar/videos/marvel.mp4 b/projects/Disney+Hostar/videos/marvel.mp4
new file mode 100644
index 00000000..0d8a1a69
Binary files /dev/null and b/projects/Disney+Hostar/videos/marvel.mp4 differ
diff --git a/projects/Disney+Hostar/videos/pixar.mp4 b/projects/Disney+Hostar/videos/pixar.mp4
new file mode 100644
index 00000000..3761026a
Binary files /dev/null and b/projects/Disney+Hostar/videos/pixar.mp4 differ
diff --git a/projects/Disney+Hostar/videos/star-war.mp4 b/projects/Disney+Hostar/videos/star-war.mp4
new file mode 100644
index 00000000..44dd7ce5
Binary files /dev/null and b/projects/Disney+Hostar/videos/star-war.mp4 differ
+
+
+ 
+
+
+
+
+
+ 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.
+ +
+ 
+
+
+
+
+