
# Tâche

Styliser une carte de destination de voyage en utilisant du CSS externe et des styles en ligne.

Le composant doit inclure :

1. Un élément `div` conteneur. Appliquer la classe CSS `card` en utilisant `className`.

2. Une image (élément `img`).

* L'attribut `src` doit être égal à la variable `imageUrl`.
* L'attribut `alt` doit être égal à `Santorini`.
   * Appliquer la classe CSS `card-image`.

3. Un titre (élément `h2`).

* Son contenu textuel doit être `Santorini, Greece`.
* Appliquer la classe CSS `title`.

4. Un paragraphe (élément `p`).

* Son contenu textuel doit être `Beautiful sunsets, white houses, and crystal clear water.`.
* Appliquer des styles en ligne en utilisant l'objet `descriptionStyles`.

5. L'objet `descriptionStyles` doit inclure :

* `color` égal à `"#555"`.
* `fontSize` égal à `"18px"`.
* `lineHeight` égal à `"1.5"`.

6. Importer le fichier `styles.css` dans le composant.



## Code de départ
Ouvrir le projet de départ ci-dessous et compléter les parties manquantes du composant.

[Starter code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-07-starter-style-a-travel-destination-card?file=README.md,src%2FApp.jsx)



## Solution

Vous pouvez comparer votre résultat avec la solution finale ci-dessous.

[Solution code](https://stackblitz.com/github/olreyplay/1dcaf86a-11aa-492e-8e1d-06e055479aa9-challenges/tree/main/challenge-07-solution-style-a-travel-destination-card?file=README.md,src%2FApp.jsx)

Découvrez les principes fondamentaux de la création d'interfaces utilisateur avec React. Concentrez-vous sur les composants, le JSX, le flux de données, l'état et les effets secondaires utilisés dans les applications React courantes.

Découvrez ce qu'est React et comment il génère des interfaces utilisateur. Mise en avant des composants, de la syntaxe JSX et de l'affichage des éléments à l'écran.

Approfondissement du passage de données entre les composants et du contrôle de l'affichage de l'interface utilisateur. Accent mis sur les props, le rendu conditionnel et le rendu de listes de données.

Découvrez comment les interactions utilisateur et les données externes modifient l'interface utilisateur au fil du temps. Accent mis sur la gestion de l'état et le traitement des effets secondaires avec les hooks React.

Explorer les méthodes courantes de stylisation des composants React. Mettre l'accent sur l'application des styles à l'aide de styles en ligne et de CSS externe.

Découvrez comment exécuter un projet React et comprendre sa structure. Concentrez-vous sur le démarrage d’un projet avec Vite et la navigation dans les fichiers du projet.

Défi : Styliser une Carte de Destination de Voyage

Tâche

Code de départ

Solution