[Tous niveaux] Une PA à 5 colonnes

Coucou !

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

Clique sur l'image pour la voir en plus grand.

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


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

La largeur maximale de celle-ci est de 1280px. Les 5 colonnes ont des hauteurs identiques, les informations concernant leur largeur seront données plus bas. Les espaces entre chaque bloc sont de 10px, les espaces entre le bord d'un cadre et le texte est de 10px. Les blocs se trouvent à 20px des bords de l'en-tête.

La couleur de fond de l'en-tête est en #a6abaf.
La couleur des bordures est en #111e62.
La couleur des blocs est #d0dee4.
La couleur du texte est #444 et celle des liens #3d6e8a. Lorsque ceux-ci sont survolés, ils passent en couleur #111e62.

Les titres sont écrits en taille 18px et en #111e62. Leur soulignement est uniquement géré via la CSS (en utilisant les :before et :after). Pour les débutants, une simple bordure sera parfaite.
Les textes sont écrits en taille 13px.

Concernant les liens rapides, le fond est de couleur #3d6e8a et les textes sont écrits en a6abaf et en gras. Au survol, les 2 couleurs s'inversent.

Les colonnes ont les largeurs suivantes :
• La présentation : s'adapte automatiquement à la place restante ;
• Les liens utiles : 150px
• Nouveautés : 200px
• Derniers livres : 180px
• Thème du mois : 180px

Pour les intermédiaires : jusqu'à une résolution maximale de 1080px, le bloc des liens rapides ne s'affiche pas.



• La typographie utilisée est Montserrat.

Code:

<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap" rel="stylesheet">

• Le texte du bloc de présentation

Code:

Bonjour et bienvenue sur <em>Entre2Livres</em> !<br /><br />   
    Le but de ce forum est de pouvoir <strong>partager nos lectures</strong>, mais aussi <strong>remotiver </strong>les gens qui ont oublié le plaisir que c'était que de se plonger dans un bouquin.<br />
    Que tu sois un adepte du format papier, un accroc de la liseuse, un lecteur passionné qui les dévore à vitesse grand V ou quelqu'un qui prend son temps, tu es le bienvenu par ici

• La liste des liens rapides

Code:

<a href="https://entre2livres.forumactif.com/t7-cohabiter-sur-entre2livres">Règlement</a><!--
    --><a href="https://entre2livres.forumactif.com/t46-rejoindre-l-equipe#224">Recrutement</a><!--
    --><a href="https://entre2livres.forumactif.com/f4-questions-remarques-et-suggestions">Un peu perdu(e) ?</a><!--
    --><a href="https://entre2livres.forumactif.com/t8-les-livres-presentes">Index des fiches</a><!--
    --><a href="#https://entre2livres.forumactif.com/t21-le-bonjour-du-jour">Bonjour du jour</a><!--
    --><a href="https://entre2livres.forumactif.com/g2-staff">Contacter le staff</a>

• Le texte du bloc des nouveautés (sans le titre)

Code:

• <strong>25/11/2020</strong> - <strong>Titia</strong> vient d'ouvrir son <a href="https://entre2livres.forumactif.com/t233-journal-de-lecture-de-titia#2659"><strong>journal de lecture</strong></a><br />
    • <strong>12/11/2020</strong> - <a href="https://entre2livres.forumactif.com/t191p25-le-tour-d-ecrou#2428"><strong>Ashana</strong></a> et <a href="https://entre2livres.forumactif.com/t191p25-le-tour-d-ecrou#2462"><strong>Miettes</strong></a> ont donné leur avis sur la <a href="https://entre2livres.forumactif.com/t191-le-tour-d-ecrou">lecture commune</a>.<br />
    • <strong>10/11/2020</strong> - Les Mots-clés font officiellement leur arrivée (<a href="https://entre2livres.forumactif.com/t222-referencer-un-livre-par-mot-cle#2423"><strong>clic</strong></a>)

• Le texte du bloc des derniers livres (sans le titre)

Code:

• <a href="https://entre2livres.forumactif.com/t232-ne-la-reveillez-pas#2645">Ne la réveillez pas</a><br />
    • <a href="https://entre2livres.forumactif.com/t231-valisar-la-colere-t-3#2621">Valisar - La Colère (T.3)</a><br />
    • <a href="https://entre2livres.forumactif.com/t230-riverdale-t1">Riverdale (T.1)</a><br />
    • <a href="https://entre2livres.forumactif.com/t228-des-maux-avec-des-mots#2566">Des Maux avec des Mots</a><br />
    • <a href="https://entre2livres.forumactif.com/t227-la-nouvelle-meute-ryvenn-t-4#2561">Ryvenn (T.4)</a>

• Le texte du bloc des thèmes du mois (sans le titre)

Code:

<table summary="Les thèmes du mois"><tbody><tr><td class="row2" style="width:20px" align="center">1</td><td class="row2" style="word-break: break-all;"><a href="/tags/magie" title="Voir tous les sujets tagués avec : #magie">#magie</a></td></tr><tr><td class="row1" style="width:20px" align="center">2</td><td class="row1" style="word-break: break-all;"><a href="/tags/saga" title="Voir tous les sujets tagués avec : #saga">#saga</a></td></tr><tr><td class="row2" style="width:20px" align="center">3</td><td class="row2" style="word-break: break-all;"><a href="/tags/fantastique" title="Voir tous les sujets tagués avec : #fantastique">#fantastique</a></td></tr><tr><td class="row1" style="width:20px" align="center">4</td><td class="row1" style="word-break: break-all;"><a href="/tags/monderéel" title="Voir tous les sujets tagués avec : #monderéel">#monderéel</a></td></tr><tr><td class="row2" style="width:20px" align="center">5</td><td class="row2" style="word-break: break-all;"><a href="/tags/guerre" title="Voir tous les sujets tagués avec : #guerre">#guerre</a></td></tr><tr><td class="row1" style="width:20px" align="center">6</td><td class="row1" style="word-break: break-all;"><a href="/tags/fantasy" title="Voir tous les sujets tagués avec : #fantasy">#fantasy</a></td></tr><tr><td class="row2" style="width:20px" align="center">7</td><td class="row2" style="word-break: break-all;"><a href="/tags/jeunesse" title="Voir tous les sujets tagués avec : #jeunesse">#jeunesse</a></td></tr></tbody></table>

Ce code provient du widget de FA.

Pour cet exercice, aucun des contenus ne peut être modifié. Ils doivent être dans ton code tel que nous te les donnons ici.



• 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 ?
• [Intermédiaire] Bien comprendre les bases du display:flex
• [Intermédiaire] CSS - sélecteurs, pseudo-classes et pseudo-éléments
• [Intermédiaire] Faire des pages responsives

Voir tous les tutoriels


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.