robin/web
1
0
Fork 0
forked from nebulosus/web
Code Pull requests Activity

added some more things

Browse source
This commit is contained in:
Robin-qwerty 2024-04-09 16:19:28 +02:00
parent 6ea8f49b3f
commit eb7cb7b11f
3 changed files with 124 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
public/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -11,11 +10,9 @@
<script src="./res/script/cases.js" defer></script> <script src="./res/script/cases.js" defer></script>
<script src="./res/script/anchors.js" defer></script> <script src="./res/script/anchors.js" defer></script>
<script src="./res/script/navbar.js" defer></script> <script src="./res/script/navbar.js" defer></script>
</head> </head>
<body> <body>
<div class="top-bar"> <header class="top-bar">
<div class="logo"> <div class="logo">
<a href="./"> <a href="./">
<span class="mono">[N]</span> <span class="mono">[N]</span>
@ -35,35 +32,42 @@
<li><a href="#contact" onclick="hideMenu()">Contact</a></li> <li><a href="#contact" onclick="hideMenu()">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div> </header>
<main> <main>
<section id="intro"> <section id="intro">
<h1>Nebulosus</h1> <h1>Nebulosus</h1>
<p>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.</p>
</section> </section>
<div class="columns"> <div class="columns">
<div> <div>
<section id="offer"> <section id="offer">
<h2>What does Nebulosus offer?</h2> <h2>What does Nebulosus offer?</h2>
<span>Nebulosus offers a variety of services:</span> <p>Nebulosus offers a variety of services to meet your needs:</p>
<ol> <ul>
<li><span>Server Hosting</span></li> <li>Server Hosting</li>
<li><span>Website / Application Development</span></li> <li>Website Development</li>
<li><span>Technical Support</span></li> <li>Application Development</li>
</ol> <li>Technical Support</li>
</ul>
<p>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.</p>
<button id="cases-button" hidden>Cases</button> <button id="cases-button" hidden>Cases</button>
<div id="cases" hidden></div> <div id="cases" hidden></div>
</section> </section>
<br>
<section id="about"> <section id="about">
<h2>About Nebulosus</h2> <h2>About Nebulosus and how we are</h2>
<p> <p>
Nebulosus is simplicity, redundancy, reliability and friendliness. <br /> <b>About Nebulosus:</b><br>
Software should be intuitive, aware of it's environment. That's what Nebulosus strives for. 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.
<br /> <br>
If you want simple, intuitive and reliable software, you're in the right spot. <br>
<b>How are we:</b><br>
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.
</p> </p>
</section> </section>
<br>
<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">
@ -72,20 +76,49 @@
</div> </div>
</section> </section>
</div> </div>
<section id="contact" hidden> <section id="other-projects">
<!-- Not done yet :) --> <h2>Other Projects</h2>
<!-- Technical question? dev (at) faulty (dot) nl --> <p>Explore some of our recent projects:</p>
<h2>Contact</h2> <div class="project">
<span>To contact me please use the following form:</span> <h3>Project 1</h3>
<form action="/api/form"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<input name="name" type="text" placeholder="Name"> </div>
<input name="email" type="text" placeholder="E-Mail"> <div class="project">
<textarea name="message" rows="5" placeholder="Your message"></textarea> <h3>Project 2</h3>
<input type="button" value="Submit"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</form> </div>
<div class="project">
<h3>Project 3</h3>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</section> </section>
</div> </div>
</main> </main>
</body>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h3>Contact Us</h3>
<p>Email: info@nebulosus.nl</p>
<p>Phone: +1234567890</p>
</div>
<div class="footer-section">
<h3>Follow Us</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Address</h3>
<p>123 Street Name</p>
<p>City, Country</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; 2024 Nebulosus. All rights reserved.</p>
</div>
</footer>
</body>
</html> </html>

7
public/res/pricing/index.html
View file

@ -1,6 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -10,9 +9,8 @@
<link rel="stylesheet" href="../style/style.css"> <link rel="stylesheet" href="../style/style.css">
<script src="../script/navbar.js" defer></script> <script src="../script/navbar.js" defer></script>
</head> </head>
<body> <body>
<div class="top-bar"> <header class="top-bar">
<div class="logo"> <div class="logo">
<a href="../../"> <a href="../../">
<span class="mono">[N]</span> <span class="mono">[N]</span>
@ -31,7 +29,7 @@
<li><a href=".../../index.html#contact" onclick="hideMenu()">Contact</a></li> <li><a href=".../../index.html#contact" onclick="hideMenu()">Contact</a></li>
</ul> </ul>
</nav> </nav>
</div> </header>
<div id="pricing-plan-header"> <div id="pricing-plan-header">
<h1>Pricing Plans</h1> <h1>Pricing Plans</h1>
@ -88,5 +86,4 @@
<hr> <hr>
</div> </div>
</body> </body>
</html> </html>

65
public/res/style/style.css
View file

@ -22,6 +22,10 @@ body {
text-decoration: none; text-decoration: none;
} }
nav a {
font-size: 20px;
}
header { header {
position: sticky; position: sticky;
top: 0%; top: 0%;
@ -76,6 +80,11 @@ section#intro {
border-bottom: 3px solid gray; border-bottom: 3px solid gray;
} }
section#intro p {
max-width: 65%;
text-align: center;
font-size: 18px;
}
div section { div section {
width: fit-content; width: fit-content;
@ -182,8 +191,7 @@ div.rows {
justify-content: space-between; justify-content: space-between;
background-color: var(--theme-color); background-color: var(--theme-color);
color: #fff; color: #fff;
padding: 0.5rem 2rem; /* padding: 0.5rem 2rem; */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
} }
.top-bar .logo { .top-bar .logo {
@ -297,7 +305,7 @@ div.rows {
flex: 1; flex: 1;
margin: 0.5rem; margin: 0.5rem;
max-width: 325px; max-width: 325px;
min-width: 250px; /* Add a minimum width */ min-width: 250px;
} }
.pricing-plan h2 { .pricing-plan h2 {
@ -336,6 +344,55 @@ div.rows {
@media (max-width: 600px) { @media (max-width: 600px) {
.pricing-plan { .pricing-plan {
max-width: calc(50% - 1rem); /* Adjusting max-width for smaller screens */ 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;
} }