Interstellar commit
This commit is contained in:
Sage The DM
parent
f34cd19677
commit
0fa4dc78dd
11 changed files with 669 additions and 0 deletions
27
contact-form.js
Normal file
27
contact-form.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
// 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:info@photofuel.tech?subject=${subject}&body=${body}`;
|
||||||
|
|
||||||
|
// Open the default mail client
|
||||||
|
window.location.href = mailtoLink;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
41
contact.html
Normal file
41
contact.html
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!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>
|
||||||
|
<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>
|
||||||
22
footer.js
Normal file
22
footer.js
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||||
|
class Footer extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<center>
|
||||||
|
<footer>
|
||||||
|
<div class="footer-content">
|
||||||
|
<p>2024 Interstellar Development | Designed by Squadi the Viking</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</center>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('footer-component', Footer);
|
||||||
|
|
||||||
|
// @license-end
|
||||||
26
header.js
Normal file
26
header.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||||
|
class Header extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback() {
|
||||||
|
this.innerHTML = `
|
||||||
|
<header>
|
||||||
|
<div class="header-content">
|
||||||
|
<div><a href="index.html" class="project-name">Interstellar Development</a></div>
|
||||||
|
<ul>
|
||||||
|
<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>
|
||||||
|
</header>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('header-component', Header);
|
||||||
|
|
||||||
|
// @license-end
|
||||||
BIN
images/Patrick.png
Normal file
BIN
images/Patrick.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
BIN
images/norway.png
Normal file
BIN
images/norway.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
BIN
images/sage.png
Normal file
BIN
images/sage.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 385 KiB |
BIN
images/star.jpg
Normal file
BIN
images/star.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
BIN
images/tander.png
Normal file
BIN
images/tander.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
200
index.html
Normal file
200
index.html
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<script src="header.js" type="text/javascript" defer></script>
|
||||||
|
<script src="footer.js" type="text/javascript" defer></script>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
<title>Interstellar Development</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- Custom header component -->
|
||||||
|
<header-component></header-component>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<section id="project">
|
||||||
|
<h1>Our Projects</h1>
|
||||||
|
|
||||||
|
<h2>Our Games</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.freettrpg.org/" target="_blank">FreeTTRPG</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://patrick_pluto.codeberg.page/freeftf/"
|
||||||
|
target="_blank"
|
||||||
|
>FreeFTF</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2>Our Other Projects</h2>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href="https://patrick_pluto.codeberg.page/foss_alternatives/"
|
||||||
|
target="_blank"
|
||||||
|
>FOSS Alternatives</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- About Us section -->
|
||||||
|
<section id="about">
|
||||||
|
<h2>About Us</h2>
|
||||||
|
<h1>This is just a filler text</h1>
|
||||||
|
<p>
|
||||||
|
Have you ever felt that a new game you bought lacks soul, as if it was
|
||||||
|
made without love or passion? Or maybe you've noticed that the tools
|
||||||
|
you use seem to watch your every move, leaving you feeling monitored
|
||||||
|
and uneasy. Even after paying for a subscription, do you feel like you
|
||||||
|
don’t truly own the software you rely on? We’ve felt the same way, and
|
||||||
|
we’re here to change that. We are an international group of
|
||||||
|
programmers, united by a common goal: to reshape the world of
|
||||||
|
technology. With team members from Switzerland, Norway, and beyond,
|
||||||
|
we're a diverse collective of students and developers who believe in
|
||||||
|
the power of open-source software. Open source isn’t just a
|
||||||
|
development model for us; it’s a commitment to transparency,
|
||||||
|
community, and user freedom. Inspired by the Free Software Foundation
|
||||||
|
(FSF) and the Free Software Supporters Europe (FSSE), we strive to
|
||||||
|
create software that empowers users, respects their privacy, and
|
||||||
|
fosters collaboration. In a world where much of the software feels
|
||||||
|
corporate and detached, we’re dedicated to creating tools and games
|
||||||
|
with passion and care—products you can trust and truly own. Join us in
|
||||||
|
reshaping the digital landscape, where technology serves you, not the
|
||||||
|
other way around.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Cards section with team members -->
|
||||||
|
<section class="cards">
|
||||||
|
<div class="card">
|
||||||
|
<a href="https://patrick_pluto.codeberg.page/" class="card-link">
|
||||||
|
<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://jane_doe.example.com" class="card-link">
|
||||||
|
<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://john_smith.example.com" class="card-link">
|
||||||
|
<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>
|
||||||
|
<!-- Keep this as a comment unti5l further notice -->
|
||||||
|
<!--
|
||||||
|
<div class="card">
|
||||||
|
<a href="https://emily_jones.example.com" class="card-link">
|
||||||
|
<img src="images/tander.png" alt="Tanderson" />
|
||||||
|
<h3>Tanderson</h3>
|
||||||
|
<p>
|
||||||
|
Our Wildcard he just randomly commit code improvements gives us
|
||||||
|
tips and vanishes again. No one can truly understand him, but
|
||||||
|
without him the project would not be running
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</div> -->
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="vision">
|
||||||
|
<h1>This is just a filler text</h1>
|
||||||
|
<h2>Our vision</h2>
|
||||||
|
<h2>Our Vision: Crafting a Future of Open Source</h2>
|
||||||
|
|
||||||
|
<h3>The Beginning: A Need for Change</h3>
|
||||||
|
<p>
|
||||||
|
In a world dominated by soulless, profit-driven software, we felt a
|
||||||
|
deep dissatisfaction with the state of the tech industry. Many of us
|
||||||
|
have experienced the frustration of using tools that feel invasive,
|
||||||
|
with constant surveillance and restrictions. We've all been
|
||||||
|
there—buying a game that lacks passion, subscribing to software that
|
||||||
|
we never truly own, or feeling trapped in ecosystems designed to
|
||||||
|
profit off our data. These experiences led us to a simple, yet
|
||||||
|
profound question: <em>What if technology could be different?</em>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>2023: The Seed of an Idea</h3>
|
||||||
|
<p>
|
||||||
|
In 2023, a group of fresh-faced students from Switzerland, Norway, and
|
||||||
|
beyond came together with a shared dream. United by our love for
|
||||||
|
coding and our belief in the power of open-source software, we set out
|
||||||
|
to challenge the status quo. We were inspired by the pioneers of the
|
||||||
|
Free Software Movement (FSM) and the values they championed:
|
||||||
|
transparency, freedom, and community.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>2024: Building the Foundation</h3>
|
||||||
|
<p>
|
||||||
|
By 2024, our team had grown, and so had our ambitions. We began
|
||||||
|
working on our first projects, focusing on creating games and tools
|
||||||
|
that were not just free to use, but free to modify, share, and
|
||||||
|
improve. Our mission was clear: to bring open-source alternatives to
|
||||||
|
the mainstream, offering users a genuine choice in a market saturated
|
||||||
|
with proprietary solutions.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>2025: Expanding Our Horizons</h3>
|
||||||
|
<p>
|
||||||
|
As our community grew, so did our impact. In 2025, we launched several
|
||||||
|
successful projects, each embodying our core values of openness and
|
||||||
|
collaboration. We forged partnerships with like-minded organizations
|
||||||
|
and began to make waves in the tech world. Our tools and games started
|
||||||
|
gaining recognition for their quality, security, and the freedom they
|
||||||
|
offered users.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>2026 and Beyond: Shaping the Future</h3>
|
||||||
|
<p>
|
||||||
|
Looking ahead, we see a future where open-source software is the norm,
|
||||||
|
not the exception. We envision a world where users are empowered to
|
||||||
|
take control of their digital lives, where technology serves the needs
|
||||||
|
of people, not corporations. Our goal is to continue expanding our
|
||||||
|
portfolio of open-source projects, making them accessible to everyone,
|
||||||
|
regardless of their background or technical expertise.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h3>Our Commitment</h3>
|
||||||
|
<p>
|
||||||
|
Our vision is not just about the products we create; it's about the
|
||||||
|
culture we want to build. We are committed to fostering a global
|
||||||
|
community of developers, gamers, and tech enthusiasts who share our
|
||||||
|
passion for open source. Together, we believe we can create a more
|
||||||
|
just, equitable, and innovative digital world.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Join us on this journey as we work to bring open-source tools and
|
||||||
|
games to the market for everyone to enjoy. Let's reshape the future of
|
||||||
|
technology, one line of code at a time.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<!-- Custom footer component -->
|
||||||
|
<footer-component></footer-component>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
353
styles.css
Normal file
353
styles.css
Normal file
|
|
@ -0,0 +1,353 @@
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Body styling */
|
||||||
|
body {
|
||||||
|
background-color: #0b0c1d; /* Deep space blue */
|
||||||
|
color: #c7d5e0; /* Light gray-blue text for contrast */
|
||||||
|
font-family: "Arial", sans-serif;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 0 20px;
|
||||||
|
background-image: url("images/star.jpg"); /* Starry, mystical background */
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header styling */
|
||||||
|
header {
|
||||||
|
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||||
|
position: fixed;
|
||||||
|
width: 100%;
|
||||||
|
padding: 15px 20px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
margin-bottom: 10em;
|
||||||
|
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.7); /* Deeper shadow for a mystic effect */
|
||||||
|
backdrop-filter: blur(5px); /* Blur effect for a mystical aura */
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffdd55; /* Warm star-like yellow */
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 5px 10px;
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a:hover {
|
||||||
|
background-color: rgba(255, 221, 85, 0.3); /* Glowing yellow hover effect */
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 0 10px #ffdd55; /* Subtle glow on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-name {
|
||||||
|
font-size: 1.5em;
|
||||||
|
color: #ffdd55; /* Star yellow */
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-name:hover {
|
||||||
|
color: #ffd700; /* Bright golden-yellow for hover effect */
|
||||||
|
text-shadow: 0 0 10px #ffd700; /* Glowing text effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Article styling */
|
||||||
|
article {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 6.25em auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||||
|
backdrop-filter: blur(5px); /* Blur effect for mystical atmosphere */
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: #ffdd55; /* Star yellow */
|
||||||
|
text-shadow: 0 0 15px #ffdd55; /* Glowing text effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
article p {
|
||||||
|
hyphens: auto;
|
||||||
|
color: #c7d5e0; /* Light gray-blue text for better readability */
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Download list styling */
|
||||||
|
article h2 {
|
||||||
|
font-size: 1.8em;
|
||||||
|
color: #ffdd55; /* Star yellow */
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-shadow: 0 0 10px #ffdd55; /* Subtle glow for headings */
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul {
|
||||||
|
list-style-type: none; /* Remove bullet points */
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li {
|
||||||
|
background-color: rgba(46, 58, 95, 0.8); /* Dark blue with transparency */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 10px;
|
||||||
|
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #ffdd55; /* Warm yellow for links */
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.1em;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li:hover {
|
||||||
|
background-color: rgba(68, 80, 124, 0.9); /* Lighter blue on hover */
|
||||||
|
box-shadow: 0 0 10px #ffdd55; /* Soft glow effect on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer styling */
|
||||||
|
footer {
|
||||||
|
background-color: rgba(31, 42, 64, 1); /* Semi-transparent dark blue-gray */
|
||||||
|
padding: 10px 20px;
|
||||||
|
color: #c7d5e0; /* Light gray-blue text */
|
||||||
|
width: 100%;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.7); /* Shadow for depth */
|
||||||
|
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Card styles */
|
||||||
|
section .cards {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
margin-top: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card {
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
background-color: rgba(46, 58, 95, 0.9); /* Dark blue with transparency */
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
|
||||||
|
border: 1px solid #3a4971; /* Slightly lighter border for card edges */
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card:hover {
|
||||||
|
transform: translateY(-5px); /* Slight lift effect */
|
||||||
|
box-shadow: 0 10px 30px rgba(255, 221, 85, 0.5); /* Yellow glow on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card img {
|
||||||
|
height: 80px; /* Image size */
|
||||||
|
width: 80px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 50%; /* Circular image */
|
||||||
|
margin: 0 auto 15px;
|
||||||
|
box-shadow: 0 0 10px rgba(255, 221, 85, 0.5); /* Glow around the image */
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card h3 {
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 1.2em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffdd55; /* Star yellow for card titles */
|
||||||
|
text-shadow: 0 0 10px #ffdd55; /* Glow effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card p {
|
||||||
|
flex-grow: 1;
|
||||||
|
color: #c7d5e0; /* Light gray-blue for card content */
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: url("path-to-cosmic-icon.svg") no-repeat center; /* Space-themed icon */
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card .suit-icon {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background: url("path-to-suit-icon.svg") no-repeat center;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Contact form styles */
|
||||||
|
form {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
background: rgba(31, 42, 64, 0.9); /* Semi-transparent dark blue */
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8); /* Shadow for depth */
|
||||||
|
backdrop-filter: blur(5px); /* Mystical blur effect */
|
||||||
|
}
|
||||||
|
|
||||||
|
form label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #ffdd55; /* Star yellow */
|
||||||
|
}
|
||||||
|
|
||||||
|
form input,
|
||||||
|
form textarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
border: 1px solid #3a4971; /* Slightly lighter border for input fields */
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(
|
||||||
|
46,
|
||||||
|
58,
|
||||||
|
95,
|
||||||
|
0.7
|
||||||
|
); /* Slightly lighter background for inputs */
|
||||||
|
color: #c7d5e0; /* Light gray-blue text for inputs */
|
||||||
|
}
|
||||||
|
|
||||||
|
form button {
|
||||||
|
background-color: #ffdd55; /* Star yellow */
|
||||||
|
color: #0b0c1d; /* Deep space blue for text */
|
||||||
|
border: none;
|
||||||
|
padding: 10px 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
form button:hover {
|
||||||
|
background-color: #ffd700; /* Bright golden-yellow on hover */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive design */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
/* Header */
|
||||||
|
.header-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li {
|
||||||
|
display: block; /* Ensure list items stack vertically */
|
||||||
|
}
|
||||||
|
|
||||||
|
header ul li a {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Article */
|
||||||
|
article {
|
||||||
|
margin: 12em 10px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article h1 {
|
||||||
|
font-size: 1.8em; /* Adjust font size for smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
article h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul {
|
||||||
|
padding-left: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li {
|
||||||
|
font-size: 1em;
|
||||||
|
padding: 8px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
article ul li a {
|
||||||
|
font-size: 1em; /* Ensure links are readable */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
footer {
|
||||||
|
padding: 10px 15px; /* Adjust padding for smaller screens */
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-content {
|
||||||
|
font-size: 0.9em; /* Ensure footer text is readable but not oversized */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Project Name */
|
||||||
|
.project-name {
|
||||||
|
font-size: 1.2em; /* Slightly smaller project name font size for smaller screens */
|
||||||
|
margin-bottom: 10px; /* Adjust spacing below project name */
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card {
|
||||||
|
padding: 12px; /* Adjusted padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
section .card img {
|
||||||
|
height: 60px; /* Adjusted height */
|
||||||
|
width: 60px; /* Adjusted width */
|
||||||
|
border-radius: 8px; /* Adjusted border-radius */
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue