DOCUMENTATION
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.
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!
<blockquote>
Citation
</blockquote>
Mise en page Grille responsive Bootstrap:
Normal:
<div class="container">...</div>
Pleine-largeur:
<div class="container-fluid">...</div>
Avec la class inverse
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores error iusto quas. Aliquam aut beatae blanditiis cupiditate delectus, dolorum esse est nemo neque qui? Asperiores labore laborum molestias suscipit voluptatibus?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eligendi libero maxime molestiae neque odit praesentium quam quod reiciendis voluptate. Blanditiis, incidunt, sit? Amet dolores est obcaecati, quam qui quo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque eligendi libero maxime molestiae neque odit praesentium quam quod reiciendis voluptate. Blanditiis, incidunt, sit? Amet dolores est obcaecati, quam qui quo!
<div class="container-fluid inverse" style="padding: 25px;">
<div class="container">
<div class="row">
<div class="col-12 col-md">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-12 col-md-4">
<img src="https://via.placeholder.com/400" alt="Exemple image">
</div>
</div>
</div>
</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="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
...
</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 |
Mobile Large ≥ 576px |
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-md-3 col-xl
col-12 col-md-3 col-xl
col-12 col-md-3 col-xl
col-12 col-md-3 col-xl
<div class="col-[1-12] col-sm-[1-12] col-md-[1-12] col-lg-[1-12]">...</div>
Même hauteur
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.
Colonne 2 Titre N3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt. 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.
<div class="container">
<div class="row">
<div class="col-12 col-md d-flex flex-column">
<div class="equal_height">
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#" class="btn">En savoir plus</a>
</div>
<div class="col-12 col-md d-flex flex-column">
<div class="equal_height">
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#" class="btn">En savoir plus</a>
</div>
<div class="col-12 col-md d-flex flex-column">
<div class="equal_height">
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#" class="btn">En savoir plus</a>
</div>
</div>
</div>
Boutons:
Bouton
<a href="#" class="btn">Text</a>
Bouton
<a href="#" class="btn-outline">Text</a>
Bouton
<a href="#" class="btn-outline-2">Text</a>
Les animations
Pour ajouter une animation, il faudra ajouter la class wow "nom_de_l'animation"
<div class="container">
<div class="row">
<div class="col-12 col-md wow slideInLeft">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="col-12 col-md-4 wow tada">
<img src="https://via.placeholder.com/400" alt="Exemple image">
</div>
</div>
<div class="row">
<div class="col-12 col-md-4 wow rollIn">
<img src="https://via.placeholder.com/400" alt="Exemple image">
</div>
<div class="col-12 col-md wow slideInRight">
<h3>Lorem ipsum</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
Pour plus de personnalisation, on peut retarder ou rallonger l'animation avec le code ci-dessous
- data-wow-duration : Change le temps d'animation par défaut. (en seconde)
- data-wow-delay : Pour retader l'animaion (en seconde)
wow shake avec 3s d'animation
<a href="#" class="btn wow shake" data-wow-duration="3s">Bouton</a>
wow flash avec retard de 2s
<a href="#" class="btn wow flash" data-wow-delay="2s">Bouton</a>
Différentes types de liste
Liste numérotée
- élément de liste 1
- Objet Liste 2
- 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
Eléments de formulaire
Nos clients témoignent:
TRÈS BON TRAVAIL
Jean 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...»
ETUDE DE PROJET
Pierre P. - 23/11/2017
«Devis très complet et approfondi »
RÉNOVATION STUDIO PARIS
Didier S. - Poigny la Foret19/06/2017
«totalement satisfait un professionnel de confiance à l'écoute »
Collapse
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab animi corporis eligendi enim expedita facilis hic ipsam iusto maxime modi obcaecati officia optio, porro provident quo quos repellat similique, voluptate! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam animi consectetur dolorem enim error harum labore minima molestias nam necessitatibus nihil nisi perspiciatis quaerat, quam quibusdam quisquam reprehenderit similique sunt.
<button class="btn collapse">Texte</button>
<div class="collapse-content">
Le contenu que je veux faire apparaître
</div>
Exemple de slider
Tradition Quattro
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Primero click
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Rotex
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Le reboucheur
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="container">
<div class="row">
<div class="col-12">
<div class="page-slider text-center">
<div>
<p><img src="http://via.placeholder.com/200" alt="Image Slider 1"></p>
<p>
<strong style="font-size: large;">Tradition Quattro</strong>
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div>
<p><img src="http://via.placeholder.com/200" alt="Image Slider 2"></p>
<p>
<strong style="font-size: large;">Primero click</strong>
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div>
<p><img src="http://via.placeholder.com/200" alt="Image Slider 3"></p>
<p>
<strong style="font-size: large;">Rotex</strong>
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div>
<p><img src="http://via.placeholder.com/200" alt="Image Slider 4"></p>
<p>
<strong style="font-size: large;">Le reboucheur</strong>
<br>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
</div>
</div>
</div>
</div>
Cards:
%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A14pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1629a30e141%22%3E%3Crect%20width%3D%22286%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22107.203125%22%20y%3D%2296.3%22%3E286x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E)
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
<div class="container">
<div class="row">
<div class="col-12 col-md">
<div class="card">
<img class="card-img-top" src="lien_image.png" alt="">
<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 class="col-12 col-md">
<div class="card">
<img class="card-img-top" src="lien_image.png" alt="">
<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 class="col-12 col-md">
<div class="card">
<img class="card-img-top" src="lien_image.png" alt="">
<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:
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
<div class="container">
<div class="row">
<div class="col-12 col-md">
<div class="card shadow">
<img class="card-img-top" src="lien_image.png" alt="">
<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 class="col-12 col-md">
<div class="card shadow">
<img class="card-img-top" src="lien_image.png alt=""">
<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 class="col-12 col-md">
<div class="card shadow">
<img class="card-img-top" src="lien_image.png alt=""">
<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>
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
Effet de zoom
<div class="row">
<div class="col-12 col-md">
<div class="overflow">
<img src="..." class="img-fluid effect-zoom" alt="">
</div>
</div>
</div>
Effet Zoé
Effet Zoe
Cet effet fonctionne en utilisant la classe "effect-zoe".
<div class="figure">
<div class="effect-zoe">
<img src="..." class="img-fluid" alt="img25">
<div class="figcaption">
<h2>Effet Zoe</h2>
<p class="description">Cet effet fonctionne en utilisant la classe "effect-zoe".</p>
</div>
</div>
</div>
Effet Oscar
<div class="figure">
<div class="effect-oscar">
<img src="..." class="img-fluid" alt="img25">
<div class="figcaption">
<h2>Effet Zoe</h2>
<p class="description">Cet effet fonctionne en utilisant la classe "effect-oscar".</p>
</div>
</div>
</div>
Effet Ruby
<div class="figure">
<div class="effect-ruby">
<img src="..." class="img-fluid" alt="img25">
<div class="figcaption">
<h2>Effet Zoe</h2>
<p class="description">Cet effet fonctionne en utilisant la classe "effect-ruby".</p>
</div>
</div>
</div>
Effet ShowCase
<div class="figure">
<div class="effect-showcase">
<img src="..." class="img-fluid" alt="img25">
<div class="figcaption">
<h2>Effet Zoe</h2>
<p class="description">Cet effet fonctionne en utilisant la classe "effect-zoe".</p>
</div>
</div>
</div>
Partenaires et marques
Bénéficiez d’extensions de garantie et d’aides au financements à taux préférentiels
