diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2d1a569
--- /dev/null
+++ b/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Movies</title>
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="#"></a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="#">Movies</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="#">TV shows</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link disabled">Awords&Event</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+     
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
+
+    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+        <div class="carousel-indicators">
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+        </div>
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="./images/header1.jpg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block">
+              <h5>Mortal Engines 2018</h5>
+              <p>An American New Zealand co-production,the film is set in a post apocalyptic world where cities have been mounted on wheels. </p>
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./images/header2.jpg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block">
+             
+            </div>
+          </div>
+          <div class="carousel-item">
+            <img src="./images/header3.jpeg" class="d-block w-100" alt="...">
+            <div class="carousel-caption d-none d-md-block">
+             
+            </div>
+          </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+      
+      <div class="container m-5">
+          <div class="row">   <nav aria-label="breadcrumb">
+            <ol class="breadcrumb bg-light" >
+              <li class="breadcrumb-item"><a href="#">Home</a></li>
+              <li class="breadcrumb-item"><a href="#">Library</a></li>
+              <li class="breadcrumb-item active" aria-current="page">Movies</li>
+    
+            </ol>
+        </nav>
+        
+        </div>
+
+        
+    <div class="row row-cols-1 row-cols-md-3 g-4">
+        <div class="col">
+          <div class="card h-100">
+            <img src="./images/avengers.jpg" class="card-img-top" alt="...">
+            <div class="card-body">
+              <h5 class="card-title">Avengers:Endgame</h5>
+              <p class="card-text">After the devastating event of avengers infinity war(2018),the universe is in ruins. with the help of remaining allise.the avengers assemble once more in order .</p>
+            </div> 
+          </div>
+        </div>
+        <div class="col">
+          <div class="card h-100">
+            <img src="./images/shawshank.jpg" class="card-img-top" alt="...">
+            <div class="card-body">
+              <h5 class="card-title">The Shawshank Redemption</h5>
+              <p class="card-text">The Shawshank Redemption is a 1994 ameircan drama film written and directed by Frank,based on the 1982 stephen king novella.</p>
+            </div> 
+          </div>
+        </div>
+        <div class="col">
+          <div class="card h-100">
+            <img src="./images/joker.jpg" class="card-img-top" alt="...">
+            <div class="card-body">
+              <h5 class="card-title">Joker</h5>
+              <p class="card-text">Joker is a 2019 amiercan psychological thriller film directed by Todd Philips.</p>
+            </div> 
+          </div>
+        </div>
+      </div>
+      <br>
+<div class="row">
+      <nav aria-label="Page navigation example m-4">
+
+        <ul class="pagination justify-content-center">
+          <li class="page-item"><a class="page-link" href="#">Previous</a></li>
+          <li class="page-item"><a class="page-link" href="#">1</a></li>
+          <li class="page-item"><a class="page-link" href="#">2</a></li>
+          <li class="page-item"><a class="page-link" href="#">3</a></li>
+          <li class="page-item"><a class="page-link" href="#">Next</a></li>
+        </ul>
+      </nav>
+</div>
+      </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/movie.css b/movie.css
new file mode 100644
index 0000000..e69de29
