Spaces:
Running
Running
Download index.html from Perseaa/cin-escape: direct link, hf CLI and curl.
- Browser
- Download file 31.8 kB
-
https://huggingface.co/spaces/Perseaa/cin-escape/resolve/main/index.html
- Command line
-
hf download hf://spaces/Perseaa/cin-escape/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Perseaa/cin-escape/resolve/main/index.html
31.8 kB
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cin'Escape - Escape Game à Fougères et Bar à loisirs</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@400;700;900&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| scroll-behavior: smooth; | |
| background-color: #0f0f1a; | |
| color: #e0e0ff; | |
| line-height: 1.6; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Press Start 2P', cursive; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; | |
| } | |
| .hero { | |
| background: | |
| linear-gradient(135deg, rgba(255,0,255,0.3) 0%, rgba(0,204,255,0.3) 100%), | |
| url('https://cin-escape.fr/wp-content/uploads/2023/09/game-room.jpg'); | |
| background-size: cover; | |
| background-position: center; | |
| border-bottom: 4px solid #ff00ff; | |
| box-shadow: 0 0 30px #ff00ff; | |
| } | |
| .room-card { | |
| transition: all 0.3s ease; | |
| background: linear-gradient(145deg, #1a1a2e, #16213e); | |
| border: 1px solid #ff00ff; | |
| box-shadow: 0 0 15px rgba(255, 0, 255, 0.5); | |
| } | |
| .room-card:hover { | |
| transform: translateY(-10px) scale(1.02); | |
| box-shadow: 0 0 30px #ff00ff, 0 0 60px rgba(255, 0, 255, 0.3); | |
| border-color: #00ccff; | |
| } | |
| .stats-item { | |
| position: relative; | |
| background: rgba(0, 0, 0, 0.7) ; | |
| border: 1px solid #00ccff; | |
| } | |
| .stats-item::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 50px; | |
| height: 3px; | |
| background: #00ccff; | |
| box-shadow: 0 0 10px #00ccff; | |
| } | |
| /* Effets néon globaux */ | |
| a, button { | |
| transition: all 0.3s ease; | |
| text-shadow: 0 0 5px currentColor; | |
| } | |
| a:hover, button:hover { | |
| color: #ff00ff ; | |
| text-shadow: 0 0 15px #ff00ff; | |
| } | |
| /* Boutons */ | |
| button { | |
| background: linear-gradient(90deg, #ff00ff 0%, #00ccff 100%) ; | |
| border: none ; | |
| color: black ; | |
| font-weight: bold ; | |
| letter-spacing: 1px; | |
| } | |
| button:hover { | |
| background: linear-gradient(90deg, #ff66ff 0%, #66ffff 100%) ; | |
| box-shadow: 0 0 20px #ff00ff; | |
| } | |
| /* Barres de séparation */ | |
| hr { | |
| border: none; | |
| height: 2px; | |
| background: linear-gradient(90deg, transparent, #ff00ff, #00ccff, transparent); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-black text-white py-4 sticky top-0 z-50 shadow-lg" style="border-bottom: 2px solid #ff00ff; box-shadow: 0 0 20px #ff00ff;"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-film text-2xl text-yellow-500 mr-2"></i> | |
| <span class="text-xl font-bold">CIN'ESCAPE</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#rooms" class="hover:text-yellow-400 transition">Nos Salles</a> | |
| <a href="#pricing" class="hover:text-yellow-400 transition">Tarifs</a> | |
| <a href="#bar" class="hover:text-yellow-400 transition">Bar à Loisirs</a> | |
| <a href="#business" class="hover:text-yellow-400 transition">Entreprises</a> | |
| </div> | |
| <div class="md:hidden"> | |
| <button id="menu-btn" class="text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-black pb-4 px-4"> | |
| <a href="#rooms" class="block py-2 hover:text-yellow-400 transition">Nos Salles</a> | |
| <a href="#pricing" class="block py-2 hover:text-yellow-400 transition">Tarifs</a> | |
| <a href="#bar" class="block py-2 hover:text-yellow-400 transition">Bar à Loisirs</a> | |
| <a href="#business" class="block py-2 hover:text-yellow-400 transition">Entreprises</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero text-white py-20 md:py-32 flex items-center"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">L'escape game qui va vous rendre accro!</h1> | |
| <p class="text-xl md:text-2xl mb-8">10 000 escape-gamers depuis l'ouverture !</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg"> | |
| <i class="fas fa-door-open text-3xl mb-2 text-yellow-400"></i> | |
| <p class="text-xl font-bold">4 Salles</p> | |
| <p class="text-sm">Tout est pensé comme au cinéma</p> | |
| </div> | |
| <div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg"> | |
| <i class="fas fa-glass-cheers text-3xl mb-2 text-yellow-400"></i> | |
| <p class="text-xl font-bold">Bar à loisirs</p> | |
| <p class="text-sm">Bien plus qu'un simple bar</p> | |
| </div> | |
| <div class="stats-item px-6 py-4 bg-black bg-opacity-50 rounded-lg"> | |
| <i class="fas fa-briefcase text-3xl mb-2 text-yellow-400"></i> | |
| <p class="text-xl font-bold">Entreprise</p> | |
| <p class="text-sm">Team building exceptionnel</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Room Section --> | |
| <section class="py-16" style="background: linear-gradient(135deg, #1a0033, #33001a); border-top: 2px solid #ff00ff; border-bottom: 2px solid #00ccff;"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <span class="bg-yellow-400 text-black px-4 py-1 rounded-full text-sm font-bold">Nouveauté 2025</span> | |
| <h2 class="text-3xl md:text-4xl font-bold mt-4">La colère de Zeus</h2> | |
| </div> | |
| <div class="flex flex-col md:flex-row items-center gap-8"> | |
| <div class="md:w-1/2"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2025/03/affiche-colere-zeus.jpg" alt="La colère de Zeus" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <p class="mb-6 text-lg"> | |
| Plusieurs mois après <strong>un premier cambriolage dans le Sky Atrium Museum</strong>, la direction du musée a estimé que la sécurité du bâtiment devait être renforcée. C'est le moment qu'à choisi <strong>le Marionnettiste</strong> pour vous obliger à dérober le <strong>véritable Cœur de Zeus</strong> dans sa salle d'exposition en rénovation. | |
| </p> | |
| <p class="mb-6 text-lg"> | |
| Vous avez une heure pour faire preuve d'une grande dextérité physique, d'une logique imparable et d'un sang-froid remarquable face aux évènements dévastateurs qui se déroulent autour de vous. | |
| </p> | |
| <div class="bg-black text-white p-6 rounded-lg"> | |
| <p class="mb-2"><strong>La Foudre de Zeus fermera officiellement ses portes le dimanche 11 mai 2025 après la dernière séance de 20h15.</strong></p> | |
| <p class="mb-2"><strong>La Colère de Zeus ouvrira, elle, ses portes le vendredi 4 juillet 2025 (pour les vacances d'été).</strong></p> | |
| <p>Niveau Intermédiaire. Capacité : de 2 à 6 joueurs</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Rooms Section --> | |
| <section id="rooms" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Nos 4 salles d'Escape Game</h2> | |
| <p class="text-xl mt-4 max-w-2xl mx-auto"> | |
| Le cinéma est au cœur de cet escape game de Fougères. Tout est pensé, décoré, conçu, scénarisé comme au cinéma ! | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Room 1 --> | |
| <div class="room-card bg-white rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2025/03/affiche-colere-zeus.jpg" alt="La colère de Zeus" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">LA COLERE DE ZEUS</h3> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li> | |
| <li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li> | |
| <li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau intermédiaire</li> | |
| <li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 45 à 65% de réussite</li> | |
| </ul> | |
| <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Room 2 --> | |
| <div class="room-card bg-white rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/affiche-epee.jpg" alt="L'Épée enchantée de Fougères" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">L'ÉPÉE ENCHANTÉE DE FOUGÉRES</h3> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li> | |
| <li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li> | |
| <li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau Intermédiaire</li> | |
| <li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 50% de réussite</li> | |
| </ul> | |
| <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Room 3 --> | |
| <div class="room-card bg-white rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2025/01/sequestrum.jpg" alt="Sequestrum Edition Ultime" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">SEQUESTRUM EDITION ULTIME</h3> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-6 Joueurs</li> | |
| <li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min</li> | |
| <li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau Semi-intermédiaire</li> | |
| <li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> 25 à 40% de réussite</li> | |
| </ul> | |
| <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Room 4 --> | |
| <div class="room-card bg-white rounded-lg overflow-hidden shadow-lg"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2025/05/nuit-comete-cover.jpg" alt="La Nuit de la Comète" class="w-full h-48 object-cover"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">LA NUIT DE LA COMETE</h3> | |
| <ul class="space-y-2 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-users mr-2 text-yellow-500"></i> 2-4 Joueurs</li> | |
| <li class="flex items-center"><i class="fas fa-clock mr-2 text-yellow-500"></i> 60 Min ou +</li> | |
| <li class="flex items-center"><i class="fas fa-signal mr-2 text-yellow-500"></i> Niveau aléatoire</li> | |
| <li class="flex items-center"><i class="fas fa-trophy mr-2 text-yellow-500"></i> Taux variable</li> | |
| </ul> | |
| <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 px-4 rounded transition"> | |
| Réserver | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-16 text-white" style="background: linear-gradient(135deg, #000033, #330033); border-top: 2px solid #00ccff; box-shadow: 0 0 30px rgba(0, 204, 255, 0.3);"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Tarifs Salles / Par Personne</h2> | |
| </div> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Weekday Pricing --> | |
| <div class="lg:w-1/2 bg-gray-700 p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold mb-6 text-center border-b-2 border-yellow-500 pb-2">Du lundi au jeudi</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>2 personnes</span> | |
| <span class="font-bold text-yellow-400">30 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>3 personnes</span> | |
| <span class="font-bold text-yellow-400">23 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>4 personnes</span> | |
| <span class="font-bold text-yellow-400">21 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>5 personnes</span> | |
| <span class="font-bold text-yellow-400">19 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>6 personnes ou +</span> | |
| <span class="font-bold text-yellow-400">18 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>Tarif enfant (8-12 ans)</span> | |
| <span class="font-bold text-yellow-400">12 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2"> | |
| <span>Tarif étudiant (-20%)</span> | |
| <span class="font-bold text-yellow-400">Sur justificatif</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Weekend Pricing --> | |
| <div class="lg:w-1/2 bg-gray-700 p-8 rounded-lg"> | |
| <h3 class="text-2xl font-bold mb-6 text-center border-b-2 border-yellow-500 pb-2">Du vendredi au dimanche</h3> | |
| <ul class="space-y-4"> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>2 personnes</span> | |
| <span class="font-bold text-yellow-400">32 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>3 personnes</span> | |
| <span class="font-bold text-yellow-400">24 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>4 personnes</span> | |
| <span class="font-bold text-yellow-400">22 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>5 personnes</span> | |
| <span class="font-bold text-yellow-400">20 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>6 personnes ou +</span> | |
| <span class="font-bold text-yellow-400">19 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2 border-b border-gray-600"> | |
| <span>Tarif enfant (8-12 ans)</span> | |
| <span class="font-bold text-yellow-400">12 €</span> | |
| </li> | |
| <li class="flex justify-between items-center py-2"> | |
| <span>Tarif étudiant (-20%)</span> | |
| <span class="font-bold text-yellow-400">Sur justificatif</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Offers Section --> | |
| <section class="py-16 bg-yellow-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold">Nos Offres</h2> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Offer 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-4xl mb-4 text-yellow-500"> | |
| <i class="fas fa-hat-cowboy"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Game Master 10 €</h3> | |
| <p class="mb-4"> | |
| Vous connaissez déjà nos salles, mais vous souhaitez faire découvrir celles-ci à vos amis, famille ou collègues : soyez leur GameMaster. | |
| </p> | |
| <p class="text-sm text-gray-600"> | |
| ATTENTION: Cette offre n'est valable que pour une seule personne par groupe | |
| </p> | |
| </div> | |
| <!-- Offer 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-4xl mb-4 text-yellow-500"> | |
| <i class="fas fa-fire"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Moitié prix pour une deuxième chance 50%</h3> | |
| <p> | |
| Vous avez envie de tenter votre chance pour résoudre une seconde fois l'énigme de l'une de nos salles ? Bonne nouvelle, c'est moitié prix pour cette deuxième tentative. | |
| </p> | |
| </div> | |
| <!-- Offer 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow-lg"> | |
| <div class="text-4xl mb-4 text-yellow-500"> | |
| <i class="fas fa-birthday-cake"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Pack Anniversaire 12 €/ Enfant</h3> | |
| <p class="mb-4"> | |
| Le pack comprend le gâteau et une boisson offerte par enfant. Accès aux jeux-vidéos et jeux de société. Un accompagnateur est obligatoire (gratuit). | |
| </p> | |
| <p class="text-sm text-gray-600"> | |
| ATTENTION: le pack n'est valable que le MERCREDI APRES-MIDI. Maximum de 8 enfants. De 8 ans à 14 ans. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bar Section --> | |
| <section id="bar" class="py-16 bg-gray-100"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/10/bar-cin-escape.jpg" alt="Bar Cin'Escape" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Cin'Escape Bar à Loisirs</h2> | |
| <p class="text-xl italic mb-6">Pour ne plus jamais vous ennuyer à Fougères !</p> | |
| <p class="mb-6"> | |
| Un bar à loisirs ? C'est un peu comme un bar mais c'est bien plus que ça ! Dans notre espace convivial de 100 m2, plusieurs coins vous attendent selon votre humeur et votre envie du jour. On y vient pour se rencontrer, échanger, s'amuser, jouer avec les jeux de société et de consoles mis à disposition. | |
| </p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-utensils text-yellow-500 mr-2 text-xl"></i> | |
| <span>Restauration</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-dice text-yellow-500 mr-2 text-xl"></i> | |
| <span>Jeux de société</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-gamepad text-yellow-500 mr-2 text-xl"></i> | |
| <span>Console</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-couch text-yellow-500 mr-2 text-xl"></i> | |
| <span>Espace Cosy</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-16 text-white" style="background: #000; border-top: 2px solid #00ccff; border-bottom: 2px solid #ff00ff; box-shadow: 0 0 40px rgba(255, 0, 255, 0.3);"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/dry-tree-SFCFQRP.png" alt="Escape Room" class="h-16 mx-auto mb-4"> | |
| <p class="text-4xl font-bold">4</p> | |
| <p>Escape Room</p> | |
| </div> | |
| <div> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/candle-SFCFQRP.png" alt="M2" class="h-16 mx-auto mb-4"> | |
| <p class="text-4xl font-bold">100</p> | |
| <p>M2</p> | |
| </div> | |
| <div> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/magic-circle-SFCFQRP.png" alt="Activités" class="h-16 mx-auto mb-4"> | |
| <p class="text-4xl font-bold">10+</p> | |
| <p>Activités</p> | |
| </div> | |
| <div> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/skull-SFCFQRP.png" alt="Capacité" class="h-16 mx-auto mb-4"> | |
| <p class="text-4xl font-bold">6</p> | |
| <p>Capacité d'accueil</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Business Section --> | |
| <section id="business" class="py-16 text-white" style="background: linear-gradient(135deg, #330033, #003333); border-top: 2px solid #ff00ff; border-bottom: 2px solid #00ccff;"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pour les Entreprises & CE</h2> | |
| <p class="mb-6"> | |
| Envie de faire jouer vos collaborateurs ? Ça tombe bien, le jeu en équipe est un formidable outil même dans un cadre professionnel. Profitez de cette expérience unique pour tisser des liens autrement. | |
| </p> | |
| <p class="mb-6"> | |
| Vous êtes membre du CSE (Comité Social et Économique) de votre entreprise et vous cherchez des idées originales de loisirs pour vos collègues ? Vous êtes au bon endroit ! | |
| </p> | |
| <p class="font-bold text-yellow-400 mb-6">Nous nous adaptons à chaque demande.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> | |
| <span>Séance de team building dans nos 3 salles</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> | |
| <span>Privatisation du lieu</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> | |
| <span>Offres spéciales CSE</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-yellow-400 mt-1 mr-2"></i> | |
| <span>Escape Mobile en décor naturel</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <img src="https://cin-escape.fr/wp-content/uploads/2023/09/bar-fougeres.jpg" alt="Espace entreprise" class="rounded-lg shadow-xl w-full"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="text-white py-12" style="background: #000; border-top: 2px solid #00ccff; box-shadow: 0 0 30px rgba(0, 204, 255, 0.3);"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Cin'Escape</h3> | |
| <p>L'escape game qui va vous rendre accro!</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-yellow-400 hover:text-yellow-300 text-xl"><i class="fab fa-tripadvisor"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contact</h3> | |
| <p class="mb-2"><i class="fas fa-map-marker-alt mr-2 text-yellow-400"></i> Fougères, France</p> | |
| <p class="mb-2"><i class="fas fa-phone mr-2 text-yellow-400"></i> +33 XX XX XX XX</p> | |
| <p><i class="fas fa-envelope mr-2 text-yellow-400"></i> contact@cin-escape.fr</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Horaires</h3> | |
| <p class="mb-2">Lundi - Jeudi: 14h - 20h</p> | |
| <p class="mb-2">Vendredi - Samedi: 14h - 22h</p> | |
| <p>Dimanche: 14h - 19h</p> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2023 Cin'Escape. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-btn').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=Perseaa/cin-escape" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |