diff --git a/public/index.html b/public/index.html index 5f6409c..064cfb8 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,43 @@ + Nebulosus + + + + + + - - - -
+
-
+ + + + +

Nebulosus

@@ -42,6 +64,13 @@ If you want simple, intuitive and reliable software, you're in the right spot.

+
+

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..6c8c72e --- /dev/null +++ b/public/res/pricing/index.html @@ -0,0 +1,92 @@ + + + + + + + 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..3498fdd --- /dev/null +++ b/public/res/style/style.css @@ -0,0 +1,341 @@ +: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; +} + +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; +} + +/* ---------- navbar ---------- */ + +.top-bar { + display: flex; + align-items: center; + justify-content: space-between; + background-color: var(--theme-color); + color: #fff; + padding: 0.5rem 2rem; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.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; /* Add a minimum width */ +} + +.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); /* Adjusting max-width for smaller screens */ + } +} \ No newline at end of file