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

horrible spaghetti fixxing

master
crt 2 months ago
parent
ef5e2ab5b9
commit
28b156ad3f
3 changed files with 79 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      css/nav.css
  2. 4
      css/waves.css
  3. 91
      index.html

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>
<div id="Services" class="content content-div">
<p style="font-family: 'Quicksand'">Services content here</p>
</div>
<!--Content ends-->
<!-- partial -->
<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>
Write Preview
Loading…
Cancel
Save