SKIP TO CONTENT

Crea una landing page con un prompt

beginner~10 min0/4 pasos

Construye tu primera sección hero

La sección hero es la parte más importante de una landing page de portafolio: es lo primero que ven las visitas. En esta lección crearás una sección hero profesional que capte la atención y haga que quieran saber más sobre ti.

Empezarás con HTML básico y añadirás estilos con Tailwind CSS para crear un hero moderno con fondo degradado, un titular atractivo, un subtítulo y un botón de llamada a la acción. Esta es la base de todo gran sitio de portafolio.

Instrucciones

1

Añade un div contenedor para el hero con min-h-screen, fondo degradado (from-purple-900 a gray-900) y centrado con flex

Pista: Usa: `<div class="min-h-screen bg-gradient-to-br from-purple-900 via-gray-900 to-gray-900 flex items-center justify-center px-4">` — esto crea una sección a pantalla completa con tu degradado

2

Dentro del hero, añade un titular h1 con tu nombre y un párrafo p con tu cargo o rol

3

Añade un párrafo descriptivo (etiqueta p) con un lema sobre lo que haces (máx. 300 caracteres)

4

Añade un botón CTA con estilo degradado y efectos hover

Tu código

html
13 líneas
1
2
3
4
5
6
7
8
9
10
11
12
13

Vista previa en vivo

Vista previa en vivo