AltoCode
Petina 3 Statistiche

HTML
<!-- ============================================ -->
<!-- Statistiche -->
<!-- ============================================ -->
<section id="stats-1738">
<div class="cs-container">
<ul class="cs-card-group">
<li class="cs-item">
<span class="cs-number">38+</span>
<p class="cs-item-text">
Dai una spinta al tuo percorso fitness con l’indoor cycling cardio ad alta intensità. Vivi un allenamento dinamico.
</p>
<a href="" class="cs-link">
<span class="cs-link-text">I nostri trainer</span>
<img class="cs-arrow" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/white%20right%20arrow.svg" alt="icona freccia bianca" width="20" height="20">
</a>
</li>
<li class="cs-item">
<span class="cs-number">44K</span>
<p class="cs-item-text">
Dai una spinta al tuo percorso fitness con l’indoor cycling cardio ad alta intensità. Vivi un allenamento dinamico.
</p>
<a href="" class="cs-link">
<span class="cs-link-text">Corsi fitness</span>
<img class="cs-arrow" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/white%20right%20arrow.svg" alt="icona freccia bianca" width="20" height="20">
</a>
</li>
<li class="cs-item">
<span class="cs-number">98%</span>
<p class="cs-item-text">
Dai una spinta al tuo percorso fitness con l’indoor cycling cardio ad alta intensità. Vivi un allenamento dinamico.
</p>
<a href="" class="cs-link red">
<span class="cs-link-text">Testimonianze</span>
<img class="cs-arrow" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/white%20right%20arrow.svg" alt="icona freccia bianca" width="20" height="20">
</a>
</li>
</ul>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Statistiche -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#stats-1738 {
position: relative;
z-index: 1;
}
#stats-1738 .cs-container {
width: 100%;
margin: auto;
position: relative;
}
#stats-1738 .cs-card-group {
width: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
}
#stats-1738 .cs-item {
list-style: none;
width: 100%;
min-height: clamp(20.3rem, 38vw, 30rem);
padding: clamp(3.75rem, 12vw, 8.4375rem) clamp(1rem, 2vw, 3.75rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#stats-1738 .cs-item:nth-of-type(1) {
background-color: #5F5F5F;
}
#stats-1738 .cs-item:nth-of-type(2) {
background-color: var(--primary);
}
#stats-1738 .cs-item:nth-of-type(3) {
background-color: #1D1C1C;
}
#stats-1738 .cs-number {
font-size: clamp(3.8125rem, 7.1vw, 5.25rem);
font-weight: 700;
line-height: 1.2em;
text-align: center;
margin-bottom: 1rem;
color: var(--bodyTextColorWhite);
display: block;
}
#stats-1738 .cs-item-text {
font-size: 1rem;
line-height: 1.5em;
text-align: center;
max-width: 32.5rem;
margin: 0;
color: var(--bodyTextColorWhite);
opacity: .9;
}
#stats-1738 .cs-link {
font-size: 1rem;
font-weight: 700;
line-height: 1.2em;
text-align: inherit;
text-decoration: none;
margin-top: 1.5rem;
color: var(--bodyTextColorWhite);
display: flex;
justify-content: flex-start;
align-items: center;
gap: 0.25rem;
transition: color 0.3s;
}
#stats-1738 .cs-link:hover .cs-arrow {
transform: translateX(0.25rem);
}
#stats-1738 .cs-link-text {
width: 100%;
display: block;
}
#stats-1738 .cs-arrow {
width: 1.25rem;
height: auto;
display: block;
transition: transform .3s;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#stats-1738 .cs-card-group {
flex-direction: row;
}
#stats-1738 .cs-item {
justify-content: flex-start;
}
}