| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sento Clan - Élite Fortnite</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| animation: fadeIn 1s ease-out forwards; |
| } |
| |
| .delay-1 { animation-delay: 0.2s; } |
| .delay-2 { animation-delay: 0.4s; } |
| .delay-3 { animation-delay: 0.6s; } |
| .delay-4 { animation-delay: 0.8s; } |
| |
| .gradient-text { |
| background: linear-gradient(45deg, #f72585, #7209b7, #3a0ca3, #4361ee); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .glow:hover { |
| text-shadow: 0 0 10px rgba(114, 9, 183, 0.7); |
| } |
| |
| .stats-card { |
| transition: all 0.3s ease; |
| } |
| |
| .stats-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(114, 9, 183, 0.3); |
| } |
| |
| .member-card { |
| transition: all 0.3s ease; |
| } |
| |
| .member-card:hover { |
| transform: scale(1.05); |
| z-index: 10; |
| } |
| |
| .bg-clan { |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(45deg, #f72585, #7209b7); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 5px 15px rgba(114, 9, 183, 0.4); |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| width: 0; |
| height: 2px; |
| bottom: -2px; |
| left: 0; |
| background: linear-gradient(90deg, #f72585, #7209b7); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white font-sans"> |
| |
| <nav class="bg-clan py-4 px-6 sticky top-0 z-50 shadow-lg"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <img src="https://via.placeholder.com/50" alt="Sento Logo" class="h-10 w-10 rounded-full"> |
| <span class="text-2xl font-bold gradient-text">SENTO</span> |
| </div> |
| |
| <div class="hidden md:flex space-x-8"> |
| <a href="#home" class="nav-link">Accueil</a> |
| <a href="#about" class="nav-link">Le Clan</a> |
| <a href="#members" class="nav-link">Membres</a> |
| <a href="#stats" class="nav-link">Stats</a> |
| <a href="#join" class="nav-link">Recrutement</a> |
| </div> |
| |
| <div class="md:hidden"> |
| <button id="menu-toggle" class="text-2xl focus:outline-none"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobile-menu" class="hidden md:hidden bg-gray-800 mt-2 py-2 rounded-lg"> |
| <div class="flex flex-col space-y-3 px-4"> |
| <a href="#home" class="nav-link py-2">Accueil</a> |
| <a href="#about" class="nav-link py-2">Le Clan</a> |
| <a href="#members" class="nav-link py-2">Membres</a> |
| <a href="#stats" class="nav-link py-2">Stats</a> |
| <a href="#join" class="nav-link py-2">Recrutement</a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <section id="home" class="relative bg-clan py-20 overflow-hidden"> |
| <div class="absolute inset-0 opacity-20"> |
| <div class="absolute inset-0 bg-gradient-to-br from-purple-900 to-blue-900"></div> |
| </div> |
| |
| <div class="container mx-auto px-6 relative z-10"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0 fade-in"> |
| <h1 class="text-5xl md:text-6xl font-bold mb-4"> |
| <span class="gradient-text glow">SENTO</span> CLAN |
| </h1> |
| <h2 class="text-2xl md:text-3xl font-semibold mb-6 text-purple-300">Élite Fortnite Competitive</h2> |
| <p class="text-lg mb-8 text-gray-300 max-w-lg"> |
| Rejoignez l'une des équipes les plus redoutables de la scène compétitive Fortnite. |
| Domination, stratégie et victoire sont notre marque de fabrique. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#join" class="btn-primary px-8 py-3 rounded-full font-bold">Nous Rejoindre</a> |
| <a href="#stats" class="border border-purple-500 text-purple-300 px-8 py-3 rounded-full font-bold hover:bg-purple-900/30 transition">Nos Stats</a> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 fade-in delay-1"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/600x400" alt="Sento Clan in Action" class="rounded-xl shadow-2xl border-4 border-purple-500/30 w-full"> |
| <div class="absolute -bottom-5 -right-5 bg-purple-600 px-4 py-2 rounded-lg shadow-lg"> |
| <span class="font-bold">#1 Clan EU West</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="py-20 bg-gray-800"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4 gradient-text">NOTRE CLAN</h2> |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-6"></div> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Fondé en 2019, Sento s'est rapidement imposé comme une force majeure dans le monde compétitif de Fortnite. |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-10"> |
| <div class="bg-gray-700 p-8 rounded-xl shadow-lg fade-in delay-1"> |
| <div class="text-purple-400 text-4xl mb-4"> |
| <i class="fas fa-trophy"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Compétition</h3> |
| <p class="text-gray-300"> |
| Nous participons à tous les tournois majeurs avec une approche stratégique unique qui nous a valu de nombreuses victoires. |
| </p> |
| </div> |
| |
| <div class="bg-gray-700 p-8 rounded-xl shadow-lg fade-in delay-2"> |
| <div class="text-purple-400 text-4xl mb-4"> |
| <i class="fas fa-users"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Communauté</h3> |
| <p class="text-gray-300"> |
| Plus qu'un clan, nous sommes une famille. Entraide, partage et bonne ambiance sont au cœur de notre philosophie. |
| </p> |
| </div> |
| |
| <div class="bg-gray-700 p-8 rounded-xl shadow-lg fade-in delay-3"> |
| <div class="text-purple-400 text-4xl mb-4"> |
| <i class="fas fa-chart-line"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-3">Progression</h3> |
| <p class="text-gray-300"> |
| Notre programme d'entraînement personnalisé permet à chaque membre d'atteindre son plein potentiel. |
| </p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="members" class="py-20 bg-clan"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4 gradient-text">NOS MEMBRES</h2> |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-6"></div> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Rencontrez nos joueurs d'élite, chacun expert dans son domaine. |
| </p> |
| </div> |
| |
| <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8"> |
| |
| <div class="member-card bg-gray-800 rounded-xl overflow-hidden shadow-lg fade-in delay-1"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x300" alt="Member" class="w-full h-64 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-purple-600 px-3 py-1 rounded-tr-lg"> |
| <span class="font-bold">IGL</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Shadow</h3> |
| <p class="text-purple-300 mb-3">Leader Stratégique</p> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span><i class="fas fa-trophy mr-1"></i> 42 Wins</span> |
| <span><i class="fas fa-headset mr-1"></i> EU West</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="member-card bg-gray-800 rounded-xl overflow-hidden shadow-lg fade-in delay-2"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x300" alt="Member" class="w-full h-64 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-blue-600 px-3 py-1 rounded-tr-lg"> |
| <span class="font-bold">Fragger</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Raven</h3> |
| <p class="text-blue-300 mb-3">Expert Combat</p> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span><i class="fas fa-trophy mr-1"></i> 67 Wins</span> |
| <span><i class="fas fa-headset mr-1"></i> NA East</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="member-card bg-gray-800 rounded-xl overflow-hidden shadow-lg fade-in delay-3"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x300" alt="Member" class="w-full h-64 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-green-600 px-3 py-1 rounded-tr-lg"> |
| <span class="font-bold">Builder</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Tectonic</h3> |
| <p class="text-green-300 mb-3">Maître Construction</p> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span><i class="fas fa-trophy mr-1"></i> 53 Wins</span> |
| <span><i class="fas fa-headset mr-1"></i> EU West</span> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="member-card bg-gray-800 rounded-xl overflow-hidden shadow-lg fade-in delay-4"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x300" alt="Member" class="w-full h-64 object-cover"> |
| <div class="absolute bottom-0 left-0 bg-yellow-600 px-3 py-1 rounded-tr-lg"> |
| <span class="font-bold">Sniper</span> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="text-xl font-bold mb-1">Hawkeye</h3> |
| <p class="text-yellow-300 mb-3">Tireur d'Élite</p> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span><i class="fas fa-trophy mr-1"></i> 48 Wins</span> |
| <span><i class="fas fa-headset mr-1"></i> NA West</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-12 fade-in delay-4"> |
| <a href="#join" class="inline-block btn-primary px-8 py-3 rounded-full font-bold"> |
| Devenir Membre <i class="fas fa-arrow-right ml-2"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="stats" class="py-20 bg-gray-800"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16 fade-in"> |
| <h2 class="text-4xl font-bold mb-4 gradient-text">NOS STATISTIQUES</h2> |
| <div class="w-24 h-1 bg-purple-500 mx-auto mb-6"></div> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Des chiffres qui parlent d'eux-mêmes et témoignent de notre domination. |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> |
| <div class="stats-card bg-gray-700 p-6 rounded-xl text-center fade-in delay-1"> |
| <div class="text-5xl font-bold gradient-text mb-2">1,250+</div> |
| <div class="text-xl text-purple-300">Victoires en Tournois</div> |
| </div> |
| |
| <div class="stats-card bg-gray-700 p-6 rounded-xl text-center fade-in delay-2"> |
| <div class="text-5xl font-bold gradient-text mb-2">87%</div> |
| <div class="text-xl text-purple-300">Taux de Top 10</div> |
| </div> |
| |
| <div class="stats-card bg-gray-700 p-6 rounded-xl text-center fade-in delay-3"> |
| <div class="text-5xl font-bold gradient-text mb-2">24</div> |
| <div class="text-xl text-purple-300">Membres Actifs</div> |
| </div> |
| |
| <div class="stats-card bg-gray-700 p-6 rounded-xl text-center fade-in delay-4"> |
| <div class="text-5xl font-bold gradient-text mb-2">3.2K</div> |
| <div class="text-xl text-purple-300">Eliminations/Mois</div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-700 rounded-xl p-8 shadow-lg fade-in"> |
| <h3 class="text-2xl font-bold mb-6 text-center">Répartition des Victoires par Saison</h3> |
| <div class="h-64"> |
| |
| <div class="flex items-end justify-between h-full border-b-2 border-l-2 border-gray-600 pb-4 pl-4"> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 20%;"></div> |
| <span class="text-xs mt-1">C1</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 35%;"></div> |
| <span class="text-xs mt-1">C2</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 50%;"></div> |
| <span class="text-xs mt-1">C3</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 70%;"></div> |
| <span class="text-xs mt-1">C4</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 85%;"></div> |
| <span class="text-xs mt-1">C5</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 65%;"></div> |
| <span class="text-xs mt-1">C6</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 90%;"></div> |
| <span class="text-xs mt-1">C7</span> |
| </div> |
| <div class="flex flex-col items-center w-1/12"> |
| <div class="bg-purple-500 w-full rounded-t-sm" style="height: 100%;"></div> |
| <span class="text-xs mt-1">C8</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="join" class="py-20 bg-clan"> |
| <div class="container mx-auto px-6"> |
| <div class="max-w-4xl mx-auto bg-gray-800 rounded-xl shadow-xl overflow-hidden fade-in"> |
| <div class="md:flex"> |
| <div class="md:w-1/2 bg-purple-900/30 p-10 flex flex-col justify-center"> |
| <h2 class="text-3xl font-bold mb-4 gradient-text">REJOIGNEZ SENTO</h2> |
| <p class="text-gray-300 mb-6"> |
| Vous pensez avoir le niveau pour intégrer notre clan ? Remplissez le formulaire et nous vous contacterons pour des tests. |
| </p> |
| <div class="space-y-4"> |
| <div class="flex items-center"> |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <span>Niveau compétitif élevé</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <span>Esprit d'équipe</span> |
| </div> |
| <div class="flex items-center"> |
| <div class="bg-purple-600 p-2 rounded-full mr-3"> |
| <i class="fas fa-check"></i> |
| </div> |
| <span>Disponibilité pour les entraînements</span> |
| </div> |
| </div> |
| </div> |
| |
| <div class="md:w-1/2 p-10"> |
| <form id="join-form" class="space-y-5"> |
| <div> |
| <label for="username" class="block mb-1 font-medium">Pseudo Fortnite</label> |
| <input type="text" id="username" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| |
| <div> |
| <label for="platform" class="block mb-1 font-medium">Plateforme</label> |
| <select id="platform" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option value="pc">PC</option> |
| <option value="ps">PlayStation</option> |
| <option value="xbox">Xbox</option> |
| <option value="switch">Switch</option> |
| <option value="mobile">Mobile</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="region" class="block mb-1 font-medium">Région Principale</label> |
| <select id="region" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| <option value="eu">Europe</option> |
| <option value="na">Amérique du Nord</option> |
| <option value="asia">Asie</option> |
| <option value="oce">Océanie</option> |
| <option value="me">Moyen-Orient</option> |
| </select> |
| </div> |
| |
| <div> |
| <label for="stats" class="block mb-1 font-medium">Lien vers vos stats (Tracker Network)</label> |
| <input type="url" id="stats" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500"> |
| </div> |
| |
| <button type="submit" class="w-full btn-primary py-3 rounded-lg font-bold mt-6"> |
| Envoyer la Candidature |
| </button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 py-12"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> |
| <img src="https://via.placeholder.com/40" alt="Sento Logo" class="h-10 w-10 rounded-full"> |
| <span class="text-xl font-bold gradient-text">SENTO CLAN</span> |
| </div> |
| |
| <div class="flex space-x-6 mb-6 md:mb-0"> |
| <a href="#" class="text-2xl text-gray-400 hover:text-purple-400 transition"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="text-2xl text-gray-400 hover:text-blue-400 transition"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="text-2xl text-gray-400 hover:text-red-400 transition"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="text-2xl text-gray-400 hover:text-pink-500 transition"> |
| <i class="fab fa-twitch"></i> |
| </a> |
| </div> |
| |
| <div class="text-gray-400 text-sm"> |
| © 2023 Sento Clan. Tous droits réservés. |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('menu-toggle').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.getElementById('join-form').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| alert('Merci pour votre candidature ! Nous reviendrons vers vous sous peu.'); |
| this.reset(); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| const targetElement = document.querySelector(targetId); |
| |
| |
| const mobileMenu = document.getElementById('mobile-menu'); |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| |
| if (targetElement) { |
| window.scrollTo({ |
| top: targetElement.offsetTop - 80, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| const fadeElements = document.querySelectorAll('.fade-in'); |
| |
| const fadeInObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = 1; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| fadeElements.forEach(element => { |
| element.style.opacity = 0; |
| element.style.transform = 'translateY(20px)'; |
| element.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; |
| fadeInObserver.observe(element); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Adrig33k/sento" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
