menu contenu rechercher
mer. 7 déc. 2016 | | Voilé 0.7° / 12.6° | air Indice de pollution : 8/10 | accès MonGrenoble S'identifier Créer un compte

Charte graphique

Logo grenoble.fr

Le logo a reprendre est celui situé en haut de chaque page, reproduit ci-dessous

logo grenoble.fr

Code Couleur

Fond de page

#ffffff

Code couleur utilisé lié à l'actualité

#d56a10

Code couleur utilisé lié à la Vie quotidienne

#1496a4

Code couleur utilisé lié à la Vie municipale

#87a014

Feuille de Style (CSS) et police de caractères

La feuille de style complète est disponible ici :
http://www.grenoble.fr/uploads/Style/_include_css_GAB_GRENOBLE_default.css

Les polices spécifiques (Source Sans Pro) sont à importer directement sur le site de google depuis le fichier css :
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,900);

Typographie

Titre de page - h1

  • Font : Source Sans Pro
  • Weight : 900
  • Taille : 40px

Titre de paragraphe- h2

  • Font : Source Sans Pro
  • Weight : 900
  • Taille : 24px

Titre h3

  • Font : Source Sans Pro
  • Weight : 700
  • Taille : 20px

Titre h4

  • Font : Source Sans Pro
  • Weight : 700
  • Taille : 16px
Titre h5
  • Font : Source Sans Pro
  • Weight : 600
  • Taille : 14px

Texte, tableau et autre

un simple paragraphe de texte (balise <p>)lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

  • Font : Source Sans Pro
  • Weight : normal
  • Taille : 13px
EnteteCellule
  • background: #000;
  • border-bottom: 1px solid #fff;
  • color: #fff;
  • font-weight: 700;
  • text-align: center;
  • padding: 10px 2%;
  • background: #dcdcdc;
  • border-bottom: 1px solid #fff;
  • padding: 10px 2%;

Formulaire

fieldset

  • background: #dcdcdc;
  • border: none;
  • margin: 0 0 2em;
  • padding: 0;

legend

  • background: #000 ;
  • border-bottom: 1px solid #fff;
  • color: #fff;
  • font-size: 18px;
  • margin: 0;
  • padding: 5px 13px;
  • width: 100%;

label

  • display: inline-block;
  • font-size: 14px;
  • font-weight: 600;
  • padding-right: 1%;
  • vertical-align: middle;
  • width: 30%;

input

  • background: #fff;
  • height: 28px;
  • line-height: 1;
  • padding: 0 0.5em;
  • border: 1px solid #666;
  • width: 43%;

submit

  • background: #000;
  • border: none;
  • color: #fff;
  • font-size: 15px;
  • padding: 2px 2em 3px;

Exemple de structure HTML

<fieldset class="groupeQuestion">
<legend><span>Coordonnées</span></legend>
<div class="innerGroupeQuestion">
<p>
<label>Nom <span class="obligatoire">*</span></label>
<input type="text" required="" value="" name="">
</p>
</div>
</fieldset>
<p class="action">
<span class="submit">
<input class="submit" type="submit" value="Envoyer" name="Insert">
</span>
</p>
Coordonnées