horrible spaghetti fixxing
This commit is contained in:
parent
ef5e2ab5b9
commit
28b156ad3f
|
|
@ -15,7 +15,7 @@
|
||||||
.nav:hover{
|
.nav:hover{
|
||||||
text-shadow:
|
text-shadow:
|
||||||
1px 1px 0 #ffffff,
|
1px 1px 0 #ffffff,
|
||||||
transition; all .5s;
|
transition all .5s;
|
||||||
}
|
}
|
||||||
.nav::before{
|
.nav::before{
|
||||||
content:"";
|
content:"";
|
||||||
|
|
|
||||||
|
|
@ -57,7 +57,7 @@ p {
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
position:relative;
|
position:relative;
|
||||||
height:14vh;
|
height:5vh;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
}
|
}
|
||||||
|
|
@ -98,7 +98,7 @@ p {
|
||||||
min-height:40px;
|
min-height:40px;
|
||||||
}
|
}
|
||||||
.content {
|
.content {
|
||||||
height:18vh;
|
height:8vh;
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
font-size:24px;
|
font-size:24px;
|
||||||
|
|
|
||||||
91
index.html
91
index.html
|
|
@ -8,25 +8,40 @@
|
||||||
<link rel="stylesheet" href="css/nav.css">
|
<link rel="stylesheet" href="css/nav.css">
|
||||||
<link rel="stylesheet" href="css/scaler.css">
|
<link rel="stylesheet" href="css/scaler.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Yea this is ductaped together spaghetti code dont judge me im a sysadmin not a programmer or designer -->
|
|
||||||
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="nav-bar" style="font-family: 'Quicksand'">
|
<div class="nav-bar" style="font-family: 'Quicksand'">
|
||||||
<div id="links">
|
<div id="links">
|
||||||
<a href="#" class="nav">Home</a>
|
<a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
|
||||||
<a href="#" class="nav">Services</a>
|
<a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
|
||||||
<a href="#" class="nav">About</a>
|
<a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
|
||||||
<a href="#" class="nav">Contact</a>
|
<a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--stuff here is before da waeves-->
|
|
||||||
<div class="inner-header flex">
|
<div class="inner-header flex">
|
||||||
|
<h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
|
||||||
<!--adaster oder so-->
|
|
||||||
<h1 style="font-family: 'Quicksand'">Adastra7</h1>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--Waves Container thingy i stole-->
|
<!--Waves Container thingy i stole-->
|
||||||
|
|
@ -50,11 +65,57 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
|
||||||
<!--Header ends-->
|
<!--Header ends-->
|
||||||
|
|
||||||
<!--Content starts-->
|
<!--Content starts-->
|
||||||
<div class="content flex">
|
<div id="Adastra7" class="content content-div active">
|
||||||
<p style="font-family: 'Quicksand'">Adastra7 | 2017-2024</p>
|
<!-- nothing here lmeo just clean landing page -->
|
||||||
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
<!--Content ends-->
|
<div id="Services" class="content content-div">
|
||||||
<!-- partial -->
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue