Démo HTML vs CSS

Gabarit des pages

Premier bloc (header) pour l'en-tête de page

Ce bloc se subdivise en trois blocs (div) positionnés les uns à côté des autres avec un bloc central qui occupe 50% de l'espace disponible (en largeur). Les deux autres blocs occupent chacun 25% de l'espace disponible.

Deuxième bloc (section) pour le corps des pages

Ce bloc se subdivise, de la même manière, en trois blocs occupant respectivement 25%, 50% et 25% de l'espace disponible.

Troisième bloc (footer) pour le pied de page

Ce bloc occupe la totalité de l'espace disponible.

Contenu des billets

[Élément h1] Titre [en-tête] des billets

[Accroche] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo.

[Élément h2] Premier en-tête

[Élément strong] Entrée 1.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum.

[Élément strong] Entrée 1.2. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum.

[Élément strong] Entrée 1.3. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.

[Élément h2] Deuxième en-tête

[Élément strong] Entrée 2.1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum.

[Élément strong] Entrée 2.2. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum.

[Élément strong] Entrée 2.3. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.