Informations

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

Présentation

yo !
Un petit schéma pour vos petites têtes.
J'ai utilisé le logo de l'orphelinat fontenay que j'avais en commande sorry j'espère que ça dérange pas

La maquette

• Effet de survol (hover) sur le staff
• Quand vous passez la souris sur l'image du prédef l'info s'affiche sur le rectangle.
• polices : Oswald & arial

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 (titres <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 propriété CSS border-radius pour les coins arrondis
Les effets de survol avec la pseudo-classe :hover et (par exemple) les propriétés CSS transition et opacity
Savoir réaliser une infobulle

A titre d’entraînement, vous pouvez également tenter d'obtenir un rendu avec les anciennes méthodes :
les tableaux HTML
La fusion des cellules d'un tableau
ou encore :
Le positionnement en CSS

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].