Compare commits
5 commits
f34cd19677
...
4d7a8436f8
| Author | SHA1 | Date | |
|---|---|---|---|
| 4d7a8436f8 | |||
|
10d1aaa954 | ||
|
|
ae765055e4 | ||
|
|
4d90ba80a5 | ||
|
|
0fa4dc78dd |
11 changed files with 727 additions and 0 deletions
49
contact-form.js
Normal file
49
contact-form.js
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
*
|
||||
* 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:info@photofuel.tech?subject=${subject}&body=${body}`;
|
||||
|
||||
// Open the default mail client
|
||||
window.location.href = mailtoLink;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// @license-end
|
||||
58
contact.html
Normal file
58
contact.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!--
|
||||
freeftf website
|
||||
Copyright (C) 2024 sageTheDM
|
||||
|
||||
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>
|
||||
<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>
|
||||
41
footer.js
Normal file
41
footer.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
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
|
||||
45
header.js
Normal file
45
header.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||
|
||||
/*
|
||||
* freeftf website
|
||||
* Copyright (C) 2024 sageTheDM
|
||||
*
|
||||
* 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/>.
|
||||
*/
|
||||
|
||||
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 |
164
index.html
Normal file
164
index.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!--
|
||||
freeftf website
|
||||
Copyright (C) 2024 sageTheDM
|
||||
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" />
|
||||
<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>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ipsum commodi labore facere, dolore ullam expedita quam magni voluptas mollitia enim natus voluptates rerum, optio iure incidunt voluptatem provident placeat! Lorem ipsum dolor sit amet consectetur adipisicing elit. A minima neque nostrum libero excepturi ut dolor quas, temporibus, aspernatur itaque optio voluptatibus eligendi ipsa aperiam voluptas assumenda quaerat hic eum! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum nam iste, necessitatibus esse, praesentium tenetur dolorum vel id delectus mollitia quo commodi omnis nulla hic debitis pariatur reiciendis enim possimus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam quaerat veniam porro voluptatem aperiam accusamus asperiores voluptate esse, delectus impedit quo perspiciatis doloremque nemo ipsam, autem illum magni facilis maiores. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam ex in magni vitae praesentium itaque odit dignissimos. Nam perferendis consequuntur, ex dicta laudantium eveniet debitis reiciendis qui commodi ad molestiae.
|
||||
</p>
|
||||
|
||||
<!-- Cards section with team members -->
|
||||
<section class="cards">
|
||||
<div class="card">
|
||||
<a href="https://interstellardevelopment.org/code/Patrick_Pluto" 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://interstellardevelopment.org/code/sageTheDm" 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://interstellardevelopment.org/code/NorwayLCAndTrains" 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">
|
||||
<h2>Our vision</h2>
|
||||
<h2>Our Vision: Crafting a Future of Open Source</h2>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
|
||||
<h3>Lorem Ipsum</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil autem eligendi optio! Id doloremque itaque dignissimos sit minima veniam libero ex. Possimus repudiandae unde sapiente et, a ipsam dicta nobis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab optio adipisci voluptatibus, veniam laborum facere ducimus eius? Minus expedita repellat facere animi numquam voluptas sequi consequuntur commodi iure, maiores fugit.
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<!-- Custom footer component -->
|
||||
<footer-component></footer-component>
|
||||
</body>
|
||||
</html>
|
||||
370
styles.css
Normal file
370
styles.css
Normal file
|
|
@ -0,0 +1,370 @@
|
|||
/*
|
||||
freeftf website
|
||||
Copyright (C) 2024 sageTheDM
|
||||
|
||||
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/>.
|
||||
*/
|
||||
* {
|
||||
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…
Reference in a new issue