list-style

list-style gère l'aspect des différents types de listes. Ceci est une propriété raccourcie regroupant :

• list-style-type : le type de style
• list-style-position : la position du marker
• list-style-image : définit une image au lieu du marker

list-style-type

Valeurs possibles :

• none
• disc
• circle
• square
• decimal
• upper-roman
• lower-roman

list-style-position

Valeurs possibles :

• outside
• inside

list-style-image

Permet de remplacer le marker par une image, soit par la fonction url( ) ou par d'autre valeur d'image.

border-collapse

Définit si les bordures d'un tableau sont espacées entre les cellules ou fusionnées :

• separate (default)
• collapse (fusionnée)

min-height & min-width

Définit des dimensions minimales, que ce soit en hauteur ou en largeur. Les valeurs acceptées sont les mêmes que pour width & height.

max-height & max-width

Définit des dimensions maximales, que ce soit en hauteur ou en largeur. Les valeurs acceptées sont les mêmes que pour width & height.

transition

transition définit une transition entre 2 états d'un élement de manière à animer les changements de styles. Il existe plusieurs états qui sont accessibles via des pseudo-classes comment :hover qui gère le survol de la souris.

transition-property

Définit la propriété à animer.

transition-duration

Définit le temps de l'animation. Exprimé en seconde avec l'unité s ou en millisecondes avec l'unité ms

transition-timing-function

Définit comment est calculée la transition entre les 2 états. On parle d'easing et cela change drastiquement la perception qu'on a d'une animation.

Consignes

Sur base de l'html qui se trouve dans le codepen suivant :

• Insérer le code html dans une fichier index.html avec doctype, html, head, body, etc.
• Prévoir une feuille de style main.css dans un dossier css.
• Lier la feuille de style avec l'index.html.
• Définir des styles CSS pour vous approchez au plus proche du résultat dans le screenshot fourni.

Remise

• À remettre avant le prochain cours
• Via Teams (une invitation vous sera envoyée)
• le dossier doit respecter cette nomenclature nom_prenom_classe_lpow, pas d'accent, pas de symbole, pas d'espace. ex: dekens_antoine_1eBA2
• Le dossier doit être compressé

Typographie

La typographie utilisée est la Satoshi, voici la balise link ainsi que le style à ajouter pour l'utiliser :

font-family: 'Satoshi', sans-serif;

Couleurs

Les couleurs utilisées sont :

• #1D1941 : couleur général des textes, trait général, fond foncé
• #646EBF : couleur d'accentuation, bouton
• #FFF : couleur de texte sur fond foncé, fond général, trait fond foncé

Arborescence

Voici l'arborescence attendue :

Conseil

Rajouter un display: block; sur votre balise img ainsi qu'une largeur.