Tehtävä

Tyylittele matkakohdekortti käyttämällä ulkoista CSS:ää ja sisäisiä tyylejä.

Komponentin tulee sisältää:

1. Kääre div-elementti. Käytä card-CSS-luokkaa className-attribuutilla.

2. Kuva (img-elementti).

   • src-attribuutin tulee olla yhtä kuin imageUrl-muuttuja.
   • alt-attribuutin tulee olla yhtä kuin Santorini.
   • Käytä card-image-CSS-luokkaa.

3. Otsikko (h2-elementti).

• Tekstisisältö: Santorini, Greece.
  • Käytä title-CSS-luokkaa.

4. Kappale (p-elementti).

• Tekstisisältö: Beautiful sunsets, white houses, and crystal clear water.
  • Käytä sisäisiä tyylejä descriptionStyles-olion avulla.

5. descriptionStyles-olion tulee sisältää:

• color arvolla "#555".
• fontSize arvolla "18px".
• lineHeight arvolla "1.5".

6. Tuo styles.css-tiedosto komponenttiin.

Aloituskoodi

Avaa alla oleva aloitusprojekti ja täydennä komponentin puuttuvat osat.

Starter code

Ratkaisu

Voit verrata tulostasi lopulliseen ratkaisuun alla.

Solution code