arona/Hyperlight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Major rework

Browse Source
This commit is contained in:
FreneticScribbler
2024-02-18 22:16:38 +00:00
parent 527db125f9
commit db271e780e
54 changed files with 1137 additions and 1430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
layouts/partials/header.html
View File

@@ -1,43 +1,3 @@
<style>
@keyframes blinker {
50% {
opacity: 10%;
}
}
header > h1 {
margin: 0 !important;
}
nav > a {
flex-grow: 1;
padding: 10vh 0;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
nav > a > span {
background-color: black;
}
.scroll-item {
animation: scrollUp 7s ease-in-out infinite alternate;
background-color: black;
}
@keyframes scrollUp {
from {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
to {
-webkit-transform: translateY(-200%);
transform: translateY(-200%);
}
}
}
</style>
<header style="display: grid; grid-template-columns: min-content min-content auto; grid-template-rows: min-content min-content max-content;">
<h1 style="font-size: 3em;">
HYPER
@@ -46,36 +6,35 @@ nav > a > span {
LIGHT
</h1>
<h2 style="margin: 0; margin-left: 1em; grid-column-start: 3; align-self: center;">Technical Services</h2>
<hr style="width: 100%; border: 3px solid #7df9ff; border-radius: 5px; grid-column-end: span 3; margin: 0; margin-top: -0.7em;">
<img src="lightning-helix.png" style="object-fit: cover; width: 100%; max-height: 100%; animation: blinker 1s linear; justify-self: center;"/>
<div style="width: 100%; border-top: 3px solid var(--hyper-blue); grid-column-end: span 3; margin: 0; margin-top: -0.7em;"></div>
<img src="/lightning-helix.png" style="object-fit: cover; width: 100%; max-height: 100%; animation: blinker 1s linear; justify-self: center;"/>
<h3 style="font-style: italic; grid-column-end: span 2; text-align: center;">Bespoke experiences — authentic, inclusive, and sustainable without compromise</h3>
</header>
<nav style="display: flex; justify-content: center; align-items: center; padding-top: 1em;">
<a href="" style="background-image: url('tte.jpg');">
<nav style="display: flex; justify-content: center; align-items: center; margin-bottom: 1em;">
<a href="/">
<span>Home</span>
</a>
<a href="/services">
<span>Technical Support</span>
</a>
<a style="background-image: url('main.png');">
<div style="background-color: black; padding: 0.2em; width: 80%; margin-left: auto; margin-right: auto;">
<span>Equipment</span>
<div style="display: inline-flex; flex-direction: column; max-height: 1.2rem; overflow-y: hidden; align-items: stretch; justify-content: space-between; background-color: black;">
<span class="scroll-item">Hire</span>
<span class="scroll-item">Sale</span>
<span class="scroll-item">Service</span>
<span class="scroll-item">Install</span>
</div>
<a href="/hire">
<span>Equipment</span>
<div style="display: inline-flex; flex-direction: column; max-height: 1.2rem; overflow-y: hidden; align-items: stretch; justify-content: space-between; background-color: black;">
<span class="scroll-item">Hire</span>
<span class="scroll-item">Sale</span>
<span class="scroll-item">Service</span>
<span class="scroll-item">Install</span>
</div>
</a>
<a href="" style="background-image: url('https://unsplash.it/400/400/?random&amp;amp;time=0');">
<div style="background-color: black; padding: 0.2em; width: 80%; margin-left: auto; margin-right: auto;">
<a href="/development">
<div style="display: inline-flex; flex-direction: column; max-height: 1.2rem; overflow-y: hidden; align-items: stretch; justify-content: space-between; background-color: black;">
<span class="scroll-item">Website</span>
<span class="scroll-item">Software</span>
<span class="scroll-item">Product</span>
</div>
<span>Development</span>
</div>
</a>
<a style="background-image: url('https://unsplash.it/400/400/?random&amp;amp;time=12');">
<a href="/about" style="border-right: none;">
<span>About Us</span>
</a>
</nav>