162 lines
7.4 KiB
HTML
162 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Smith & Tech - Staff</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="shortcut icon" href="https://www.smithandtech.com/wp-content/uploads/2025/11/shield-sword-outline-custom-2.png" type="image/x-icon">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
|
|
'marine-dark': '#0f172a',
|
|
'marine-medium': '#1e293b',
|
|
'marine-light': '#334155',
|
|
'marine-accent': '#0ea5e9',
|
|
'text-light': '#f8fafc',
|
|
'text-dark': '#cbd5e1',
|
|
'marine-darker': '#0a101e',
|
|
},
|
|
fontFamily: {
|
|
sans: ['Poppins', 'sans-serif'],
|
|
},
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: #0f172a;
|
|
color: #f8fafc;
|
|
background-image: url('/img/backgrounds/background6.png');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
transition: background-image 1s ease-in-out;
|
|
}
|
|
|
|
|
|
.liquid-glass-container {
|
|
background-color: rgba(15, 23, 42, 0.7);
|
|
backdrop-filter: blur(8px);
|
|
border-radius: 1rem;
|
|
padding: 2rem;
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
|
|
border: 1px solid rgba(51, 65, 85, 0.5);
|
|
}
|
|
|
|
|
|
.staff-card {
|
|
@apply flex flex-col items-center p-6 bg-marine-medium rounded-xl shadow-lg border border-marine-light transition-transform duration-300 hover:scale-105 hover:bg-marine-darker;
|
|
}
|
|
|
|
|
|
.staff-skin {
|
|
@apply w-32 h-32 rounded-full border-4 border-marine-accent mb-4;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
margin: auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="flex-grow flex items-center justify-center p-4">
|
|
<div class="flex flex-col items-center space-y-8 max-w-7xl w-full mx-auto">
|
|
|
|
<header class="w-full text-center mb-8">
|
|
<h1 class="text-5xl md:text-6xl font-extrabold text-marine-accent mb-4">
|
|
Our staff team
|
|
</h1>
|
|
<p class="text-xl text-text-light max-w-2xl mx-auto">
|
|
Meet the people who make the best experience at RujuxMC possible.
|
|
</p>
|
|
<a href="index.html" class="inline-block mt-6 px-6 py-3 rounded-full bg-marine-medium text-text-light text-lg font-semibold transition-colors duration-300 shadow-md hover:bg-marine-darker">
|
|
← Back to main page
|
|
</a>
|
|
</header>
|
|
|
|
<section class="liquid-glass-container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 w-full">
|
|
<div class="staff-card">
|
|
<img src="https://crafatar.com/renders/head/069a79f4-44e9-4726-a5be-fca90e3ddaf5?size=128&overlay" alt="Notch skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
|
|
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">MoWetTheDon</h2>
|
|
<p class="text-marine-accent text-lg text-center">Founder</p>
|
|
<p class="text-text-dark text-center mt-2">The creator of everything. Always looking for ways to innovate and attract new players.</p>
|
|
</div>
|
|
|
|
<div class="staff-card">
|
|
<img src="https://crafatar.com/renders/head/8e9f5e1f-6b7a-4c2f-b8c7-4d9e5f1a2b3c?size=128&overlay" alt="Mod skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
|
|
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">Overimagined.dev</h2>
|
|
<p class="text-marine-accent text-lg text-center">Main mod</p>
|
|
<p class="text-text-dark text-center mt-2">In charge of maintaining peace and resolving conflicts on the server.</p>
|
|
</div>
|
|
|
|
<div class="staff-card">
|
|
<img src="https://crafatar.com/renders/head/7e9f5e1f-6b7a-4c2f-b8c7-4d9e5f1a2b3d?size=128&overlay" alt="Builder skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
|
|
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">ConstructoraPro</h2>
|
|
<p class="text-marine-accent text-lg text-center">Building manager</p>
|
|
<p class="text-text-dark text-center mt-2">Design and build the impressive landscapes of the server.</p>
|
|
</div>
|
|
|
|
<div class="staff-card">
|
|
<img src="https://crafatar.com/renders/head/b8e0b67e-2e06-4b2e-9d2a-e2f6c0d8b31a?size=128&overlay" alt="Helper skin" class="staff-skin" onerror="this.onerror=null;this.src='https://placehold.co/128x128/334155/ffffff?text=Error';">
|
|
<h2 class="text-2xl font-bold text-text-light mt-2 text-center">PixelCraft</h2>
|
|
<p class="text-marine-accent text-lg text-center">Helper</p>
|
|
<p class="text-text-dark text-center mt-2">Always ready to help new players with their doubts.</p>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="p-4 md:p-6 bg-marine-dark text-text-dark text-center text-sm rounded-t-xl mx-auto w-full max-w-7xl mb-4 border-t border-marine-light backdrop-blur-sm bg-opacity-80">
|
|
<p>© 2025 RujuxMC. All right reserved. | Made with ❤️ by Jallox.</p>
|
|
<p class="mt-2">Alowed: <bold>Modify, Host, Commercial-Use</bold>. Not allowed: <bold>Resell / redistribute</bold></p>
|
|
</footer>
|
|
|
|
|
|
|
|
<!-- Background changing script -->
|
|
<!--
|
|
Make sure all the images has the same aspect ratio (16:9 recommended)
|
|
Add your background images in the "backgrounds" array below
|
|
|
|
If you want to disable the background changing feature, remove this script
|
|
or comment it out.
|
|
-->
|
|
<script>
|
|
const backgrounds = [
|
|
'/img/backgrounds/background6.png',
|
|
'/img/backgrounds/background2.png',
|
|
'/img/backgrounds/background3.webp',
|
|
'/img/backgrounds/background4.jpg',
|
|
'/img/backgrounds/background5.jpg',
|
|
'/img/backgrounds/background1.png',
|
|
// Add more backgrounds as needed,
|
|
];
|
|
|
|
let currentIndex = 0;
|
|
const body = document.body;
|
|
|
|
function changeBackground() {
|
|
currentIndex = (currentIndex + 1) % backgrounds.length;
|
|
body.style.backgroundImage = `url('${backgrounds[currentIndex]}')`;
|
|
}
|
|
|
|
setInterval(changeBackground, 15000);
|
|
</script>
|
|
</body>
|
|
</html>
|