Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Collectif Corse - Polyphonies Corses en Normandie</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| font-family: 'Cormorant Garamond', serif; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) ; | |
| color: #f0e6d2 ; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| overflow-y: auto; | |
| position: relative; | |
| margin: 0 ; | |
| padding: 0 ; | |
| } | |
| /* Animated background elements */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| radial-gradient(circle at 20% 50%, rgba(204, 51, 51, 0.1) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 80%, rgba(139, 0, 0, 0.1) 0%, transparent 50%); | |
| pointer-events: none; | |
| z-index: 0; | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 1; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| header { | |
| text-align: center; | |
| padding: 60px 20px 40px; | |
| border-bottom: 3px solid #cc3333; | |
| margin-bottom: 60px; | |
| position: relative; | |
| } | |
| h1 { | |
| font-family: 'Cinzel', serif; | |
| font-size: 3.5rem; | |
| font-weight: 700; | |
| color: #cc3333 ; | |
| text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.8); | |
| margin-bottom: 20px; | |
| letter-spacing: 4px; | |
| text-transform: uppercase; | |
| } | |
| .subtitle { | |
| font-size: 1.8rem; | |
| color: #f0e6d2 ; | |
| font-style: italic; | |
| margin-bottom: 10px; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .tagline { | |
| font-size: 1.3rem; | |
| color: #d4af37 ; | |
| margin-top: 20px; | |
| font-weight: 600; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); | |
| } | |
| .decorative-line { | |
| width: 200px; | |
| height: 3px; | |
| background: linear-gradient(90deg, transparent, #cc3333, transparent); | |
| margin: 30px auto; | |
| } | |
| .main-content { | |
| background: rgba(22, 33, 62, 0.6); | |
| border: 2px solid #cc3333; | |
| border-radius: 15px; | |
| padding: 40px; | |
| margin-bottom: 40px; | |
| box-shadow: 0 15px 50px rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(10px); | |
| } | |
| .section { | |
| margin-bottom: 40px; | |
| } | |
| h2 { | |
| font-family: 'Cinzel', serif; | |
| font-size: 2.2rem; | |
| color: #cc3333 ; | |
| margin-bottom: 25px; | |
| text-align: center; | |
| letter-spacing: 2px; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); | |
| } | |
| .info-box { | |
| background: rgba(15, 52, 96, 0.6); | |
| border-left: 5px solid #d4af37; | |
| padding: 25px; | |
| margin: 20px 0; | |
| border-radius: 8px; | |
| line-height: 1.8; | |
| font-size: 1.2rem; | |
| color: #f0e6d2 ; | |
| } | |
| .info-box strong { | |
| color: #d4af37 ; | |
| font-size: 1.3rem; | |
| } | |
| .highlight { | |
| color: #cc3333 ; | |
| font-weight: 600; | |
| } | |
| .values { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 30px; | |
| margin-top: 30px; | |
| } | |
| .value-card { | |
| background: rgba(15, 52, 96, 0.7); | |
| border: 2px solid #cc3333; | |
| border-radius: 10px; | |
| padding: 30px; | |
| text-align: center; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .value-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(204, 51, 51, 0.4); | |
| } | |
| .value-icon { | |
| font-size: 3rem; | |
| margin-bottom: 15px; | |
| } | |
| .value-card h3 { | |
| font-family: 'Cinzel', serif; | |
| font-size: 1.5rem; | |
| color: #d4af37 ; | |
| margin-bottom: 10px; | |
| } | |
| .value-card p { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| color: #f0e6d2 ; | |
| } | |
| .schedule { | |
| background: rgba(139, 0, 0, 0.3); | |
| border: 2px solid #d4af37; | |
| border-radius: 10px; | |
| padding: 30px; | |
| margin-top: 30px; | |
| text-align: center; | |
| } | |
| .schedule h3 { | |
| font-family: 'Cinzel', serif; | |
| font-size: 2rem; | |
| color: #d4af37 ; | |
| margin-bottom: 20px; | |
| } | |
| .schedule-details { | |
| font-size: 1.3rem; | |
| line-height: 2; | |
| color: #f0e6d2 ; | |
| } | |
| .schedule-details strong { | |
| color: #f0e6d2 ; | |
| font-weight: 700; | |
| } | |
| .schedule-details .time { | |
| font-size: 2rem; | |
| color: #cc3333 ; | |
| font-weight: 700; | |
| display: block; | |
| margin: 15px 0; | |
| } | |
| .quote { | |
| font-style: italic; | |
| font-size: 1.4rem; | |
| text-align: center; | |
| color: #d4af37 ; | |
| margin: 40px 0; | |
| padding: 30px; | |
| border-top: 2px solid #cc3333; | |
| border-bottom: 2px solid #cc3333; | |
| line-height: 1.8; | |
| } | |
| .page-footer { | |
| text-align: center; | |
| padding: 30px 20px; | |
| margin-top: 60px; | |
| border-top: 2px solid #cc3333; | |
| opacity: 0.7; | |
| } | |
| .members { | |
| font-size: 1rem; | |
| color: #d4af37 ; | |
| line-height: 1.6; | |
| } | |
| @media (max-width: 768px) { | |
| h1 { | |
| font-size: 2.5rem; | |
| } | |
| .subtitle { | |
| font-size: 1.3rem; | |
| } | |
| .main-content { | |
| padding: 30px 20px; | |
| } | |
| h2 { | |
| font-size: 2rem; | |
| } | |
| .values { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| /* Subtle animation */ | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .container > * { | |
| animation: fadeIn 1s ease-out; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>A Voce di a Muntagna</h1> | |
| <div class="subtitle">Polyphonies Corses en Terre Normande</div> | |
| <div class="decorative-line"></div> | |
| <div class="tagline">L'âme de la Corse résonne au cœur de la Normandie</div> | |
| </header> | |
| <div class="main-content"> | |
| <section class="section"> | |
| <h2>Notre Mission</h2> | |
| <div class="info-box"> | |
| Nous sommes un collectif passionné qui perpétue la tradition du <strong>chant polyphonique corse</strong>, | |
| cette pratique ancestrale inscrite au patrimoine culturel immatériel de l'UNESCO. | |
| Nos voix s'élèvent pour partager les valeurs d'<span class="highlight">honneur</span>, | |
| de <span class="highlight">fraternité</span> et de <span class="highlight">fierté</span> | |
| qui animent le peuple corse depuis des siècles. | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2>Nos Valeurs</h2> | |
| <div class="values"> | |
| <div class="value-card"> | |
| <div class="value-icon">⛰️</div> | |
| <h3>L'Identità</h3> | |
| <p>L'identité corse, fierté de notre terre et de nos racines</p> | |
| </div> | |
| <div class="value-card"> | |
| <div class="value-icon">🤝</div> | |
| <h3>A Fratellanza</h3> | |
| <p>La fraternité, lien indéfectible qui nous unit</p> | |
| </div> | |
| <div class="value-card"> | |
| <div class="value-icon">🎵</div> | |
| <h3>A Tradizione</h3> | |
| <p>La tradition musicale transmise de génération en génération</p> | |
| </div> | |
| <div class="value-card"> | |
| <div class="value-icon">💪</div> | |
| <h3>L'Onore</h3> | |
| <p>L'honneur et le respect, piliers de notre communauté</p> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="quote"> | |
| "Ci vole à campà per cantà, è cantà per campà"<br> | |
| — Il faut vivre pour chanter, et chanter pour vivre | |
| </div> | |
| <section class="section"> | |
| <h2>Nos Représentations</h2> | |
| <div class="schedule"> | |
| <h3>Rendez-vous Traditionnel</h3> | |
| <div class="schedule-details"> | |
| 📍 <strong>Domaine de Gaston</strong> - Normandie<br> | |
| 🏛️ Au pied du <strong>Manoir</strong><br> | |
| <span class="time">🌙 4h00 du matin</span> | |
| <div style="margin-top: 20px; font-style: italic; color: #d4af37;"> | |
| Dans la nuit normande, nos chants résonnent<br> | |
| comme un écho de nos montagnes corses | |
| </div> | |
| </div> | |
| </div> | |
| <div class="info-box" style="margin-top: 30px;"> | |
| <strong>Performances régulières</strong> — Notre collectif se produit régulièrement en Normandie, | |
| perpétuant la tradition des <span class="highlight">paghjelle</span> et des chants sacrés corses. | |
| Chaque représentation est un moment de communion et de partage de notre héritage culturel. | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2>Nos Chants</h2> | |
| <div class="values"> | |
| <div class="value-card"> | |
| <div class="value-icon">🍷</div> | |
| <h3>Le Bacus</h3> | |
| <p>Un chant festif pour trinquer largement avec le collectif et célébrer la fraternité qui nous unit</p> | |
| </div> | |
| <div class="value-card"> | |
| <div class="value-icon">⚔️</div> | |
| <h3>Le Monôme de Birse</h3> | |
| <p>Un chant solennel qui met en avant les traditions militaires et ouvrières au travers des siècles</p> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section"> | |
| <h2>Le Chant Polyphonique Corse</h2> | |
| <div class="info-box"> | |
| La <strong>paghjella</strong> est au cœur de notre répertoire. Cette forme de chant polyphonique | |
| à trois voix incarne l'âme corse : la <span class="highlight">seconda</span> (voix basse) pose les fondations, | |
| la <span class="highlight">bassu</span> (voix médiane) apporte la profondeur, et la <span class="highlight">terza</span> (voix haute) | |
| s'envole vers les sommets. Ensemble, elles créent une harmonie unique qui traverse les siècles. | |
| </div> | |
| </section> | |
| </div> | |
| <div class="page-footer"> | |
| <div class="decorative-line"></div> | |
| <div class="members"> | |
| Collectif composé par<br> | |
| Benoit • Poupouille • Swan • Charles • Martin | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |