[Tous niveaux] Une PA à 3 colonnes et 5 blocs

Coucou !

Dans cet entraînement, nous n'allons travailler qu'en HTML & CSS et nous allons essayer de réaliser ceci :


• Niveau évalué : Débutant, intermédiaire


Le but de cet exercice est donc de réaliser une en-tête à 3 colonnes.

La largeur de celle-ci est de 990px. Les 3 colonnes font la même taille. Les espaces sont toujours de 10px (entre le bord de l'en-tête et les blocs, entre les blocs, entre le texte et le bord des blocs).

La couleur de fond de l'en-tête est en c69c6d.
La couleur des blocs est 998675 et ils sont à 60% d'opacité. Leurs bords sont arrondis (en haut à gauche et en bas à droite = 25px ; pour les 2 autres coins, 10px).
La couleur du texte est dadada et celle des liens 362f2d. Lorsque ceux-ci sont survolés, ils sont soulignés et passent en couleur 603913.

Les titres sont écrits en taille 40px, sauf pour "Crédits" qui est écrit en 20px.
Les textes sont écrits en taille 14px.


• La typographie utilisée pour les titres se trouve ici.

• Les logos de partenariat sont les suivants :

Code:

<a href="http://tambouille-raleuses.forumactif.com" target="_blank" title="La Tambouille des Râleuses - Entraide, tutoriels, conseils, astuces & formations."><img src="http://pvereecken.fr/tambouille/88x31-logo.png" alt="Logo 88x31 - La Tambouille des Râleuses" /></a>

• Les avatars du staff sont les suivants :

Code:

http://pvereecken.fr/tambouille/av-80x80.png

• Lorem Ipsum te permettra de générer du faux texte.



• Les bases du HTML
• Les principales balises
• Des balises de mise en page
• [Conseillé pour les débutants] Les tableaux


• Comment appeler de la CSS dans une page web ?
• Les propriétés les plus courantes
• Des propriétés structurantes
• [Intermédiaire] Les display ? Kesako ?


Pour cet exercice, il n'y a pas un seul code, une seule correction. Chacun se sent plus à l'aise avec telle ou telle propriété/balise. Fais comme tu le sens. Fais ce qu'il te plait pour arriver au rendu final.

Notre but ici est de vérifier que tu sais utiliser les balises HTML & CSS présents dans nos tutoriels et qu'avec tout ça, tu sais te débrouiller pour coder quelques choses de propre et de valide par rapport aux normes actuelles.

Nous sommes là pour te guider et vérifier que ton code est bon. Nous ne sommes pas là pour t'imposer une méthode de codage. Fais ce qu'il te plait et utilise les choses avec lesquelles tu es à l'aise


Il te suffit de venir déposer ta copie en nous fournissant ton code entre balises code. Mäven ou Miettes viendra corriger ton devoir, te guider et te conseiller pour l'améliorer si besoin ou le valider pour que tu puisses passer à un autre exercice.

En cas de problème, n'hésite surtout pas à poser des questions dans ton sujet d'exercices en précisant bien quel exo te pose un souci

Bon courage.