Skip to content

Commit 360eff2

Browse files
TheJupiterDevTheJupiterDev
authored
Add files via upload
1 parent 883fb00 commit 360eff2

File tree

3 files changed

+229
-0
lines changed

3 files changed

+229
-0
lines changed

‎index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Faith and Code Technologies</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="frame">
11+
<header>
12+
<div class="logo">Faith & Code</div>
13+
<nav>
14+
<ul>
15+
<li><a href="#home">Home</a></li>
16+
<li><a href="#about">About</a></li>
17+
<li><a href="#projects">Projects</a></li>
18+
</ul>
19+
</nav>
20+
</header>
21+
22+
<section id="home" class="hero">
23+
<h1>Faith and Code Technologies</h1>
24+
<p>Where Faith Meets Creativity in Code.</p>
25+
</section>
26+
27+
<section id="about" class="about">
28+
<h2>About Us</h2>
29+
<p>A couple of nerds who like to make cool stuff in our spare time. Listening to music, winning (mostly losing) bedwars, <br> and reading books are some of our hobbies.</p>
30+
</section>
31+
32+
<section id="projects" class="projects">
33+
<h2>Our Projects</h2>
34+
<div class="project-grid">
35+
<div class="project-card">
36+
<a href="https://github.com/TheJupiterDev/mDirt" target="_blank">
37+
<h3>mDirt</h3>
38+
<p>A program created in Python & PySide6 to make it easier to add custom blocks, items, and recipes to Minecraft!</p>
39+
</a>
40+
</div>
41+
<div class="project-card">
42+
<a href="https://github.com/JustJoshinDev/O-S-B-S" target="_blank">
43+
<h3>O-S-B-S</h3>
44+
<p>The Open Source Bible System is an app created in Python & PySide6 to solve the issue of no good, free, Bible & notetaking app for MacOS or Windows.</p>
45+
</a>
46+
</div>
47+
<div class="project-card">
48+
<a href="https://github.com/Faith-and-Code-Technologies/OBSAlt" target="_blank">
49+
<h3>OBS-Alt</h3>
50+
<p>Yet another Python & PySide6 app, this was created for fun to test our skills! An app to record gameplay, coding, or whatever!</p>
51+
</a>
52+
</div>
53+
<div class="project-card">
54+
<a href="https://github.com/Faith-and-Code-Technologies/faith-and-code-technologies.github.io" target="_blank">
55+
<h3>This Website</h3>
56+
<p>Every good orginization needs a website, right? So we made this to make sure FACT is a good orginization.</p>
57+
</a>
58+
</div>
59+
</div>
60+
</section>
61+
62+
<footer>
63+
<p>© 2024 Faith and Code Technologies. All rights reserved.</p>
64+
</footer>
65+
</div>
66+
67+
<script src="script.js"></script>
68+
</body>
69+
</html>

‎script.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Smooth scrolling for navigation
2+
document.querySelectorAll('header a').forEach(link => {
3+
link.addEventListener('click', function (e) {
4+
e.preventDefault();
5+
const target = document.querySelector(this.getAttribute('href'));
6+
target.scrollIntoView({ behavior: 'smooth' });
7+
});
8+
});
9+
10+
// Easter Egg: Hidden Konami Code (Up, Up, Down, Down, Left, Right, Left, Right, B, A)
11+
let keysPressed = [];
12+
const secretCode = [
13+
"ArrowUp",
14+
"ArrowUp",
15+
"ArrowDown",
16+
"ArrowDown",
17+
"ArrowLeft",
18+
"ArrowRight",
19+
"ArrowLeft",
20+
"ArrowRight",
21+
"b",
22+
"a",
23+
];
24+
25+
window.addEventListener("keydown", (event) => {
26+
keysPressed.push(event.key);
27+
keysPressed = keysPressed.slice(-secretCode.length);
28+
29+
if (keysPressed.join("") === secretCode.join("")) {
30+
alert("You've unlocked the secret! Jesus loves you!");
31+
}
32+
});

‎style.css‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
/* Global Styles: Modern Dark Theme with Gradient Background */
2+
:root {
3+
--primary-bg: linear-gradient(135deg, #4A90E2, #121212);
4+
--secondary-bg: #1e1e1e;
5+
--accent-color: #4A90E2;
6+
--text-color: #ffffff;
7+
--text-muted: #b3b3b3;
8+
--card-bg: #252525;
9+
--card-shadow: rgba(0, 0, 0, 0.5);
10+
}
11+
12+
body, html {
13+
margin: 0;
14+
padding: 0;
15+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16+
color: var(--text-color);
17+
background: var(--primary-bg);
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
min-height: 100vh;
22+
}
23+
24+
.frame {
25+
max-width: 1200px;
26+
width: 95%;
27+
background-color: var(--secondary-bg);
28+
border-radius: 12px;
29+
padding: 20px;
30+
box-shadow: 0 4px 16px var(--card-shadow);
31+
}
32+
33+
header {
34+
display: flex;
35+
justify-content: space-between;
36+
align-items: center;
37+
padding: 10px 0;
38+
}
39+
40+
header .logo {
41+
font-size: 1.8em;
42+
font-weight: bold;
43+
color: var(--accent-color);
44+
}
45+
46+
header ul {
47+
list-style: none;
48+
display: flex;
49+
gap: 15px;
50+
}
51+
52+
header a {
53+
text-decoration: none;
54+
color: var(--text-color);
55+
font-weight: 500;
56+
transition: color 0.3s ease;
57+
}
58+
59+
header a:hover {
60+
color: var(--accent-color);
61+
}
62+
63+
.hero {
64+
text-align: center;
65+
padding: 40px 0;
66+
}
67+
68+
.hero h1 {
69+
font-size: 2.5em;
70+
margin-bottom: 10px;
71+
}
72+
73+
.hero p {
74+
font-size: 1.2em;
75+
color: var(--text-muted);
76+
}
77+
78+
section {
79+
margin: 20px 0;
80+
text-align: center;
81+
}
82+
83+
.about, .projects, .technologies, .values {
84+
margin-bottom: 20px;
85+
}
86+
87+
.about h2, .projects h2, .technologies h2, .values h2 {
88+
color: var(--accent-color);
89+
margin-bottom: 20px;
90+
}
91+
92+
.project-grid {
93+
display: grid;
94+
gap: 20px;
95+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
96+
justify-content: center;
97+
}
98+
99+
.project-card {
100+
background-color: var(--card-bg);
101+
padding: 20px;
102+
border-radius: 8px;
103+
box-shadow: 0 4px 8px var(--card-shadow);
104+
transition: transform 0.3s ease, box-shadow 0.3s ease;
105+
}
106+
107+
.project-card:hover {
108+
transform: translateY(-5px);
109+
box-shadow: 0 8px 16px var(--card-shadow);
110+
}
111+
112+
.project-card a {
113+
text-decoration: none;
114+
color: var(--text-color);
115+
}
116+
117+
.project-card h3 {
118+
margin: 0 0 10px;
119+
color: var(--accent-color);
120+
}
121+
122+
footer {
123+
text-align: center;
124+
padding: 10px;
125+
color: var(--text-muted);
126+
font-size: 0.9em;
127+
}
128+

0 commit comments

Comments
 (0)