Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Style et rejsemålskort | Styling af React-applikationer
Introduktion til React

Udfordring: Style et rejsemålskort

Stryg for at vise menuen

Opgave

Style et rejsemålskort ved hjælp af ekstern CSS og inline-stilarter.

Komponenten skal inkludere:

  1. Et wrapper-div-element. Anvend CSS-klassen card med className.

  2. Et billede (img-element).

    • src-attributten skal være lig med variablen imageUrl.
    • alt-attributten skal være lig med Santorini.
    • Anvend CSS-klassen card-image.
  3. En overskrift (h2-element).

  • Tekstindholdet skal være Santorini, Greece.
    • Anvend CSS-klassen title.
  1. Et afsnit (p-element).
  • Tekstindholdet skal være Beautiful sunsets, white houses, and crystal clear water..
    • Anvend inline-stilarter ved hjælp af objektet descriptionStyles.
  1. Objektet descriptionStyles skal inkludere:
  • color sat til "#555".
  • fontSize sat til "18px".
  • lineHeight sat til "1.5".
  1. Importér filen styles.css i komponenten.

Startkode

Åbn startprojektet nedenfor og udfyld de manglende dele af komponenten.

Starter code

Løsning

Du kan sammenligne dit resultat med den endelige løsning nedenfor.

Solution code

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 4

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Sektion 4. Kapitel 4
some-alt