crt
/
a7-css-shenanigans
1
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

horrible spaghetti fixxing

This commit is contained in:
crt 2024-02-26 13:47:25 +01:00
parent ef5e2ab5b9
commit 28b156ad3f
3 changed files with 79 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/nav.css
View File

@ -15,7 +15,7 @@
.nav:hover{
text-shadow:
1px 1px 0 #ffffff,
transition; all .5s;
transition all .5s;
}
.nav::before{
content:"";

4
css/waves.css
View File

@ -57,7 +57,7 @@ p {
.content {
position:relative;
height:14vh;
height:5vh;
text-align:center;
background-color: white;
}
@ -98,7 +98,7 @@ p {
min-height:40px;
}
.content {
height:18vh;
height:8vh;
}
h1 {
font-size:24px;

91
index.html
View File

@ -8,25 +8,40 @@
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="css/scaler.css">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
<style>
.content-div {
opacity: 0;
transition: opacity 0.5s ease;
display: none; /* Apply only to content divs */
}
#page-title {
/* Initial state should be visible */
opacity: 1;
transition: opacity 0.5s ease;
}
.active {
display: block;
opacity: 1;
}
.footer {
text-align: center;
}
</style>
</head>
<body>
<!-- Yea this is ductaped together spaghetti code dont judge me im a sysadmin not a programmer or designer -->
<div class="header">
<div class="nav-bar" style="font-family: 'Quicksand'">
<div id="links">
<a href="#" class="nav">Home</a>
<a href="#" class="nav">Services</a>
<a href="#" class="nav">About</a>
<a href="#" class="nav">Contact</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
<a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
</div>
</div>
<!--stuff here is before da waeves-->
<div class="inner-header flex">
<!--adaster oder so-->
<h1 style="font-family: 'Quicksand'">Adastra7</h1>
<h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
</div>
<!--Waves Container thingy i stole-->
@ -50,11 +65,57 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<!--Header ends-->
<!--Content starts-->
<div class="content flex">
<p style="font-family: 'Quicksand'">Adastra7 | 2017-2024</p>
<div id="Adastra7" class="content content-div active">
<!-- nothing here lmeo just clean landing page -->
<p></p>
</div>
<!--Content ends-->
<!-- partial -->
<div id="Services" class="content content-div">
<p style="font-family: 'Quicksand'">Services content here</p>
</div>
<div id="About" class="content content-div">
<p style="font-family: 'Quicksand'">About content here</p>
</div>
<div id="Contact" class="content content-div">
<p style="font-family: 'Quicksand'">Contact content here</p>
</div>
<!-- Content ends -->
<div class="footer"><p style="font-family: 'Quicksand'">Adastra7 | 2017-2014</p></div>
<script>
function changeContent(pageName) {
// Fade out all elements first (they will ignore if already hidden)
var contentDivs = document.getElementsByClassName("content-div");
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.opacity = '0'; // Start fade out
}
document.getElementById("page-title").style.opacity = '0'; // Fade out title
// Wait for the fade out to finish
setTimeout(function() {
// Hide all content divs after fade out
for (var i = 0; i < contentDivs.length; i++) {
contentDivs[i].style.display = 'none';
}
// Change the title and prepare to fade in
var title = document.getElementById("page-title");
title.innerHTML = pageName;
title.style.display = "block"; // Make sure title is ready for fading in
// Show and fade in the new active content
var activeDiv = document.getElementById(pageName);
activeDiv.style.display = 'block';
setTimeout(function() { // Start fade in
activeDiv.style.opacity = '1';
title.style.opacity = '1';
}, 10); // Short delay for display changes
}, 500); // Match fade effect duration
}
</script>
<script>
// Initialize the page with default content
window.onload = initPage;
</script>
</body>
</html>