Tél : 03 85 48 09 82
CHALON-SUR-SAÔNE
Page Facebook

Le but de cette page est purement technique: elle permet de visualiser la charte graphique afin d'aider au contrôle de son paramétrage et de proposer différentes solutions de mise en page de texte.

Gestion des Multi-Colonnes (Titre de niveau 1 = h1)

Cette zone est un blockquote=citation: utile pour le chapeau d'un article.
Cette page sert à valider le paramétrage de la charte graphique, du choix de la typographie, des tailles des titres et des espacements!

Mise en page 3 colonnes (Titre de niveau 2 = h2)

Espacement de 2% entre chaque colonne et largeur de colonne 32%: 32*3 + 2*2 = 100%

Mise en page 1/3 1/3 1/3

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Mise en page 2/3 1/3

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.


Mise en page 2 colonnes (Titre de niveau 2 : h2)

Espacement de 2% entre chaque colonne et largeur de colonne 49%: 49*2 + 2 = 100%

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.


Mise en page 4 colonnes (Titre de niveau 2 = h2)

Espacement de 2% entre chaque colonne et largeur de colonne à 23,5% : 23.5*4 + 2 * 3 = 100%

Mise en page 1/4 1/2 1/4

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Mise en page 1/4 1/4 1/4 1/4

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 4 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Mise en page 3/4 1/4

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Mise en page 5 colonnes (Titre de niveau 2 = h2)

Espacement de 2% entre chaque colonne et largeur de colonne à 18,4% : 18.4*5 + 2 * 4 = 100%

Mise en page 1/5

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 4 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 5 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Mise en page 6 colonnes (Titre de niveau 2 = h2)

Espacement de 2% entre chaque colonne et largeur de colonne à 18,4% : 15*6 + 2 * 5 = 100%

Mise en page 1/6

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.


Le but de ce texte en gras est de vous aider à déterminer ce que les paramètres par défaut sont avec CSS en emphase et de s'assurer que tous les éléments possibles HTML sont inclus dans ce code html de manière à ne pas manquer les éléments possibles lors de la conception graphique du site.

image pleine largeur

Ceci est un bloc de paragraphe où on inverse les couleurs de fond avec une image pleine largeur qui s'adapte à la largeur de la page (la hauteur varie en fonction pour éviter toute déformation.

Mise en page 1/3 1/3 1/3

Colonne 1 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 2 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Colonne 3 Titre N3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Titre de niveau 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna, ut rhoncus nisl quam et mauris. Nam tempus hendrerit massa, eu cursus leo aliquam eget. In hac habitasse platea dictumst. Vestibulum iaculis pellentesque lectus, nec semper enim vehicula ac. Quisque fringilla, magna et facilisis laoreet, lectus quam feugiat ligula, nec tempor lacus sapien tempor mi. Donec et urna sed urna pretium fermentum quis ac enim. Ut in ipsum et dui sagittis ultricies. Proin ullamcorper vehicula accumsan. Vivamus in libero nec velit ullamcorper tempor eget hendrerit ipsum.

Titre de niveau 3

Phasellus non orci ac leo aliquet placerat. Aliquam et ipsum turpis, sed hendrerit lectus. In tempus porta semper. Nullam at massa volutpat purus suscipit tincidunt. Ut tincidunt consequat ipsum ut tincidunt. Nam enim risus, varius ut accumsan ut, sagittis accumsan mi. Pellentesque accumsan metus a urna aliquet interdum. Aenean iaculis dolor purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Phasellus non orci ac leo aliquet placerat. Aliquam et ipsum turpis, sed hendrerit lectus. In tempus porta semper. Nullam at massa volutpat purus suscipit tincidunt. Ut tincidunt consequat ipsum ut tincidunt. Nam enim risus, varius ut accumsan ut, sagittis accumsan mi. Pellentesque accumsan metus a urna aliquet interdum. Aenean iaculis dolor purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Titre de niveau 4

Nulla ullamcorper imperdiet neque, accumsan consectetur augue mollis in. Morbi dignissim eleifend sapien, eget commodo velit interdum nec. Etiam sit amet est elit, eu mollis nisl. Nunc arcu tortor, sagittis a rhoncus eget, hendrerit a ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus luctus volutpat quam non suscipit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In risus nulla, molestie a aliquet non, pellentesque eget nulla. Phasellus posuere, diam cursus facilisis egestas, diam sem malesuada risus, id ornare est purus nec felis. Morbi mattis, ligula at dictum pulvinar, elit quam scelerisque justo, non dapibus turpis sapien non dolor. Vestibulum hendrerit, mauris a sagittis dignissim, neque elit mollis libero, sed gravida libero lorem ac nisl. Phasellus eleifend ornare arcu egestas aliquet.

Titre de niveau 5

Ceci est un lien hypertexte:Remonter au sein d'un paragraphe

Différentes types de liste

Liste numérotée

  1. élément de liste 1
  2. Objet Liste 2
  3. Liste des objets 3

Liste non ordonnée

  • élément de liste 1
  • élément de liste 2
  • élément de liste 3
  • élément de liste 4

Onglet

Eléments de formulaire

Legende de votre formulaire

*Les champs suivis d'un astérisque sont obligatoires

Nos clients témoignent:

01234

TRÈS BON TRAVAIL

d - 07/02/2018

«Après avoir contacté Damour Habitat et effectué une première visite de l'immeuble, j'ai été orienté et accompagné par de très bonn...»

01234

ETUDE DE PROJET

b - 23/11/2017

«Devis très complet et approfondi »

01234

RÉNOVATION STUDIO PARIS

Didier S - Poigny la Foret 19/06/2017

«totalement satisfait un professionnel de confiance à l'écoute »

Exemple de slider
Centre Est Peintures Distribution

Tradition Quattro
Stratifié Balterio de 9 mm, dimension : 1261 x 190.5 mm, click Express, garantie 25 ans. Très belle finition en 4 chamfreins.

Primero click
Sols LVT vinyle en click, dorato stone façon carrelage, 0.30 mm de couche d’usure, résidentiel classe 23-31 dimension 324 x 655 mm

Rotex
Ponceuse Festool, Rotex 90 dx, roto-excentriques, qualité professionnelle, 400 w de puissance

Le reboucheur
Enduit de rebouchage en poudre pour application manuelle, il s’applique sur supports neufs ou rénovés, fût de 10 Kg


<div class="article page-slider">
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

Divers Stuff - abbr, acronym, pré, le code, sous, soutien, etc

Lorem exposant dolor indice amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque Aliquam. citent . Nunc iaculis suscipit dui. Nam sit amet sem. Libero Aliquam nisi, imperdiet moins, tincidunt nca, gravida vehicula, nisl. Praesent Mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Mécène ornare tortor. Donec sed tellus eget sapien fringilla nonummy. < acronyme title = "National Basketball Association"> NBA Mauris un ante. Suspendisse quam sem, consequat moins, commodo vitae, feugiat dans, nunc. Morbi imperdiet augue quis tellus. AVE

Effets sur les survols d'images

Effet Zoé

img25

Effet Zoe

Cet effet fonctionne en utilisant la classe "effect-zoe".

Effet Oscar

img25

Effet Oscar

Cet effet fonctionne en utilisant la classe "effect-oscar".

Voir

Effet Ruby

img25

Glowing Ruby

Cet effet fonctionne en utilisant la classe "effect-ruby"..

View more

Effet ShowCase

img25

Effetshowcase

Cet effet fonctionne en utilisant la classe "effect-showcase"..

View more

Gestion des ombres (Titre de niveau 1 = h1)

Bloc de paragraphe Inversé

Ceci est un bloc de paragraphe où on inverse les couleurs de fond. C'est pratique dans les chartes graphiques pleine largeur. Dans cet exemple, le bloc inversé est juste avant le pied de page!

Mise en page Grille responsive Bootstrap:

Les containers:

Centré:

<div class="container">...</div>

Pleine-largeur:

<div class="container-fluid">...</div>

Les grilles:

Pour pouvoir mettre en place les colones, il faut d'abord insérer une ligne avec la classe row.

La classe col permet d'avoir une grille responsive et de répartir les colones sur la largeur de la ligne.

Exemple de 3 colones:

1
2
3

Exemple de 6 colones:

1
2
3
4
5
6

Exemple de 12 colones:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    ...
</div>

Les colones adaptées:

La largeur de la colone peut être définie manuellement en y ajouter la taille: col-[1-12] (avec un maximum de 12).

col-1
col-11
col-2
col-10
col-3
col-9
col-4
col-8
col-5
col-7
col-6
col-6
col-7
col-5
col-8
col-4
col-9
col-3
col-10
col-2
col-11
col-1
col-12

Les tailles d'écrans:

Mobile
< 576px
Tablette
≥ 576px
Grande tablette
≥ 768px
Ecran
≥ 992px
Grand écran
≥ 1200px
Largeur max: Auto 540px 720px 960px 1140px
Préfixe col- col-sm- col-md- col-lg- col-xl-

Les colones adaptées:

Les colones peuvent s'adapter en fonction de la taille de l'écran.

Par exemple, on veut un élément qui soit en 4 colones sur écran normal, 3 colones en mode tablette et qu'il prenne toute la largeur en mobile:

col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3
col-12 col-sm-4 col-md-3

<div class="col-[1-12] col-sm-[1-12] col-md-[1-12] col-lg-[1-12]">...</div>


Plus de détails sur le site de Bootstrap

Elements personnalisés

Boutons:

Bouton Bouton Bouton

<a href="#" class="btn">Bouton</a>
<a href="#" class="btn-outline">Bouton</a>
<a href="#" class="btn-outline-2">Bouton</a>

Images:

La classe img-fluid permet de rendre l'image responsive. Elle prendra toute la largeur de son conteneur.

(On rajoute une div autour puisque l'éditeur met un paragraphe par défaut)

<div>
    <img class="img-fluid" src="mon_image.png">
</div>

Exemple avec un container centré:



Cards:

Titre

Some quick example text to build on the card title and make up the bulk of the card's content.

Voir plus
Titre

Some quick example text to build on the card title and make up the bulk of the card's content.

Voir plus
Titre

Some quick example text to build on the card title and make up the bulk of the card's content.

Voir plus

Code d'une card:


<div class="card">
    <img class="card-img-top" src="lien_image.png">
    <div class="card-body">
        <div class="card-title">Titre</div>
        <p class="card-text">Description.</p>
        <a href="#" class="btn btn-primary">Voir plus</a>
    </div>
</div>

Exemple avec les 3 colonnes:


<div class="row">
    <div class="col-12 col-md-4">
        <div class="card">
            <div class="card">
                <img class="card-img-top" src="lien_image.png">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card">
            <div class="card">
                <img class="card-img-top" src="lien_image.png">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-4">
        <div class="card">
            <div class="card">
                <img class="card-img-top" src="lien_image.png">
                <div class="card-body">
                    <div class="card-title">Titre</div>
                    <p class="card-text">Description.</p>
                    <a href="#" class="btn btn-primary">Voir plus</a>
                </div>
            </div>
        </div>
    </div>
</div>

Cards avec ombre au survol:

Panels:

panel

<div class="panel">...</div>

Panels avec ombre au survol:

Panel avec ombre
Panel avec ombre
Panel avec ombre

<div class="panel shadow">...</div>

Ombres personnalisées:

box-shadow-1
box-shadow-2
box-shadow-3