Project explain disney

# Html Code.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Disney+ Clone</title>
      <link rel="stylesheet" href="style.css" />
      <script src="index.js" async></script>
    </head>
    
    <body>
      <nav class="navbar">
        <img src="images/logo.png" class="brand-logo" alt="" />
        <ul class="nav-links">
          <li class="nav-items"><a href="#">TV</a></li>
          <li class="nav-items"><a href="#">Movies</a></li>
          <li class="nav-items"><a href="#">Sports</a></li>
          <li class="nav-items"><a href="#">Premium</a></li>
        </ul>
        <div class="right-container">
          <input type="text" class="search-box" placeholder="search" />
          <button class="sub-btn">subscribe</button>
          <a href="#" class="login-link">Login</a>
        </div>
      </nav>
    
      <div class="caraousel-container">
        <div class="caraousel">
          <!-- <div class="slider">
              <div class="slide-content">
                <h1 class="movie-title">Loki</h1>
                <p class="movie-des">
                  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe
                  aut magni ratione voluptatem ab commodi.
                </p>
              </div>
              <img
                src=""
                alt=""
              />
            </div> -->
        </div>
      </div>
      <div class="video-card-container">
        <div class="video-card">
          <img src="images/disney.PNG" class="video-card-image" alt="" />
          <video src="videos/disney.mp4" muted loop autoplay class="card-video"></video>
        </div>
        <div class="video-card">
          <img src="images/pixar.PNG" class="video-card-image" alt="" />
          <video src="videos/pixar.mp4" muted loop autoplay class="card-video"></video>
        </div>
        <div class="video-card">
          <img src="images/marvel.PNG" class="video-card-image" alt="" />
          <video src="videos/marvel.mp4" muted loop autoplay class="card-video"></video>
        </div>
        <div class="video-card">
          <img src="images/star-wars.PNG" class="video-card-image" alt="" />
          <video src="videos/star-war.mp4" muted loop autoplay class="card-video"></video>
        </div>
        <div class="video-card">
          <img src="images/geographic.PNG" class="video-card-image" alt="" />
          <video src="videos/geographic.mp4" muted loop autoplay class="card-video"></video>
        </div>
      </div>
      <h1 class="title">Recommended For You</h1>
      <div class="movies-list">
        <button class="pre-btn" title="btn">
          <img src="images/pre.png" alt="" class="card-img" />
        </button>
        <button class="nxt-btn" title="btn">
          <img src="images/nxt.png" alt="" class="card-img" />
        </button>
        <div class="card-container">
          <div class="card">
            <img src="images/poster 1.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 2.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 3.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 4.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 5.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 6.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 7.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 8.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 9.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 10.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 11.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 12.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
        </div>
      </div>
      <h1 class="title">popular Shows</h1>
      <div class="movies-list">
        <button class="pre-btn" title="btn">
          <img src="images/pre.png" alt="" class="card-img" />
        </button>
        <button class="nxt-btn" title="btn">
          <img src="images/nxt.png" alt="" class="card-img" />
        </button>
        <div class="card-container">
          <div class="card">
            <img src="images/poster 12.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 11.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 10.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 9.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 8.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 7.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 6.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 5.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 4.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 3.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 2.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
          <div class="card">
            <img src="images/poster 1.png" alt="" class="card-img" />
            <div class="card-body">
              <h2 class="name">Movie Name</h2>
              <h6 class="des">lorem ipsum dolor sit amet.</h6>
              <button class="watchlist-btn">add to watchlist</button>
            </div>
          </div>
        </div>
      </div>
      <script src="index.js" async></script>
    </body>
    
    </html>

@ Html Code Explanation:

      1. `<!DOCTYPE html>`: This line tells the web browser that the document is an HTML5 document.
      
      2. `<html lang="en">`: This is the starting tag for the HTML document and indicates that the content is in English.
      
      3. `<head>`: This section contains metadata and links to external resources.
      
         a. `<meta charset="UTF-8">`: It specifies the character encoding used in the document, which is UTF-8, allowing support for various characters from different languages.
         
         b. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: This sets the viewport properties, so the webpage can adjust and look good on different devices with varying screen sizes.
         
         c. `<meta http-equiv="X-UA-Compatible" content="ie=edge">`: This line ensures that the document is displayed in the highest available version of Internet Explorer.
         
         d. `<title>Disney+ Clone</title>`: This sets the title of the webpage, which will appear in the browser's title bar or tab.
         
         e. `<link rel="stylesheet" href="style.css">`: This links an external CSS file named "style.css" to the HTML document, which provides styles for the webpage.
         
         f. `<script src="index.js" async></script>`: This includes an external JavaScript file named "index.js" and loads it asynchronously, meaning it won't block the rendering of the page.
      
      4. `<body>`: This section contains the visible content of the webpage that users see.
      
         a. `<nav class="navbar">`: This is the navigation bar section, which contains links to different sections of the website.
         
         b. `<div class="carousel-container">`: This is a container for a carousel (slideshow) section. However, the actual carousel content is commented out and not visible in this code.
         
         c. `<div class="video-card-container">`: This is a container for video cards displaying different movies or shows from Disney+.
         
         d. `<h1 class="title">Recommended For You</h1>`: This is a heading for the section displaying recommended movies.
         
         e. `<div class="movies-list">`: This is a container for a list of movie cards. Each movie card displays a movie poster, some information about the movie, and a button to add it to the watchlist.
         
         f. `<h1 class="title">popular Shows</h1>`: Another heading for the section displaying popular TV shows.
         
         g. `<script src="index.js" async></script>`: Another reference to the external JavaScript file, "index.js."
      
      Please note that the actual carousel and the movie cards are commented out in the provided code, so they won't be visible until you uncomment them.
      
      The website appears to have a navigation bar, a carousel section (commented out), video cards displaying movie or TV show content, sections displaying recommended and popular content, and buttons for navigation and watchlist functionality. For full functionality and design, you would need to implement the JavaScript code (in "index.js") and create the CSS styles (in "style.css").

# CSS Code.

* {
  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;
}

.caraousel-container {
  position: relative;
  width: 100%;
  height: 450px;
  padding: 20px 0;
  overflow-x: hidden;
  margin-top: 80px;
}

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

.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), #192135 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;
}

@ CSS Code Explanation:

      1. `*`: This selects all elements on the webpage.

   - `margin: 0;`: It sets the margin of all elements to zero, removing any default spacing.
   - `padding: 0;`: It sets the padding of all elements to zero, removing any default padding.
   - `box-sizing: border-box;`: It ensures that the width and height of an element include its border and padding, making it easier to size elements.

2. `body`: This selects the body element of the webpage.

   - `width: 100%;`: It sets the width of the body to 100% of the viewport width, making it fill the entire screen.
   - `background: #0c111b;`: It sets the background color of the body to a dark blueish color (#0c111b).
   - `position: relative;`: It positions the body relative to its normal position, which can be useful for absolute positioning of other elements inside it.
   - `font-family: roboto, sans-serif;`: It sets the font family for the text on the webpage to "Roboto" and fallbacks to a generic sans-serif font if "Roboto" is not available.

3. `.navbar`: This selects the element with the class "navbar".

   - `width: 100%;`: It sets the width of the navbar to 100% of its parent's width, making it span across the entire width of the viewport.
   - `height: 80px;`: It sets the height of the navbar to 80 pixels.
   - `position: fixed;`: It fixes the navbar's position, so it stays at the top of the viewport even when the user scrolls.
   - `top: 0;`: It positions the navbar at the top of the viewport.
   - `left: 0;`: It positions the navbar at the left edge of the viewport.
   - `padding: 0 4%;`: It adds 0 padding to the top and bottom and 4% padding to the left and right of the navbar.
   - `background: #0c111b;`: It sets the background color of the navbar to the same dark blueish color as the body.
   - `z-index: 9;`: It sets the z-index of the navbar to 9, ensuring it appears above other elements.
   - `display: flex;`: It sets the display property to flex, making it a flex container.
   - `align-items: center;`: It aligns the flex items (links and logo) vertically at the center of the navbar.

4. `.brand-logo`: This selects the element with the class "brand-logo", which is an image inside the navbar representing the brand logo.

   - `height: 70px;`: It sets the height of the brand logo image to 70 pixels.

5. `.nav-links`: This selects the element with the class "nav-links", which contains a list of navigation links.

   - `margin-top: 10px;`: It adds a 10px margin to the top of the navigation links.
   - `display: flex;`: It sets the display property to flex, making it a flex container for the list items.
   - `list-style: none;`: It removes the default bullet points from the list items.

6. `.nav-items a`: This selects the anchor elements (links) inside the navigation items.

   - `text-decoration: none;`: It removes the underline from the links.
   - `margin-left: 20px;`: It adds a 20px margin to the left of each link, creating spacing between the links.
   - `text-transform: capitalize;`: It transforms the text of the links to capitalize the first letter of each word.
   - `color: #fff;`: It sets the color of the links to white (#fff).
   - `opacity: 0.9;`: It sets the opacity of the links to 0.9, making them slightly transparent.

7. `.right-container`: This selects the element with the class "right-container", which contains elements aligned to the right side of the navbar.

   - `display: block;`: It sets the display property to block, making it a block-level container.
   - `margin-left: auto;`: It pushes the content inside this container to the right, aligning it at the rightmost side of the navbar.

8. `.search-box`: This selects the input element with the class "search-box", which is a search box inside the navbar.

   - `border: none;`: It removes the border around the search box.
   - `border-bottom: 1px solid #aaa;`: It adds a 1px bottom border to the search box with a light gray color (#aaa).
   - `background: transparent;`: It sets the background of the search box to be transparent.
   - `outline: none;`: It removes the focus outline that appears when the search box is selected.
   - `height: 30px;`: It sets the height of the search box to 30 pixels.
   - `color: #fff;`: It sets the text color of the search box to white (#fff).
   - `width: 250px;`: It sets the initial width of the search box to 250 pixels.
   - `text-transform: capitalize;`: It transforms the text inside the search box to capitalize the first letter of each word.
   - `font-size: 16px;`: It sets the font size of the text inside the search box to 16 pixels.
   - `font-weight: 500;`: It sets the font weight of the text inside the search box to 500.

9. `.search-box:focus`: This selects the search box when it is in focus (when the user clicks on it).

   - `width: 400px;`: It increases the width of the search box to 400 pixels when it is in focus.
   - `border-color: #1f80e0;`: It changes the bottom border color to a light blue (#1f80e0) when the search box is in focus.

10. `.sub-btn`: This selects the button element with the class "sub-btn", which is a subscription button inside the navbar.

   - `background: #1f80e0;`: It sets the background color of the button to a light blue (#1f80e0).
   - `height: 30px;`: It sets the height of the button to 30 pixels.
   - `padding: 0 20px;`: It adds padding of 0 to the top and bottom and 20 pixels to the left and right of the button.
   - `color: #fff;`: It sets the text color of the button to white (#fff).
   - `border-radius: 5px;`: It adds a border-radius of 5 pixels, making the button slightly rounded.
   - `border: none;`: It removes the border around the button.
   - `outline: none;`: It removes the focus outline that appears when the button is selected.
   - `text-transform: uppercase;`: It transforms the text inside the button to uppercase.
   - `font-weight: 700;`: It sets the font weight of the text inside the button to 700, making it bold.
   - `font-size: 12px;`: It sets the font size of the text inside the button to 12 pixels.
   - `margin: 0 10px;`: It adds a 10px margin to the left and right sides of the button, creating spacing between the other elements.

11. `.login-link`: This selects the anchor element (link) with the class "login-link", which represents the login link inside the navbar.

   - `color: #fff;`: It sets the color of the link to white (#fff).
   - `opacity: 0.9;`: It sets the opacity of the link to 0.9, making it slightly transparent.
   - `text-transform: uppercase;`: It transforms the text of the link to uppercase.
   - `font-size: 15px;`: It sets the font size of the link text to 15 pixels.
   - `font-weight: 700;`: It sets the font weight of the link text to 700, making it bold.
   - `text-decoration: none;`: It removes the underline from the link, so it appears plain text.

12. `.caraousel-container`: This selects the element with the class "caraousel-container", which is the container for the carousel (slideshow) section.

   - `position: relative;`: It positions the carousel container relative to its normal position.
   - `width: 100%;`: It sets the width of the carousel container to 100% of its parent's width.
   - `height: 450px;`: It sets the height of the carousel container to 450 pixels.
   - `padding: 20px 0;`: It adds 20 pixels of padding to the top and bottom of the carousel container.
   - `overflow-x: hidden;`: It hides any content that overflows horizontally.
   - `margin-top: 80px;`: It adds 80 pixels of margin at the top of the carousel container, creating space below the navbar.

13. `.caraousel`: This selects the element with the class "caraousel", which is the carousel itself containing slide elements.

   - `display: flex;`: It sets the display property to flex, making it a flex container.
   - `width: 92%;`: It sets the width of the carousel to 92% of its parent's width, leaving a small margin on each side.
   - `height: 100%;`: It sets the height of the carousel to 100% of its parent's height.
   - `position: relative;`: It positions the carousel relative to its normal position.
   - `margin: auto;`: It centers the carousel horizontally by setting the left and right margins to auto.

14. `.slider`: This selects the element with the class "slider", which represents individual slides in the carousel.

   - `flex: 0 0 auto;`: It sets the flex property to 0, meaning the slides will not grow or shrink, and the initial width will be maintained.
   - `margin-right: 30px;`: It adds a 30px margin to the right side of each slide, creating space between them.
   - `position: relative;`: It positions the slides relative to their normal position.
   - `background: rgba(0, 0, 0, 0.5);`: It sets the background color of the slides to a semi-transparent black (#000) to create a dark overlay.
   - `border-radius: 5px;`: It adds a border-radius of 5 pixels, making the slides slightly rounded.
   - `width: 100%;`: It sets the width of the slides to 100% of their container.
   - `height: 100%;`: It sets the height of the slides to 100% of their container.
   - `left: 0;`: It positions the slides to the left edge of their container.
   - `transition: 1s;`: It adds a transition effect of 1 second for smooth slide transitions.
   - `overflow: hidden;`: It hides any content that overflows the slides.

15. `.slider img`: This selects the image elements inside the slides.

   - `width: 70%;`: It sets the width of the images to 70% of their container's width.
   - `min-height: 100%;`: It sets the minimum height of the images to 100% of their container's height.
   - `object-fit: cover;`: It scales the images to cover the entire container, maintaining aspect ratio and cropping as necessary.

16. `.slide-content`: This selects the element with the class "slide-content", which contains content displayed on each slide.

   - `position: absolute;`: It positions the slide content absolutely within its parent slide.
   - `width: 50%;`: It sets the width of the slide content to 50% of its parent slide's width.
   - `height: 100%;`: It sets the height of the slide content to 100% of its parent slide's height.
   - `z-index: 2;`: It sets the z-index of the slide content to 2, making it appear above the slide's background.
   - `background: linear-gradient(to right, #030b17 80%, #0c111b00);`: It applies a linear gradient background to the slide content, creating a fading effect on the right side of the content.
   - `color: #fff;`: It sets the text color of the slide content to white (#fff).

17. `.movie-title`: This selects the elements with the class "movie-title", which represents the title of each movie or show on the carousel slide.

   - `padding-left: 50px;`: It adds 50 pixels of padding to the left side of the movie title, creating space from the left edge of the slide.
   - `text-transform: capitalize;`: It capitalizes the first letter of each word in the movie title.
   - `margin-top: 80px;`: It adds 80 pixels of margin at the top of the movie title, creating space from the top edge of the slide.

18. `.movie-des`: This selects the elements with the class "movie-des", which represents the description of each movie or show on the carousel slide.

   - `width: 80%;`: It sets the width of the description to 80% of its parent slide content's width.
   - `line-height: 30px;`: It sets the line height to 30 pixels, creating a comfortable spacing between lines of text.
   - `padding-left: 50px;`: It adds 50 pixels of padding to the left side of the description, creating space from the left edge of the slide content.
   - `margin-top: 30px;`: It adds 30 pixels of margin at the top of the description, creating space from the movie title.

19. `.video-card-container`: This selects the element with the class "video-card-container", which is the container for the video cards section.

   - `position: relative;`: It positions the video card container relative to its normal position.
   - `width: 92%;`: It sets the width of the video card container to 92% of its parent's width, leaving a small margin on each side.
   - `margin: auto;`: It centers the video card container horizontally by setting the left and right margins to auto.
   - `height: 10vw;`: It sets the height of the video card container to 10 viewport width units, creating a responsive height based on the screen width.

20. `.video-card`: This selects the elements with the class "video-card", which represents individual video cards.

   - `position: relative;`: It positions the video cards relative to their normal position.
   - `min-width: calc(100% / 5 - 10px);`: It sets the minimum width of each video card to one-fifth (1/5) of the container's width minus 10 pixels, allowing five cards to fit in a row with some spacing between them.
   - `width: calc(100% / 5 - 10px);`: It sets the width of each video card to one-fifth (1/5) of the container's width minus 10 pixels, allowing five cards to fit in a row with some spacing between them.
   - `height: 100%;`: It sets the height of each video card to 100% of its parent container's height.
   - `border-radius: 5px;`: It adds a border-radius of 5 pixels, making the video cards slightly rounded.
   - `overflow: hidden;`: It hides any content that overflows the video cards.
   - `background: #030b17;`: It sets the background color of the video cards to a dark blue (#030b17).

21. `.video-card-image`: This selects the image elements inside the video cards.

   - `width: 100%;`: It sets the width of the images to 100% of their container's width.
   - `height: 100%;`: It sets the height of the images to 100% of their container's height.
   - `object-fit: cover;`: It scales the images to cover the entire container, maintaining aspect ratio and cropping as necessary.

22. `.card-video`: This selects the video elements inside the video cards.

   - `width: 100%;`: It sets the width of the videos to 100% of their container's width.
   - `height: 100%;`: It sets the height of the videos to 100% of their container's height.
   - `object-fit: cover;`: It scales the videos to cover the entire container, maintaining aspect ratio and cropping as necessary.

23. `.card-video`: This selects the video elements inside the video cards again (duplicated rule).

24. `.video-card:hover .video-card-image`: This selects the image inside the video cards when the video cards are hovered.

   - `display: none;`: It hides the image when the video card is being hovered, so the video becomes visible.

25. `.title`: This selects the elements with the class "title", which represent section titles.

   - `color: #fff;`: It sets the text color of the titles to white (#fff).
   - `opacity: 0.9;`: It sets the opacity of the titles to 0.9, making them slightly transparent.
   - `padding-left: 4%;`: It adds 4% of padding to the left side of the titles, creating spacing from the left edge.
   - `text-transform: capitalize;`: It capitalizes the first letter of each word in the titles.
   - `font-size: 22px;`: It sets the font size of the titles to 22 pixels.
   - `font-weight: 500;`: It sets the font weight of the titles to 500, creating a moderate boldness.

26. `.movies-list`: This selects the elements with the class "movies-list", which represent the sections containing movie cards.

   - `width: 100%;`: It sets the width of the movie lists to 100% of their parent's width.
   - `height: 220px;`: It sets the height of the movie lists to 220 pixels.
   - `position: relative;`: It positions the movie lists relative to their normal position.
   - `margin: 10px 0 20px;`: It adds margins of 10 pixels at the top and 20 pixels at the bottom, creating spacing between sections.

27. `.card-container`: This selects the elements with the class "card-container", which represent the container for movie cards in each section.

   - `position: relative;`: It positions the card container relative to its normal position.
   - `width: 92%;`: It sets the width of the card container to 92% of its parent's width, leaving a small margin on each side.
   - `padding-left: 10px;`: It adds 10 pixels of padding to the left side of the card container, creating spacing from the left edge.
   - `height: 220px;`: It sets the height of the card container to 220 pixels.
   - `display: flex;`: It enables a flexbox layout for the card container, allowing movie cards to be horizontally aligned.
   - `margin: 0 auto;`: It centers the card container horizontally by setting the left and right margins to auto.
   - `align-items: center;`: It aligns the movie cards vertically within the card container, making sure they are centered.
   - `overflow-x: auto;`: It enables horizontal scrolling for the card container when the content overflows.
   - `overflow-y: visible;`: It sets the vertical overflow behavior to visible, so any content that exceeds the container's height will be visible.

28. `.card-container::-webkit-scrollbar`: This selects the scrollbar in the card container for webkit browsers (like Chrome and Safari).

   - `display: none;`: It hides the scrollbar, providing a cleaner look.

29. `.card`: This selects the elements with the class "card", which represent individual movie cards.

   - `position: relative;`: It positions the movie cards relative to their normal position.
   - `min-width: 150px;`: It sets the minimum width of each movie card to 150 pixels.
   - `width: 150px;`: It sets the width of each movie card to 150 pixels.
   - `height: 200px;`: It sets the height of each movie card to 200 pixels.
   - `border-radius: 5px;`: It adds a border-radius of 5 pixels, making the movie cards slightly rounded.
   - `overflow: hidden;`: It hides any content that overflows the movie cards.
   - `margin-right: 10px;`: It adds 10 pixels of margin to the right side of each movie card, creating spacing between them.
   - `transition: 0.5s;`: It applies a smooth transition effect of 0.5 seconds to any changes in the movie cards (e.g., scaling).
   - `font-size: 15px;`: It sets the font size of the movie card content to 15 pixels.

30. `.card-img`: This selects the image elements inside the movie cards.

   - `width: 100%;`: It sets the width of the images to 100% of their container's width.
   - `height: 100%;`: It sets the height of the images to 100% of their container's height.
   - `object-fit: cover;`: It scales the images to cover the entire container, maintaining aspect ratio and cropping as necessary.

31. `.card:hover`: This selects the movie cards when they are being hovered.

   - `transform: scale(1.1);`: It scales the movie cards by 10% (1.1 times) when they are hovered, creating a slight zoom-in effect.

32. `.card:hover .card-body`: This selects the content inside the movie cards when the movie cards are hovered.

   - `opacity: 1;`: It sets the opacity of the card body (movie title, description, and watchlist button) to 1, making it fully visible when the card is hovered.

33. `.card-body`: This selects the elements with the class "card-body", which represent the content inside the movie cards.

   - `opacity: 0;`: It sets the initial opacity of the card body to 0, making it invisible.
   - `width: 100%;`: It sets the width of the card body to 100% of its parent container's width.
   - `height: 100%;`: It sets the height of the card body to 100% of its parent container's height.
   - `position: absolute;`: It positions the card body absolutely within the movie cards, allowing overlapping.
   - `top: 0;`: It sets the top position of the card body to 0 pixels, aligning it to the top of the movie card.
   - `left: 0;`: It sets the left position of the card body to 0 pixels, aligning it to the left of the movie card.
   - `z-index: 2;`: It sets the z-index of the card body to 2, ensuring it appears above other elements inside the movie card.
   - `background: linear-gradient(to bottom, rgba(4, 8, 15, 0), #192135 90%);`: It applies a linear gradient background to the card body, fading to transparency at the top and a darker color at the bottom.
   - `padding: 10px;`: It adds 10 pixels of padding to the card body, creating space between the content and the edges of the card.
   - `transition: 0.5s;`: It applies a smooth transition effect of 0.5 seconds to any changes in the card body (e.g., opacity).

34. `.name`: This selects the elements with the class "name", which represent the movie or show titles inside the card bodies.

   - `color: #fff;`: It sets the text color of the movie/show titles to white (#fff).
   - `font-size: 15px;`: It sets the font size of the movie/show titles to 15 pixels.
   - `font-weight: 500;`: It sets the font weight of the movie/show titles to 500, creating a moderate boldness.
   - `text-transform: capitalize;`: It capitalizes the first letter of each word in the movie/show titles.
   - `margin-top: 60%;`: It adds 60% of margin at the top of the movie/show titles, pushing them slightly down from the top edge of the card.

35. `.des`: This selects the elements with the class "des", which represent the descriptions of movies or shows inside the card bodies.

   - `color: #fff;`: It sets the text color of the descriptions to white (#fff).
   - `opacity: 0.8;`: It sets the opacity of the descriptions to 0.8, making them slightly transparent.
   - `margin: 5px 0;`: It adds 5 pixels of margin at the top and bottom of the descriptions, creating spacing.

36. `.watchlist-btn`: This selects the elements with the class "watchlist-btn", which represent the "add to watchlist" buttons inside the card bodies.

   - `position: relative;`: It positions the watchlist button relative to its normal position.
   - `width: 100%;`: It sets the width of the watchlist button to 100% of its parent container's width.
   - `text-transform: capitalize;`: It capitalizes the text inside the watchlist button.
   - `background: none;`: It removes the background color of the button, making it transparent.
   - `border: none;`: It removes the border of the button.
   - `font-weight: 500;`: It sets the font weight of the button text to 500, creating a moderate boldness.
   - `text-align: right;`: It aligns the text inside the button to the right.
   - `color: rgba(255, 255, 255, 0.5);`: It sets the text color of the button to a semi-transparent white, creating a faded appearance.
   - `margin: 5px 0;`: It adds 5 pixels of margin at the top and bottom of the button, creating spacing.
   - `cursor: pointer;`: It changes the mouse cursor to a pointer when hovering over the button, indicating it is clickable.
   - `padding: 10px 5px;`: It adds 10 pixels of padding at the top and bottom and 5 pixels of padding on the left and right of the button.

37. `.watchlist-btn::before`: This selects the pseudo-element "::before" of the watchlist button, which represents the icon (a plus sign) before the text.

   - `content: "";`: It sets the content of the pseudo-element to an empty string, so it will not display any visible content.
   - `position: absolute;`: It positions the pseudo-element absolutely within the watchlist button.
   - `top: 0;`: It sets the top position of the pseudo-element to 0 pixels, aligning it to the top of the watchlist button.
   - `left: -5px;`: It sets the left position of the pseudo-element to -5 pixels, moving it slightly to the left of the watchlist button.
   - `height: 35px;`: It sets the height of the pseudo-element to 35 pixels.
   - `width: 35px;`: It sets the width of the pseudo-element to 35 pixels.
   - `background-image: url(images/add.png);`: It sets the background image of the pseudo-element to an image file named "add.png".
   - `background-size: cover;`: It scales the background image to cover the entire pseudo-element.
   - `transform: scale(0.4);`: It scales down the size of the pseudo-element (icon) to 40%, making it smaller.

38. `.watchlist-btn::hover`: This selects the watchlist button when it is being hovered.

   - `color: #fff;`: It sets the text color of the button to white (#fff) when the button is hovered.
   - `background: rgba(255, 255, 255, 0.1);`: It sets the background of the button to a semi-transparent white color when the button is hovered, creating a slight highlight effect.

39. `.pre-btn`, `.nxt-btn`: These select the elements with the classes "pre-btn" and "nxt-btn", respectively, which represent the previous and next buttons for scrolling movie cards.

   - `position: absolute;`: They position the buttons absolutely within their container, allowing them to overlap with the card container.
   - `top: 0;`: They set the top position of the buttons to 0 pixels, aligning them to the top of their container.
   - `width: 5%;`: They set the width of the buttons to 5% of their container's width.
   - `height: 100%;`: They set the height of the buttons to 100% of their container's height.
   - `z-index: 2;`: They set the z-index of the buttons to 2, ensuring they appear above other elements.
   - `border: none;`: They remove the border of the buttons.
   - `cursor: pointer;`: They change the mouse cursor to a pointer when hovering over the buttons, indicating they are clickable.
   - `outline: none;`: They remove the outline when the buttons are focused (e.g., by clicking).
   - `.pre-btn`: It sets the left position of the previous button to 0 pixels, aligning it to the left edge of its container.
   - `background: linear-gradient(to right, #0c111b 0%, #0c111b00);`: It applies a linear gradient background to the previous button, creating a fading effect from left to right.
   - `.nxt-btn`: It sets the right position of the next button to 0 pixels, aligning it to the right edge of its container.
   - `background: linear-gradient(to left, #0c111b 0%, #0c111b00);`: It applies a linear gradient background to the next button, creating a fading effect from right to left.
   - `.pre-btn img`, `.nxt-btn img`: These select the images inside the previous and next buttons.
   - `width: 15px;`: They set the width of the images to 15 pixels.
   - `height: 20px;`: They set the height of the images to 20 pixels.
   - `opacity: 0;`: They set the initial opacity of the images to 0, making them invisible.
   - `.pre-btn:hover img`, `.nxt-btn:hover img`: These select the images inside the previous and next buttons when the buttons are being hovered.
   - `opacity: 1;`: They set the opacity of the images to 1, making them fully visible when the buttons are hovered.

# Javascript Code.

      var movies = [
      {
        name: "falson ans the winter soldier",
        des: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe aut magni ratione voluptatem ab commodi.",
        image: "images/slider 2.png"
      },
      {
        name: "loki",
        des: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe aut magni ratione voluptatem ab commodi.",
        image: "images/slider 1.png"
      },
      {
        name: "wanda vision",
        des: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe aut magni ratione voluptatem ab commodi.",
        image: "images/slider 3.png"
      },
      {
        name: "raya and the last dragon",
        des: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe aut magni ratione voluptatem ab commodi.",
        image: "images/slider 4.png"
      },
      {
        name: "luca",
        des: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe aut magni ratione voluptatem ab commodi.",
        image: "images/slider 5.png"
      }
    ];
    let caraousel = document.querySelector(".caraousel");
    let sliders = [];
    let slideIndex = 0; //track the current slide
    const createSlide = () => {
      if (slideIndex >= movies.length) {
        slideIndex = 0;
      }
    
      // create DOM Elements
      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(imgElement);
      caraousel.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";
    
      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;
      });
    });

@ Javascript Code Explanation:

      1. An array of movie objects is defined. Each movie object contains properties such as "name," "des" (description), and "image" (image URL).
      
      2. Some variables are declared to store references to important elements on the webpage:
         - `caraousel`: It refers to the element with the class "caraousel," which represents the carousel container on the webpage.
         - `sliders`: It is an empty array that will store references to dynamically created slider elements in the carousel.
         - `slideIndex`: It is a variable to keep track of the current slide index in the carousel.
      
      3. A function named `createSlide` is defined to create individual slides inside the carousel based on the movie data. It dynamically generates DOM elements such as "div," "img," "h1" (heading), and "p" (paragraph) to display movie information.
      
      4. A loop runs three times, calling the `createSlide` function to initially create three slides in the carousel.
      
      5. An interval is set using `setInterval` to call the `createSlide` function every 3000 milliseconds (3 seconds). This creates an automatic sliding effect for the carousel, displaying different movie slides.
      
      6. Video cards are selected using their class "video-card," and event listeners are added to play and pause the videos inside the cards when hovering over them.
      
      7. Card containers (scrollable movie lists) are selected using their class "card-container," and buttons (previous and next) are selected using their classes "pre-btn" and "nxt-btn." Event listeners are added to the buttons to scroll the movie lists horizontally when clicked.
      
      That's a simple explanation of the JavaScript code, which handles the dynamic creation of carousel slides and enables interaction with video cards and scrollable movie lists on the Disney+ Clone webpage.

Project Explanation...

# Html Code.

@ Html Code Explanation:

# CSS Code.

@ CSS Code Explanation:

# Javascript Code.

@ Javascript Code Explanation: