Gabarit : Titre de niveau 1 (H1)
Titre de niveau 2 (H2)
Consectetur Faux lien PDF elit. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna lobortis molestie suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam. Lien avec la classe LienNouvFen.
Consectetur adipiscing elit. In eu Lien #, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna Lien dans le site suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam.
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
Liste sans puce class="sansPuce" :
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
Liste avec lettre class="listeLettre" :
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus :
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
-
Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
- Consectetur adipiscing elit.
Titre de niveau 3 (H3)
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna lobortis molestie suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam.
Titre de niveau 4 (H4)
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna lobortis molestie suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam.
Titre de niveau 5 (H5)
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique1 senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna lobortis molestie suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam2.
Titre de niveau 6 (H6)
Consectetur adipiscing elit. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi urna sapien, semper eu est nec, porta ornare diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam tempus magna lobortis molestie suscipit. Morbi urna sapien, semper eu est nec, porta ornare diam.
Intertitre : Tableau 1 (barre défilante sur mobile)
Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 |
---|---|---|---|
Lorem ipsum |
|
Curabitur pellentesque porta lorem, in consectetur justo egestas ac | Quisque accumsan neque |
Proin ultricies egestas |
|
Vivamus suscipit rhoncus tempus | Curabitur lacinia finibus magna, non faucibus libero convallis id |
Intertitre : Tableau 1 (barre défilante sur mobile) - accessible
Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 |
---|---|---|---|
Lorem ipsum | Curabitur pellentesque porta lorem, in consectetur justo egestas ac | Quisque accumsan neque | Vivamus suscipit |
Proin ultricies egestas | Vivamus suscipit rhoncus tempus | Curabitur lacinia finibus magna, non faucibus libero convallis id | Non faucibus |
<!-- Tableau type 1 Barre défilante accessible -->
<p class="interTitre tableau1">Intertitre : Tableau 1 (barre défilante sur mobile) - accessible</p>
<p class="visuallyhidden">
<a href="#passerTableau1">Passer le tableau suivant.</a>
</p>
<div class="tableau style1">
<table width="100%" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th id="colonne1" class="quart">Colonne 1</th>
<th id="colonne2" class="quart">Colonne 2</th>
<th id="colonne3" class="quart">Colonne 3</th>
<th id="colonne4" class="quart">Colonne 4</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="colonne1">Lorem ipsum</td>
<td headers="colonne2">Curabitur pellentesque porta lorem, in consectetur justo egestas ac</td>
<td headers="colonne3">Quisque accumsan neque</td>
<td headers="colonne4">Vivamus suscipit</td>
</tr>
<tr>
<td headers="colonne1">Proin ultricies egestas</td>
<td headers="colonne2">Vivamus suscipit rhoncus tempus</td>
<td headers="colonne3">Curabitur lacinia finibus magna, non faucibus libero convallis id</td>
<td headers="colonne4">Non faucibus</td>
</tr>
</tbody>
</table>
</div>
<a href="#" id="passerTableau1"></a>
Intertitre : Tableau 1 (flip entête sur mobile)
Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 | Colonne 5 | Colonne 6 |
---|---|---|---|---|---|
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
Note : Nonsed quidigent aut eum dolorio nserum int, torenecati ommodisqui sant qui optasperibus veribus utem non post aditiur aribusam rehende lentem que con nectio.
Intertitre : Tableau 2 (barre défilante sur mobile)
Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 |
---|---|---|---|
Lorem ipsum |
|
Curabitur pellentesque porta lorem, in consectetur justo egestas ac | Quisque accumsan neque |
Proin ultricies egestas |
|
Vivamus suscipit rhoncus tempus | Curabitur lacinia finibus magna, non faucibus libero convallis id |
Lorem ipsum |
|
Curabitur pellentesque porta lorem, in consectetur justo egestas ac | Quisque accumsan neque |
Intertitre : Tableau 2 (flip entête sur mobile)
Colonne 1 | Colonne 2 | Colonne 3 | Colonne 4 | Colonne 5 | Colonne 6 |
---|---|---|---|---|---|
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
lorem | ipsum | porta | quisque | proin | molestie |
proin | molestie | vivamus | curabitur | lorem | ipsum |
Note. In eu dapibus diam, vel feugiat tellus. Interdum et malesuada fames.
1 Je suis une référence de bas de page lié au contenu et j'ai le style rond avec un lien vers un site.
[2] Je suis une référence de bas de page sans style.