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>
<div class="container">...</div>
<div class="container-fluid">...</div>
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>
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.
<div class="container">
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
...
</div>
</div>
La largeur de la colone peut être définie manuellement en y ajouter la taille: col-[1-12] (avec un maximum de 12).
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 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:
<div class="col-[1-12] col-sm-[1-12] col-md-[1-12] col-lg-[1-12]">...</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam posuere adipiscing urna nec dictum. Cras hendrerit, justo vel tempus tincidunt, velit ipsum adipiscing urna.
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.
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>
<a href="#" class="btn">Text</a>
<a href="#" class="btn-outline">Text</a>
<a href="#" class="btn-outline-2">Text</a>
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
<a href="#" class="btn wow shake" data-wow-duration="3s">Bouton</a>
<a href="#" class="btn wow flash" data-wow-delay="2s">Bouton</a>
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...»
Pierre P. - 23/11/2017
«Devis très complet et approfondi »
Didier S. - Poigny la Foret19/06/2017
«totalement satisfait un professionnel de confiance à l'écoute »
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>
<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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome 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>
Some quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome quick example text to build on the card title and make up the bulk of the card's content.
Voir plusSome 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>
<div class="panel">...</div>
<div class="panel shadow">...</div>
<div class="row">
<div class="col-12 col-md">
<div class="overflow">
<img src="..." class="img-fluid effect-zoom" alt="">
</div>
</div>
</div>
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>
<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>
<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>
<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>
Bénéficiez d’extensions de garantie et d’aides au financements à taux préférentiels