[Tous niveaux] Un qeel à 3 colonnes

Coucou !

Pour cet exercice, nous allons essayer de réaliser ceci :

• Langages utilisés : HTML, CSS, Javascript (si tu choisis de le mettre en template)
• Niveau évalué : Débutant, Intermédiaire (si tu choisis de le mettre en template)

Cet exercice peut être rendu sous 2 formes :
• soit en simple HTML & CSS,
• soit mis en template.

C'est toi qui choisis jusqu'où tu veux pousser l'exercice.


Le but de cet exercice est donc de réaliser un QEEL à 3 colonnes.

La largeur de ce QEEL est de 900 px. Les 3 blocs du haut ont la même largeur, les 4 blocs du bas ont la même largeur.
Les espaces entre le bord du QEEL et les blocs à l'intérieur sont de 10px.

La couleurs de fond du QEEL est en #8eabf5 et son image de fond est la suivante :

Code:

https://i.servimg.com/u/f71/20/05/19/39/crissx10.png

Le QEEL a une bordure de 2px d'épaisseur en trait plein et en #8eabf5

Le titre du QEEL a une couleur de fond en #476bc4 et le texte est écrit en taille de 20px, en Pacifico et en #8eabf5.

Concernant les blocs, leur couleurs de fond est en #476bc4 avec une opacité de 20%. Leurs titres sont écrits en taille de 16px, en gras et en #476bc4 et le reste des textes est écrit en taille de 14px, en Didact Gothic et en #061437.

Les liens ne sont pas soulignés et ils passent en italique au survol de la souris.


• Les typographie utilisées sont les suivantes :
- Pacifico
- Didact Gothic

• Les icônes utilisées ici proviennent de FlatIcon.

• Les pictos pour les titres :
-> Actuellement en ligne :
-> Ils sont passés récemment :
-> Groupes :
-> Ouverture du forum :
-> Nombre de messages :
-> Nombre de membres :
-> Dernier inscrit :
Clic droit sur l'image > copier l'adresse de l'image

• Liste des membres en ligne :

Code:

<a href="/u41"><span style="color:#a05f27"><strong>Féli</strong></span></a>, <a href="/u1"><span style="color:#9b59b6"><strong>Miettes</strong></span></a>

• Liste des membres récemment passés :

Code:

<a href="/u35"><span style="color:#c7bb6b"><strong>Ava</strong></span></a>, <a href="/u14"><span style="color:#385717"><strong>Cappuccino</strong></span></a>, <a href="/u8"><span style="color:#385717"><strong>Cerise</strong></span></a>, <a href="/u32"><span style="color:#385717"><strong>Cilsa</strong></span></a>, <a href="/u41"><span style="color:#a05f27"><strong>Féli</strong></span></a>, <a href="/u9"><span style="color:#a05f27"><strong>Flitzz</strong></span></a>, <a href="/u42"><span style="color:#c7bb6b"><strong>Mayobaka</strong></span></a>, <a href="/u1"><span style="color:#9b59b6"><strong>Miettes</strong></span></a>, <a href="/u10"><span style="color:#a05f27"><strong>MmeFeuillage</strong></span></a>, <a href="/u29"><span style="color:#385717"><strong>Padsky</strong></span></a>

• Les groupes :

Code:

<a style="color: #9b59b6" href="/g1-les-raleuses">Les râleuses</a>
<a style="color: #385717" href="/g4-les-eleves">Les élèves</a>
<a style="color: #a05f27" href="/g5-les-influenceurs">Les influenceurs</a>
<a style="color: #c7bb6b" href="/g3-les-tambouilleurs">Les Tambouilleurs</a>

• Dernier inscrit :

Code:

<a href="/u42"><span style="color:#c7bb6b"><strong>Mayobaka</strong></span></a>

• 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 ?


• Personnaliser les phrases prédéfinies du QEEL


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 et, si tu as décidé de le mettre en template, en nous précisant la version du forum choisie. 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.