Copie-colle ce code CSS dans le <head> de ta page
Pour styliser ta table comparative, ajoute le CSS dans le bloc de code <head> de ta page.
<style>
/* wrapper général pour le padding horizontal */
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 0;
}
/* flex + gap pour espacer les colonnes */
.comparison {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 30px 0;
}
.card {
box-sizing: border-box;
padding: 20px;
border-radius: 8px;
font-family: Arial, sans-serif;
flex: 1 1 calc(50% - 10px); /* 2 colonnes sur desktop */
}
.card h2 {
font-size: 1.2rem;
margin-bottom: 0.75em;
}
.card ul {
list-style: none;
padding: 0;
margin: 0;
}
/* chaque item est un flex pour aligner l'icône + le texte */
.card ul li {
display: flex;
align-items: center;
margin-bottom: 0.75em;
}
.card ul li:last-child {
margin-bottom: 0;
}
.card ul li svg {
flex-shrink: 0;
width: 16px;
height: 16px;
margin-right: 8px;
}
/* POSITIF */
.card.positive {
background-color: #e6f9e9;
border: 1px solid #b2e8c5;
}
.card.positive h2 {
color: #2d7f4f;
}
.card.positive ul li svg path {
fill: #2d7f4f;
}
/* NEGATIF */
.card.negative {
background-color: #fde2e2;
border: 1px solid #f5b5b5;
}
.card.negative h2 {
color: #a82a2a;
}
.card.negative ul li svg path {
fill: #a82a2a;
}
.card.negative ul li svg {
width: 25px; /* passe la croix à 25x25 au lieu de 16x16 */
height: 25px;
}
/* responsive : passage en 1 colonne sous 600px */
@media screen and (max-width: 600px) {
.card {
flex: 1 1 100%;
}
}
</style>
Tuto vidéo
