mirror of
https://github.com/Fluffy-Bean/Fluffys-website.git
synced 2024-12-29 10:46:06 +00:00
106 lines
3.3 KiB
HTML
106 lines
3.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Leggy land</title>
|
||
|
|
<link rel="stylesheet" href="{{url_for('static', filename='css/style.css')}}" defer>
|
||
|
|
<script
|
||
|
|
src="https://code.jquery.com/jquery-3.6.0.min.js"
|
||
|
|
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
|
||
|
|
crossorigin="anonymous">
|
||
|
|
</script>
|
||
|
|
<script src="https://unpkg.com/phosphor-icons" defer></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="nav">
|
||
|
|
<button class="nav-toggle"><i class="ph-list"></i></button>
|
||
|
|
<p>Leggy land</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="aside">
|
||
|
|
<div class="aside-container">
|
||
|
|
<a href="/#" class="aside-item">
|
||
|
|
Home
|
||
|
|
<i class="ph-arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
<a href="/#contact" class="aside-item">
|
||
|
|
Social Media
|
||
|
|
<i class="ph-arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
<a href="/#about" class="aside-item">
|
||
|
|
About
|
||
|
|
<i class="ph-arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<a href="/" class="aside-item">
|
||
|
|
Gallery
|
||
|
|
<i class="ph-image"></i>
|
||
|
|
</a>
|
||
|
|
<a href="/status" class="aside-item">
|
||
|
|
Server Status
|
||
|
|
<i class="ph-cpu"></i>
|
||
|
|
</a>
|
||
|
|
<a href="/" class="aside-item">
|
||
|
|
Gwa Gwa
|
||
|
|
<i class="ph-package"></i>
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<hr>
|
||
|
|
|
||
|
|
<a href="/funny" class="aside-item">
|
||
|
|
lol
|
||
|
|
<i class="ph-arrow-right"></i>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
{% block content %} {% endblock %}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="footer">
|
||
|
|
<p>Last updated 27th Dec</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let btnColours = [ 'red', 'yellow', 'green', 'blue', 'purple']
|
||
|
|
let btnElements = document.querySelectorAll('.btn');
|
||
|
|
let asideElements = document.querySelectorAll('.aside-item');
|
||
|
|
|
||
|
|
for (let i = 0; i < btnElements.length; i++) {
|
||
|
|
btnElements[i].addEventListener("mouseover", function() {
|
||
|
|
let randomColour = Math.floor(Math.random() * btnColours.length);
|
||
|
|
this.style.color = `var(--${btnColours[randomColour]})`;
|
||
|
|
});
|
||
|
|
|
||
|
|
btnElements[i].addEventListener("mouseout", function() {
|
||
|
|
this.style.color = '';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
for (let i = 0; i < asideElements.length; i++) {
|
||
|
|
asideElements[i].addEventListener("mouseover", function() {
|
||
|
|
let randomColour = Math.floor(Math.random() * btnColours.length);
|
||
|
|
this.classList.add(`aside-${btnColours[randomColour]}`);
|
||
|
|
});
|
||
|
|
|
||
|
|
asideElements[i].addEventListener("mouseout", function() {
|
||
|
|
this.classList = 'aside-item';
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
let navToggle = document.querySelector('.nav-toggle');
|
||
|
|
let aside = document.querySelector('.aside');
|
||
|
|
|
||
|
|
navToggle.addEventListener('click', function() {
|
||
|
|
aside.classList.toggle('aside-active');
|
||
|
|
});
|
||
|
|
|
||
|
|
function fadeOnLoad(obj) {
|
||
|
|
$(obj).fadeIn(621);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|