diff --git a/public/index.html b/public/index.html index 5f6409c..1e64889 100644 --- a/public/index.html +++ b/public/index.html @@ -1,69 +1,124 @@ + - Nebulosus + - - - + + + + - -
+
+ +
+ +

Nebulosus

+

Welcome to Nebulosus, your one-stop solution for reliable server hosting, website development, and technical support services. We are committed to providing intuitive and efficient solutions tailored to your needs.

What does Nebulosus offer?

- Nebulosus offers a variety of services: -
    -
  1. Server Hosting
    2. -
  2. Website / Application Development
    3. -
  3. Technical Support
    4. -
+

Nebulosus offers a variety of services to meet your needs:

+
    +
  • Server Hosting
    • +
  • Website Development
    • +
  • Application Development
    • +
  • Technical Support
    • +
+

Whether you're a small business looking to establish an online presence or a large corporation in need of advanced technical solutions, Nebulosus has you covered.

+
-

About Nebulosus

+

About Nebulosus and how we are

- Nebulosus is simplicity, redundancy, reliability and friendliness.
- Software should be intuitive, aware of it's environment. That's what Nebulosus strives for. -
- If you want simple, intuitive and reliable software, you're in the right spot. + About Nebulosus:
+ Nebulosus is committed to providing simplicity, redundancy, reliability, and friendliness in all our services. We believe that software should be intuitive and adaptable to its environment. Our team of experts is dedicated to delivering high-quality solutions that meet the unique needs of each client. +
+
+ How are we:
+ Nebulosus is committed to providing simplicity, redundancy, reliability, and friendliness in all our services. We believe that software should be intuitive and adaptable to its environment. Our team of experts is dedicated to delivering high-quality solutions that meet the unique needs of each client.

+
+
+

More information about Nebulosus

+
+ Chamber of Commerce number: 93409583 + E-mail: info@nebulosus.nl +
+
-
-
-

More information about Nebulosus

-
- Chamber of Commerce number: 93409583 - E-mail: info@nebulosus.nl -
-
- - \ No newline at end of file + + + diff --git a/public/res/media/favicon.ico b/public/res/media/favicon.ico new file mode 100644 index 0000000..070d7e1 Binary files /dev/null and b/public/res/media/favicon.ico differ diff --git a/public/res/media/logo.png b/public/res/media/logo.png new file mode 100644 index 0000000..129cfbe Binary files /dev/null and b/public/res/media/logo.png differ diff --git a/public/res/pricing/index.html b/public/res/pricing/index.html new file mode 100644 index 0000000..cb5576c --- /dev/null +++ b/public/res/pricing/index.html @@ -0,0 +1,89 @@ + + + + + + Nebulosus - Pricing + + + + + + +
+ + +
+ +
+

Pricing Plans

+

We offer a variety of services including server hosting, website development, and application development. Our prices are calculated based on the complexity of the project, required features, and estimated development time.

+
+ + +
+

Hosting plans

+
+
+
+

Basic Plan

+

Price: $10/month

+
    +
  • Feature 1
    • +
  • Feature 2
    • +
  • Feature 3
    • +
+
+ +
+ +
+

Standard Plan

+

Price: $20/month

+
    +
  • Feature 1
    • +
  • Feature 2
    • +
  • Feature 3
    • +
  • Feature 4
    • +
+
+ +
+ +
+

Premium Plan

+

Price: $30/month

+
    +
  • Feature 1
    • +
  • Feature 2
    • +
  • Feature 3
    • +
  • Feature 4
    • +
  • Feature 5
    • +
+
+ +
+
+
+
+

Application and Website developing plans

+
+
+ + diff --git a/public/res/anchors.js b/public/res/script/anchors.js similarity index 100% rename from public/res/anchors.js rename to public/res/script/anchors.js diff --git a/public/res/cases.js b/public/res/script/cases.js similarity index 100% rename from public/res/cases.js rename to public/res/script/cases.js diff --git a/public/res/script/navbar.js b/public/res/script/navbar.js new file mode 100644 index 0000000..a1768e5 --- /dev/null +++ b/public/res/script/navbar.js @@ -0,0 +1,17 @@ + +function toggleMenu() { + const navLinks = document.querySelector(".top-bar nav ul"); + navLinks.classList.toggle("show"); +} + +function hideMenu() { + const navLinks = document.querySelector(".top-bar nav ul"); + navLinks.classList.remove("show"); +} + +window.addEventListener("resize", function() { + const navLinks = document.querySelector(".top-bar nav ul"); + if (window.innerWidth > 768) { + navLinks.classList.remove("show"); + } +}); \ No newline at end of file diff --git a/public/res/style.css b/public/res/style.css deleted file mode 100644 index 9724b99..0000000 --- a/public/res/style.css +++ /dev/null @@ -1,168 +0,0 @@ -:root { - --fonts: Inter, 'Open Sans', 'Helvetica', 'Roboto', sans-serif; - --theme-color: #33e; - --theme-color-highlight: #55f; - --theme-color-highlight-2: #99f; - --theme-color-lowlight: #11b; - - font-family: var(--fonts); -} - -body { - display: flex; - flex-direction: column; - margin: 0; - padding: 0; -} - -header { - position: sticky; - top: 0%; - width: 100vw; - height: fit-content; - background-color: var(--theme-color, gray); - color: #fff; - - box-shadow: 0 0 20px var(--theme-color-lowlight); -} - -header div.logo { - padding: 1em; -} - -header div.logo span { - font-weight: bolder; - font-size: 1.5em; - - border: 1px; -} - -main { - display: flex; - flex-direction: column; - gap: 1em; - width: 100vw; -} - -main section { - margin: 0 2.5em; - width: calc(100vw - (2.5em * 2)); - - >h2 { - text-decoration: underline; - text-decoration-color: #aaa; - } -} - -section#intro { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - - margin: 0; - width: 100vw; - background-color: var(--theme-color); - color: #fff; - - font-size: 2em; - - border-bottom: 3px solid gray; -} - -div section { - width: fit-content; -} - -/* --- */ - -/* for anchors.js */ -h2:hover { - cursor: pointer; - - &::before { - position: absolute; - content: '#'; - text-decoration: underline; - text-decoration-color: var(--theme-color); - transform: translateX(-150%); - } -} - -/* --- */ - -pre, -code, -.mono { - font-family: 'Mononoki', 'Droid Sans Mono', monospace; -} - -/* --- */ - -form { - display: flex; - flex-direction: column; - - gap: .75em; - margin: .5em 0; - - padding: 1rem .5rem; - border: 2px solid #e3e3e3; - border-radius: 5px; -} - - -form input, -form textarea { - font-family: var(--fonts); - - width: 100%; - padding: .3em .2em; - - outline: none; - - border: 1px solid #e3e3e3; - border-radius: 5px; - - - &:hover { - background-color: 1px solid var(--theme-color-highlight); - } - - transition: border .2s ease-in-out; -} - -form input[type=button], -form input[type=submit], -button { - outline: none; - padding: .3em .5em; - border: 1px solid #e3e3e3; - background-color: #eee; - border-radius: 5px; - - cursor: pointer; - - &:hover { - background-color: var(--theme-color-highlight-2); - } - - transition: background-color .2s ease-in-out; -} - -div.columns { - display: flex; - - @media (max-width: 600px) { - flex-direction: column; - } -} - -div.rows { - display: flex; - flex-direction: column; -} - -.faded { - opacity: .2; -} \ No newline at end of file diff --git a/public/res/style/style.css b/public/res/style/style.css new file mode 100644 index 0000000..973ec3a --- /dev/null +++ b/public/res/style/style.css @@ -0,0 +1,398 @@ +:root { + --fonts: Inter, 'Open Sans', 'Helvetica', 'Roboto', sans-serif; + --theme-color: #33e; + --theme-color-highlight: #55f; + --theme-color-highlight-2: #99f; + --theme-color-lowlight: #11b; + + font-family: var(--fonts); +} + +body { + display: flex; + flex-direction: column; + margin: 0; + padding: 0; +} + +/* ---------- home page ---------- */ + +.mono, .logo a { + color: #fff; + text-decoration: none; +} + +nav a { + font-size: 20px; +} + +header { + position: sticky; + top: 0%; + width: 100vw; + height: fit-content; + background-color: var(--theme-color, gray); + color: #fff; + + box-shadow: 0 0 20px var(--theme-color-lowlight); +} + +header div.logo { + padding: 1em; +} + +header div.logo span { + font-weight: bolder; + font-size: 1.5em; + + border: 1px; +} + +main { + display: flex; + flex-direction: column; + gap: 1em; + width: 100vw; +} + +main section { + margin: 0 2.5em; + width: calc(100vw - (2.5em * 2)); + + >h2 { + text-decoration: underline; + text-decoration-color: #aaa; + } +} + +section#intro { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin: 0; + width: 100vw; + background-color: var(--theme-color); + color: #fff; + + font-size: 2em; + + border-bottom: 3px solid gray; +} +section#intro p { + max-width: 65%; + text-align: center; + font-size: 18px; +} + +div section { + width: fit-content; +} + +/* --- */ + +/* for anchors.js */ +h2:hover { + cursor: pointer; + + &::before { + position: absolute; + content: '#'; + text-decoration: underline; + text-decoration-color: var(--theme-color); + transform: translateX(-150%); + } +} + +/* --- */ + +pre, +code, +.mono { + font-family: 'Mononoki', 'Droid Sans Mono', monospace; +} + +/* --- */ + +form { + display: flex; + flex-direction: column; + + gap: .75em; + margin: .5em 0; + + padding: 1rem .5rem; + border: 2px solid #e3e3e3; + border-radius: 5px; +} + + +form input, +form textarea { + font-family: var(--fonts); + + width: 100%; + padding: .3em .2em; + + outline: none; + + border: 1px solid #e3e3e3; + border-radius: 5px; + + + &:hover { + background-color: 1px solid var(--theme-color-highlight); + } + + transition: border .2s ease-in-out; +} + +form input[type=button], +form input[type=submit], +button { + outline: none; + padding: .3em .5em; + border: 1px solid #e3e3e3; + background-color: #eee; + border-radius: 5px; + + cursor: pointer; + + &:hover { + background-color: var(--theme-color-highlight-2); + } + + transition: background-color .2s ease-in-out; +} + +div.columns { + display: flex; + + @media (max-width: 600px) { + flex-direction: column; + } +} + +div.rows { + display: flex; + flex-direction: column; +} + +.faded { + opacity: .2; +} + +/* ---------- navbar ---------- */ + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--theme-color); + color: #fff; + /* padding: 0.5rem 2rem; */ +} + +.top-bar .logo { + font-size: 1.5rem; + font-weight: bold; + margin-right: 50px; +} + +.top-bar nav ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; +} + +.top-bar nav ul li { + margin-right: 20px; +} + +.top-bar nav ul li a { + text-decoration: none; + color: #fff; + padding: 0 1rem; +} + +.top-bar nav ul li a:hover { + text-decoration: underline; +} + +/* Hamburger Menu Styles */ +.hamburger-menu { + display: none; + flex-direction: column; + cursor: pointer; +} + +.bar { + width: 25px; + height: 2px; + background-color: #fff; + margin: 5px; +} + +@media screen and (max-width: 768px) { + .top-bar .logo { + margin-right: 0; + } + + .top-bar nav ul { + display: none; + } + + .top-bar nav ul.show { + display: flex; + flex-direction: column; + align-items: center; + position: absolute; + background-color: #4545ea; + width: 100%; + top: 50px; + left: 0; + } + + .top-bar nav ul li { + margin: 10px 0; + } + + .hamburger-menu { + display: flex; + } +} + + +/* ---------- pricing plans ---------- */ + +#pricing-plan-header { + text-align: center; +} + +#pricing-plan-header p { + margin: 0 auto; + width: 65%; +} + +.plans { + margin: 25px 0; +} + +.plans hr { + width: 80%; +} + +.plans h2 { + text-align: center; +} + +.pricing-plans { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; + margin-top: 2rem; +} + +.pricing-plan { + border: 1px solid #ccc; + border-radius: 5px; + padding: 1rem; + text-align: center; + flex: 1; + margin: 0.5rem; + max-width: 325px; + min-width: 250px; +} + +.pricing-plan h2 { + font-size: 1.5rem; + margin-bottom: 0.5rem; +} + +.pricing-plan .price { + font-weight: bold; + margin-bottom: 1rem; +} + +.pricing-plan ul { + list-style: none; + padding: 0; + margin: 0; +} + +.pricing-plan ul li { + margin-bottom: 0.5rem; +} + +.pricing-plan button { + padding: 0.5rem 1rem; + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +.pricing-plan button:hover { + background-color: #0056b3; +} + +@media (max-width: 600px) { + .pricing-plan { + max-width: calc(50% - 1rem); + } +} + +/* ---------- Footer Styles ---------- */ +.footer { + margin-top: 50px; + background-color: #333; + color: #fff; + padding-top: 20px; +} + +.footer-content { + display: flex; + justify-content: space-around; + align-items: flex-start; + max-width: 1200px; + margin: 0 auto; +} + +.footer-section { + padding: 0 20px; +} + +.footer-section h3 { + margin-bottom: 10px; +} + +.footer-section ul { + padding: 0; + margin: 0; +} + +.footer-section ul li { + list-style-type: none; + margin-bottom: 5px; +} + +.footer-section ul li a { + color: #fff; + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover { + color: #ffcc00; +} +.footer-bottom { + background-color: #222; + padding: 10px 0; + text-align: center; +} \ No newline at end of file