Landing page con HTML e CSS
Una landing page semplice e veloce in un solo file: mobile first, accessibile e senza framework pesanti.
- Tipo
- Prompt
- Livello
- Principiante
- Tempo
- circa 10 min
I risultati dipendono dallo strumento, dal modello e da ciò che inserisci.
Compila
Ciò che scrivi resta in questa finestra del browser. Non salviamo né inviamo nulla.
A cosa serve la pagina?
- iscrizione a un laboratorio
- presentare una piccola app
- biglietto da visita di un freelance
- invito alla festa dell'associazione
- lista d'attesa per un nuovo prodotto
Quali parti?
- intestazione, tre vantaggi, come funziona, modulo di iscrizione, contatti
- intestazione, funzioni, prezzi, domande frequenti
- intestazione, chi sono, servizi, contatti
- intestazione, programma, come arrivare, iscrizione
- intestazione, problema, soluzione, lista d'attesa
Schema di colori
- blu notte e bianco con accento arancione
- verde e crema
- bianco e nero con un rosso
- azzurro pastello e grigio
- toni sabbia con accento verde scuro
Il tuo prompt
Crea una landing page come singolo file HTML con CSS incorporato, senza framework JavaScript. Obiettivo: [Obiettivo]. Sezioni: [Sezioni]. Colori: [Colori]. Mobile first, caratteri leggibili, contrasto sufficiente, ordine logico dei titoli e testi alternativi di esempio. Niente font esterni, niente script di tracciamento, niente immagini di persone reali.
Strumenti adatti
Strumenti del nostro catalogo con cui questo prompt funziona bene.
- v0 Prezzi e limiti
- Lovable Prezzi e limiti
- Replit Prezzi e limiti
Come usarlo
- Compila i campi o tocca un suggerimento. Non inserire nomi, indirizzi o altri dati personali.
- Copia il prompt completo nello strumento che preferisci.
- Apri il file nel browser, guardalo sul telefono e fai un controllo di accessibilità dal browser.
Funziona con questi strumenti
I prompt funzionano in molti strumenti di chat e di generazione. Questa selezione proviene dal nostro catalogo; prezzi come indicati nella pagina dello strumento.
Perché funziona?
Un solo file senza framework è facile da capire e da pubblicare. Le indicazioni su contrasto e titoli portano l'accessibilità fin dall'inizio.
Consigli
- Un modulo ha bisogno di un posto che riceva i dati; chiarisci questo, e la privacy, prima di pubblicare la pagina.