Implemented some placeholder stuff to the shadowbox tab

Profile Page/profile.html

@@ -35,7 +35,7 @@
         <script>
           // Get the subnav links
           const subnavLinks = document.querySelectorAll('.subnav-links a');
-        
+
           // Add click event listener to each link
           subnavLinks.forEach(link => {
             link.addEventListener('click', function () {
@@ -43,14 +43,14 @@
               subnavLinks.forEach(link => link.classList.remove('active'));
               // Add "active" class to clicked link
               this.classList.add('active');
-        
+
               // Get the index of the clicked link
               const index = Array.from(subnavLinks).indexOf(this);
-        
+
               // Hide all content divs
               const contentDivs = document.querySelectorAll('.content');
               contentDivs.forEach(div => div.classList.remove('shown'));
-        
+
               // Show the corresponding content div
               contentDivs[index].classList.add('shown');
             });
@@ -59,7 +59,7 @@
       </div>
     </div>
     <!-- Personnel File -->
-    <div class="content shown">
+    <div class="content">
       hello
     </div>
     <!-- Activity History -->
@@ -67,8 +67,10 @@
       hello2
     </div>
     <!-- Shadowbox -->
-    <div class="content">
-      hello3
+    <div class="content shown">
+      <div id="shadowboxContainer">
+        <img src="../Paradox_3-19-2023.jpg">
+      </div>
     </div>
   </div>
 </body>

Profile Page/styles2.css

@@ -178,4 +178,18 @@ p {
 
   .shown {
     display: flex !important;
+  }
+
+  #shadowboxContainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 50px;
+  }
+  
+  #shadowboxContainer > img {
+    max-height: 100%;
+    max-width: 100%;
+    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
+
   }