Add files via upload

Siddu7077 · Jan 13, 2024 · c0fdf09 · c0fdf09
commit c0fdf09
Show file tree

Hide file tree

Showing 20 changed files with 348 additions and 0 deletions.
diff --git a/...Specials Legend of Hanuman S3 | Official Trailer | 12th Jan 2024 | DisneyPlus Hotstar.mp4 b/...Specials Legend of Hanuman S3 | Official Trailer | 12th Jan 2024 | DisneyPlus Hotstar.mp4
diff --git a/KarmmaCallingDated_desk-265a4207-f443-4b28-a502-4c5329db464a.jpg b/KarmmaCallingDated_desk-265a4207-f443-4b28-a502-4c5329db464a.jpg
diff --git a/backdrop copy.jpeg b/backdrop copy.jpeg
diff --git a/backdrop.jpeg b/backdrop.jpeg
diff --git a/disney-plus-hotstar-logo.png b/disney-plus-hotstar-logo.png
diff --git a/echo.jpeg b/echo.jpeg
diff --git a/fail.jpeg b/fail.jpeg
diff --git a/hanuman.jpeg b/hanuman.jpeg
diff --git a/hanuman.webp b/hanuman.webp
diff --git a/images.jpeg b/images.jpeg
diff --git a/img-1.jpeg b/img-1.jpeg
diff --git a/img-11.webp b/img-11.webp
diff --git a/img-2.webp b/img-2.webp
diff --git a/img-3.webp b/img-3.webp
diff --git a/index.html b/index.html
@@ -0,0 +1,142 @@
+<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
+    <link rel="stylesheet" href="style.css">
+    <title>Hotstar-Mirror</title>
+</head>
+
+<body>
+    <div class="container-fluid hotnavbar maincont d-flex justiff-content-start">
+        <ul class="nav flex-column">
+            <li class="nav-item mx-7">
+                <img src="logo-d-plus.svg" width="70px" alt="">
+            </li>
+            <div class="icongrp">
+                <li class="nav-item my-3">
+                    <h4 class="hide"><i class="fa-regular fa-user icons"></i></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><i class="fa-solid fa-magnifying-glass icons"></i></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><i class="fa-solid fa-house icons"></i></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><span class="material-symbols-outlined icons tv">
+                        tv
+                        </span></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><i class="fa-solid fa-radio icons"></i></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><i class="fa-solid fa-baseball icons"></i></h4>
+                </li>
+                <li class="nav-item my-3">
+                    <h4 class="hide"><span class="material-symbols-outlined icons">
+                        dashboard
+                        </span></h4>
+                </li>
+
+            </div>
+        </ul>
+    </div>
+
+    <div class="maincontainer">
+        <img src="KarmmaCallingDated_desk-265a4207-f443-4b28-a502-4c5329db464a.jpg" width="650px" alt="">
+        <img src="disney-plus-hotstar-logo.png" width="70" class="hlogo" alt="">
+        <h5 class="karma">Karma Calling</h5>
+        <p class="streaming">Streaming from Jan 26</p>
+        <button class="Trailer btn btn-dark">
+            <b>Trailer</b>
+        </button>
+    </div>
+    <div class="vidcontainer">
+        <video src="Hotstar Specials Legend of Hanuman S3 | Official Trailer | 12th Jan 2024 | DisneyPlus Hotstar.mp4" width="100%" autoplay muted class="vid"></video>
+        <img src="hanuman.webp" class="hanuman" alt="">
+        <h3 class="hanuman py-3">New Season</h3>
+        <span><h3 class="hanuman text-light">2024 . 3 Seasons . 7 Languages .</h3></span ><button class="hanuman2 text-light bg-secondary ">U/A 7+</button>
+            <div class="para">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus incidunt libero sunt aliquam at et. Architecto tenetur consectetur minima culpa perferendis ullam atque alias quam, facilis eum est nisi nesciunt!</p>
+            </div>
+            <div class="final">
+                <h5>Mythology | Animations | Creatures& Monsters</h5>
+                <button class="bg-secondary Watch">
+                    <i class="fa-solid fa-play"></i> Watch Now
+                </button>
+                <button class="add bg-secondary">
+                    <span class="material-symbols-outlined">
+                        add
+                        </span>
+                </button>
+                <div class="floatingadd">
+                    <img src="img-1.jpeg" alt="" width="90px" class="img-1">
+                    <img src="img-2.webp" alt="" width="100px" class="img-2">
+                    <img src="img-3.webp" alt="" width="100px" class="img-3">
+                </div>
+                <h3 class="latest mt-5">Latest Releases</h3>
+                <div class="cinemas">
+                    <div class="movies">
+                        <img src="legend.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="parking.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="fail.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="echo.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="salar.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="hanuman.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                </div>
+                <div class="cinemas mt-4">
+                    <div class="movies">
+                        <img src="salar.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="hanuman.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="fail.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="echo.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="legend.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                    <div class="movies">
+                        <img src="parking.jpeg" alt="" width="200px" height="300px" class="movies">
+                    </div>
+                </div>
+
+            </div>
+
+    </div>
+
+
+
+
+
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
diff --git a/legend.jpeg b/legend.jpeg
diff --git a/logo-d-plus.svg b/logo-d-plus.svg
diff --git a/parking.jpeg b/parking.jpeg
diff --git a/salar.jpeg b/salar.jpeg
diff --git a/style.css b/style.css
@@ -0,0 +1,205 @@
+.icons
+{
+    color: white;
+    font-size: 20px;
+}
+.icons:hover
+{
+    font-size: 35px;
+}
+.maincont
+{
+    background-color: black;
+    opacity: 0.9;
+    text-emphasis: none;
+    position: relative;
+    position: fixed;
+    z-index: 2;
+    width: 100px;
+    float: left;
+    height: 100vh;
+}
+.icongrp
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 160px;
+}
+.tv
+{
+    font-size: 30px;
+}
+.maincontainer
+{
+    background-color: black;
+}
+.karma
+{
+    position: absolute;
+    top: 40px;
+    right: 580px;
+    color: white;
+}
+.streaming
+{
+    position: absolute;
+    top: 62px;
+    right: 540px;
+    color: grey;
+}
+.Trailer
+{
+    position: relative;
+    bottom: -50px;
+    left: -30px;
+    top: 70px;
+    padding: 15px;
+    padding-left: 65px;
+    padding-right: 65px;
+    font-weight: 500px;
+}
+.hlogo
+{
+    position: relative;
+    top: -80px;
+    border-radius: 3px;
+}
+.vidcontainer
+{
+    position: absolute;  
+    background-color: rgb(0, 0, 0);
+    padding-left: 90px;
+    width: 100%;
+}
+.hanuman
+{
+    position: relative;
+    top: -500px;
+    left: 30px;
+    color: aqua;
+    font-weight: 600;
+    font-size: larger;
+}
+.hanuman2
+{
+    position: relative;
+    top: -535px;
+    left: 330px;
+    color: aqua;
+    font-weight: 600;
+    font-size: larger;
+    border: none;
+    border-radius: 6px;
+    background: beige;
+}
+.para
+{
+    position: relative;
+    top: -535px;
+    left: 30px;
+    color: white;
+    width: 500px;
+    padding-top: 20px;
+}
+.final
+{
+    position: relative;
+    top: -535px;
+    left: 30px;
+    color: white;
+    width: 500px;
+    padding-top: 3px;
+}
+
+.content
+{
+    width: 100%;
+    height: 500px;
+    background-color: red;
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: black;
+}
+.Watch
+{
+    border: 0;
+    padding: 13px 120px;
+    border-radius: 4px;
+    font-weight: 800;
+    color: white;
+    opacity: 0.7;
+}
+.add
+{
+    position: relative;
+    top: 3px;
+    border: 0;
+    padding:10px;
+    border-radius: 4px;
+    font-weight: 800;
+    color: white;
+    margin-left: 6px;
+    opacity: 0.7;
+}
+.vid
+{
+    position: sticky;
+    top: -30px;
+}
+.floatingadd
+{
+    position: absolute;
+    right: -793px;
+    top: 25px;
+}
+.img-1:hover
+{
+    width: 110px;
+    border: 2px solid white;
+    transition: all ease 0.3s ;
+}
+.img-2:hover
+{
+    width: 120px;
+    border: 2px solid white;
+    transition: all ease 0.3s ;
+}
+.img-3:hover
+{
+    width: 120px;
+    border: 2px solid white;
+    transition: all ease 0.3s ;
+}
+.img-1
+{
+    border-radius: 5px;
+}
+.img-2
+{
+    border-radius: 5px;
+}
+.img-3
+{
+    border-radius: 5px;
+}
+.movies
+{
+    width: 200px;
+    height: 300px;
+    background-color: red;
+    border-radius: 5px;
+    box-shadow: 0 0 40px rgb(0, 0, 0);
+}
+.movies:hover
+{
+    cursor: pointer;
+}
+.cinemas
+{
+    width: 1310px;
+    display: flex;
+    justify-content: space-evenly;
+}