204 lines
5.8 KiB
HTML
204 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Fédération Française de Mots Fléchés (FFFLÉCHÉ)</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Arial', sans-serif;
|
|
margin: 0;
|
|
background-color: #f8f9fa;
|
|
color: #343a40;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Style pour les titres en forme de carrés avec flèches */
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.title-square {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
font-weight: bold;
|
|
margin-right: -0.2rem;
|
|
}
|
|
|
|
.title-arrow {
|
|
font-size: 1.5rem;
|
|
color: #007bff;
|
|
}
|
|
|
|
/* Style pour l'acronyme FFFLECHE en cases de mots fléchés */
|
|
.fffleche-grid {
|
|
display: inline-grid;
|
|
grid-template-columns: repeat(8, 1fr); /* 8 colonnes pour FFFLECHE */
|
|
gap: 0px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.fffleche-cell {
|
|
background-color: #007bff;
|
|
border: 1px solid #fff;
|
|
border-right: 0;
|
|
width: 25px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-weight: bold;
|
|
padding: 3px;
|
|
margin: 0px;
|
|
color: #fff;
|
|
}
|
|
.fffleche-cell:last-child {
|
|
border-right: 1px solid #fff;
|
|
}
|
|
|
|
/* Style général des sections */
|
|
section {
|
|
margin: 0 auto;
|
|
max-width: 800px;
|
|
padding: 2rem;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 2rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
section h2 {
|
|
color: #007bff;
|
|
border-bottom: 2px solid #007bff;
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
/* Style pour les tableaux */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #dee2e6;
|
|
padding: 0.75rem;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #e9ecef;
|
|
font-weight: 500;
|
|
}
|
|
|
|
tbody tr:nth-child(odd) {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* Style pour les liens */
|
|
a {
|
|
color: #007bff;
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
a:hover {
|
|
color: #0056b3;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Style pour l'en-tête et le pied de page */
|
|
header {
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
padding: 2rem 0;
|
|
text-align: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
header h1 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
header p {
|
|
font-size: 1.2rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem 0;
|
|
background-color: #343a40;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<header>
|
|
<div>
|
|
<div class="fffleche-grid"><div class="fffleche-cell">F</div><div class="fffleche-cell">F</div><div class="fffleche-cell">F</div><div class="fffleche-cell">L</div><div class="fffleche-cell">E</div><div class="fffleche-cell">C</div><div class="fffleche-cell">H</div><div class="fffleche-cell">E</div></div>
|
|
</div>
|
|
<h1>Fédération Française de Mots Fléchés</h1>
|
|
<p>Un univers de lettres et de défis pour les passionné·es de mots fléchés.</p>
|
|
</header>
|
|
|
|
<section>
|
|
<div class="section-title">
|
|
<div class="title-square">FFFLÉCHÉ</div>
|
|
<span class="title-arrow">➔</span>
|
|
<h2>À propos de la FFFLÉCHÉ</h2>
|
|
</div>
|
|
<p>La Fédération Française de Mots Fléchés (FFFLÉCHÉ) est une association dédiée à la promotion et au développement des mots fléchés en France. Nous organisons des événements, publions des grilles variées et soutenons les créateurs de mots fléchés pour enrichir cette activité ludique et intellectuelle.</p>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="section-title">
|
|
<div class="title-square">Grilles</div>
|
|
<span class="title-arrow">➔</span>
|
|
<h2>Grilles par Année</h2>
|
|
</div>
|
|
|
|
<h3>2025</h3>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Titre</th>
|
|
<th>Description</th>
|
|
<th>Télécharger PDF</th>
|
|
<th>Télécharger Source</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Grille Spéciale Fêtes</td>
|
|
<td>Une grille festive pour les moments de convivialité.</td>
|
|
<td><a href="#">PDF</a></td>
|
|
<td><a href="#">Source</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Grille Estivale</td>
|
|
<td>Une grille ensoleillée pour les vacances d'été.</td>
|
|
<td><a href="#">PDF</a></td>
|
|
<td><a href="#">Source</a></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
</section>
|
|
|
|
<footer>
|
|
<p>© 2026 Fédération Française de Mots Fléchés</p>
|
|
<p>Contenu et site sous <a href="https://anticapitalist.software/acsl_french">licence anticapitaliste</a>. Chaque grille a sa propre licence.</p>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|
|
|