La bannière

La bannière a une largeur fixe pour l'écran de bureau (960px) qui sert de mise en page pour le contenu de page.

Création de la mise en forme du fond, des titres dont le call to action.

  1. Enveloppe de la bannière
    Sa position doit démarrer après le header qui a une hauteur de 50px. Elle sera centrée horizontalement dans la page du navigateur et aura un fond image qui ne se répète pas.
    #banner {
    	position: relative; top: 50px;
    	width: 960px;
    	height: 360px;
    	margin: 0 auto;
    	background: url(../images-site/bandeau-banniere.jpg); background-repeat: no-repeat;
    }
  2. Titre H1
    Une ombre sur le texte peut être doubleée comme ici. Le décalage s'additionne.
    #banner h1 {
    	color: #00a1f2;
    	padding: 1em 0 0.5em;
    	font-size: 3.5em;
    	font-weight: 900;
    	text-align: center;
    	text-shadow: 2px 2px 2px rgba(255,255,255, 1), 2px 2px 4px #00a1f2;
    }

    Figure: Double ombrage de texte



  3. Titre 2
    Le titre de niveau 2 a une largeur qui varie en fonction de la largeur de la fenêtre. Il a un dégradé de fond en transparence qui part d'une couleur bleue en opacité 0.8 à la même couleur. L'étape du dégradé à 10% permet de limiter la couleur du haut à une bordure qui épouse les arrondis.
    #banner h2 {
    	width: 35%;
    	line-height: 2;
    	margin: 0.5em auto;
    	padding: 0.15em;
    	border-radius: 0.4em;
    	font-size: 1.8em;
    	font-weight: 900;
    	color: #00a1f2;
    	text-align: center;
    	letter-spacing: 0.1em;
    	text-shadow: 2px 0px 0px rgba(5,65,90, 1);
    	background: linear-gradient(rgba(0, 161, 242, 0.8) 10%, rgba(0, 161, 242, 0.2) 0);
    }

    Figure: Un call to action graphique



  4. Supprimer le soulignement du lien de texte
    a.class-action {
    	text-decoration: none;
    }