Task

Style a travel destination card using external CSS and inline styles.

The component must include:

1. A wrapper div element. Apply the card CSS class using className.

2. An image (img element).

   • src attribute must be equal to the imageUrl variable.
   • alt attribute must be equal to Santorini.
   • Apply the card-image CSS class.

3. A heading (h2 element).

   • Its text content must be Santorini, Greece.
   • Apply the title CSS class.

4. A paragraph (p element).

   • Its text content must be Beautiful sunsets, white houses, and crystal clear water..
   • Apply inline styles using the descriptionStyles object.

5. The descriptionStyles object must include:

   • color equal to "#555".
   • fontSize equal to "18px".
   • lineHeight equal to "1.5".

6. Import the styles.css file into the component.

Starter Code

Open the starter project below and complete the missing parts of the component.

Starter code

Solution

You can compare your result with the final solution below.

Solution code