Da prompt a landing page
Costruisci la tua prima hero section
La hero section è la parte più importante di una landing page portfolio: è la prima cosa che i visitatori vedono. In questa lezione creerai una hero section professionale che cattura l'attenzione e invoglia i visitatori a saperne di più su di te.
Partirai da HTML di base e aggiungerai lo stile con Tailwind CSS per creare una hero moderna con sfondo sfumato, un titolo d'impatto, un sottotitolo e un pulsante call-to-action. Questa è la base di ogni grande sito portfolio.
Istruzioni
Aggiungi un div contenitore per la hero con min-h-screen, sfondo sfumato (da from-purple-900 a gray-900) e centratura flex
Suggerimento: 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">` — crea una sezione a tutta altezza con il tuo gradiente
Dentro la hero, aggiungi un titolo h1 con il tuo nome e un sottotitolo p con il tuo ruolo
Aggiungi un paragrafo descrittivo (tag p) con una tagline su ciò che fai (max 300 caratteri)
Aggiungi un pulsante CTA con stile sfumato ed effetti hover
Il tuo codice
Descrivi ciò che vuoi creare per questo passaggio e scriverò il codice — poi clicca su Applica per inserirlo nel tuo editor. Questo passaggio: Aggiungi un div contenitore per la hero con min-h-screen, sfondo sfumato (da from-purple-900 a gray-900) e centratura flex