Tél : 09 83 37 04 89
Peinture Luxe  Haut de Gamme Architecture Décoration Intérieure Peinture Luxe  Haut de Gamme Architecture Décoration Intérieure Peinture Luxe  Haut de Gamme Architecture Décoration Intérieure Peinture Luxe  Haut de Gamme Architecture Décoration Intérieure
EPINAY SUR SEINE
Envoyer un Email

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!

Exemple image

<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.

En savoir plus

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.

En savoir plus

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.

En savoir plus

<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"

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!

Exemple image
Exemple image

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">
    <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

  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


Eléments de formulaire

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



Nos clients témoignent:



01234

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...»

01234

ETUDE DE PROJET

Pierre P. - 23/11/2017

«Devis très complet et approfondi »

01234

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.

Image 1

<button class="btn collapse">Texte</button>
<div class="collapse-content">
    Le contenu que je veux faire apparaître
</div>
                        


Exemple de slider

Image Slider 1

Tradition Quattro
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Image Slider 2

Primero click
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Image Slider 3

Rotex
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Image Slider 4

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:

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:


<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

img25



<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é

img25

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

img26

Effet Oscar

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

Voir

<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

img27

Glowing Ruby

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

View more

<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

img28

Effet showcase

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

View more

<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>