Update website layout and add container for

upcoming projects
AbhinavMishra32 · Dec 2, 2023 · f6adb15 · f6adb15
1 parent 25ec12a
commit f6adb15
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -10,15 +10,18 @@
   <title>Abhinav Mishra's Portfolio</title>
 </head>
 <body>
+  <div class="container">
+    <p>Things I'm currently working on:</p>
+    <ul>
+      <li><a href="projects/slots-game.html">A match three game using graph algorithm</a></li>
+      <li><a href="index.html">This website!</a></li>
+      <li><a href="project3.html">Project 3</a></li>
+      <a href="upcoming.html"><h2>Upcoming Projects</h2></a>
+    </ul>
+  </div>
   <script src = "scripts/indexscript.js"></script>
   <script src = "word-change.js"></script>
-  <p>Things I'm currently working on:</p>
-  <ul>
-    <li><a href="projects/slots-game.html">A match three game using graph algorithm</a></li>
-    <li><a href="index.html">This website!</a></li>
-    <li><a href="project3.html">Project 3</a></li>
-    <a href="upcoming.html"><h2>Upcoming Projects</h2></a>
-  </ul>
+
   <footer id="footer"></footer>
   <script>
     // Fetch and include footer

diff --git a/styles.css b/styles.css
@@ -69,3 +69,21 @@ a:hover {
   transform: scale(1.2); /* Scale up on hover */
   color: #ff6347; /* Change color on hover */
 }
+
+
+.container {
+  background-color: #ffffff; /* Background color of the box */
+  border-radius: 15px; /* Rounded corners */
+  padding: 20px; /* Padding inside the box */
+  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); /* Box shadow for a slight elevation effect */
+  max-width: 400px; /* Adjust the maximum width as needed */
+}
+
+/* Centering the container */
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}