diff --git a/100_projects/51-disney-movies-landing-page/css/style.css b/100_projects/51-disney-movies-landing-page/css/style.css
new file mode 100644
index 0000000..284ed1a
--- /dev/null
+++ b/100_projects/51-disney-movies-landing-page/css/style.css
@@ -0,0 +1,165 @@
+*{
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+*,*::before, *::after{
+  box-sizing: border-box;
+  font-weight: 400;
+  color: #fff;
+}
+body{
+  background: linear-gradient(90deg, rgba(13,22,46, .7) 23%, rgba(13,22,46, .1) 96%), url(../img/bg.jpg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  margin: 0;
+  min-height: 100vh;
+}
+a{
+  display: inline-block;
+  text-decoration: none;
+  transition: .3s ease-in-out;
+  -moz-transition: .3s ease-in-out;
+  -o-transition: .3s ease-in-out;
+  -webkit-transition: .3s ease-in-out;
+}
+ul{
+  list-style: none;
+}
+img{
+  max-width: 100%;
+}
+.imdb{
+  width: 50px;
+}
+.logo{
+  width: 120px;
+}
+.row{
+  display: flex;
+}
+.container{
+  max-width: 90%;
+  margin: 0 auto;
+}
+
+/*Navigation*/
+header{
+  align-items: center;
+  justify-content: space-between;
+  gap: 2em;
+}
+nav ul{
+  gap: 2em;
+  flex-direction: column;
+  text-align: center;
+}
+nav a{
+  font-size: 18px;
+  text-transform: uppercase;
+}
+nav a:hover,
+.hero-btn:hover{
+  transform: scale(1.1);
+}
+.toggleMenu ion-icon{
+  width: 30px;
+  height: 30px;
+  z-index: 1000;
+  transition: .3s;
+  cursor: pointer;
+  position: relative;
+  z-index: 9999;
+}
+.toggleMenu.active ion-icon{
+  width: 25px;
+  height: 25px;
+}
+.navigation{
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  background: rgba(14,138,177, .85);
+  max-height: 0;
+  opacity: 0;
+  transform: scale(0);
+}
+.navigation.active{
+  position: fixed;
+  max-height: 100%;
+  opacity: 1;
+  z-index: 99;
+  transform: scale(1);
+}
+/*Navigation*/
+.hero{
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 2em;
+  padding: 2em 0;
+}
+.hero-content{
+  max-width: 400px;
+  gap: 1em;
+}
+.rate{
+  align-items: center;
+  gap: 1em;
+}
+.hero h6{
+  font-weight: 500;
+  font-size: 20px;
+}
+.hero p{
+  font-size: 16px;
+  padding: 1em 0;
+  color: rgba(255,255,255, .8);
+}
+.hero-btn{
+  font-weight: 500;
+  font-size: 20px;
+  text-transform: capitalize;
+  justify-content: center;
+  align-items: center;
+  gap: .5em;
+  fill:#fff;
+  background: #0e8ab1;
+  padding: .5em 0;
+  max-width: 200px;
+  box-shadow: 0 3px 5px rgba(0,0,0, .15);
+  margin-top: 1em;
+  border-radius: 100px;
+}
+.hero-video{
+  max-width: 310px;
+}
+.hero h1{
+  font-weight: 700;
+  font-size: 28px;
+  padding-bottom: .5em;
+}
+.hero-scroll{
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+  max-height: 500px;
+  overflow: scroll;
+  scrollbar-width: thin;
+  -moz-scrollbar-width: thin;
+  -webkit-scrollbar-width: thin;
+}
+.hero-video iframe{
+  width: 100%;
+}
+
+
+@media screen and (max-width:850px) {
+  .hero-content{
+    max-width: unset;
+  }
+} 
\ No newline at end of file
diff --git a/100_projects/51-disney-movies-landing-page/img/bg.jpg b/100_projects/51-disney-movies-landing-page/img/bg.jpg
new file mode 100644
index 0000000..442ac4e
Binary files /dev/null and b/100_projects/51-disney-movies-landing-page/img/bg.jpg differ
diff --git a/100_projects/51-disney-movies-landing-page/img/imdb.png b/100_projects/51-disney-movies-landing-page/img/imdb.png
new file mode 100644
index 0000000..e50777c
Binary files /dev/null and b/100_projects/51-disney-movies-landing-page/img/imdb.png differ
diff --git a/100_projects/51-disney-movies-landing-page/img/logo.png b/100_projects/51-disney-movies-landing-page/img/logo.png
new file mode 100644
index 0000000..90f5db5
Binary files /dev/null and b/100_projects/51-disney-movies-landing-page/img/logo.png differ
diff --git a/100_projects/51-disney-movies-landing-page/img/luca.png b/100_projects/51-disney-movies-landing-page/img/luca.png
new file mode 100644
index 0000000..ed5298e
Binary files /dev/null and b/100_projects/51-disney-movies-landing-page/img/luca.png differ
diff --git a/100_projects/51-disney-movies-landing-page/index.html b/100_projects/51-disney-movies-landing-page/index.html
new file mode 100644
index 0000000..b0e478b
--- /dev/null
+++ b/100_projects/51-disney-movies-landing-page/index.html
@@ -0,0 +1,93 @@
+<!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>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <!-- Start Navigation -->
+  <header class="row container">
+    <a href="#" class="logo">
+      <img src="img/logo.png" alt="logo" class="logo">
+    </a>
+    <div class="toggleMenu" onclick="toggleMenu();">
+      <ion-icon name="grid-outline"></ion-icon>
+    </div>
+    <nav class="navigation row">
+      <ul class="row">
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Movies</a></li>
+        <li><a href="#">Series</a></li>
+        <li><a href="#">Coming Soon</a></li>
+      </ul>
+    </nav>
+  </header>
+  <!-- End Navigation -->
+  <!-- Hero sec-->
+  <section class="hero row container">
+    <div class="hero-content">
+      <a href="#" class="rate row">
+        <img src="img/imdb.png" alt="" class="imdb">
+        <h6>8.8</h6>
+      </a>
+      <p>2021 - Kid - Movie</p>
+      <img src="img/luca.png" alt="luca">
+      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod rerum corrupti, culpa consequatur doloremque libero totam sint numquam dignissimos quam laborum eos consectetur animi cum corporis repellendus saepe quas! Cumque.</p>
+      <a href="#" class="hero-btn row">
+        <ion-icon name="caret-forward-outline"></ion-icon>
+        Watch now
+      </a>
+    </div>
+    <div class="hero-video row">
+      <div>
+        <h1>Movies</h1>
+        <div class="hero-scroll row">
+          <div>
+            <iframe
+            src="https://www.youtube.com/embed/mYfJxlgR2jw"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            </iframe>
+          </div>
+          <div>
+            <iframe
+            src="https://www.youtube.com/embed/mYfJxlgR2jw"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            </iframe>
+          </div>
+          <div>
+            <iframe
+            src="https://www.youtube.com/embed/mYfJxlgR2jw"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            </iframe>
+          </div>
+          <div>
+            <iframe
+            src="https://www.youtube.com/embed/mYfJxlgR2jw"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            </iframe>
+          </div>
+          <div>
+            <iframe
+            src="https://www.youtube.com/embed/mYfJxlgR2jw"
+            title="YouTube video player" frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+            </iframe>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Hero sec-->
+  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
+  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+  <script src="js/app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/100_projects/51-disney-movies-landing-page/js/app.js b/100_projects/51-disney-movies-landing-page/js/app.js
new file mode 100644
index 0000000..cce42dc
--- /dev/null
+++ b/100_projects/51-disney-movies-landing-page/js/app.js
@@ -0,0 +1,7 @@
+
+function toggleMenu(){
+  const toggleMenu = document.querySelector('.toggleMenu');
+  const navigation = document.querySelector('.navigation');
+  toggleMenu.classList.toggle('active');
+  navigation.classList.toggle('active');
+}
\ No newline at end of file