Globales ClubVET

Cette page vous permettra de bien respecter toutes les règles/composants de design basés sur la charte ClubVET.

Reste à faire : Ajouter des templates de sections au fur et à mesure. Bien finaliser les boutons

Les titres

Attention les titres ont des <span style= »color:#d7a900″></span> – A modifier dans réglage du site

h1 - Ici le titre 1

Desktop : 65px / Tablette : 40px / mobile : 35px > Interlignage auto

h2 - Ici le titre 2

Desktop : 45px / Tablette : 32px / mobile : 28px > Interlignage auto

h3 - Ici le titre 3

Desktop : 30px / Tablette : 25px / mobile : 25px > Interlignage auto

h4 - Ici le titre 4

Desktop : 24px / Tablette : 20px / mobile : 20px > Interlignage auto

h5 - Ici le titre 5

Desktop : 20px / Tablette : 18px / mobile : 18px > Interlignage auto

paragraphe bold

Desktop / Tablette / Mobile : 16px > Interlignage auto

paragraphe

Desktop / Tablette / Mobile : 16px > Interlignage auto

Desktop / Tablette / Mobile : 16px > Interlignage auto > Ce module est un bouton ! Ne pas mettre de lien

Les couleurs

A modifier dans réglage du site.

Couleurs ClubVET

Doré ClubVET

Doré ClubVET
#D7A900

Doré hover ClubVET
#E4B300

Doré ClubVET 80
#D7A90080 ou #EBD47F

Doré ClubVET 40
#D7A90040 ou #F5E9BF

Doré ClubVET 10
#D7A90010 ou #FCFAEF

Bleu ClubVET

Bleu nuit ClubVET
#001B3D

Bleu ClubVET
#00538B

Bleu ClubVET 80
#00538B80 ou #7FA9C5

Bleu ClubVET 40
#00538B40 ou #BFD4E2

Bleu ClubVET 10
#00538B10 ou #EFF4F8

Couleurs La Négo

Vert La Négo

Vert La Négo
#6BB7AD

Vert La Négo 80
#6BB7AD80 ou #B5DBD6

Vert La Négo 40
#6BB7AD40 ou #DAEDEA

Vert La Négo 10
#6BB7AD ou #F6FAFA

Doré ClubVET

Doré ClubVET
#D7A900

Doré hover ClubVET
#E4B300

Doré ClubVET 80
#D7A90080 ou #EBD47F

Doré ClubVET 40
#D7A90040 ou #F5E9BF

Doré ClubVET 10
#D7A90010 ou #FCFAEF

Marron La Négo

Marron La Négo
#4A412A

Couleurs Le Shop

Bleu Le Shop

Bleu Le Shop
#4B92DB

Bleu Le Shop 80
#4B92DB ou #A5C8ED

Bleu Le Shop 40
#4B92DB ou #D2E4F6

Bleu Le Shop 10
#4B92DB ou #F4F8FD

Vert Le Shop

Vert Le Shop
#00AF3F

Vert Le Shop hover btn
#00AF3F

Vert Le Shop 80
#00AF3F80 ou #7FD79F

Vert Le Shop 40
#00AF3F40 ou #BFEBCF

Vert Le Shop 10
#00AF3F10 ou #EFFAF3

Orange Le Shop

Orange Le Shop
#FA7D3B

Orange Le Shop 80
#FA7D3B80 ou #FCBE9D

Orange Le Shop 40
#FA7D3B40 ou #FEDECE

Orange Le Shop 10
#FA7D3B10 ou #FFF7F3

Couleurs Le Web

Bleu ClubVET

Bleu nuit ClubVET
#001B3D

Bleu ClubVET
#00538B

Bleu ClubVET 80
#00538B80 ou #7FA9C5

Bleu ClubVET 40
#00538B40 ou #BFD4E2

Bleu ClubVET 10
#00538B10 ou #EFF4F8

Bleu Le RDV

Bleu Le RDV
#00CCFF

Bleu Le RDV hover
#00CCFF

Bleu Le RDV 80
#00CCFF80 ou #7FE5FF

Bleu Le RDV 40
#00CCFF40 ou #BFF2FF

Bleu Le RDV 10
#00CCFF10 ou #EFFCFF

Couleurs additionnelles

Nuances de gris

Noir
#000000

Gris 80
#303030

Gris 50
#8B8B8B

Gris 30
#B8B8B8

Gris 10
#F7F7F7

Blanc
#FFFFFF

Les boutons

Attention les titres ont des <span style= »color:#d7a900″></span> – A modifier dans réglage du site

Bouton principal

Bouton secondaire

Bouton bleu

Bouton bleu secondaire

Le responsive & éléments design

Lorem ipsum dolor sit amet

Desktop

  • Largeur du contenu : 1100px
  • Espace entre les sections : 150px
  • Espace entre les éléments : 20px
  • Espace interne de section avec fond : 100px

Tablette

  • Largeur du contenu : 650px
  • Espace entre les sections : 100px
  • Espace entre les éléments : 20px
  • Espace interne de section avec fond : 75px

Mobile

  • Largeur du contenu : 320px
  • Espace entre les sections : 50px
  • Espace entre les éléments : 10px
  • Espace interne de section avec fond : 50px

Les arrondis

  • Arrondi grand (images, blocs bannières…) : 20px
  • Arrondi petit (boutons, accordéons…) : 10px

Les templates blocs

Lorem ipsum dolor sit amet