Merge branch 'main' into navbar/responsiveness

.all-contributorsrc

@@ -356,6 +356,36 @@
         "design",
         "ideas"
       ]
+    },
+    {
+      "login": "sagarb2003",
+      "name": "Sagar Singh Bisht",
+      "avatar_url": "https://avatars.githubusercontent.com/u/99736036?v=4",
+      "profile": "https://www.linkedin.com/in/sagar-singh-bisht-10903222b/",
+      "contributions": [
+        "code",
+        "design",
+        "ideas"
+      ]
+    },
+    {
+      "login": "Ishaan0132",
+      "name": "Ishaan Shaikh",
+      "avatar_url": "https://avatars.githubusercontent.com/u/35690029?v=4",
+      "profile": "https://github.com/Ishaan0132",
+      "contributions": [
+        "code",
+        "design"
+      ]
+    },
+    {
+      "login": "Shubhangam333",
+      "name": "Shubhangam Saxena",
+      "avatar_url": "https://avatars.githubusercontent.com/u/51338715?v=4",
+      "profile": "https://github.com/Shubhangam333",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -143,6 +143,11 @@ For more information, visit [hacktoberfest.com](https://hacktoberfest.com/).
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Raksha703"><img src="https://avatars.githubusercontent.com/u/85754170?v=4?s=100" width="100px;" alt="raksha703"/><br /><sub><b>raksha703</b></sub></a><br /><a href="#code-Raksha703" title="Code">💻</a> <a href="#design-Raksha703" title="Design">🎨</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/s-dabral"><img src="https://avatars.githubusercontent.com/u/101198978?v=4?s=100" width="100px;" alt="Suyash Dabral"/><br /><sub><b>Suyash Dabral</b></sub></a><br /><a href="#code-s-dabral" title="Code">💻</a> <a href="#design-s-dabral" title="Design">🎨</a> <a href="#ideas-s-dabral" title="Ideas, Planning, & Feedback">🤔</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/aditya4567uk"><img src="https://avatars.githubusercontent.com/u/86232529?v=4?s=100" width="100px;" alt="Aditya Kumar"/><br /><sub><b>Aditya Kumar</b></sub></a><br /><a href="#code-aditya4567uk" title="Code">💻</a> <a href="#content-aditya4567uk" title="Content">🖋</a> <a href="#design-aditya4567uk" title="Design">🎨</a> <a href="#ideas-aditya4567uk" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://www.linkedin.com/in/sagar-singh-bisht-10903222b/"><img src="https://avatars.githubusercontent.com/u/99736036?v=4?s=100" width="100px;" alt="Sagar Singh Bisht"/><br /><sub><b>Sagar Singh Bisht</b></sub></a><br /><a href="#code-sagarb2003" title="Code">💻</a> <a href="#design-sagarb2003" title="Design">🎨</a> <a href="#ideas-sagarb2003" title="Ideas, Planning, & Feedback">🤔</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Ishaan0132"><img src="https://avatars.githubusercontent.com/u/35690029?v=4?s=100" width="100px;" alt="Ishaan Shaikh"/><br /><sub><b>Ishaan Shaikh</b></sub></a><br /><a href="#code-Ishaan0132" title="Code">💻</a> <a href="#design-Ishaan0132" title="Design">🎨</a></td>
+    </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Shubhangam333"><img src="https://avatars.githubusercontent.com/u/51338715?v=4?s=100" width="100px;" alt="Shubhangam Saxena"/><br /><sub><b>Shubhangam Saxena</b></sub></a><br /><a href="#code-Shubhangam333" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

cast-crew.html

@@ -29,7 +29,7 @@
 
       <section class="cast-section">
         <h3>Cast</h3>
-        <div id="fake">
+        <div id="fake" style="background-color: rgba(0, 0, 0, 0.26);margin: 10px auto;">
           <div class="">Character Role</div>
           <div class="">Actor's Name</div>
         </div>
@@ -42,7 +42,7 @@ <h3>Cast</h3>
 
       <section class="crew-section">
         <h3>Crew</h3>
-        <div id="fake">
+        <div id="fake" style="background-color: rgba(0, 0, 0, 0.26); margin: 10px auto;">
           <div class="">Crew Role</div>
           <div class="">Crew Member's Name</div>
         </div>

css/default.css

@@ -216,17 +216,31 @@ footer {
 }
 
 .nav .navbar-container a {
-  /* so hover highlight is rectangular */
   display: block;
+  position:relative;
   line-height: 120%; 
   text-decoration: none;
   color: white;
-  transition: background-color 0.3s;
+  transition: 0.3s;
+}
+.nav .navbar-container a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 4px;
+    background-color: lightgreen;
+    transform-origin: bottom right;
+    transition: transform 0.5s ease;
+    transform: scaleX(0);
+}
+.nav .navbar-container a:hover::after {
+    transform-origin: bottom left;
+    transform: scaleX(1);
 }
-
 .nav .navbar-container a:hover {
-  background-color: #ddd;
-  color: black;
+  color: limegreen;
 }
 
 .icon {
@@ -265,6 +279,7 @@ footer {
   }
 
 }
+
 @media screen and (max-width: 1000px) {
   .nav .navbar-container {
     display: flex;
@@ -283,6 +298,7 @@ footer {
 }
 
 
+
 /**********************************************************************
 *
 * Back to Top Button styles

css/pages/cast-crew.css

@@ -14,7 +14,23 @@
 * Cast
 *
 **********************************************************************/
-#fake{
+.cast-section{
+  max-height: 500px; 
+  overflow: auto;
+  width: 900px;
+  box-shadow: 3px 3px 10px rgb(0, 0, 0);
+  background-image: linear-gradient(rgb(2, 116, 2),black);
+  margin-bottom: 50px;
+}
+.crew-section{
+  max-height: 500px; 
+  overflow: auto;
+  box-shadow: 3px 3px 10px rgb(0, 0, 0);
+  background-image: linear-gradient(rgb(2, 116, 2),black);
+
+}
+
+#fake{ 
   display: flex;
   justify-content: space-around;
   font-size: 28px;
@@ -26,16 +42,22 @@
   flex-direction: row;
   justify-content: center;
   align-items: center;
+
+
+
 }
 .crew-section #crew-rows{
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
+
+
 }
 
 #cast-rows {
-  width: 100%;
+    width: 100%;
+
 }
 
 span.cast-role {
@@ -66,3 +88,25 @@ span.crew-name {
   padding-left: 30px;
   /* outline: 1px solid green; */
 }
+
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgb(215, 215, 215); 
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: rgb(33, 175, 5); 
+  border-radius: 10px;
+  border: 2px solid rgb(2, 40, 1);
+}
+
+/* Handle on hover */s
+::-webkit-scrollbar-thumb:hover {
+  background: #015b02; 
+}

games.html

@@ -189,6 +189,7 @@ <h4 class="collapsible">The Matrix Awakens(2021)</h4>
     </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>

js/cast-crew.js

@@ -23,7 +23,7 @@ castArray.forEach((row) => {
 });
 const castRows2 = document.getElementById("name-act");
 castRows2.innerHTML = txt;
-
+castRows2.style.backgroundImage="/img/wallpapers/wallpaper1.png";
 txt = "";
 crewArray.forEach((row) => {
   console.log(row);

js/cast.js

@@ -9,7 +9,7 @@ const castArray = [
   [ "JoePantoliano.png", "Joe Pantoliano", "Cypher" ],
   [ "MarcusChong.png", "Marcus Chong", "Tank" ],
   [ "JulianArahanga.png", "Julian Arahanga", "Apoc" ],
-  [ "MattDoran.png", "Matt Doran", "Mouse" ],
+  [ "MattDoran.png", "Matt Doran", "Mouse" ], 
   [ "BelindaMcClory.png", "Belinda McClory", "Switch" ],
   [ "AnthonyRay Parker.png", "Anthony Ray Parker", "Dozer" ],
   [ "PaulGoddard.png", "Paul Goddard", "Agent Brown" ],