Compare commits
2 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
eb7cb7b11f | ||
|
|
6ea8f49b3f |
9 changed files with 597 additions and 206 deletions
|
|
@ -1,69 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nebulosus</title>
|
||||
<link rel="icon" href="./res/media/favicon.ico" type="image/x-icon">
|
||||
|
||||
<link rel="stylesheet" href="./res/style.css">
|
||||
<script src="./res/cases.js" defer></script>
|
||||
<script src="./res/anchors.js" defer></script>
|
||||
<link rel="stylesheet" href="./res/style/style.css">
|
||||
<script src="./res/script/cases.js" defer></script>
|
||||
<script src="./res/script/anchors.js" defer></script>
|
||||
<script src="./res/script/navbar.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header style="display: flex; justify-content: space-between;">
|
||||
<header class="top-bar">
|
||||
<div class="logo">
|
||||
<span class="mono">[N]</span>
|
||||
<a href="./">
|
||||
<span class="mono">[N]</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div class="hamburger-menu" onclick="toggleMenu()">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#intro"onclick="hideMenu()">Home</a></li>
|
||||
<li><a href="./res/pricing/" onclick="hideMenu()">Pricing</a></li>
|
||||
<li><a href="#about" onclick="hideMenu()">About</a></li>
|
||||
<li><a href="#contact" onclick="hideMenu()">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<section id="intro">
|
||||
<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>
|
||||
<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>
|
||||
<p>Nebulosus offers a variety of services to meet your needs:</p>
|
||||
<ul>
|
||||
<li>Server Hosting</li>
|
||||
<li>Website Development</li>
|
||||
<li>Application Development</li>
|
||||
<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>
|
||||
<div id="cases" hidden></div>
|
||||
</section>
|
||||
<br>
|
||||
<section id="about">
|
||||
<h2>About Nebulosus</h2>
|
||||
<h2>About Nebulosus and how we are</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.
|
||||
<b>About Nebulosus:</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.
|
||||
<br>
|
||||
<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>
|
||||
</section>
|
||||
<br>
|
||||
<section id="more-info">
|
||||
<h2>More information about Nebulosus</h2>
|
||||
<div class="rows">
|
||||
<span>Chamber of Commerce number: <strong>93409583</strong></span>
|
||||
<span>E-mail: <strong>info@nebulosus.nl</strong></span>
|
||||
</div>
|
||||
</section>
|
||||
</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 id="other-projects">
|
||||
<h2>Other Projects</h2>
|
||||
<p>Explore some of our recent projects:</p>
|
||||
<div class="project">
|
||||
<h3>Project 1</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3>Project 2</h3>
|
||||
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
||||
</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>
|
||||
</div>
|
||||
<section id="more-info">
|
||||
<h2>More information about Nebulosus</h2>
|
||||
<div class="rows">
|
||||
<span>Chamber of Commerce number: <strong>93409583</strong></span>
|
||||
<span>E-mail: <strong>info@nebulosus.nl</strong></span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<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>© 2024 Nebulosus. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
BIN
public/res/media/favicon.ico
Normal file
BIN
public/res/media/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
BIN
public/res/media/logo.png
Normal file
BIN
public/res/media/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
89
public/res/pricing/index.html
Normal file
89
public/res/pricing/index.html
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Nebulosus - Pricing</title>
|
||||
<link rel="icon" href="../media/favicon.ico" type="image/x-icon">
|
||||
|
||||
<link rel="stylesheet" href="../style/style.css">
|
||||
<script src="../script/navbar.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<div class="logo">
|
||||
<a href="../../">
|
||||
<span class="mono">[N]</span>
|
||||
</a>
|
||||
</div>
|
||||
<nav>
|
||||
<div class="hamburger-menu" onclick="toggleMenu()">
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="../../" onclick="hideMenu()">Home</a></li>
|
||||
<li><a href="../pricing/index.html" onclick="hideMenu()">Pricing</a></li>
|
||||
<li><a href="../../index.html#about" onclick="hideMenu()">About</a></li>
|
||||
<li><a href=".../../index.html#contact" onclick="hideMenu()">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div id="pricing-plan-header">
|
||||
<h1>Pricing Plans</h1>
|
||||
<p>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.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="plans">
|
||||
<h2>Hosting plans</h2>
|
||||
<hr>
|
||||
<section class="pricing-plans">
|
||||
<div class="pricing-plan">
|
||||
<h2>Basic Plan</h2>
|
||||
<p class="price">Price: $10/month</p>
|
||||
<ul>
|
||||
<li>Feature 1</li>
|
||||
<li>Feature 2</li>
|
||||
<li>Feature 3</li>
|
||||
</ul>
|
||||
<br>
|
||||
<button>Select</button>
|
||||
</div>
|
||||
|
||||
<div class="pricing-plan">
|
||||
<h2>Standard Plan</h2>
|
||||
<p class="price">Price: $20/month</p>
|
||||
<ul>
|
||||
<li>Feature 1</li>
|
||||
<li>Feature 2</li>
|
||||
<li>Feature 3</li>
|
||||
<li>Feature 4</li>
|
||||
</ul>
|
||||
<br>
|
||||
<button>Learn</button>
|
||||
</div>
|
||||
|
||||
<div class="pricing-plan">
|
||||
<h2>Premium Plan</h2>
|
||||
<p class="price">Price: $30/month</p>
|
||||
<ul>
|
||||
<li>Feature 1</li>
|
||||
<li>Feature 2</li>
|
||||
<li>Feature 3</li>
|
||||
<li>Feature 4</li>
|
||||
<li>Feature 5</li>
|
||||
</ul>
|
||||
<br>
|
||||
<button>Select</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div class="plans">
|
||||
<h2>Application and Website developing plans</h2>
|
||||
<hr>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
17
public/res/script/navbar.js
Normal file
17
public/res/script/navbar.js
Normal file
|
|
@ -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");
|
||||
}
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
398
public/res/style/style.css
Normal file
398
public/res/style/style.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in a new issue