feat: update site

This commit is contained in:
Strix 2025-03-25 22:46:00 +01:00
parent 71b2aaae4f
commit a6ff285b2e
6 changed files with 321 additions and 37 deletions

View file

@ -3,67 +3,104 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Nebulosus, a company focused on providing an intuitive interface for anything and anyone. Making applications that are useful.">
<meta name="keywords" content="website,software,developer,nederland,web">
<title>Nebulosus</title>
<meta name="description" content="Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and friendliness.">
<link rel="icon" href="/assets/logo.webp" type="image/webp">
<link rel="stylesheet" href="./res/style.css">
<script src="./res/cases.js" defer></script>
<script src="./res/anchors.js" defer></script>
<script src="./res/locale.js" defer></script>
</head>
<style>
[data-i18n-show] {
display: none;
}
</style>
<body>
<header style="display: flex; justify-content: space-between;">
<div class="logo" style="display: flex; align-items: center; gap: .75rem">
<div class="logo" style="display: flex; align-items: center; gap: .75rem;">
<img src="/assets/logo.webp" height="40" width="40" alt="" />
<span>Nebulosus</span>
</div>
<div class="columns" style="padding: 1rem; justify-content: center;">
<div class="columns" style="padding: 1.5rem; justify-content: center;">
<a href="/">Home</a>
</div>
</header>
<main>
<main data-i18n-show>
<section id="intro">
<div class="columns" style="align-items: flex-start; padding: 2rem; gap: 2rem;">
<img src="/assets/logo.webp" height="100" width="100" style="filter: drop-shadow(0 0 20px #fff);" />
<div class="rows">
<h1>Nebulosus</h1>
<span>Focused on innovation.</span>
<span data-i18n="$.motto"></span>
</div>
</div>
</section>
<div>
<section id="offer">
<h2>What does Nebulosus offer?</h2>
<span>Nebulosus offers a variety of services:</span>
<ol class="rows" style="gap: .5em;">
<li><span style="border-bottom: 1px solid blue">Website / Application Development</span></li>
<li><span style="border-bottom: 1px solid darkcyan">Server Hosting</span></li>
<li><span style="border-bottom: 1px solid darkblue">Technical Support</span></li>
</ol>
<button id="cases-button" hidden>Cases</button>
<div id="cases" hidden></div>
</section>
<section id="about">
<h2>About Nebulosus</h2>
<p>
Nebulosus is a dutch company focusing on intuitivism, <span style="letter-spacing: 1px;">simplicity</span>, <b style="color: darkgoldenrod;">redundancy</b>, <span style="color: darkcyan; text-decoration: underline;">reliability</span> and <i style="color: green">friendliness</i>. <br />
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for.
<br />
If you want to develop an app with intuitive design and a redundant infrastructure, please reach out! <br/>
If you're looking for a company site, let's discuss it!
</p>
</section>
</div>
<section id="more-info">
<h2>More information about Nebulosus</h2>
<!-- keep some sample text for SEO n stuff -->
<section id="about">
<h2 data-i18n="about.title">About</h2>
<p data-i18n="about.text">
Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and
friendliness.
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for.
If you want to develop an app with intuitive design and a redundant infrastructure, please reach out!
If you're looking for a company site, let's discuss it!
</p>
</section>
<section id="offer">
<h2 data-i18n="offer.title">Offer</h2>
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
<div>
<h4 data-i18n="offer.it-consultancy.title"></h4>
<p data-i18n="offer.it-consultancy.tagline"></p>
<p data-i18n="offer.it-consultancy.description"></p>
<span data-i18n="offer.it-consultancy.solutions"></span>
</div>
<div>
<h4 data-i18n="offer.managed-hosting.title"></h4>
<p data-i18n="offer.managed-hosting.tagline"></p>
<p data-i18n="offer.managed-hosting.description"></p>
<span data-i18n="offer.managed-hosting.solutions"></span>
</div>
<div>
<h4 data-i18n="offer.tech-support.title"></h4>
<p data-i18n="offer.tech-support.tagline"></p>
<p data-i18n="offer.tech-support.description"></p>
<span data-i18n="offer.tech-support.solutions"></span>
</div>
<div>
<h4 data-i18n="offer.development.title"></h4>
<p data-i18n="offer.development.tagline"></p>
<p data-i18n="offer.development.description"></p>
<span data-i18n="offer.development.solutions"></span>
</div>
</div>
</section>
<section id="info">
<h2>Information</h2>
<div class="rows">
<span>E-mail: <a href="mailto:info@nebulosus.nl">info@nebulosus.nl</a></span>
<span>Chamber of Commerce number: <strong>93409583</strong></span>
<span><span data-i18n="dict.mail"></span>: <a href="#" data-i18n="$.mail"
onclick="window.open('mailto:info'+'@'+''+'nebulosus'+'.n'+'l', '_self')"></a></span>
<span><span data-i18n="dict.kvk"></span>: <strong data-i18n="$.kvk" href="#"></strong></span>
</div>
</section>
</main>
<footer>
<div style="display: flex; justify-content: space-between">
<span>&copy; 2025 Nebulosus</span>
<div>
<button onclick="locale.setPreferredLocale('en')">EN</button>
<button onclick="locale.setPreferredLocale('nl')">NL</button>
</div>
</div>
</footer>
<!-- Want to collaborate? -->
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
</body>