SKIP TO CONTENT

Prompter une landing page

beginner~10 min0/4 étapes

Construisez votre première section hero

La section hero est la partie la plus importante d'une landing page de portfolio — c'est la première chose que voient vos visiteurs. Dans cette leçon, vous allez créer une section hero professionnelle qui capte l'attention et donne envie d'en savoir plus sur vous.

Vous partirez d'un HTML basique et ajouterez du style avec Tailwind CSS pour créer un hero moderne sur fond dégradé, avec un titre accrocheur, un sous-titre et un bouton d'appel à l'action. C'est la fondation de tout bon site portfolio.

Instructions

1

Ajoutez une div conteneur pour le hero avec min-h-screen, un fond dégradé (from-purple-900 vers gray-900) et un centrage flex

Indice : Utilisez : `<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">` — cela crée une section pleine hauteur avec votre dégradé

2

À l'intérieur du hero, ajoutez un titre h1 avec votre nom et un sous-titre p avec votre titre/rôle

3

Ajoutez un paragraphe descriptif (balise p) avec une accroche sur ce que vous faites (300 caractères max)

4

Ajoutez un bouton CTA avec un style dégradé et des effets au survol

Votre code

html
13 lignes
1
2
3
4
5
6
7
8
9
10
11
12
13

Aperçu en direct

Aperçu en direct