Header
Section INFO

S'occuper de mes chiens

Vous avez actuellement 76 chiens de 26 races.
Offrir un bonus à un chien
Acquérir un chien d'une race disponible en exclusivité
Section 2 SEARCH AREA

Recherche rapide

Tri:

Tab content 2

Tab content 3

Tab content 4

Selection d'icones




Recherche avancée (Ouvrir/Fermer)

Section 3 MAIN AREA
Titre avec un nom super long de ouf malade ultra long...
Statistiques
Titre avec un nom super long de ouf malade ultra long...
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 1
Statistiques
Nom du chien 1
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 2
Statistiques
Nom du chien 2
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 3
Statistiques
Nom du chien 3
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 4
Statistiques
Nom du chien 4
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 5
Statistiques
Nom du chien 5
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 1
Statistiques
Nom du chien 1
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 2
Statistiques
Nom du chien 2
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 3
Statistiques
Nom du chien 3
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 4
Statistiques
Nom du chien 4
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 5
Statistiques
Nom du chien 5
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 1
Statistiques
Nom du chien 1
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 2
Statistiques
Nom du chien 2
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 3
Statistiques
Nom du chien 3
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 4
Statistiques
Nom du chien 4
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 5
Statistiques
Nom du chien 5
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 1
Statistiques
Nom du chien 1
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 2
Statistiques
Nom du chien 2
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 3
Statistiques
Nom du chien 3
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 4
Statistiques
Nom du chien 4
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Nom d'un chien 5
Statistiques
Nom du chien 5
Etat de vôtre chien
Force :
Santé :
Humeur :
Propreté :
Spécialité :
Le Kung-Fou !
Compétences
Vitalité :
Agilité :
Dressage :
Saut :
Odorat :
Rapidité :
Total :
Section 4
Section 5 CONTROLE DU CONTENU
MODELE 2 COLONNES SANS FLEX

Titre 1

MODELE 2 COLONNES
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 2

MODELE 2 COLONNES AVEC ALIGNEMENTS TEXTE
Celule gauche 1
Cellule droite 1
Celule gauche 2
Cellule droite 2

Titre 3

MODELE 2 COLONNES MAX WIDTH 500 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 4

MODELE 2 COLONNES MAX WIDTH 300 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

MODELE 2 COLONNES DANS CONTENEUR FLEX

Titre 1

MODELE 2 COLONNES
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 2

MODELE 2 COLONNES AVEC ALIGNEMENTS TEXTE
Celule gauche 1
Cellule droite 1
Celule gauche 2
Cellule droite 2

Titre 3

MODELE 2 COLONNES MAX WIDTH 500 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 4

MODELE 2 COLONNES MAX WIDTH 300 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

MODELE 2 COLONNES DANS CONTENEUR FLEX AVEC FLEX AUTO PAR BOX

Titre 1

MODELE 2 COLONNES
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 2

MODELE 2 COLONNES AVEC ALIGNEMENTS TEXTE
Celule gauche 1
Cellule droite 1
Celule gauche 2
Cellule droite 2

Titre 3

MODELE 2 COLONNES MAX WIDTH 500 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

Titre 4

MODELE 2 COLONNES MAX WIDTH 300 PX
Celule gauche 1 Cellule droite 1
Celule gauche 2 Cellule droite 2

EXEMPLES DE DISPOSITIONS

model_box_moyen_titre

model_box_moyen fond_5 flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem. Vel dolor facilis probatus at, tation delicata cum ea.

Titre 2

model_box_moyen fond_5 height_inherit_important flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem. Vel dolor facilis probatus at, tation delicata cum ea.

Side panel container

model_box_moyen fond_5 flex_auto

Side Titre 1

model_box_moyen flex_auto
Celule gauche 1
boutton 1
Celule gauche 2
boutton 2

Side Titre 2

model_box_moyen flex_auto
Celule gauche 1
boutton 1
Celule gauche 2
boutton 2

Side Titre 3

model_box_moyen fond_5 margin_auto_important max_width_300px flex_auto
(margin_auto_important) pour centrer la box
Celule gauche 1
boutton 1
Celule gauche 2
boutton 2

Titre 3 Flow Naturel

model_box_moyen fond_5 flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Box 2 Colonnes Titre 1

model_box_moyen fond_5 flex_auto
Celule gauche 1
boutton 1
Celule gauche 2
boutton 2

Box 2 Colonnes Titre 2

model_box_moyen fond_5 flex_auto
Celule gauche 1
boutton 1
Celule gauche 2
boutton 2

Titre 4 100%

model_box_moyen fond_5 width_100_pourcent flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Titre 5 350px

model_box_moyen fond_5 max_width_350px flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Titre 6 350px

model_box_moyen fond_5 max_width_350px flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Titre 7 350px

model_box_moyen fond_5 max_width_350px flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Titre 8 350px

model_box_moyen fond_5 max_width_350px flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.
CASSE LE FLEX POUR UN RETOUR A LA LIGNE FORCEE
width_100_pourcent

Titre 10 50%

model_box_moyen fond_5 max_width_50pourcent flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.

Titre 11 50%

model_box_moyen fond_5 max_width_50pourcent flex_auto
margin_10px

Lorem ipsum dolor sit amet, in nam munere perfecto argumentum.
Ad odio sonet nominavi cum, eum te vide intellegebat conclusionemque, in sed adolescens consetetur.
Quo an unum consectetuer.
Ea decore ponderum iudicabit duo, an has decore consequat percipitur, ad mea liber mediocrem.
Vel dolor facilis probatus at, tation delicata cum ea.
  • box-shadow
  • text-shadow
  • border-radius
  • gradient
  • flex
  • debug 1
  • Hide Admin Panel
  • Show Admin Panel

    DEMO REFERENCES

    Couleurs de fonds:
    fond_1
    fond_2
    fond_3
    fond_4
    fond_5

    Couleurs de fonds gradient:
    gradient_1
    gradient_2
    gradient_3
    gradient_4
    gradient_5
    gradient_6

    Couleurs de box ombres exterieures:
    Type 1
    box_shadow_centre_1
    box_shadow_droite_1
    box_shadow_gauche_1
    box_shadow_all_1

    Type 2
    box_shadow_centre_2
    box_shadow_droite_2
    box_shadow_gauche_2
    box_shadow_all_2

    Couleurs de box ombres interieures:
    Type 1
    box_shadow_inset_centre_1
    box_shadow_inset_droite_1
    box_shadow_inset_gauche_1
    box_shadow_inset_all_1

    Type 2
    box_shadow_inset_centre_2
    box_shadow_inset_droite_2
    box_shadow_inset_gauche_2
    box_shadow_inset_all_2

    Couleurs de box ombres de types surfaces:
    Types Surfaces
    box_shadow_surface_1
    box_shadow_surface_2
    box_shadow_surface_3
    box_shadow_surface_4



    Bordures de debug:
    debug_0
    debug_1
    debug_2
    debug_3
    debug_4

    Bordures rondes:
    border_radius_5px
    border_radius_10px
    border_radius_15px
    border_radius_20px
    border_radius_25px
    border_radius_30px


    Bords ronds haut droite et gauche:
    border_top_right_and_left_radius_5px
    border_top_right_and_left_radius_10px
    border_top_right_and_left_radius_15px

    border_top_right_and_left_radius_20px
    border_top_right_and_left_radius_25px
    border_top_right_and_left_radius_30px


    Bords ronds bas droite et gauche:
    Code caché en dessous

    Bord rond haut droite:
    border_top_right_radius_5px
    border_top_right_radius_10px
    border_top_right_radius_15px
    border_top_right_radius_20px
    border_top_right_radius_25px
    border_top_right_radius_30px


    Bord rond haut gauche:
    border_top_left_radius_5px
    border_top_left_radius_10px
    border_top_left_radius_15px
    border_top_left_radius_20px
    border_top_left_radius_25px
    border_top_left_radius_30px


    Bord rond bas droite:
    border_bottom_right_radius_5px
    border_bottom_right_radius_10px
    border_bottom_right_radius_15px
    border_bottom_right_radius_20px
    border_bottom_right_radius_25px
    border_bottom_right_radius_30px


    Bord rond bas gauche:
    border_bottom_left_radius_5px
    border_bottom_left_radius_10px
    border_bottom_left_radius_15px
    border_bottom_left_radius_20px
    border_bottom_left_radius_25px
    border_bottom_left_radius_30px


    Alignement horizontal du texte (fonctionne aussi pour d'autres elements):
    text_align_center
    text_align_right
    text_align_left

    Tailles de polices:
    font_size_1em
    font_size_1_2em
    font_size_1_3em
    font_size_1_4em
    font_size_1_5em
    font_size_1_6em
    font_size_1_7em
    font_size_1_8em
    font_size_2em
    font_size_2_5em fond_4 Code caché en dessous

    Texte trop long: (Cache ce qui dépasse)

    texte_trop_long
    Exemple: ici un texte beacoup trop long pour entrer dans le conteneur voulu, de ce fait il va ajouter des petits points à la fin ....


    Modèles de box titres:

    model_box_titre_mini_0
    Modèle Mini sans fond
    model_box_titre_0
    Modèle standard sans fond extensible
    model_box_titre_mini_1
    Modèle Mini fond transparent
    model_box_titre_1
    Modèle standard fond transparent extensible
    model_box_titre_mini_2
    Modèle Mini fond transparent
    model_box_titre_2
    Modèle standard fond transparent extensible
    model_box_titre_mini_3
    Modèle Mini fond transparent
    model_box_titre_3
    Modèle standard fond transparent extensible
    model_box_titre_mini_4
    Modèle Mini fond transparent
    model_box_titre_4
    Modèle standard fond transparent extensible
    model_box_titre_mini_5
    Modèle Mini fond transparent
    model_box_titre_5
    Modèle standard fond transparent extensible
    model_box_titre_mini_6
    Modèle Mini fond transparent
    model_box_titre_6
    Modèle standard fond transparent extensible,
    Dégradé réglable en inclinaison

    Modèles de box conteneurs:

    model_box_conteneur_1
    Sans padding
    Sans alignement de texte
    model_box_conteneur_2
    Sans padding
    Sans alignement de texte
    model_box_conteneur_3
    Sans padding
    Sans alignement de texte
    Largeur définie 140px
    model_box_conteneur_1
    model_box_conteneur_2
    model_box_conteneur_3
    Conteneurs combinés sont espacés via
    leurs contenus et marges extérieures
    Sans padding
    Sans alignement de texte

    Modèles de box :


    model_box_mini

    Mini Box Remplie
    Titre avec un nom super long de ouf malade ultra long...
    icones
    Boutton
    Mini Box Vide avec Titre > model_box_mini_titre
    Titre avec un nom super long de ouf malade ultra long...
    Ligne 1
    Ligne 2
    Ligne 3
    Ligne 4
    Code CSS: (l'essentiel) .model_box_mini { width: 133px; height: 100%; margin: 10px; -webkit-box-shadow: 0px 3px 6px #4a4a4a; box-shadow: 0px 3px 6px #4a4a4a; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .model_box_mini_titre { margin-bottom: 5px; line-height: 26px; text-align: center; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; color: #fff; text-shadow: 2px 2px 4px #774200; background: #9c7240; /*FallBack*/ background: -webkit-gradient(linear, left top, left bottom, from(#ededce),color-stop(38%, #ac7b41),to(#80613e)); background: -webkit-linear-gradient(top, #ededce 0%,#ac7b41 38%,#80613e 100%); background: -o-linear-gradient(top, #ededce 0%,#ac7b41 38%,#80613e 100%); background: linear-gradient(to bottom, #ededce 0%,#ac8b4d 38%,#ac7b41 100%); -webkit-box-shadow: 0px 0px 2px 2px #795548; box-shadow: 0px 0px 2px 2px #795548; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .model_box_mini_image { height: 100px; text-align: center; } .model_box_mini_separation { margin-left: 5px; margin-right: 5px; margin-bottom: 5px; border: 1px; border-style: inset; } Code HTML: <div class="model_box_mini fond_3"> <div class="model_box_mini_titre">Titre avec un nom super long de ouf malade ultra long...</div> <div class="model_box_mini_image"><img src="http://via.placeholder.com/115x95"></div> <div class="model_box_mini_separation"></div> <div class="model_box_mini_icons">icones</div> <div class="model_box_mini_boutton" tabindex="1">Boutton</div> </div>

    model_box_moyen

    Moyen Box Vide avec Titre > model_box_moyen_titre

    model_box_moyen_titre

    texte
    Code CSS: (l'essentiel) .model_box_moyen { height: 100%; margin: 10px; -webkit-box-shadow: 0 0px 7px #b1935a; box-shadow: 0 0px 7px #b1935a; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .model_box_moyen_titre { line-height: 26px; text-align: center; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-box-shadow: 0px 0px 2px 2px #795548; box-shadow: 0px -1px 3px #795548; text-shadow: 2px 2px 4px #774200; margin-bottom: 5px; background: #f2d490; background: -webkit-gradient(linear, left top, left bottom, from(#f2d490), to(#ac8b4d)); background: -webkit-linear-gradient(top, #f2d490, #ac8b4d); background: -o-linear-gradient(top, #f2d490, #ac8b4d); background: linear-gradient(to bottom, #f2d490, #dcbd7b); color: #fff; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } Code HTML: <div class="model_box_moyen fond_5"> <h3 class="model_box_moyen_titre">model_box_moyen_titre</h3> <div class="margin_10px"> texte </div> </div>

    Modèles de bouttons

    model_boutton_1
    model_boutton_2
    model_boutton_3
    model_boutton_4
    model_boutton_5
    model_boutton_6
    model_boutton_test

    Modèle de FlexBox combinés avec des colonnes CSS (columns)

    Responsive Pleine largeur 100%:
    colonne Principale 1
    Sous colonne 1
    Sous colonne 2
    colonne Principale 2
    Sous colonne 1
    Sous colonne 2
    Sous colonne 3
    Sous colonne 4
    Responsive largeur 50%:
    colonne Principale 1
    Sous colonne 1
    Sous colonne 2
    colonne Principale 2
    Sous colonne 1
    Sous colonne 2
    Sous colonne 3
    Sous colonne 4
    Responsive largeur 30%:
    colonne Principale 1
    Sous colonne 1
    Sous colonne 2
    colonne Principale 2
    Sous colonne 1
    Sous colonne 2
    Sous colonne 3
    Sous colonne 4
    Responsive largeur 10%:
    colonne Principale 1
    Sous colonne 1
    Sous colonne 2
    colonne Principale 2
    Sous colonne 1
    Sous colonne 2
    Sous colonne 3
    Sous colonne 4

    Code CSS: ( Les classes demo-box-fond peuvent être retirées ) /* Modèles de Flex combinés avec des colonnes */ .model_flex_conteneur_colonnes {display:flex; flex-flow:row wrap;} .model_1_colonne {columns: 100px 1; flex:auto;} .model_2_colonne {columns: 100px 2;} /* Couleurs de fond de démo */ .demo-box-fond1 {background:#2cb6d3;} .demo-box-fond2 {background: #ffb0b0;} .demo-box-fond3 {background:#8080ff;}
    Code HTML: ( Les classes demo-box-fond peuvent être retirées ) <div class="model_flex_conteneur_colonnes"> <div class="model_1_colonne demo-box-fond1">colonne Principale 1 <div class="model_2_colonne demo-box-fond2">Sous colonne 1 <div class="demo-box-fond3">Sous colonne 2</div> </div> </div> <div class="model_1_colonne demo-box-fond1">colonne Principale 2 <div class="model_2_colonne demo-box-fond2">Sous colonne 1 <div class="demo-box-fond3">Sous colonne 2</div> </div> <div class="model_2_colonne demo-box-fond2">Sous colonne 3 <div class="demo-box-fond3">Sous colonne 4</div> </div> </div> </div>

    Outils :



    Outils en ligne Web Designer (Liens externes)

    - CSS3:

    Flex Flexbox Template: Ma plateforme de test pour créer des FlexBox (Clic sur Fork et c'est à toi !)
    Can i use ?: Informations pour savoir si un préfixes CSS est CrossBrowser
    Autoprefixer: Ajoute les préfixes CSS CrossBrowser
    Border-radius: Générateur de coins arrondis CSS CrossBrowser
    Ultimate CSS Gradient Generator: Générateur de couleurs dégradées CSS CrossBrowser

    - Imagerie:

    Optimizilla: Compresseur de poids d'images très puissant
    Fontello: Générateur d'icones via polices (Font CSS) Comme Font Awsome mais plus complet

    - Autres:

    Office-converter: Convertisseur de tous types de formats en ligne y compris les images par exemple
    Html-cleaner: Nettoyeur de codes HTML, CSS, JS (Pratique pour remplacer des balises table par exemple)