forked from nebulosus/web
Compare commits
9 commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
2912e33760 | ||
|
|
a6ff285b2e | ||
| 71b2aaae4f | |||
| 3ef20e8d42 | |||
| b77808e38e | |||
| d01b2adb8e | |||
| bfe0084c93 | |||
| 32e4ccdcb5 | |||
| c3a2d96dd8 |
13 changed files with 514 additions and 614 deletions
BIN
public/assets/logo.webp
Normal file
BIN
public/assets/logo.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
|
|
@ -1,124 +1,108 @@
|
||||||
<!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">
|
||||||
<title>Nebulosus</title>
|
<title>Nebulosus</title>
|
||||||
<link rel="icon" href="./res/media/favicon.ico" type="image/x-icon">
|
<meta name="description" content="Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and friendliness.">
|
||||||
|
<link rel="icon" href="/assets/logo.webp" type="image/webp">
|
||||||
<link rel="stylesheet" href="./res/style/style.css">
|
<link rel="stylesheet" href="./res/style.css">
|
||||||
<script src="./res/script/cases.js" defer></script>
|
<script src="./res/cases.js" defer></script>
|
||||||
<script src="./res/script/anchors.js" defer></script>
|
<script src="./res/anchors.js" defer></script>
|
||||||
<script src="./res/script/navbar.js" defer></script>
|
<script src="./res/locale.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
[data-i18n-show] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="top-bar">
|
<header style="display: flex; justify-content: space-between;">
|
||||||
<div class="logo">
|
<div class="logo" style="display: flex; align-items: center; gap: .75rem;">
|
||||||
<a href="./">
|
<img src="/assets/logo.webp" height="40" width="40" alt="" />
|
||||||
<span class="mono">[N]</span>
|
<span>Nebulosus</span>
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="columns" style="padding: 1.5rem; justify-content: center;">
|
||||||
<nav>
|
<a href="/">Home</a>
|
||||||
<div class="hamburger-menu" onclick="toggleMenu()">
|
|
||||||
<div class="bar"></div>
|
|
||||||
<div class="bar"></div>
|
|
||||||
<div class="bar"></div>
|
|
||||||
</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>
|
</header>
|
||||||
|
<main data-i18n-show>
|
||||||
|
|
||||||
<main>
|
|
||||||
<section id="intro">
|
<section id="intro">
|
||||||
|
<div class="columns" style="align-items: flex-start; padding: 2rem; gap: 2rem;">
|
||||||
|
<img src="/assets/logo.webp" height="100" width="100" style="filter: drop-shadow(0 0 20px #fff);" />
|
||||||
|
<div class="rows">
|
||||||
<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>
|
<span data-i18n="$.motto"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<div class="columns">
|
|
||||||
<div>
|
<!-- keep some sample text for SEO n stuff -->
|
||||||
<section id="offer">
|
|
||||||
<h2>What does Nebulosus offer?</h2>
|
|
||||||
<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">
|
<section id="about">
|
||||||
<h2>About Nebulosus and how we are</h2>
|
<h2 data-i18n="about.title">About</h2>
|
||||||
<p>
|
<p data-i18n="about.text">
|
||||||
<b>About Nebulosus:</b><br>
|
Nebulosus is a dutch company focusing on intuitivism, simplicity, redundancy, reliability and
|
||||||
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.
|
friendliness.
|
||||||
<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!
|
||||||
<b>How are we:</b><br>
|
If you're looking for a company site, let's discuss it!
|
||||||
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="offer">
|
||||||
<h2>More information about Nebulosus</h2>
|
<h2 data-i18n="offer.title">Offer</h2>
|
||||||
|
<div style="display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.it-consultancy.title"></h4>
|
||||||
|
<p data-i18n="offer.it-consultancy.tagline"></p>
|
||||||
|
<p data-i18n="offer.it-consultancy.description"></p>
|
||||||
|
<span data-i18n="offer.it-consultancy.solutions"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.managed-hosting.title"></h4>
|
||||||
|
<p data-i18n="offer.managed-hosting.tagline"></p>
|
||||||
|
<p data-i18n="offer.managed-hosting.description"></p>
|
||||||
|
<span data-i18n="offer.managed-hosting.solutions"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.tech-support.title"></h4>
|
||||||
|
<p data-i18n="offer.tech-support.tagline"></p>
|
||||||
|
<p data-i18n="offer.tech-support.description"></p>
|
||||||
|
<span data-i18n="offer.tech-support.solutions"></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 data-i18n="offer.development.title"></h4>
|
||||||
|
<p data-i18n="offer.development.tagline"></p>
|
||||||
|
<p data-i18n="offer.development.description"></p>
|
||||||
|
<span data-i18n="offer.development.solutions"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="info">
|
||||||
|
<h2>Information</h2>
|
||||||
<div class="rows">
|
<div class="rows">
|
||||||
<span>Chamber of Commerce number: <strong>93409583</strong></span>
|
<span><span data-i18n="dict.mail"></span>: <a href="#" data-i18n="$.mail"
|
||||||
<span>E-mail: <strong>info@nebulosus.nl</strong></span>
|
onclick="window.open('mailto:info'+'@'+''+'nebulosus'+'.n'+'l', '_self')"></a></span>
|
||||||
|
<span><span data-i18n="dict.kvk"></span>: <strong data-i18n="$.kvk" href="#"></strong></span>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
|
||||||
<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>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer>
|
||||||
<div class="footer-content">
|
<div style="display: flex; justify-content: space-between">
|
||||||
<div class="footer-section">
|
<span>© 2025 Nebulosus</span>
|
||||||
<h3>Contact Us</h3>
|
<div>
|
||||||
<p>Email: info@nebulosus.nl</p>
|
<button onclick="locale.setPreferredLocale('en')">EN</button>
|
||||||
<p>Phone: +1234567890</p>
|
<button onclick="locale.setPreferredLocale('nl')">NL</button>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- Want to collaborate? -->
|
||||||
|
<!-- E-Mail: didier (at) nebulosus (dot) nl -->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
103
public/res/locale.js
Normal file
103
public/res/locale.js
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
(() => {
|
||||||
|
const getLocale = () => {
|
||||||
|
const cacheLocale = localStorage.getItem('preferredLocale')
|
||||||
|
if (cacheLocale) return cacheLocale
|
||||||
|
localStorage.setItem('preferredLocale', navigator.language);
|
||||||
|
return locale
|
||||||
|
}
|
||||||
|
|
||||||
|
const setPreferredLocale = (locale) => {
|
||||||
|
localStorage.setItem('preferredLocale', locale);
|
||||||
|
setLocale()
|
||||||
|
}
|
||||||
|
|
||||||
|
const getLocaleURL = (locale = getLocale()) => {
|
||||||
|
const lang = locale.split('-')[0];
|
||||||
|
return `/res/locale/${lang}.json`
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadLocale = async (locale = getLocale()) => {
|
||||||
|
// check localStorage
|
||||||
|
const cacheDate = localStorage.getItem(`locale-${locale}`)
|
||||||
|
if (cacheDate) {
|
||||||
|
if (Date.now() - cacheDate < 1000 * 60 * 60 * 24) { // 1 day
|
||||||
|
return JSON.parse(localStorage.getItem(`locale-${locale}-data`))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const response = await fetch(getLocaleURL(locale), { cache: 'no-store' })
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
localStorage.setItem(`locale-${locale}`, Date.now())
|
||||||
|
localStorage.setItem(`locale-${locale}-data`, JSON.stringify(data))
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
if (cacheDate) { // if error then return cache even if expired
|
||||||
|
return JSON.parse(localStorage.getItem(`locale-${locale}-data`))
|
||||||
|
} else {
|
||||||
|
if (locale !== 'en') return await loadLocale('en');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setLocale = async (locale = getLocale()) => {
|
||||||
|
const data = await loadLocale(locale)
|
||||||
|
document.querySelectorAll('[data-i18n]').forEach(async (element) => {
|
||||||
|
try {
|
||||||
|
// main.intro.title => {main: {intro: {title: 'value'}}}
|
||||||
|
const keys = element.getAttribute('data-i18n').split('.');
|
||||||
|
console.log(keys)
|
||||||
|
let value = data;
|
||||||
|
keys.forEach((key) => value = value[key]);
|
||||||
|
console.log(value)
|
||||||
|
// if array then into ul list
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
element.innerHTML = ''
|
||||||
|
const ul = document.createElement('ul')
|
||||||
|
value.forEach((item) => {
|
||||||
|
const li = document.createElement('li')
|
||||||
|
li.innerHTML = item
|
||||||
|
ul.appendChild(li)
|
||||||
|
})
|
||||||
|
element.appendChild(ul)
|
||||||
|
} else {
|
||||||
|
element.innerHTML = value ?? '###';
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
element.innerHTML = '###';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.querySelectorAll('[data-i18n-show]').forEach(el => el.removeAttribute('data-i18n-show'))
|
||||||
|
}
|
||||||
|
|
||||||
|
window.locale = {
|
||||||
|
setPreferredLocale,
|
||||||
|
getLocale,
|
||||||
|
getLocaleURL,
|
||||||
|
loadLocale,
|
||||||
|
setLocale,
|
||||||
|
expireLocale: () => {
|
||||||
|
localStorage.removeItem(`locale-${getLocale()}`)
|
||||||
|
localStorage.removeItem(`locale-${getLocale()}-data`)
|
||||||
|
setLocale()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.locale.setLocale();
|
||||||
|
|
||||||
|
// expiry management
|
||||||
|
// check if locale is older than EXPIRY_TIME then fetch again
|
||||||
|
function checkExpiry() {
|
||||||
|
const cacheDate = localStorage.getItem(`locale-${getLocale()}`)
|
||||||
|
if (cacheDate) {
|
||||||
|
if (Date.now() - cacheDate > 1000 * 60 * 60 * 24) { // 1 day
|
||||||
|
window.locale.expireLocale()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setInterval(checkExpiry, 1000 * 60 * 60); // 1 hour
|
||||||
|
checkExpiry()
|
||||||
|
})()
|
||||||
66
public/res/locale/en.json
Normal file
66
public/res/locale/en.json
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"$": {
|
||||||
|
"name": "Nebulosus",
|
||||||
|
"kvk": 93409583,
|
||||||
|
"mail": "info@nebulosus.nl",
|
||||||
|
"motto": "Focused on innovation."
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "About",
|
||||||
|
"text": "Nebulosus is a Dutch company focused on intuition, <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 /> We believe software should be intuitive and aware of its environment. This is the standard we aim for at Nebulosus.<br />Looking to develop an app with intuitive design and robust infrastructure? Get in touch!<br />Need a company website? Let’s discuss how we can help."
|
||||||
|
},
|
||||||
|
"offer": {
|
||||||
|
"title": "Offer",
|
||||||
|
"it-consultancy": {
|
||||||
|
"title": "IT Consultancy",
|
||||||
|
"tagline": "IT consultancy services for your business.",
|
||||||
|
"description": "Nebulosus offers IT consultancy services for your business. Giving you a clear understanding of the technology you need to move forward.",
|
||||||
|
"solutions": [
|
||||||
|
"IT Strategy",
|
||||||
|
"Infrastructure",
|
||||||
|
"Security",
|
||||||
|
"Compliance",
|
||||||
|
"Training"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"managed-hosting": {
|
||||||
|
"title": "Managed Hosting",
|
||||||
|
"tagline": "Managed hosting services for your website.",
|
||||||
|
"description": "Nebulosus offers managed hosting services for your website. Taking care of the technical stuff so you can focus on your business.",
|
||||||
|
"solutions": [
|
||||||
|
"Application Hosting",
|
||||||
|
"DNS Management (Domain and Subdomains)",
|
||||||
|
"SSL Certificates",
|
||||||
|
"Email Hosting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tech-support": {
|
||||||
|
"title": "Tech Support",
|
||||||
|
"tagline": "Professional support for your technical issues.",
|
||||||
|
"description": "Having an issue with your website, computer, or network? Nebulosus offers professional support for all your technical issues.",
|
||||||
|
"solutions": [
|
||||||
|
"Android/iOS Support",
|
||||||
|
"Windows/Mac/Linux Support",
|
||||||
|
"Network Support",
|
||||||
|
"Installation and Configuration",
|
||||||
|
"Advice and Guidance"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"title": "Development",
|
||||||
|
"tagline": "Development services for your business.",
|
||||||
|
"description": "Nebulosus offers development services for your application. Whether you need a website, custom integration, or want to automate your business, Nebulosus can help.",
|
||||||
|
"solutions": [
|
||||||
|
"(Web)applications",
|
||||||
|
"Integration development",
|
||||||
|
"Automation",
|
||||||
|
"API Development",
|
||||||
|
"Database Development"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dict": {
|
||||||
|
"kvk": "Chamber of Commerce",
|
||||||
|
"mail": "Email"
|
||||||
|
}
|
||||||
|
}
|
||||||
66
public/res/locale/nl.json
Normal file
66
public/res/locale/nl.json
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
{
|
||||||
|
"$": {
|
||||||
|
"name": "Nebulosus",
|
||||||
|
"kvk": 93409583,
|
||||||
|
"mail": "info@nebulosus.nl",
|
||||||
|
"motto": "Gericht op innovatie."
|
||||||
|
},
|
||||||
|
"about": {
|
||||||
|
"title": "Over",
|
||||||
|
"text": "Nebulosus is een Nederlands bedrijf dat streeft naar intuïtieve, eenvoudige en betrouwbare software, met redundantie en gebruiksvriendelijkheid als kernwaarden. <br /> Software moet intuïtief en omgevingsbewust zijn. Daar zetten wij ons voor in.<br />Wil je een app met intuïtief design en een robuuste infrastructuur? Neem contact op!<br />Op zoek naar een bedrijfssite? Laten we het bespreken!"
|
||||||
|
},
|
||||||
|
"offer": {
|
||||||
|
"title": "Aanbod",
|
||||||
|
"it-consultancy": {
|
||||||
|
"title": "IT Consultancy",
|
||||||
|
"tagline": "IT-consultancydiensten voor uw bedrijf.",
|
||||||
|
"description": "Technologie moet je vooruithelpen, niet tegenwerken. Strategisch advies waarmee uw bedrijf wendbaar blijft in een snel veranderend digitaal landschap.",
|
||||||
|
"solutions": [
|
||||||
|
"IT-strategie",
|
||||||
|
"Infrastructuur",
|
||||||
|
"Beveiliging",
|
||||||
|
"Compliance",
|
||||||
|
"Training"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"managed-hosting": {
|
||||||
|
"title": "Beheerde Hosting",
|
||||||
|
"tagline": "Beheerde hostingdiensten voor uw website.",
|
||||||
|
"description": "Nebulosus biedt beheerde hostingdiensten voor uw website. Terwijl de technische zaken worden geregeld, kunt u zich richten op uw bedrijf.",
|
||||||
|
"solutions": [
|
||||||
|
"Applicatie Hosting",
|
||||||
|
"DNS-beheer (Domeinnaam en subdomeinen)",
|
||||||
|
"SSL-certificaten",
|
||||||
|
"E-mailhosting"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tech-support": {
|
||||||
|
"title": "Technische Ondersteuning",
|
||||||
|
"tagline": "Professionele ondersteuning bij uw technische problemen.",
|
||||||
|
"description": "Een probleem met uw website, computer of netwerk? Nebulosus biedt professionele ondersteuning voor al uw technische problemen.",
|
||||||
|
"solutions": [
|
||||||
|
"Android/iOS-ondersteuning",
|
||||||
|
"Windows/Mac/Linux-ondersteuning",
|
||||||
|
"Netwerkondersteuning",
|
||||||
|
"Installatie en configuratie",
|
||||||
|
"Advies en begeleiding"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"title": "Ontwikkeling",
|
||||||
|
"tagline": "Ontwikkelingsdiensten voor uw bedrijf.",
|
||||||
|
"description": "Nebulosus biedt ontwikkelingsdiensten voor uw applicatie. Of u nu een website, mobiele app of aangepaste software nodig heeft, Nebulosus kan helpen.",
|
||||||
|
"solutions": [
|
||||||
|
"(Web)applicaties",
|
||||||
|
"Integratie ontwikkeling",
|
||||||
|
"Automatisering",
|
||||||
|
"API's",
|
||||||
|
"Databaseontwikkeling"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"dict": {
|
||||||
|
"kvk": "Kamer van Koophandel",
|
||||||
|
"mail": "E-mail"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
|
|
@ -1,89 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
|
|
||||||
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");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
185
public/res/style.css
Normal file
185
public/res/style.css
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
: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: #fff;
|
||||||
|
border-bottom: 4px solid var(--theme-color);
|
||||||
|
color: #000;
|
||||||
|
align-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div.logo {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div.logo span {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 1.5em;
|
||||||
|
|
||||||
|
border: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100vw;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
width: 100vw;
|
||||||
|
background: linear-gradient(120deg, var(--theme-color-highlight-2), var(--theme-color) 60%);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
font-size: 2em;
|
||||||
|
|
||||||
|
border-bottom: 3px solid gray;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div section {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- */
|
||||||
|
|
||||||
|
footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100vw - 5em);
|
||||||
|
height: 2rem;
|
||||||
|
padding-left: 2.5em;
|
||||||
|
background-color: #fff;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- */
|
||||||
|
|
||||||
|
/* 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 {
|
||||||
|
border: 1px solid var(--theme-color-highlight);
|
||||||
|
}
|
||||||
|
|
||||||
|
transition: background-color .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.columns {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rows {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.faded {
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
|
@ -1,398 +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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ---------- 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…
Add table
Add a link
Reference in a new issue