17th-Ranger-Battalion-ORG/17th_Site_Front_End
6
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Implemented some placeholder stuff to the shadowbox tab

Browse Source
This commit is contained in:
Ajdj100
2023-03-29 16:41:10 -04:00
parent 873e7f72ff
commit 1b0753912a
3 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
Paradox_3-19-2023.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 KiB

16
Profile Page/profile.html
View File

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

14
Profile Page/styles2.css
View File

@@ -178,4 +178,18 @@ p {
.shown { .shown {
display: flex !important; 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);
} }