Retour

Codes d'Articles V2

Suivant
Illustration de l'article

Titre de l’article

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo molestias at ad perferendis, officia voluptas provident neque maxime repellat ea. Quaerat dignissimos, facere eligendi ipsam autem, optio molestias vitae dolor.

Texte supplémentaire pour simuler un long contenu. Quand le texte dépasse la hauteur de l’image, la zone texte devient défilante. Cela permet de garder la mise en page élégante et stable sans allonger tout le bloc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim sapien nec massa feugiat, nec tincidunt ipsum congue. Integer varius, orci vitae suscipit convallis, nisl elit eleifend metus, nec elementum justo mi sed risus. Nulla facilisi. Duis ac turpis vitae arcu viverra placerat.

Sed vitae tincidunt felis. Maecenas malesuada leo in risus dignissim, at consequat lectus ultrices. Donec eu enim tellus. Nunc ut ligula urna. Duis luctus arcu et justo eleifend, ac rhoncus mauris suscipit.

🌐 Résumé global du style

Ce style met en place un bloc article moderne, composé de :

🖼️ Une image fixe: Largeur : 40%, Hauteur fixe : 300px, Image recadrée (object-fit: cover), Coins arrondis + ombre

📜 Un texte défilant: Largeur : 60%, Même hauteur que l’image, Scroll vertical automatique, Même style esthétique que l’image (fond semi-transparent, bordure, ombre)

📱 Version mobile: Les blocs passent l’un sous l’autre, Hauteurs automatiques, Scroll désactivé

🎨 Variables CSS

--gap, --bg, --max-width, --image-height

→ facilitent l’uniformité et les réglages rapides.

Code HTML

Code CSS