Added navbar and footer to all the games pages (#297)

* Added navbar and footer to all the games pages * Added responsive
Spandan-Bhattacharya · Feb 22, 2024 · d892321 · d892321
1 parent f076285
commit d892321
Show file tree

Hide file tree

Showing 34 changed files with 3,147 additions and 34 deletions.
diff --git a/2048/index.html b/2048/index.html
@@ -5,8 +5,24 @@
     <title>2048</title>
     <link rel="stylesheet" href="style.css">
     <script src="app.js" charset="utf-8"></script>
+    <script src="https://kit.fontawesome.com/b9199edbdd.js" crossorigin="anonymous"></script>
+
   </head>
   <body background="../assets/bg.webp">
+    <nav class="navbar">
+      <div class="image">
+        <img src="../assets/bodylogo.png" alt="loading">
+      </div>
+      <div class="left-nav">
+        <ul>
+          <li><a href="../index.html">Home</a></li>
+          <li><a href="newContact.html">Contact</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="faq.html">FAQ</a></li>
+          <li><a href="contributors.html">Contributors</a></li>
+        </ul>
+      </div>
+    </nav>
 
     <div class="container">
       <div class="info">
@@ -26,6 +42,30 @@ <h1>2048</h1>
 
     </div>
 
+    <div class="footer-container">
+      <div class="foot-head">
+        <h2>Solve it!</h2>
+        <p>
+          Solve it! is a website that contains solvers for common games like
+          Sudoku, Nonogram, Crosswords and more!
+        </p>
+      </div>
+      <div class="foot-navlinks">
+        <h3>Quick Links</h3>
+        <a href="#">Home</a>
+        <a href="/html_files/about.html">About</a>
+        <a href="/html_files/newContact.html">Contact</a>
+        <a href="/html_files/faq.html">FAQ</a>
+        <a href="/html_files/contributors.html">Contributors</a>
+      </div>
+      <div class="foot-social">
+        <h3>Social Links</h3>
+        <a href="https://twitter.com/TeamJWOC"><i class="fab fa-x-twitter" style="font-size: 1.25em; margin: 2px"></i></a>
+        <a href="https://github.com/Spandan-Bhattacharya"><i class="fa-brands fa-github"
+            style="font-size: 1.25em; margin: 2px"></i></a>
+        <a href="https://www.linkedin.com/in/spandan-bhattacharya-02509b227"><i class="fa-brands fa-linkedin"
+            style="font-size: 1.25em; margin: 2px"></i></a>
+      </div>
 
 
   </body>

diff --git a/2048/style.css b/2048/style.css
@@ -1,6 +1,12 @@
+*{
+  margin: 0px;
+  padding: 0px;
+}
 body {
   background-color: #faf8ef;
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
   font-family: "Clear Sans", "Helvetica Neue"
 }
@@ -86,3 +92,153 @@ button {
   background-color: #92d3ff;
   color: #1665cc;
 }
+.navbar{
+  /* margin-top: 25px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  justify-content: space-between;
+  height: 67px;
+  width: 100%;
+  background:linear-gradient(#1e2b59 , #0f1d34 );
+  border-bottom:1px solid #ffb780;
+}
+.image img{
+  height: 55px;
+  width: 55px;
+}
+.left-nav ul{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.left-nav ul li{
+  list-style: none;
+}
+.left-nav ul li a{
+  text-decoration: none;
+  color: #ffb780;
+  text-align: center;
+  padding: 14px 20px;
+  text-decoration: none;
+  font-size: 1.3rem;
+}
+.left-nav ul li a:hover{
+  text-decoration: underline;
+}
+.footer-container{
+  border-top: 1px solid #ffb780;
+  width: 100%;
+  background:linear-gradient(#1e2b59 , #0f1d34 );
+  padding: 20px;
+  /* background: url(Image.png); */
+   background-position: center;
+   line-height: 2.5rem;
+}
+.foot-head h2{
+  text-align: center;
+  color: aqua;
+  font-weight: 600;
+}
+.foot-head p{
+  color: #ffb780;
+  text-align: center;
+  font-size: 1.20rem;
+}
+.foot-navlinks h3{
+  text-align: center;
+  color: aqua;
+  font-weight: 600;
+}
+.foot-navlinks {
+  text-align: center;
+}
+.foot-navlinks a{
+  color: #ffb780;
+  font-size: 18px;
+  padding: 10px;
+}
+.foot-social {
+  text-align: center;
+}
+.foot-social h3{
+  color: aqua;
+  font-weight: 600;
+}
+.foot-social a{
+  font-size: 30px;
+  color: #ffb780;
+}
+html{
+  overflow-x: hidden;
+}
+.head{
+  margin-top: 30px;
+}
+.backHome{
+  margin-bottom: 30px;
+}
+/* @media screen and (max-width:525px) {
+  body{
+      width: 100%;
+  }
+  html{
+      overflow-x: hidden;
+  }
+
+  .navbar{
+      width: 100%;
+  }
+  .left-nav ul li a{
+      padding: 0px 9px;
+  }
+  
+}
+@media screen and (max-width:380px) {
+  body{
+      width: 100%;
+  }
+  html{
+      overflow-x: hidden;
+  }
+
+  .navbar{
+      width: 100%;
+  }
+  .left-nav ul li a{
+      padding: 0px 9px;
+  }
+  
+} */
+@media screen and (max-width:525px) {
+  body{
+      width: 100%;
+  }
+  html{
+      overflow-x: hidden;
+  }
+
+  .navbar{
+      width: 100%;
+  }
+  .left-nav ul li a{
+      padding: 0px 9px;
+  }
+
+}
+@media screen and (max-width:380px) {
+  body{
+      width: 100%;
+  }
+  html{
+      overflow-x: hidden;
+  }
+
+  .navbar{
+      width: 100%;
+  }
+  .left-nav ul li a{
+      padding: 0px 9px;
+  }
+
+}
diff --git a/CrossWord/index.html b/CrossWord/index.html
@@ -6,9 +6,25 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CrossWord</title>
   <link rel="stylesheet" href="./style.css">
+  <script src="https://kit.fontawesome.com/b9199edbdd.js" crossorigin="anonymous"></script>
+
 </head>
 
 <body>
+  <nav class="navbar">
+    <div class="image">
+      <img src="../assets/bodylogo.png" alt="loading">
+    </div>
+    <div class="left-nav">
+      <ul>
+        <li><a href="../index.html">Home</a></li>
+        <li><a href="newContact.html">Contact</a></li>
+        <li><a href="about.html">About</a></li>
+        <li><a href="faq.html">FAQ</a></li>
+        <li><a href="contributors.html">Contributors</a></li>
+      </ul>
+    </div>
+  </nav>
   <div class="container crosswordDisplay">
 
     <div class="row">
@@ -144,6 +160,30 @@
     </div>
   </div>
   <script src="./app.js"></script>
+  <div class="footer-container">
+    <div class="foot-head">
+      <h2>Solve it!</h2>
+      <p>
+        Solve it! is a website that contains solvers for common games like
+        Sudoku, Nonogram, Crosswords and more!
+      </p>
+    </div>
+    <div class="foot-navlinks">
+      <h3>Quick Links</h3>
+      <a href="#">Home</a>
+      <a href="/html_files/about.html">About</a>
+      <a href="/html_files/newContact.html">Contact</a>
+      <a href="/html_files/faq.html">FAQ</a>
+      <a href="/html_files/contributors.html">Contributors</a>
+    </div>
+    <div class="foot-social">
+      <h3>Social Links</h3>
+      <a href="https://twitter.com/TeamJWOC"><i class="fab fa-x-twitter" style="font-size: 1.25em; margin: 2px"></i></a>
+      <a href="https://github.com/Spandan-Bhattacharya"><i class="fa-brands fa-github"
+          style="font-size: 1.25em; margin: 2px"></i></a>
+      <a href="https://www.linkedin.com/in/spandan-bhattacharya-02509b227"><i class="fa-brands fa-linkedin"
+          style="font-size: 1.25em; margin: 2px"></i></a>
+    </div>
 </body>
 
 </html>