Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Estiliza una Tarjeta de Destino de Viaje | Estilización de Aplicaciones React
Introducción a React

Desafío: Estiliza una Tarjeta de Destino de Viaje

Desliza para mostrar el menú

Tarea

Estilizar una tarjeta de destino turístico utilizando CSS externo y estilos en línea.

El componente debe incluir:

  1. Un elemento contenedor div. Aplicar la clase CSS card usando className.

  2. Una imagen (elemento img).

  • El atributo src debe ser igual a la variable imageUrl.
  • El atributo alt debe ser igual a Santorini.
    • Aplicar la clase CSS card-image.
  1. Un encabezado (elemento h2).
  • El contenido de texto debe ser Santorini, Greece.
  • Aplicar la clase CSS title.
  1. Un párrafo (elemento p).
  • El contenido de texto debe ser Beautiful sunsets, white houses, and crystal clear water..
  • Aplicar estilos en línea usando el objeto descriptionStyles.
  1. El objeto descriptionStyles debe incluir:
  • color igual a "#555".
  • fontSize igual a "18px".
  • lineHeight igual a "1.5".
  1. Importar el archivo styles.css en el componente.

Código inicial

Abre el proyecto inicial a continuación y completa las partes faltantes del componente.

Starter code

Solución

Puedes comparar tu resultado con la solución final a continuación.

Solution code

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 4. Capítulo 4

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Sección 4. Capítulo 4
some-alt