41 lines
1.8 KiB
HTML
41 lines
1.8 KiB
HTML
<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
|
|
</h1>
|
|
<h1 style="font-size: 3em;">
|
|
LIGHT
|
|
</h1>
|
|
<h2 style="margin: 0; margin-left: 1em; grid-column-start: 3; align-self: center;">Technical Services</h2>
|
|
<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; margin-bottom: 1em;">
|
|
<a href="/">
|
|
<span>Home</span>
|
|
</a>
|
|
<a href="/services">
|
|
<span>Technical Support</span>
|
|
</a>
|
|
<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="/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>
|
|
</a>
|
|
<a href="/about" style="border-right: none;">
|
|
<span>About Us</span>
|
|
</a>
|
|
</nav>
|