JS-RUH-1 · mahaatechcampus · Oct 7, 2021 · Oct 7, 2021
diff --git a/.DS_Store b/.DS_Store
diff --git a/<!DOCTYPE html>.html b/<!DOCTYPE html>.html
@@ -0,0 +1,12 @@
+<!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>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/2.jpg b/images/2.jpg
diff --git a/images/3.jpeg b/images/3.jpeg
diff --git a/... (1).zw1zlxbyzc1hc3nldhmvbw92awvzlzywzgzhody3lti2yzktngvkyy05ywjlltvmmgnmmty2ywzhns5qcgc= b/... (1).zw1zlxbyzc1hc3nldhmvbw92awvzlzywzgzhody3lti2yzktngvkyy05ywjlltvmmgnmmty2ywzhns5qcgc=
diff --git a/.../ems.zw1zlxbyzc1hc3nldhmvbw92awvzlzywzgzhody3lti2yzktngvkyy05ywjlltvmmgnmmty2ywzhns5qcgc= b/.../ems.zw1zlxbyzc1hc3nldhmvbw92awvzlzywzgzhody3lti2yzktngvkyy05ywjlltvmmgnmmty2ywzhns5qcgc=
diff --git a/images/images.jpeg b/images/images.jpeg
diff --git a/images/maxresdefault.jpeg b/images/maxresdefault.jpeg
diff --git a/images/movieposter_en.jpeg b/images/movieposter_en.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,137 @@
+<!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 rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <title>Bootstrap Lab</title>
+</head>
+<body>
+    <nav class="navbar navbar-expand-sm bg-light .navbar-light">
+        <!-- Brand/logo -->
+        <a class="navbar-brand text-secondary" href="#">Movies</a>
+
+        <!-- Links -->
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">Home</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">TV Shows</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link text-secondary" href="#">Awards&Event</a>
+          </li>
+        </ul>
+      </nav>
+
+<header>
+      <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 is a 2018 </h5>
+              <p>American–New Zealand co-production, the film is set in a post-apocalyptic world where entire cities have been mounted on wheels and motorised.</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">
+              <h5>Second slide label</h5>
+              <p>Some representative placeholder content for the second slide.</p>
+            </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">
+              <h5>Third slide label</h5>
+              <p>Some representative placeholder content for the third slide.</p>
+            </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>
+
+    </header>
+      <!-- ----- --><section>
+
+        <div class="card text-center">
+            <div class="card-header">
+              <ul class="nav nav-pills card-header-pills">
+                <li class="nav-item">
+                  <a class="nav-link active" href="#">Home</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#">Library</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link disabled">Movies</a>
+                </li>
+              </ul>
+            </div>
+            <div class="row row-cols-1 row-cols-md-3 g-4">
+                <div class="col">
+                  <div class="card">
+                    <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">Avengers: Endgame is a 2019 American superhero film based on the Marvel Comics superhero team the Avengers. Produced by Marvel Studios and distributed by Walt Disney Studios Motion Pictures, it is the direct sequel to Avengers: Infinity War (2018) and the 22nd film in the Marvel Cinematic Universe (MCU).  </p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="card">
+                    <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 American drama film written and directed by Frank Darabont, based on the 1982 Stephen King novella Rita Hayworth and Shawshank Redemption. It tells the story of banker Andy Dufresne (Tim Robbins), who is sentenced to life in Shawshank State Penitentiary for the murders of his wife and her lover, despite his claims of innocence. </p>
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="card">
+                    <img src="images/joker.jpg" class="card-img-top" alt="...">
+                    <div class="card-body">
+                      <h5 class="card-title">Joker</h5>
+                      <p class="card-text">oker is a 2019 American psychological thriller film directed and produced by Todd Phillips, who co-wrote the screenplay with Scott Silver. The film, based on DC Comics characters, stars Joaquin Phoenix as the Joker and provides a possible origin story for the character.</p>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+          </div>
+          <nav aria-label="Page navigation example">
+            <ul class="pagination justify-content-center">
+              <li class="page-item disabled">
+                <a class="page-link">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>
+
+    </section>
+</body>
+</html>
diff --git a/style.css b/style.css