@script>
const rand = (min, max)=>{
return (Math.random() * (max - min + 1)) + min;
}
const linkContainer = document.querySelector(".links");
const links = document.querySelectorAll(".links a");
for(let i = 0; i < links.length; i++){
links[i].style.top = `${rand(100, linkContainer.offsetHeight-100)}px`;
links[i].style.left = `${rand(100, linkContainer.offsetWidth-100)}px`;
links[i].style.transform = `rotate(${rand(-55, 55)}deg)`;
}
<@/script>
<@html>
<@ ./components/rotating_logo.neovan @>
An anti-framework for building the front-end with plain HTML/CSS/JavaScript
<@/html>
<@style>
.aboveTheFold{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
height: 100vh;
width: 100%;
position: relative;
overflow: hidden;
}
h2{
text-align: center;
margin: 15px;
}
.menu{
display: flex;
align-items: center;
height: 55px;
width: 100%;
box-shadow: 0 4px 8px white;
position: absolute;
top: 0;
left: 0;
padding: 0 25px;
box-sizing: border-box;
}
.menuLogo{
max-height: 100%;
}
.menu a{
font-size: 25px;
margin: 0 15px;
color: white;
max-height: 100%;
text-decoration: none;
}
<@/style>