Premier commit
This commit is contained in:
+180
@@ -0,0 +1,180 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user