nebulosus/web
nebulosus/web
2
1
Fork 1
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

doc+style: update styling and write some extra words

Browse source
This commit is contained in:
Strix 2024-07-06 20:37:12 +02:00
parent 818d78413b
commit c3a2d96dd8
2 changed files with 49 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
public/index.html
View file

@ -12,58 +12,58 @@
<body>
<header style="display: flex; justify-content: space-between;">
<div class="logo">
<span class="mono">[N]</span>
<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;">
<a href="/">Home</a>
</div>
</header>
<main>
<section id="intro">
<h1>Nebulosus</h1>
</section>
<div class="columns">
<div>
<section id="offer">
<h2>What does Nebulosus offer?</h2>
<span>Nebulosus offers a variety of services:</span>
<ol>
<li><span>Server Hosting</span></li>
<li><span>Website / Application Development</span></li>
<li><span>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 simplicity, redundancy, reliability and friendliness. <br />
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for.
<br />
If you want simple, intuitive and reliable software, you're in the right spot.
</p>
</section>
<div class="columns" style="padding: 2rem; gap: 2rem;">
<img src="/assets/logo.webp" height="100" width="100" />
<div class="rows">
<h1>Nebulosus</h1>
<span>Focused on innovation.</span>
</div>
</div>
<section id="contact" hidden>
<!-- Not done yet :) -->
<!-- Technical question? dev (at) faulty (dot) nl -->
<h2>Contact</h2>
<span>To contact me please use the following form:</span>
<form action="/api/form">
<input name="name" type="text" placeholder="Name">
<input name="email" type="text" placeholder="E-Mail">
<textarea name="message" rows="5" placeholder="Your message"></textarea>
<input type="button" value="Submit">
</form>
</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 <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>
<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>E-mail: <strong>info@nebulosus.nl</strong></span>
</div>
</section>
</main>
<!-- Want to collaborate? -->
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
</body>
</html>

19
public/res/style.css
View file

@ -20,8 +20,9 @@ header {
top: 0%;
width: 100vw;
height: fit-content;
background-color: var(--theme-color, gray);
color: #fff;
background-color: #fff;
border-bottom: 4px solid var(--theme-color);
color: #000;
box-shadow: 0 0 20px var(--theme-color-lowlight);
}
@ -40,7 +41,6 @@ header div.logo span {
main {
display: flex;
flex-direction: column;
gap: 1em;
width: 100vw;
}
@ -57,17 +57,19 @@ main section {
section#intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
width: 100vw;
background-color: var(--theme-color);
background: linear-gradient(120deg, var(--theme-color-highlight-2), var(--theme-color) 60%);
color: #fff;
font-size: 2em;
border-bottom: 3px solid gray;
h1 {
margin: 0;
}
}
div section {
@ -150,15 +152,16 @@ button {
transition: background-color .2s ease-in-out;
}
div.columns {
.columns {
display: flex;
align-items: center;
@media (max-width: 600px) {
flex-direction: column;
}
}
div.rows {
.rows {
display: flex;
flex-direction: column;
}