Libre Service : En-tête 4 blocs

Ancien code : Oui Non

Prévisualiser : Oui Non

Editer : Oui Non

Générer la CSS - Générer le HTML - sauvegarder le code

Le formulaire se trouve en bas de la page.

Attention, dans les champs de texte, seul le html est pris en compte ; voici donc une liste de codes "utiles" :

Retour à la ligne : ‹br /›
Mettre en gras : ‹strong›Texte‹/strong›
Mettre en italique : ‹em›Texte‹/em›
Mettre une barre de séparation : ‹hr /›
Mettre un lien : ‹a href="http://" target="_blank"›texte‹/a›

{{listeNews.date}} |

CSS :

Afficher le formulaire pour la CSS : Oui Non

La typographie des titres

Url GoogleFonts :

Déclaration de la typo :

Taille de la typo des titres :

Les couleurs de textes

Couleurs des liens :

Couleurs des liens survolés :

Couleurs des titres :

Couleurs des textes :

Les fonds

Couleur de fond de l'en-tête :

Image de fond de l'en-tête :

Image de fond des blocs :

Les bordures

Bordure des blocs :

Bordure gauche des anciennes news :

Bordure gauche de la dernières news :

Autres éléments

Position des blocs par rapport à leur titre :

Décoration en bas à gauche (L : 145px | H : 223px) :

HTML :

Afficher le formulaire pour le HTML : Oui Non

Image "bienvenue" (L : 480px | H : 92px) :

Bloc en haut à gauche

Titre :

Texte :

signature :

Bloc en bas à gauche

Titre :

Elements de la liste :

- Premier de la liste -

- Dernier de la liste -

Nom du site/forum/blog :

Lien du site/forum/blog :

Logo du site/forum/blog :

Bloc en haut à droite

Titre :

Elements de la liste :

- En bas de la liste -

- En haut de la liste -

Date :

Texte :

Bloc en bas à droite

Titre :

Texte :

Lien :

Texte du lien :

Code CSS à copier :

/*** ----- EN TETE ----- ***/
.wrapper-entete{
	font: normal 15px/20px Tahoma, sans-serif;
}

.wrapper-entete .flex{
  display: flex;
}

.wrapper-entete .typo{
  font-family: {{ css.typo }};
}

.wrapper-entete a{
  color: {{ css.linkColor }};
  text-decoration: none;
}

.wrapper-entete a:hover{
  color: {{ css.linkColorHover }};
  cursor: pointer;
}

.wrapper-entete .txt-right{
  text-align: right;
}

.wrapper-entete #logo-et{
  display: inline-block;
  margin-left:  10%;
  position: relative;
  top: 19px;
}

.wrapper-entete #content-et{
  background: {{ css.bkgEnTete }} url("{{ css.urlBkgEnTete }}") repeat-y center center;
  background-size: 100% auto;
  padding: 2% 0;
  position: relative;
}

.wrapper-entete #content-et .ligne-et{
  justify-content: space-between;
  margin: 0 10% 1.2% 20%; 
  width: 68%;
}

.wrapper-entete h2{
  color: {{ css.h2Color }};
  font-size: {{ css.h2Size }};
  font-weight: normal;
  margin: 0;
  padding:  0;
}

.wrapper-entete .blk-et > div{
  background: url("{{ css.bkgBloc }}") no-repeat center center;
  background-size: cover;
  border-bottom: 4px solid {{ css.borderBloc }};
  border-top: 4px solid {{ css.borderBloc }};
  box-sizing: border-box;
  margin-top: {{ css.positionBloc }};
  padding: 3% .8%;
}

.wrapper-entete .blk-et p,
.wrapper-entete .blk-et ul{
  color: {{ css.colorTxt }};
  line-height: 1;
}

.wrapper-entete #et-deco{
  background: transparent url('{{ css.eltDeco }}') no-repeat 0 100%;
    background-size: contain;
    bottom: 0;
    height: 56%;
    left: 10%;
    position: absolute;
    width: 10%;
}

/* Concept & protégés */

.wrapper-entete #et-concept,
.wrapper-entete #et-proteges{
  width:  55%;
}

/* Nouveautés & recrutement */

.wrapper-entete #et-nouveautes,
.wrapper-entete #et-recrutement{
  width:  41%;
}

.wrapper-entete #et-nouveautes ul{
  list-style: none;
  margin: auto;
  padding: 0;
  width: 96%;
}

.wrapper-entete #et-nouveautes ul li{
  border-left: 2px solid {{ css.colorBorderNewsOld }};
  margin-bottom: 3.4%;
  padding-left: 2%;
}

.wrapper-entete #et-nouveautes ul li:first-child{
  border-left: 2px solid {{ css.colorBorderNewsNew }};
}

Code HTML à copier :

{{htmlGenere}}

Code json à copier :

{
	"urlTypo" : "{{css.urlTypo}}",
	"typo" : "{{css.typo}}",
	"linkColor" : "{{css.linkColor}}",
	"linkColorHover" : "{{css.linkColorHover}}",
	"colorTxt" : "{{ css.colorTxt }}",
	"bkgEnTete" : "{{css.bkgEnTete}}",
	"urlBkgEnTete" : "{{css.urlBkgEnTete}}",
	"h2Color" : "{{css.h2Color}}",
	"h2Size" : "{{css.h2Size}}",
	"bkgBloc" : "{{css.bkgBloc}}",
	"borderBloc" : "{{css.borderBloc}}",
	"positionBloc" : "{{css.positionBloc}}",
	"eltDeco" : "{{css.eltDeco}}",
	"colorBorderNewsOld" : "{{css.colorBorderNewsOld}}",
	"colorBorderNewsNew" : "{{css.colorBorderNewsNew}}",
	"imgBienvenue" : "{{html.imgBienvenue}}",
	"titre1" : "{{html.titre1 | noguillemet}}",
	"txt1" : "{{html.txt1 | noguillemet}}",
	"signature" : "{{html.signature | noguillemet}}",
	"titre2" : "{{html.titre2 | noguillemet}}",
	"news" : {{html.news}},
	"titre3" : "{{html.titre3 | noguillemet}}",
	"logos" : {{html.logos}},
	"titre4" : "{{html.titre4 | noguillemet}}",
	"txt4" : "{{html.txt4 |noguillemet }}",
	"lien4" : "{{html.lien4}}",
	"txtLien4" : "{{html.txtLien4 | noguillemet}}"
}

Libre Service : En-tête 4 blocs

{{ html.titre1 }}

{{ html.titre2 }}

{{ html.titre3 }}

{{ html.titre4 }}

CSS :

La typographie des titres

Les couleurs de textes

Les fonds

Les bordures

Autres éléments

HTML :

Bloc en haut à gauche

Bloc en bas à gauche

Bloc en haut à droite

Bloc en bas à droite

Code CSS à copier :

Code HTML à copier :

Code json à copier :