Informations

Niveau estimé : Intermédiaire/Difficile
Sujet mis à jour en août 2022

Présentation

Bonjour tout le monde ! Voici un petit exercice pour tous nos codeurs préférés. Je vous propose de vous mettre à la place d'une jeune fille (ou pas) venant de commencer une toute nouvelle année dans une toute nouvelle école !

La maquette

Les images : album goopics

La police des titres un peu manuscrite c'est Buntaro, mais visiblement ce n'est pas disponible sur google font. Du coup j'ai cherché et la police Kalam est plutôt ressemblante, si vous la mettez en uppercase ! La police pour le contexte et les news c'est du Georgia.

#941465
#473860
#49408a (ça c'est la couleur des blocs texte)

La partie "je me suis fait des amis" ce sont les partenaires en 50*50, j'ai bien évidemment la flemme de vous en mettre, je compte sur vous !

L'effet de survol pour le staff est noté. Vous pouvez mettre, si vous voulez (et si vous savez le faire), un effet de survol sur les icônes des liens pour qu'elles s'agitent un peu de gauche à droite (ou tout autre effet que vous voulez).

Compétences suggérées

(Rien ne vous oblige à utiliser toutes les suggestions si vous préférez vous concentrer sur un concept précis que vous ne maîtrisez pas encore)

Bases du HTML : Éléments de titre (<h1>, <h2>, etc.) blocs paragraphes <p> ou génériques <div>, listes HTML <ul> et <li>, liens <a> et images <img>...
Bases du CSS : couleurs de fond et de texte, marges, espacements internes, taille de texte...
Flexbox et/ou grid pour positionner des blocs (et groupes de blocs) côte à côte
La propriété CSS overflow pour gérer les dépassements
La pseudo classe :nth-child() pour l'alternance des couleurs
Le positionnement en CSS pour positionner correctement les éléments
les transitions CSS et la propriété transform pour les potentiels effets d'animation au survol et la rotation du texte.
Les pseudo-éléments ::before et ::after pour positionner certains éléments qui peuvent se passer d'une image directement dans le code.

Si vous avez des questions n'hésitez pas à les poser à la suite ainsi qu'à poster votre rendu et votre code entre balises [hide] et [/hide].