180 lines
5.2 KiB
HTML
180 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Postuler - Geo Realms Craft</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
|
<style>
|
|
:root {
|
|
--primary-color: #760202;
|
|
--secondary-color: #2c2c2c;
|
|
--accent-color: #9d0b28;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
background: #f8f9fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.hero {
|
|
background: linear-gradient(45deg, rgba(0,0,0,0.9), rgba(0,0,0,0.7)), url('background/0.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
min-height: 50vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: white;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 20px;
|
|
}
|
|
|
|
.nav-wrapper {
|
|
background: var(--secondary-color);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.section {
|
|
padding: 80px 20px;
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.section.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.requirement-card {
|
|
border-radius: 15px;
|
|
padding: 30px;
|
|
margin: 20px 0;
|
|
background: white;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
|
|
border-left: 5px solid var(--accent-color);
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 16px 45px;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
border-radius: 50px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
gap: 10px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(118, 2, 2, 0.3);
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
footer {
|
|
background: var(--secondary-color);
|
|
color: white;
|
|
padding: 60px 0;
|
|
text-align: center;
|
|
margin-top: 80px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header class="hero">
|
|
<div class="container">
|
|
<h1 class="animate__animated animate__fadeInDown">Postuler</h1>
|
|
<p class="animate__animated animate__fadeInUp delay-1">Rejoignez l'aventure Geo Realms Craft</p>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="nav-wrapper">
|
|
<div class="container">
|
|
<ul class="right hide-on-med-and-down">
|
|
<li><a href="index.html" class="waves-effect">Retour à l'accueil</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="section container">
|
|
<div class="requirement-card animate__animated animate__fadeIn">
|
|
<h2 class="center-align">Conditions requises</h2>
|
|
|
|
<div class="row">
|
|
<div class="col s12 m6">
|
|
<h4>📋 Prérequis</h4>
|
|
<ul class="browser-default">
|
|
<li>Avoir au minimum 18 ans</li>
|
|
<li>Avoir un PC correct</li>
|
|
<li>Avoir Minecraft Java</li>
|
|
<li>Être mature et responsable</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col s12 m6">
|
|
<h4>⚠️ Important</h4>
|
|
<ul class="browser-default">
|
|
<li>Lire attentivement toutes les questions</li>
|
|
<li>Répondre honnêtement</li>
|
|
<li>Une candidature incomplète sera rejetée</li>
|
|
<li>Délai de traitement : jusqu'à 48 heures</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="center-align">
|
|
<a href="https://docs.google.com/forms/d/e/1FAIpQLScsze3Xn7BdvFYn5RukknojyA1Bvy6aJU51p6DWzOE2iRzlbQ/viewform?usp=sf_link" target="_blank" class="cta-button">
|
|
<svg class="icon" viewBox="0 0 24 24" style="width: 24px; height: 24px; fill: currentColor;">
|
|
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
|
</svg>
|
|
Remplir le formulaire
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2025 Geo Realms Craft - Tous droits réservés</p>
|
|
<p>Contact : <a href="https://discord.gg/uP7cDES" class="white-text">Discord Ebony</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.15 });
|
|
|
|
document.querySelectorAll('.section').forEach(section => {
|
|
observer.observe(section);
|
|
});
|
|
|
|
M.AutoInit();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |