first website commit
This commit is contained in:
Kismet Hasanaj
@@ -0,0 +1,258 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Novarix Networks | Agile Connectivity, Managed Services, and Transit</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Novarix Networks delivers agile connectivity, managed infrastructure, and transit services for businesses, operators, and demanding environments."
|
||||
/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="Novarix Networks, ISP, MSP, transit provider, managed networking, business connectivity, network infrastructure"
|
||||
/>
|
||||
<meta name="theme-color" content="#04111f" />
|
||||
<link rel="icon" type="image/png" href="/assets/favicon/favicon8.png" />
|
||||
<link rel="apple-touch-icon" href="/assets/favicon/favicon9.png" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="site-shell">
|
||||
<header class="site-header">
|
||||
<a class="brand" href="#top" aria-label="Novarix Networks home">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
</a>
|
||||
<button
|
||||
class="nav-toggle"
|
||||
type="button"
|
||||
aria-expanded="false"
|
||||
aria-controls="primary-nav"
|
||||
aria-label="Open navigation"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<nav class="site-nav" id="primary-nav">
|
||||
<a href="#services">Services</a>
|
||||
<a href="#approach">Approach</a>
|
||||
<a href="#infrastructure">Infrastructure</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="top">
|
||||
<section class="hero">
|
||||
<div class="hero-copy reveal">
|
||||
<p class="eyebrow">Connectivity without the drag</p>
|
||||
<h1>Network infrastructure built to move as fast as the environment around it.</h1>
|
||||
<p class="hero-text">
|
||||
Novarix Networks is being shaped to serve as an agile ISP, MSP, and
|
||||
transit provider for organisations that need dependable connectivity,
|
||||
practical engineering, and infrastructure that can keep evolving.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a class="button button-primary" href="#contact">Start the conversation</a>
|
||||
<a class="button button-secondary" href="#services">Explore services</a>
|
||||
</div>
|
||||
<ul class="hero-points">
|
||||
<li>Business connectivity and routed access</li>
|
||||
<li>Managed network and edge services</li>
|
||||
<li>Transit, interconnect, and custom builds</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual reveal">
|
||||
<div class="hero-orbit">
|
||||
<div class="signal-grid"></div>
|
||||
<img
|
||||
class="animated-mark"
|
||||
src="/assets/logo/animated_logo_intro.svg"
|
||||
alt="Animated Novarix Networks logo"
|
||||
/>
|
||||
<div class="status-card status-card-left">
|
||||
<span class="status-kicker">Positioning</span>
|
||||
<strong>ISP / MSP / Transit</strong>
|
||||
<p>Built for flexible projects, modern routing, and growth-ready delivery.</p>
|
||||
</div>
|
||||
<div class="status-card status-card-right">
|
||||
<span class="status-kicker">Operating model</span>
|
||||
<strong>Lean, technical, responsive</strong>
|
||||
<p>A brand direction designed to feel more engineering-led than corporate.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="proof-strip reveal">
|
||||
<div>
|
||||
<span>For businesses</span>
|
||||
<p>Connectivity and managed networking designed around uptime, reach, and clarity.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For operators</span>
|
||||
<p>Transit and interconnect conversations grounded in routing, performance, and fit.</p>
|
||||
</div>
|
||||
<div>
|
||||
<span>For projects</span>
|
||||
<p>Flexible enough for bespoke deployments, migrations, and edge-focused solutions.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="services">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Services</p>
|
||||
<h2>Three service pillars, one consistent operating mindset.</h2>
|
||||
<p>
|
||||
The first version of the site should make the offer easy to understand at a glance.
|
||||
This layout keeps the positioning clear while leaving room to deepen each service page later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-grid">
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">01</span>
|
||||
<h3>ISP</h3>
|
||||
<p>
|
||||
Business internet, routed connectivity, and infrastructure built for organisations
|
||||
that need more than a generic off-the-shelf link.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Dedicated access</li>
|
||||
<li>Static addressing</li>
|
||||
<li>Custom network design</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">02</span>
|
||||
<h3>MSP</h3>
|
||||
<p>
|
||||
Managed network services for teams that want stronger visibility, better change
|
||||
control, and a partner that can operate close to the infrastructure.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Managed edge and routing</li>
|
||||
<li>Operational support</li>
|
||||
<li>Network evolution planning</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<span class="card-index">03</span>
|
||||
<h3>Transit</h3>
|
||||
<p>
|
||||
Transit and interconnect positioning for carriers, platforms, and demanding environments
|
||||
that care about path quality, flexibility, and engineering credibility.
|
||||
</p>
|
||||
<ul>
|
||||
<li>IP transit</li>
|
||||
<li>Peering and interconnect</li>
|
||||
<li>Scalable routing posture</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section-split" id="approach">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Approach</p>
|
||||
<h2>Designed to feel modern, direct, and technically credible.</h2>
|
||||
</div>
|
||||
<div class="split-panel reveal">
|
||||
<div class="approach-list">
|
||||
<article>
|
||||
<h3>Agile by default</h3>
|
||||
<p>
|
||||
The tone and structure lean into speed, clarity, and practical execution rather than
|
||||
generic telecom language.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Engineering-led presentation</h3>
|
||||
<p>
|
||||
Visual direction is based on the geometry and colour depth of your logo, helping the
|
||||
brand feel network-native without looking dated.
|
||||
</p>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Launch small, scale cleanly</h3>
|
||||
<p>
|
||||
This base site is intentionally static and fast so you can get online quickly, then add
|
||||
service detail, portals, status pages, and forms as the company grows.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="approach-panel">
|
||||
<div class="approach-graphic">
|
||||
<span class="pulse pulse-one"></span>
|
||||
<span class="pulse pulse-two"></span>
|
||||
<span class="pulse pulse-three"></span>
|
||||
<div class="approach-core">
|
||||
<strong>Novarix</strong>
|
||||
<span>Networks</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="infrastructure">
|
||||
<div class="section-heading reveal">
|
||||
<p class="eyebrow">Deployment</p>
|
||||
<h2>Built to drop straight into your Proxmox and NPM workflow.</h2>
|
||||
</div>
|
||||
<div class="deployment-grid">
|
||||
<article class="deployment-card reveal">
|
||||
<h3>1. Host the site privately</h3>
|
||||
<p>
|
||||
Run Nginx on a private VM or container in Proxmox and serve this static site locally on your LAN.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>2. Publish through NPM</h3>
|
||||
<p>
|
||||
Add a proxy host in Nginx Proxy Manager pointing the public domain to the private web server.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>3. Add SSL and redirects</h3>
|
||||
<p>
|
||||
Let NPM issue the certificate, force HTTPS, and redirect every secondary domain to the canonical one.
|
||||
</p>
|
||||
</article>
|
||||
<article class="deployment-card reveal">
|
||||
<h3>4. Expand later</h3>
|
||||
<p>
|
||||
Keep the website separate from future customer portals, looking glass tools, monitoring pages, or APIs.
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta-section reveal" id="contact">
|
||||
<div class="cta-panel">
|
||||
<div>
|
||||
<p class="eyebrow">Next step</p>
|
||||
<h2>Launch the brand, then sharpen the details.</h2>
|
||||
<p>
|
||||
This base design is ready for real content, domain decisions, and production hosting.
|
||||
Once you choose your final contact route, we can wire in live enquiry handling, deeper service pages,
|
||||
and any customer-facing systems you want to expose later.
|
||||
</p>
|
||||
</div>
|
||||
<div class="cta-actions">
|
||||
<a class="button button-primary" href="mailto:contact@novarixnet.com">Use placeholder contact</a>
|
||||
<a class="button button-secondary" href="/assets/logo/novarix_networks-coloured.svg">View brand asset</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<img src="/assets/logo/novarix_networks-white.svg" alt="Novarix Networks" />
|
||||
<p>Agile connectivity, managed services, and transit positioning for modern networks.</p>
|
||||
<small>Base website concept prepared for private hosting behind Nginx Proxy Manager.</small>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script src="/script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user