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> <body>
<header style="display: flex; justify-content: space-between;"> <header style="display: flex; justify-content: space-between;">
<div class="logo"> <div class="logo" style="display: flex; align-items: center; gap: .75rem">
<span class="mono">[N]</span> <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> </div>
</header> </header>
<main> <main>
<section id="intro"> <section id="intro">
<h1>Nebulosus</h1> <div class="columns" style="padding: 2rem; gap: 2rem;">
</section> <img src="/assets/logo.webp" height="100" width="100" />
<div class="columns"> <div class="rows">
<div> <h1>Nebulosus</h1>
<section id="offer"> <span>Focused on innovation.</span>
<h2>What does Nebulosus offer?</h2> </div>
<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> </div>
<section id="contact" hidden> </section>
<!-- Not done yet :) --> <div>
<!-- Technical question? dev (at) faulty (dot) nl --> <section id="offer">
<h2>Contact</h2> <h2>What does Nebulosus offer?</h2>
<span>To contact me please use the following form:</span> <span>Nebulosus offers a variety of services:</span>
<form action="/api/form"> <ol class="rows" style="gap: .5em;">
<input name="name" type="text" placeholder="Name"> <li><span style="border-bottom: 1px solid blue">Website / Application Development</span></li>
<input name="email" type="text" placeholder="E-Mail"> <li><span style="border-bottom: 1px solid darkcyan">Server Hosting</span></li>
<textarea name="message" rows="5" placeholder="Your message"></textarea> <li><span style="border-bottom: 1px solid darkblue;">Technical Support</span></li>
<input type="button" value="Submit"> </ol>
</form> <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> </section>
</div> </div>
<section id="more-info"> <section id="more-info">
<h2>More information about Nebulosus</h2> <h2>More information about Nebulosus</h2>
<div class="rows"> <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>Chamber of Commerce number: <strong>93409583</strong></span>
<span>E-mail: <strong>info@nebulosus.nl</strong></span>
</div> </div>
</section> </section>
</main> </main>
<!-- Want to collaborate? -->
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
</body> </body>
</html> </html>

19
public/res/style.css
View file

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