Colour Vocab

En flashcard-side til at lære farverne på spansk, lavet kun med HTML og CSS.

Gloser

Spansk	English	Dansk	Bahasa Malaysia
Rojo	red	rød	merah
Azul	blue	blå	biru
Anaranjado	orange	orange	oren
Verde	green	grøn	hijau
Amarillo	yellow	gul	kuning

Åbn src/index.html i en vilkårlig browser. Der er intet at installere.

index.html linker til et eksternt stylesheet, style.css. Opgavens regel er, at alle ændringer sker i CSS og ingen i HTML.

Link stylesheetet. <link rel="stylesheet" href="./style.css" />. Test linket ved midlertidigt at sætte body { background-color: pink; } og se, at siden ændrer sig.
Farv hver titel efter dens betydning. Hver titel har et id (red, blue, orange, green, yellow), så #red { color: red; } rammer kun Rojo. id'et er et hint, hvis du ikke kender det spanske ord.
Gør titlerne normale i vægt. Alle titler har klassen color-title, så én regel dækker dem: .color-title { font-weight: normal; }.
Størrelse på billederne. img { height: 200px; width: 200px; } gør alle farvefelter lige store.

Se et preview efter hvert trin, så en fejl opdages, mens den er lille.

Almindelig yellow er svær at læse på hvid baggrund, så Amarillo bruger #d4a900.

Skærmbilledet er taget med headless Chrome i et 480 px bredt vindue:

chrome --headless=new --hide-scrollbars --window-size=480,1490 \
  --screenshot=docs/wiki/images/colour-vocab.png file:///sti/til/src/index.html