Merge pull request #34 from roannav/split-into-separate-files

split main page into several pages by topic
roannav · Oct 9, 2023 · 9fef669 · 9fef669
2 parents ca8c680 + abfc261
commit 9fef669
Show file tree

Hide file tree

Showing 10 changed files with 445 additions and 0 deletions.
diff --git a/cast-crew.html b/cast-crew.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="cast-crew-section">
+        <h3>Cast & Crew</h3>
+      </section>
+      <!--cast-crew-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>
diff --git a/characters.html b/characters.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="characters-section">
+        <h3>Characters</h3>
+        <div class="character">
+          <h4>Name: Agent Smith</h4>
+          <img src="img/characters/agent-smith.jpg" alt="Agent Smith" />
+          <p>AKA: Bane</p>
+          <p>Quotes: "Never send a human to do a machine's job."</p>
+          <a
+            class="btn-infos"
+            href="https://en.wikipedia.org/wiki/Agent_Smith"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+        <div class="character">
+          <h4>Name: Neo</h4>
+          <img src="img/characters/neo_picture.jpg" alt="Neo" />
+          <p>AKA: Thomas Anderson</p>
+          <p>
+            Quotes: When Trinity says "Neo, no one has ever done anything like
+            this, then Neo replies "That's why it's going to work."
+          </p>
+          <a
+            class="btn-infos"
+            href="https://en.wikipedia.org/wiki/Neo_(The_Matrix)"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+        <div class="character">
+          <h4>Name: Trinity</h4>
+          <img src="img/characters/trinity.png" alt="Trinity" />
+          <p>AKA: Trinity Announces</p>
+          <p>Quotes: "The Matrix isn't real."</p>
+          <a
+            class="btn-infos"
+            href="https://en.wikipedia.org/wiki/Trinity_(The_Matrix)"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+        <div class="character">
+          <h4>Name: Morpheus</h4>
+          <img src="img/characters/morpheus.jpg" alt="Morpheus" />
+          <p>AKA:--</p>
+          <p>Quotes: "The Matrix is everywhere."</p>
+          <a
+            class="btn-infos"
+            href="https://en.wikipedia.org/wiki/Morpheus_(The_Matrix)"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+        <div class="character">
+          <h4>Name: Morpheus</h4>
+          <img src="img/characters/woman_red.jpeg" alt="Morpheus" />
+          <p>AKA:--</p>
+          <p>Quotes: "The woman in the red dress. I designed her."</p>
+          <a
+            class="btn-infos"
+            href="https://en.wikipedia.org/wiki/Morpheus_(The_Matrix)"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+        <div class="character">
+          <h4>Name: Cypher</h4>
+          <img src="img/characters/cypher.jpg" alt="Cypher" />
+          <p>AKA: The Betrayer</p>
+          <p>
+            Quotes: "You know... for a long time, I thought I was in love with
+            you. I used to dream about you. You're a beautiful woman, Trinity.
+            Too bad things had to turn out this way."
+          </p>
+          <a
+            class="btn-infos"
+            href="https://matrix.fandom.com/wiki/Cypher"
+            target="_blank"
+            >More infos</a
+          >
+        </div>
+      </section>
+      <!--characters-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>
diff --git a/games.html b/games.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="games-section">
+        <h3>Games</h3>
+      </section>
+      <!--games-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>
diff --git a/js/footer.js b/js/footer.js
@@ -0,0 +1,15 @@
+const footer = document.getElementById("footer");
+footer.innerHTML = `
+  <div class="note-footer">
+    <h6>Note:</h6>
+    <br>
+    &nbsp;&nbsp;<a href="website-credits.html">Website Credits</a>&nbsp;&nbsp;
+    Contributions from anyone to this website are welcome!
+    <br><br>
+    &nbsp;&nbsp;Please see the <a href="https://github.com/roannav/matrix-movies-website-hacktoberfest">Matrix Movies Website GitHub Repo</a>.
+    <br><br>
+    &nbsp;&nbsp;This website is licensed under the terms of the MIT license.
+    <br><br>
+    &nbsp;&nbsp;By using this site, you agree to the <a href="terms-of-use.html">Terms of Use</a> and <a href="privacy-policy.html">Privacy Policy</a>.
+  </div>
+`;
diff --git a/js/header.js b/js/header.js
@@ -0,0 +1,5 @@
+const header = document.getElementById("header");
+header.innerHTML = `
+  <h1>THE MATRIX MOVIES WEBSITE</h1>
+  <!-- <h6>A Hacktoberfest Project for Beginners</h6> -->
+`;
diff --git a/js/navbar.js b/js/navbar.js
@@ -0,0 +1,11 @@
+const navbar = document.getElementById("navbar");
+navbar.innerHTML = `
+  <ul class="navbar-container" >
+    <li><a href="characters.html">Characters</a></li>
+    <li><a href="plot.html">Plot</a></li>
+    <li><a href="scenes.html">Favourite Scenes</a></li>
+    <li><a href="cast-crew.html">Cast & Crew</a></li>
+    <li><a href="reviews.html">Reviews</a></li>
+    <li><a href="games.html">Games</a></li>         
+  </ul>
+`;
diff --git a/plot.html b/plot.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="plot-section">
+        <h3>Plots</h3>
+        <h4 class="collapsible">The Matrix (1999)</h4>
+        <div class="content">
+          <p>
+            Summary of Movie 1
+          </p>
+        </div>
+        <h4 class="collapsible">The Matrix Reloaded (2003)</h4>
+        <div class="content">
+          <p>
+            Summary of Movie 2
+          </p>
+        </div>
+        <h4 class="collapsible">The Matrix Revolutions (2003)</h4>
+        <div class="content">
+          <p>
+            Summary of Movie 3
+          </p>
+        </div>
+        <h4 class="collapsible">The Matrix Resurrections (2021)</h4>
+        <div class="content">
+          <p>
+            Summary of Movie 4
+          </p>
+        </div>
+      </section>
+      <!--plot-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/accordion.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>
diff --git a/reviews.html b/reviews.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="reviews-section">
+        <h3>Reviews</h3>
+        <div class="review">
+          <h6>Masterpiece!</h6>
+          <p>October 8, 2023 Review of "The Matrix" by A. L.</p>
+          <p>
+            "The Matrix" is an absolute masterpiece that redefined science
+            fiction cinema. Keanu Reeves delivers a stellar performance as Neo,
+            a character we can all relate to. We watch his journey from a
+            computer hacker to becoming the savior of humanity. This film is
+            both thrilling and thought-provoking. Groundbreaking special effects
+            and great action sequences, still hold up even years after its
+            release. With it's compelling story, unforgettable characters, and
+            philosophical depth, "The Matrix" remains a timeless classic that
+            continues to captivate and inspire audiences worldwide.
+          </p>
+        </div>
+        <div class="review">
+          <h6>Best Sci-Fi: The Matrix</h6>
+          <p>October 3, 2023 Review of "The Matrix" by C. F.</p>
+          <p>
+            Love this movie! Keanu Reeves, Laurence Fishburne, and Carrie-Anne
+            Moss deliver amazing performances. The whole idea of a simulated
+            reality is haunting, but the action scenes are way cool. Plus, that
+            iconic bullet-dodging scene! It's the kind of movie I can watch over
+            and over and still find something new to appreciate. Whether you're
+            into philosophy or just love a good ol' sci-fi action flick, "The
+            Matrix" has got you covered.
+          </p>
+        </div>
+        <div class="review">
+          <h6>so so</h6>
+          <p>October 2, 2023 Review of "The Matrix Revolutions" by N. P.</p>
+          <p>
+            "The Matrix Revolutions" is a visually stunning finale to the epic
+            movie trilogy. The action sequences are nothing short of
+            mind-blowing, and Keanu Reeves once again shines as Neo. The battle
+            scenes in the real world, of the war between humans and machines are
+            gritty and intense. Plus, the special effects and cinematography are
+            top-notch.
+          </p>
+
+          <p>
+            However, while the action is awesome, the story is confusing
+            sometimes, especially with the new characters. The pacing can be
+            uneven, with some moments dragging on while others feel rushed. It's
+            also a bit of a letdown that some questions raised in the previous
+            films aren't fully answered. But all in all, it's a great part of
+            the movies series and worth watching especially for the fans.
+          </p>
+        </div>
+      </section>
+      <!--reviews-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>
diff --git a/scenes.html b/scenes.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      The Matrix Movies Website, a Hacktoberfest Project for Beginners
+    </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Arvo:wght@700&family=Ubuntu&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+
+  <body>
+    <div class="screen">
+      <header id="header"><!-- js/header.js --></header>
+      <navbar id="navbar"><!-- js/navbar.js --></navbar>
+
+      <section class="scenes-section">
+        <h3>Favourite Scenes</h3>
+      </section>
+      <!--scenes-section-->
+
+      <footer id="footer"><!-- js/footer.js --></footer>
+    </div>
+    <script src="js/header.js"></script>
+    <script src="js/navbar.js"></script>
+    <script src="js/footer.js"></script>
+  </body>
+</html>