Repository: ketanthakurr/Hotstar-Clone-Project
Branch: main
Commit: ccec8400befd
Files: 6
Total size: 19.9 KB

Directory structure:
gitextract_4cmzsl_6/

├── Project Hotstar Clone/
│   ├── data.js
│   ├── hotstar.css
│   ├── hotstar.html
│   ├── hotstar.js
│   └── test.html
└── README.md

================================================
FILE CONTENTS
================================================

================================================
FILE: Project Hotstar Clone/data.js
================================================
let movies = [
    {
        name: 'Loki',
        des: 'Loki, the God of Mischief, steps out of his brothers shadow to embark on an adventure that takes place after the events of Avengers: Endgame',
        image:'lokiSlider.png'
    },
    {
        name: 'Falcon and the winter soldier',
        des: 'Falcon and the Winter Soldier are a mismatched duo who team up for a global adventure that will test their survival skills -- as well as their patience.',
        image:'slider 2.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:"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: '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. Luca shares these adventures with his newfound best friend, but all the fun is threatened by a deeply held secret: he is a sea monster from another world just below the water surface.',
        image: 'slider 5.png'
    }
]


================================================
FILE: Project Hotstar Clone/hotstar.css
================================================
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    background-color: #0c111b;
    position: relative;
    font-family: sans-serif,roboto;
}

.navbar{
    position: fixed;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    padding: 0 4%;
    background-color: #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: white;
    opacity: 0.9;
}

.nav-items-kid a {
    font-family: cursive;
    margin-left: 20px;
    font-weight: bolder;
    text-transform: capitalize;
    text-decoration: solid;
    color: yellow;
    opacity: 0.9;
}

.right-container{
    display: block;
    margin-left: auto;
}

.search-box{
    border: none;
    border-bottom: 1px solid white;
    background-color: transparent;
    outline: none;
    height: 30px;
    color: white;
    width: 250px;
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 500;
    transition: 0.5s;
}

.search-box:focus{
    width: 400px;
    border-color: #1f80e0;

}

.sub-button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 7;
    -moz-border-radius: 7;
    border-radius: 7px;
    font-family: Georgia;
    color: #ffffff;
    font-size: 14px;
    padding: 6px 14px 6px 14px;
    text-decoration: none;
    margin-left: 20px;
    outline: none;
    font-weight: 500;
}
  
.sub-button:hover {
    background: #3cb0fd;
    text-decoration: none;
}

.login{
    text-decoration: none;
    margin-left: 20px;
    text-transform: capitalize;
    color: white;
    opacity: 0.9;
}

.caraousel-container{
    position: relative;
    width: 100%;
    height: 600px;
    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%;
   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 65% , #0c111b00);
    color: white;
    top: 0  ;
}

.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-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-img,.card-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-card:hover .video-card-img{
    display: none;

}

.title{
    color: white;
    opacity: 0.9;
    padding-left: 4%;
    text-transform: capitalize;
    font-size: 30px;
    font-weight: 500;
}

.title2{
    margin-top: 75px;
    color: white;
    opacity: 0.9;
    padding-left: 4%;
    text-transform: capitalize;
    font-size: 30px;
    font-weight: 500;
}

.movies-list{
    width: 100%;
    height: 300px;
    position: relative;
    margin: 10px 0 20px;
}

.card-container{
    width: 100%;
    padding-left: 80px;
    height: 400px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.card-container::-webkit-scrollbar{
    display: none;
}

.card{
    position: relative;
    min-width: 230px;
    width: 100%;
    height: 300px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 15px;
    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: white;
    font-size: 15px;
    font-weight: 500;
    text-transform:capitalize;
    margin-top: 80%;
}

.des{
    color: white;
    opacity: 0.8;
    margin: 7px, 0;
    font-weight: 500;
    font-size: 12px;
}

.watchlist-btn
{
    position: relative;
    width: 95%;
    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(add.png);
    background-size: cover;
    transform: scale(0.4);
}

.watchlist-btn:hover
{
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.prv-btn, .nxt-btn{
    position: absolute;
    margin-top: 50px;
    top: 0%;
    width: 5%;
    height: 100%;
    z-index: 10;
    border: none;
    cursor: pointer;
    outline: none;
}

.prv-btn{
    left: 0%;
    background: linear-gradient(to right, #0c111b 0%, #0c111b00);
}

.nxt-btn{
    right: 0%;
    background: linear-gradient(to left, #0c111b 0%, #0c111b00);
}

.prv-btn img,
.nxt-btn{
    width: 20px;
    height: 30px;
    opacity: 0;
}

.prv-btn:hover img,
.nxt-btn:hover img{
    opacity: 1;
}

================================================
FILE: Project Hotstar Clone/hotstar.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="hotstar.css">
    <title>Disney+ Hotstar</title>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> -->
</head>
<body>
    <nav class="navbar">
        <img src="logo.png" class="brand-logo" alt="logo">
        <ul class="nav-links">
            <li class="nav-items"> <a href="#">Home</a></li>
            <li class="nav-items"> <a href="https://www.hotstar.com/in/movies">Movies</a></li>
            <li class="nav-items"> <a href="https://www.hotstar.com/in/sports">Sports</a></li>
            <li class="nav-items"> <a href="https://www.hotstar.com/in/disneyplus">Disney+</a></li>
            <li class="nav-items-kid"> <a href="#">KIDS</a></li>
        </ul>
 
        <div class="right-container"></div>
            <input type="text" class="search-box" placeholder="Search">
            <button class="sub-button">SUBSCRIBE</button>
            <a href="#" class=login>Login</a>
        </div>
    </nav>
 
    <div class="caraousel-container">   
        <div class="carousel">
         <!-- <div class="slider">
            <div class="slide-content">
                <h1 class="movie-title">LOKI</h1>
                <p class="movie-des">Loki is the Thors brother</p>
            </div>
            <img src="lokiSlider.png" class="slider-img" alt="">
         </div> -->
        </div>
    </div>

    <div class="video-container">
        <div class="video-card">
            <img src="disney.PNG" class="video-card-img" alt="disney">
            <video src="disney.mp4" mute loop class="card-video"></video>
        </div>
        <div class="video-card">
            <img src="marvel.PNG" class="video-card-img" alt="disney">
            <video src="marvel.mp4" mute loop class="card-video"></video>
        </div>
        <div class="video-card">
            <img src="pixar.PNG" class="video-card-img" alt="disney">
            <video src="pixar.mp4" mute loop class="card-video"></video>
        </div>
        <div class="video-card">
            <img src="star-wars.PNG" class="video-card-img" alt="disney">
            <video src="star-war.mp4" mute loop class="card-video"></video>
        </div>
        <div class="video-card">
            <img src="geographic.PNG" class="video-card-img" alt="disney">
            <video src="geographic.mp4" mute loop class="card-video"></video>
        </div>
    </div>
    
    <h1 class="title">Recommended for you</h1>
    <div class="movies-list">
        <button class="prv-btns"><img src="pre.png" alt=""></button>
        <button class="nxt-btns"><img src="nxt.png" alt=""></button>
        <div class="card-container">
            <div class="card">
                <img src="loki.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">LOKI</h1>
                    <p class="des">Loki the son odin</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 2.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">MULAN</h1>
                    <p class="des">Mulan is a korean movie</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 3.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">The Falcone</h1>
                    <p class="des">The falcone and the winter soldier</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 4.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Avengers</h1>
                    <p class="des">Avenger Endgames</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 5.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">THOR</h1>
                    <p class="des">Thor Ragnarok</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 6.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">The Aveneger</h1>
                    <p class="des">The collections of superheros in US</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 7.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Pirates of the carribean</h1>
                    <p class="des">Salazar revenges form jack sparrow for</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 8.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">SOUL</h1>
                    <p class="des">A owner and a pet</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 9.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Raya and the last dragon</h1>
                    <p class="des">the dragon and the owner in a virtual world </p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
        </div>
    </div>
    <!-- <h1 class="title">New </h1> -->
    <h1 class="title2">Recommended for you</h1>
    <div class="movies-list">
        <div class="card-container">
            <div class="card">
                <img src="poster 10.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">LUCA</h1>
                    <p class="des">A kid with a special power of a sea.</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 11.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">FORD VS FERRAI</h1>
                    <p class="des">A historical race between ford and ferrai</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 12.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">DARK PHEONIX</h1>
                    <p class="des">X-men and the dark pheonix</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 9.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Raya and the last dragon</h1>
                    <p class="des">the dragon and the owner in a virtual world </p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 4.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Avengers</h1>
                    <p class="des">Avenger Endgames</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 5.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">THOR</h1>
                    <p class="des">Thor Ragnarok</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 6.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">The Aveneger</h1>
                    <p class="des">The collections of superheros in US</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 7.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">Pirates of the carribean</h1>
                    <p class="des">Salazar revenges form jack sparrow for</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
            <div class="card">
                <img src="poster 8.png" class="card-img" alt="">
                <div class="card-body">
                    <h1 class="name">SOUL</h1>
                    <p class="des">A owner and a pet</p>
                    <button class="watchlist-btn">Add to watchlist</button>
                </div>
            </div>
        </div>
    </div>
    <script src="data.js"></script>
    <script src="hotstar.js"></script>
</body>
</html>

================================================
FILE: Project Hotstar Clone/hotstar.js
================================================
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 elemets
    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(imgElement);
    slide.appendChild(content);
    carousel.appendChild(slide);

    //setting up images
    imgElement.src=movies[slideIndex].image;
    slideIndex++;
 
    //setting elements classnames
    slide.className= 'slider';
    content.className= 'slide-content';
    h1.className= 'movie-title';
    p.className= 'movie-des';
    imgElement.className = 'slider-img'

    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();  
    })
});


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;
    })
})

================================================
FILE: Project Hotstar Clone/test.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

================================================
FILE: README.md
================================================
# Hotstar-Clone-Project
Created a hotstar clone website using (HTML, CSS, JavaScript), in my summer vacations.