Tableau des tarifs pour site (offres en HTML et CSS)

Tableau des tarifs pour site (offres en HTML et CSS): à quoi ça sert

Une section d’offres bien construite aide le visiteur à comparer et à choisir. Écrivez chaque offre avec son nom, son prix mensuel, son prix annuel, son bouton et les éléments inclus (+) et non inclus (-), et marquez la mise en avant avec un astérisque.

Le code est responsive, avec l’offre mise en avant légèrement surélevée et dotée d’un badge, des icônes d’inclus et de non inclus (avec texte pour les lecteurs d’écran) et une bascule mensuel/annuel réalisée uniquement avec du CSS et des boutons radio. Ajustez la couleur, la devise et le texte du badge.

Mode d’emploi

1. Écrivez les offres et les éléments.
2. Marquez l’offre mise en avant et ajustez les couleurs.
3. Copiez le code.

Quand l’utiliser

• Offres d’abonnement.
• Forfaits de services.
• Offres de salle de sport ou de formation.

Questions fréquentes

Comment écrire les offres ?

Chaque offre commence par une ligne « Nom | prix mensuel | prix annuel | texte du bouton | lien ». Les lignes suivantes, commençant par + ou -, sont les éléments inclus et non inclus. Laissez une ligne vide entre les offres. Placez * avant le nom de l’offre à mettre en avant.

Comment fonctionne la bascule mensuel/annuel ?

Si vous renseignez le prix annuel, une bascule apparaît pour que le visiteur alterne. Elle fonctionne avec du CSS et des boutons radio, sans JavaScript, et les deux prix figurent dans le HTML.

Combien d’offres afficher ?

Trois est le nombre le plus courant : celle du milieu, mise en avant, est généralement la plus choisie. Au-delà de quatre, la comparaison devient difficile ; dans ce cas, un tableau comparatif fonctionne mieux.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires