Tableaux de prix CSS style queries (CSS custom property)

• container
• @container
• style queries

Votre navigateur ne supporte pas cette démonstration

Sur Chrome 110+, tapez dans la barre d'adresse : chrome://flags. Puis cherchez Experimental Web Platform features et passez la valeur à enabled.

<div class="grid">
			
<div class="card">

<h2>Débutant</h2>
<p>20€<span>/mois</span></p>

<hr>

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
	
<div class=action>
<a href="">Commander</a>
</div>
	
</div>
	
<div style="--theme:vedette">

<div class="card">

<h2>Professionnel</h2>
<p>39€<span>/mois</span></p>

<hr>

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
	
<div class=action>
<a href="">Commander</a>
</div>

</div>

</div>
	
<div class="card">
<h2>Expert</h2>
<p>60€<span>/mois</span></p>

<hr>

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>
	
<div class=action>
<a href="">Commander</a>
</div>

</div>

*,
*::before,
*::after{

box-sizing: border-box

}

.grid {
    
display: grid;  
grid-template-columns: repeat(auto-fit,minmax(30ch,1fr));
gap: 2rem;
margin:2rem auto
  
}

.card {
display: grid;
padding: 1rem;
background: #f2f2f2;
border: 2px solid rgba(212, 212, 212, 0.2);
border-radius: 25px;
	
}

.card h2 {

margin:0;
font-size: clamp(1.5rem, 3cqi, 2rem);
text-align: center 
   
}

.action{display: grid; width: max-content;margin:auto;}	
	
.action a {
 
display: flex;
place-items: center;
background-color: #f56565;
border-radius: 9999px;
padding:.75rem 1rem;
color: white;
text-decoration: none;
letter-spacing: 2px;
transition: background .3s ease;
}

.action a:hover {
	
    background-color: #000;
	
}
	

	
	
@container style(--theme:vedette) {
	
  .card {
	  
    background-color: #6753ea;
    border-color: #4b3caa;
    color: white;
	  
  }

.action a {
  
     background-color: #4b3caa;
  
  }
	
	.card hr{border-color:#4b3caa}
	
	
}	
	


.card p {
    font-weight: bold;
   font-size: clamp(1.5rem, 4cqi, 2.5rem);justify-self: center;
}

.card p span {
  font-size: clamp(1rem, 2cqi, 1.25rem);
}


ul {
    margin: 1rem 0;
    list-style-type: none;
	padding:0;
}

ul >* {
    margin-bottom: 2rem;
}

hr {
	border:1px solid #aaa;
    margin: 2rem 0;
}