Compare commits
5 commits
74bec5795f
...
37833611dc
| Author | SHA1 | Date | |
|---|---|---|---|
| 37833611dc | |||
| affdb6e8e0 | |||
| 02a8d891bc | |||
| 74736d9b40 | |||
| dd0f3b6436 |
7 changed files with 247 additions and 316 deletions
|
|
@ -1,49 +0,0 @@
|
||||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
|
||||||
|
|
||||||
/*
|
|
||||||
* interstellar_development website
|
|
||||||
* Copyright (C) 2024 interstellar_development
|
|
||||||
*
|
|
||||||
* This program is free software: you can redistribute it and/or modify
|
|
||||||
* it under the terms of the GNU Affero General Public License as
|
|
||||||
* published by the Free Software Foundation, either version 3 of the
|
|
||||||
* License, or (at your option) any later version.
|
|
||||||
*
|
|
||||||
* This program is distributed in the hope that it will be useful,
|
|
||||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
* GNU Affero General Public License for more details.
|
|
||||||
*
|
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
*/
|
|
||||||
|
|
||||||
// contact-form.js
|
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
const contactForm = document.getElementById('contactForm');
|
|
||||||
|
|
||||||
if (contactForm) {
|
|
||||||
contactForm.addEventListener('submit', function(event) {
|
|
||||||
event.preventDefault(); // Prevent the form from submitting the traditional way
|
|
||||||
|
|
||||||
// Generate a random ticket number
|
|
||||||
const ticketNumber = Math.floor(Math.random() * 1000000); // Generates a random number between 0 and 999999
|
|
||||||
|
|
||||||
// Retrieve form values
|
|
||||||
const name = encodeURIComponent(document.getElementById('name').value);
|
|
||||||
const email = encodeURIComponent(document.getElementById('email').value);
|
|
||||||
const message = encodeURIComponent(document.getElementById('message').value);
|
|
||||||
|
|
||||||
// Construct the mailto link
|
|
||||||
const subject = `Support Ticket #${ticketNumber}`;
|
|
||||||
const body = `Name: ${name}%0AEmail: ${email}%0AMessage:%0A${message}`;
|
|
||||||
const mailtoLink = `mailto:example@example.com?subject=${subject}&body=${body}`;
|
|
||||||
|
|
||||||
// Open the default mail client
|
|
||||||
window.location.href = mailtoLink;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// @license-end
|
|
||||||
59
contact.html
59
contact.html
|
|
@ -1,59 +0,0 @@
|
||||||
<!--
|
|
||||||
interstellar development website
|
|
||||||
Copyright (C) 2024 interstellar_development
|
|
||||||
|
|
||||||
This program is free software: you can redistribute it and/or modify
|
|
||||||
it under the terms of the GNU Affero General Public License as
|
|
||||||
published by the Free Software Foundation, either version 3 of the
|
|
||||||
License, or (at your option) any later version.
|
|
||||||
|
|
||||||
This program is distributed in the hope that it will be useful,
|
|
||||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
||||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
||||||
GNU Affero General Public License for more details.
|
|
||||||
|
|
||||||
You should have received a copy of the GNU Affero General Public License
|
|
||||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
||||||
-->
|
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Contact Us</title>
|
|
||||||
<script src="header.js" type="text/javascript" defer></script>
|
|
||||||
<script src="footer.js" type="text/javascript" defer></script>
|
|
||||||
<script src="contact-form.js" type="text/javascript" defer></script>
|
|
||||||
<!-- Added new script -->
|
|
||||||
<link rel="stylesheet" href="styles.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<header-component></header-component>
|
|
||||||
|
|
||||||
<!-- Main Content -->
|
|
||||||
<article>
|
|
||||||
<main>
|
|
||||||
<!-- Contact Form -->
|
|
||||||
<section id="contact">
|
|
||||||
<h2>Contact Us</h2>
|
|
||||||
<p>This contact form has an invalid mail until our mailserver is configured</p>
|
|
||||||
<form id="contactForm">
|
|
||||||
<label for="name">Name:</label>
|
|
||||||
<input type="text" id="name" name="name" required />
|
|
||||||
|
|
||||||
<label for="email">Email:</label>
|
|
||||||
<input type="email" id="email" name="email" required />
|
|
||||||
|
|
||||||
<label for="message">Message:</label>
|
|
||||||
<textarea id="message" name="message" rows="5" required></textarea>
|
|
||||||
|
|
||||||
<button type="submit">Send Message</button>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer-component></footer-component>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
56
dropdown.js
Normal file
56
dropdown.js
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||||
|
|
||||||
|
/*
|
||||||
|
* InterstellarDevelopment website
|
||||||
|
* Copyright (C) 2024 interstellar_development
|
||||||
|
*
|
||||||
|
* This program is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Affero General Public License as
|
||||||
|
* published by the Free Software Foundation, either version 3 of the
|
||||||
|
* License, or (at your option) any later version.
|
||||||
|
*
|
||||||
|
* This program is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Affero General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const menu = document.querySelector(".menu");
|
||||||
|
const burgerMenu = document.querySelector(".burger-menu");
|
||||||
|
|
||||||
|
if (!menu || !burgerMenu) {
|
||||||
|
console.warn("Menu or burger menu element not found. Ensure they exist in the DOM.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle the menu visibility
|
||||||
|
function toggleMenu() {
|
||||||
|
menu.classList.toggle("active");
|
||||||
|
|
||||||
|
if (menu.classList.contains("active")) {
|
||||||
|
// Add click listener to close menu when clicking outside
|
||||||
|
document.addEventListener("click", closeMenu);
|
||||||
|
} else {
|
||||||
|
// Remove the click listener when menu is closed
|
||||||
|
document.removeEventListener("click", closeMenu);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Close the menu if clicking outside of it
|
||||||
|
function closeMenu(event) {
|
||||||
|
if (!menu.contains(event.target) && !event.target.classList.contains("burger-menu")) {
|
||||||
|
menu.classList.remove("active");
|
||||||
|
document.removeEventListener("click", closeMenu);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Attach click event to the burger menu button
|
||||||
|
burgerMenu.addEventListener("click", (event) => {
|
||||||
|
event.stopPropagation(); // Prevent click from immediately triggering closeMenu
|
||||||
|
toggleMenu();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// @license-end
|
||||||
|
|
@ -28,7 +28,7 @@ class Footer extends HTMLElement {
|
||||||
<center>
|
<center>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p>2024 Interstellar Development | Designed by Squadi the Viking</p>
|
<p>2024 Interstellar Development</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</center>
|
</center>
|
||||||
|
|
|
||||||
17
header.js
17
header.js
|
|
@ -17,7 +17,6 @@
|
||||||
* You should have received a copy of the GNU Affero General Public License
|
* You should have received a copy of the GNU Affero General Public License
|
||||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Header extends HTMLElement {
|
class Header extends HTMLElement {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|
@ -28,18 +27,20 @@ class Header extends HTMLElement {
|
||||||
<header>
|
<header>
|
||||||
<div class="header-content">
|
<div class="header-content">
|
||||||
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
|
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
|
||||||
<ul>
|
<button class="burger-menu" onclick="toggleMenu()">☰</button>
|
||||||
<li><a href="index.html#project">Our Projects</a></li>
|
|
||||||
<li><a href="index.html#about">Our Team</a></li>
|
|
||||||
<li><a href="index.html#vision">Our Vision</a></li>
|
|
||||||
<li><a href="contact.html">Contact Us</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<div class="div-menu">
|
||||||
|
<ul class="menu">
|
||||||
|
<li><a href="index.html#project">Our Projects</a></li>
|
||||||
|
<li><a href="index.html#cards">Our Team</a></li>
|
||||||
|
<li><a href="index.html#about">About us</a></li>
|
||||||
|
<li><a href="index.html#vision">Our Vision</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('header-component', Header);
|
customElements.define('header-component', Header);
|
||||||
|
|
||||||
// @license-end
|
// @license-end
|
||||||
|
|
|
||||||
194
index.html
194
index.html
|
|
@ -19,6 +19,7 @@
|
||||||
<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" />
|
||||||
|
<script src="dropdown.js" type="text/javascript" defer></script>
|
||||||
<script src="header.js" type="text/javascript" defer></script>
|
<script src="header.js" type="text/javascript" defer></script>
|
||||||
<script src="footer.js" type="text/javascript" defer></script>
|
<script src="footer.js" type="text/javascript" defer></script>
|
||||||
<link rel="stylesheet" href="styles.css" />
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
|
@ -35,51 +36,59 @@
|
||||||
<h2>Our Games</h2>
|
<h2>Our Games</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<a
|
<p>Previously we had unfinished Games listed here.</p>
|
||||||
href="freettrpg/"
|
<p>We decided against displaying them and giving people the impression we are working on them currently.</p>
|
||||||
target="_blank"
|
<p>In the Future we will display the released games here</p>
|
||||||
class="listElement">
|
|
||||||
FreeTTRPG</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="freeftf/"
|
|
||||||
target="_blank"
|
|
||||||
class="listElement"
|
|
||||||
>FreeFTF</a
|
|
||||||
>
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<h2>Our Other Projects</h2>
|
<h2>Our Other Projects</h2>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<a href="foss_alternatives/" target="_blank" class="listElement">
|
||||||
<a
|
<li>FOSS Alternatives</li>
|
||||||
href="foss_alternatives/"
|
</a>
|
||||||
target="_blank"
|
<a href="react/" target="_blank" class="listElement">
|
||||||
class="listElement"
|
<li>React</li>
|
||||||
>FOSS Alternatives</a
|
</a>
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="react/"
|
|
||||||
target="_blank"
|
|
||||||
class="listElement"
|
|
||||||
>React</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
href="InterstellarAI-DL/"
|
|
||||||
target="_blank"
|
|
||||||
class="listElement"
|
|
||||||
>Interstellar AI</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
<!-- Cards section with team members -->
|
||||||
|
<h1>Our Team</h1>
|
||||||
|
<section class="cards" id="cards">
|
||||||
|
<div class="card">
|
||||||
|
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
|
||||||
|
<img src="images/Patrick.png" alt="Patrick" />
|
||||||
|
<h3>Patrick_Pluto</h3>
|
||||||
|
<p>
|
||||||
|
The system administrator and our lead coder. He is the one you
|
||||||
|
will need to blame for bugs in the games
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<a href="https://interstellardevelopment.org/code/sageTheDm" class="card-link" target="_blank">
|
||||||
|
<img src="images/sage.png" alt="Sage" />
|
||||||
|
<h3>sageTheDM</h3>
|
||||||
|
<p>
|
||||||
|
Our mostly competent web developer and secondary coder, if you
|
||||||
|
experience any bugs on the website or spelling mistake he is to
|
||||||
|
blame
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
|
||||||
|
<img src="images/nicolas.png" alt="Patrick" />
|
||||||
|
<h3>St. Nicolaus</h3>
|
||||||
|
<p>
|
||||||
|
Our game level and asset designer. He is resposible for all assets in our FreeFTF game.
|
||||||
|
So if a assets looks ugly be mad at him. Also we are not sure if he is human or just a drunk
|
||||||
|
wizard cat but one thing is very clear he is still a novice at his job.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<!-- About Us section -->
|
<!-- About Us section -->
|
||||||
<section id="about">
|
<section id="about">
|
||||||
|
|
@ -99,99 +108,35 @@
|
||||||
<p>
|
<p>
|
||||||
Join us as we strive to create a vibrant community around free software and gaming. Together, we can make a difference and pave the way for a free future!
|
Join us as we strive to create a vibrant community around free software and gaming. Together, we can make a difference and pave the way for a free future!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- Cards section with team members -->
|
|
||||||
<section class="cards">
|
|
||||||
<div class="card">
|
|
||||||
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
|
|
||||||
<img src="images/Patrick.png" alt="Patrick" />
|
|
||||||
<h3>Patrick_Pluto</h3>
|
|
||||||
<p>
|
|
||||||
The system administrator and our lead coder. He is the one you
|
|
||||||
will need to blame for bugs in the games
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<a href="https://interstellardevelopment.org/code/YasinOnm08" class="card-link" target="_blank">
|
|
||||||
<img src="images/yasin.png" alt="Yasin" />
|
|
||||||
<h3>Yasin</h3>
|
|
||||||
<p>
|
|
||||||
Yasin is a proficient programmer with expertise in Java, where he has even developed games,
|
|
||||||
as well as Bash, HTML, CSS, SQL, and NoSQL. His skills span from backend development and
|
|
||||||
automation to web design and database management, making him a versatile asset in any tech project.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<a href="https://interstellardevelopment.org/code/sageTheDm" class="card-link" target="_blank">
|
|
||||||
<img src="images/sage.png" alt="Sage" />
|
|
||||||
<h3>sageTheDM</h3>
|
|
||||||
<p>
|
|
||||||
Our mostly competent web developer and secondary coder, if you
|
|
||||||
experience any bugs on the website or spelling mistake he is to
|
|
||||||
blame
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<a href="https://interstellardevelopment.org/code/NorwayLCAndTrains" class="card-link" target="_blank">
|
|
||||||
<img src="images/norway.png" alt="Norway" />
|
|
||||||
<h3>NorwayLC</h3>
|
|
||||||
<p>
|
|
||||||
Our Development assistant, he is responsible to help our coders
|
|
||||||
don't lose their mind. He does quality of life improvements for
|
|
||||||
the endusers and help to keep the project running.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="card">
|
|
||||||
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" class="card-link" target="_blank">
|
|
||||||
<img src="images/nicolas.png" alt="Patrick" />
|
|
||||||
<h3>St. Nicolaus</h3>
|
|
||||||
<p>
|
|
||||||
Our game level and asset designer. He is resposible for all assets in our FreeFTF game.
|
|
||||||
So if a assets looks ugly be mad at him. Also we are not sure if he is human or just a drunk
|
|
||||||
wizard cat but one thing is very clear he is still a novice at his job.
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section id="vision">
|
<section id="vision">
|
||||||
<h2>Our Vision</h2>
|
<h2>Our Vision</h2>
|
||||||
<h2>Interstellar Development: Free Software is Our Passion</h2>
|
<h2>Interstellar Development: Free Software is Our Passion</h2>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
At Interstellar Development, we embarked on this journey to create a more organized and efficient approach to developing free and open-source software, with a particular focus on gaming. We recognized a significant gap in the availability and quality of free software games, which often fail to meet the expectations of users or simply do not exist. Our mission is to fill this void and elevate the standards of free gaming experiences.
|
At Interstellar Development, we embarked on this journey to create a more organized and efficient approach to developing free and open-source software, with a particular focus on gaming. We recognized a significant gap in the availability and quality of free software games, which often fail to meet the expectations of users or simply do not exist. Our mission is to fill this void and elevate the standards of free gaming experiences.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Our primary goal is to target games that are currently unplayable on GNU/Linux and FreeBSD systems. We aim to develop high-quality alternatives that not only provide enjoyable gameplay but also adhere to the principles of free software. Additionally, we are committed to identifying and addressing other areas within the software ecosystem that lack free alternatives, ensuring that users have access to a diverse range of tools and applications that respect their freedom.
|
Our primary goal is to target games that are currently unplayable on GNU/Linux and FreeBSD systems. We aim to develop high-quality alternatives that not only provide enjoyable gameplay but also adhere to the principles of free software. Additionally, we are committed to identifying and addressing other areas within the software ecosystem that lack free alternatives, ensuring that users have access to a diverse range of tools and applications that respect their freedom.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
At Interstellar Development, we firmly believe that the path to true freedom for computer users lies in the adoption and promotion of free software. To this end, we are dedicated to licensing all of our projects under copyleft free and open-source software licenses. This commitment ensures that our games and software remain free for everyone to play, modify, and share, fostering a culture of collaboration and innovation within the community.
|
At Interstellar Development, we firmly believe that the path to true freedom for computer users lies in the adoption and promotion of free software. To this end, we are dedicated to licensing all of our projects under copyleft free and open-source software licenses. This commitment ensures that our games and software remain free for everyone to play, modify, and share, fostering a culture of collaboration and innovation within the community.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
We understand that community involvement is crucial to our success. While we are not currently accepting donations, we invite you to support us by providing feedback, reporting issues, and suggesting improvements. Your insights are invaluable in helping us refine our projects and enhance the user experience.
|
We understand that community involvement is crucial to our success. While we are not currently accepting donations, we invite you to support us by providing feedback, reporting issues, and suggesting improvements. Your insights are invaluable in helping us refine our projects and enhance the user experience.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
If you feel compelled to contribute financially, we encourage you to consider donating to the Free Software Foundation. Their unwavering support and advocacy for free software principles have been instrumental in our journey, and your contributions to them help sustain the broader movement that enables us to create these games.
|
If you feel compelled to contribute financially, we encourage you to consider donating to the Free Software Foundation. Their unwavering support and advocacy for free software principles have been instrumental in our journey, and your contributions to them help sustain the broader movement that enables us to create these games.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Together, we can build a vibrant community around free software and gaming, paving the way for a future where everyone has access to high-quality, open-source alternatives. Join us in our mission to make a difference and champion the cause of free software for all!
|
Together, we can build a vibrant community around free software and gaming, paving the way for a future where everyone has access to high-quality, open-source alternatives. Join us in our mission to make a difference and champion the cause of free software for all!
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
@ -199,22 +144,3 @@
|
||||||
<footer-component></footer-component>
|
<footer-component></footer-component>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
||||||
<!-- This Gravestone simbolices that a certain someone will not let me have fun on this website -->
|
|
||||||
<!--
|
|
||||||
_____________________
|
|
||||||
| |
|
|
||||||
| R.I.P |
|
|
||||||
|_____________________|
|
|
||||||
| |
|
|
||||||
| HERE LIES |
|
|
||||||
| MY HOPES WHO |
|
|
||||||
| LIVED AND DIED |
|
|
||||||
| WITH HONOR |
|
|
||||||
| AND |
|
|
||||||
| DIGNITY |
|
|
||||||
| |
|
|
||||||
|_____________________|
|
|
||||||
|
|
||||||
-->
|
|
||||||
162
styles.css
162
styles.css
|
|
@ -51,50 +51,109 @@ body {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Header styling */
|
/* Header Styling */
|
||||||
|
/* Header Styling */
|
||||||
header {
|
header {
|
||||||
background-color: var(--dark-blue);
|
background-color: var(--dark-blue);
|
||||||
|
height: 5em;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 15px 20px;
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-bottom: 10em;
|
padding: 15px 20px;
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
backdrop-filter: blur(5px);
|
backdrop-filter: blur(5px);
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
margin-bottom: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Burger Menu Styling */
|
||||||
|
.burger-menu {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.8em;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
padding: 0;
|
||||||
|
z-index: 110;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dropdown Menu (Hidden by Default) */
|
||||||
|
.div-menu {
|
||||||
|
z-index: 1;
|
||||||
|
background-color: var(--light-blue);
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-menu li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1em;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-menu a {
|
||||||
|
width: 100%;
|
||||||
|
padding: 8px 0;
|
||||||
|
text-align: center;
|
||||||
|
color: #ffffff;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-menu a:hover {
|
||||||
|
background-color: #34495e;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Menu Animation and Styling */
|
||||||
|
.menu {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: var(--light-blue);
|
||||||
|
position: absolute;
|
||||||
|
top: -50vh;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 5;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: large;
|
||||||
|
transition: top 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu.active {
|
||||||
|
display: flex;
|
||||||
|
top: 4em;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header Content Container */
|
||||||
.header-content {
|
.header-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
header ul {
|
/* Project Name Styling */
|
||||||
list-style: none;
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
header ul li a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: var(--accent-color);
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
transition: background-color var(--transition-speed), color var(--transition-speed);
|
|
||||||
}
|
|
||||||
|
|
||||||
header ul li a:hover {
|
|
||||||
background-color: rgba(255, 221, 85, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
box-shadow: 0 0 10px var(--accent-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Old project name styling */
|
|
||||||
.project-name {
|
.project-name {
|
||||||
font-size: 1.5em;
|
font-size: 2em;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: color var(--transition-speed), text-shadow var(--transition-speed);
|
transition: color var(--transition-speed), text-shadow var(--transition-speed);
|
||||||
|
|
@ -142,7 +201,7 @@ article ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
article ul li {
|
article ul a li {
|
||||||
background-color: var(--light-blue);
|
background-color: var(--light-blue);
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
@ -150,12 +209,12 @@ article ul li {
|
||||||
transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
|
transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
article ul li:hover {
|
article ul a li:hover {
|
||||||
background-color: rgba(68, 80, 124, 0.9);
|
background-color: rgba(68, 80, 124, 0.9);
|
||||||
box-shadow: 0 0 10px var(--accent-color);
|
box-shadow: 0 0 10px var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
article ul li a {
|
article ul a li{
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--accent-color);
|
color: var(--accent-color);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
@ -180,9 +239,9 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Card container styles */
|
/* Card container styles */
|
||||||
section .cards {
|
.cards {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
grid-template-columns: repeat(3, 1fr); /* Display 3 cards per line */
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
}
|
}
|
||||||
|
|
@ -200,13 +259,11 @@ section .card a {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Card styles */
|
/* Card styles */
|
||||||
section .card {
|
section .card {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9));
|
background: linear-gradient(180deg, rgba(0, 0, 50, 0.9), rgba(10, 10, 100, 0.9), rgba(30, 30, 150, 0.9));
|
||||||
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1);
|
box-shadow: 0 5px 20px rgba(0, 0, 50, 0.8), 0 0 10px rgba(255, 255, 255, 0.1);
|
||||||
border: 1px solid #2e3a60;
|
border: 1px solid #2e3a60;
|
||||||
|
|
@ -218,6 +275,7 @@ section .card {
|
||||||
transition: background 0.5s ease, transform 0.4s ease, box-shadow 0.5s ease;
|
transition: background 0.5s ease, transform 0.4s ease, box-shadow 0.5s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hover effect */
|
||||||
section .card:hover {
|
section .card:hover {
|
||||||
transform: translateY(-8px);
|
transform: translateY(-8px);
|
||||||
background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9));
|
background: linear-gradient(180deg, rgba(30, 30, 150, 0.9), rgba(40, 0, 100, 0.9), rgba(100, 0, 150, 0.9));
|
||||||
|
|
@ -275,7 +333,6 @@ section .card:hover .suit-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Keyframes for spinning element */
|
/* Keyframes for spinning element */
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
0% {
|
0% {
|
||||||
|
|
@ -302,40 +359,39 @@ form input,
|
||||||
form textarea {
|
form textarea {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
background-color: var(--light-blue);
|
background-color: var(--light-blue);
|
||||||
border: 1px solid #3a4971;
|
border: 1px solid #3a4b7f;
|
||||||
border-radius: 4px;
|
border-radius: var(--border-radius);
|
||||||
}
|
|
||||||
|
|
||||||
form input,
|
|
||||||
form textarea {
|
|
||||||
width: 100%;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
margin-bottom: 15px;
|
margin: 10px 0;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
form button {
|
form input[type="submit"] {
|
||||||
background-color: var(--accent-color);
|
background-color: var(--accent-color);
|
||||||
color: var(--background-color);
|
color: #fff;
|
||||||
border: none;
|
border: none;
|
||||||
padding: 10px 20px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color var(--transition-speed);
|
transition: background-color var(--transition-speed);
|
||||||
}
|
}
|
||||||
|
|
||||||
form button:hover {
|
form input[type="submit"]:hover {
|
||||||
background-color: var(--accent-hover-color);
|
background-color: var(--accent-hover-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
li a.listElement{
|
/* Footer Styling */
|
||||||
display: block;
|
footer {
|
||||||
width: 100%;
|
background-color: var(--dark-blue);
|
||||||
height: 100%;
|
padding: 10px 20px;
|
||||||
text-decoration: none;
|
color: var(--text-color);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive design */
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
.cards {
|
||||||
|
grid-template-columns: 1fr; /* 1 card per line on smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
header ul {
|
header ul {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue