AltoCode
Cansano 3 Steps Variante
HTML
<!-- ============================================ -->
<!-- Steps -->
<!-- ============================================ -->
<section id="steps-2013">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Come Funziona</span>
<h2 class="cs-title">Odontoiatria per Tutta la Famiglia</h2>
<p class="cs-text">
Orci eu lobortis elementum nibh tellus. Vulputate eu scelerisque felis imperdiet
proin fermentum leo vel. Luctus accumsan tortor posuere ac ut consequat
semper. Et pharetra pharetra massa massa ultricies mi quis.
</p>
</div>
<ul class="cs-card-group">
<li class="cs-item">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/green-calendar2.svg" alt="calendario icona" width="20" height="20" loading="lazy" decoding="async">
<h3 class="cs-h3">Prenota un appuntamento</h3>
<p class="cs-item-text">
offriamo il miglior servizio e abbiamo vinto numerosi premi. La nostra missione è far sentire tutti sicuri di mostrare il proprio sorriso.
</p>
<div class="cs-number-wrapper">
<span class="cs-number">01</span>
</div>
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/calendar.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/calendar.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/calendar.jpg" alt="calendario" width="48" height="48">
</picture>
</li>
<li class="cs-item">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/green-medical.svg" alt="cassetta medica icona" width="20" height="20" loading="lazy" decoding="async">
<h3 class="cs-h3">Visita il tuo dentista</h3>
<p class="cs-item-text">
offriamo il miglior servizio e abbiamo vinto numerosi premi. La nostra missione è far sentire tutti sicuri di mostrare il proprio sorriso.
</p>
<div class="cs-number-wrapper">
<span class="cs-number">02</span>
</div>
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist10.jpeg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist10.jpeg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/dentist10.jpeg" alt="paziente che sorride" width="48" height="48">
</picture>
</li>
<li class="cs-item">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/green-medicine.svg" alt="pillola icona" width="20" height="20" loading="lazy" decoding="async">
<h3 class="cs-h3">Assumi i farmaci consigliati</h3>
<p class="cs-item-text">
offriamo il miglior servizio e abbiamo vinto numerosi premi. La nostra missione è far sentire tutti sicuri di mostrare il proprio sorriso.
</p>
<div class="cs-number-wrapper">
<span class="cs-number">03</span>
</div>
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/invisalign.jpg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/invisalign.jpg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/invisalign.jpg" alt="mano con farmaci" width="48" height="48">
</picture>
</li>
</ul>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Steps -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#steps-2013 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
}
#steps-2013::before {
content: "";
width: 100%;
height: 100%;
background-color: var(--primary);
opacity: 0.05;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#steps-2013 .cs-container {
width: 100%;
max-width: 44rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#steps-2013 .cs-content {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#steps-2013 .cs-text {
max-width: 56.25rem;
}
#steps-2013 .cs-card-group {
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(1rem, 2vw, 1.25rem);
position: relative;
}
#steps-2013 .cs-item {
text-align: center;
list-style: none;
width: 100%;
padding: clamp(1.5rem, 3.1vw, 2rem) clamp(1rem, 2.3vw, 2rem);
background-color: #fff;
border-radius: 0.5rem;
border: 1px solid transparent;
display: flex;
flex-direction: column;
align-items: center;
grid-column: span 12;
position: relative;
transition: border 0.3s;
}
#steps-2013 .cs-item:hover {
border: 1px solid var(--primary);
}
#steps-2013 .cs-item:hover .cs-h3 {
color: var(--primary);
}
#steps-2013 .cs-icon {
width: 3rem;
height: auto;
margin-bottom: 1rem;
display: block;
}
#steps-2013 .cs-h3 {
font-size: 1.25rem;
line-height: 1.2em;
text-align: inherit;
margin: 0 0 1rem 0;
color: var(--headerColor);
transition: color 0.3s;
}
#steps-2013 .cs-item-text {
font-size: 1rem;
line-height: 1.5em;
text-align: inherit;
margin: 0 0 1.5rem 0;
color: var(--bodyTextColor);
}
#steps-2013 .cs-number-wrapper {
width: 3rem;
height: 3rem;
margin-top: auto;
margin-bottom: -1.5rem;
padding: 0.625rem;
background-color: var(--headerColor);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
#steps-2013 .cs-number {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
#steps-2013 .cs-picture {
width: 100%;
height: clamp(8.75rem, 18vw, 11.25rem);
display: block;
flex: none;
}
#steps-2013 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.5rem;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#steps-2013 .cs-container {
max-width: 80rem;
}
#steps-2013 .cs-item {
grid-column: span 4;
}
}