JS-RUH-1 · Majeed99 · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021 · Oct 7, 2021
diff --git a/images/avengers.jpg b/images/avengers.jpg
diff --git a/images/header1.jpg b/images/header1.jpg
diff --git a/images/header2.jpg b/images/header2.jpg
diff --git a/images/header3.jpeg b/images/header3.jpeg
diff --git a/images/joker.jpg b/images/joker.jpg
diff --git a/images/shawshank.jpg b/images/shawshank.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <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="#">Movies</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNavDropdown"
+          aria-controls="navbarNavDropdown"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNavDropdown">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" 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" href="#">Awards & Event</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+
+    <div
+      id="carouselExampleControls"
+      class="w-100 carousel slide"
+      data-ride="carousel"
+    >
+      <div class="carousel-inner">
+        <div class="carousel-item active">
+          <img
+            class="d-block w-100"
+            src="./images/header1.jpg"
+            alt="First slide"
+          />
+          <div class="carousel-caption ">
+            <h6 class="">Mortal Engines 2018</h6>
+            <p style="font-size: small;">An American-New Zealand to-prodúction, the film is set in a post-apocalyptic world where entire
+                ities have been mounted on wheels and motorised</p>
+          </div>
+        </div>
+
+        <div class="carousel-item ">
+          <img
+            class="d-block w-100"
+            src="./images/header3.jpeg"
+            alt="First slide"
+          />
+          <div class="carousel-caption ">
+            <h6 class="">Mortal Engines 2018</h6>
+            <p style="font-size: small;">An American-New Zealand to-prodúction, the film is set in a post-apocalyptic world where entire
+                ities have been mounted on wheels and motorised</p>
+          </div>
+        </div>
+
+        <div class="carousel-item ">
+          <img
+            class="d-block w-100"
+            src="./images/header2.jpg"
+            alt="First slide"
+          />
+          <div class="carousel-caption">
+            <h6 class="">Mortal Engines 2018</h6>
+            <p style="font-size: small;">An American-New Zealand to-prodúction, the film is set in a post-apocalyptic world where entire
+                ities have been mounted on wheels and motorised</p>
+          </div>
+        </div>
+
+        </div><a
+        class="carousel-control-prev"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="prev"
+      >
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+
+      </a>
+      <a
+        class="carousel-control-next"
+        href="#carouselExampleControls"
+        role="button"
+        data-slide="next"
+      >
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+
+      </a>
+      </div>
+
+    </div>
+
+    <!-- <div class="carousel-item">
+      <img src="./images/header1.jpg" alt="header" width="100%" />
+
+      <div class="carousel-caption d-none d-md-block">
+        <h5>..dfgfdg.</h5>
+        <p>..dfgfdg.</p>
+      </div>
+    </div> -->
+
+    <div class="row w-100 h-100 d-flex justify-content-between px-5 my-3">
+      <div class="mb-2 rounded align-center bg-light text-dark">
+        <nav aria-label="breadcrumb   ">
+          <ol class="breadcrumb m-0 p-2">
+            <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="px-1 col-lg-4 col-xs-12 col-md-6 my-1">
+        <div class="card h-100">
+          <img src="./images/avengers.jpg" class="card-img-top" alt="..." />
+          <div class="card-body">
+            <h1>Avengers: Endgame</h1>
+            <p class="card-text">
+              After the devastating events of Avengers: Infinity War (2018), the
+              universe is in ruins. With the help of remaining allies, the
+              Avengers assemble once more in order to reverse Thanos' actions
+              and restore balance to the universe
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="px-1 col-lg-4 col-xs-12 col-md-6 my-1">
+        <div class="card h-100">
+          <img src="./images/shawshank.jpg" class="card-img-top" alt="..." />
+          <div class="card-body">
+            <h1>The Shawshank Redemption</h1>
+            <p class="card-text">
+              The Shawshank Redemption is a 1994 American drama film written and
+              directed by Frank Darabont, based on the 1982 Stephen King novella
+              Rita Hayworth and Shawshank Redemption.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="px-1 col-lg-4 col-xs-12 col-md-6 my-1">
+        <div class="card h-100">
+          <img src="./images/joker.jpg" class="card-img-top" alt="..." />
+          <div class="card-body">
+            <h1>Joker</h1>
+            <p class="card-text">
+              Joker is a 2019 American psychological thriller film directed and
+              produced by Todd Phillips, who co-wrote the screenplay with Scott
+              Silver.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex justify-content-center">
+      <nav aria-label="Page navigation example ">
+        <ul class="pagination">
+          <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>
+  </body>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+
+</html>