Aufgabe

Gestalte eine Reisekarten-Komponente mit externer CSS und Inline-Styles.

Die Komponente muss Folgendes enthalten:

1. Ein Wrapper-div-Element. Weise die CSS-Klasse card mit className zu.

2. Ein Bild (img-Element).

   • Das src-Attribut muss dem Wert der Variable imageUrl entsprechen.
   • Das alt-Attribut muss Santorini sein.
   • Weise die CSS-Klasse card-image zu.

3. Eine Überschrift (h2-Element).

• Der Textinhalt muss Santorini, Greece sein.
  • Weise die CSS-Klasse title zu.

4. Einen Absatz (p-Element).

• Der Textinhalt muss Beautiful sunsets, white houses, and crystal clear water. sein.
  • Wende Inline-Styles mit dem Objekt descriptionStyles an.

5. Das Objekt descriptionStyles muss Folgendes enthalten:

• color mit dem Wert "#555".
• fontSize mit dem Wert "18px".
• lineHeight mit dem Wert "1.5".

6. Importiere die Datei styles.css in die Komponente.

Startcode

Öffne das folgende Starter-Projekt und vervollständige die fehlenden Teile der Komponente.

Starter code

Lösung

Du kannst dein Ergebnis mit der finalen Lösung unten vergleichen.

Solution code