AltoCode
Cansano 3 Steps
HTML
<!-- ============================================ -->
<!-- Steps -->
<!-- ============================================ -->
<section id="steps-2014">
<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>
<a class="cs-button-solid" href="">Scopri di Più</a>
</div>
<ul class="cs-card-group">
<li class="cs-item">
<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="numero" width="48" height="48">
</picture>
</li>
<li class="cs-item">
<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="numero" width="48" height="48">
</picture>
</li>
<li class="cs-item">
<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="numero" width="48" height="48">
</picture>
</li>
</ul>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Steps -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#steps-2014 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
}
#steps-2014::before {
content: "";
width: 100%;
height: 100%;
background-color: var(--primary);
opacity: 0.05;
position: absolute;
top: 0;
left: 0;
}
#steps-2014 .cs-container {
width: 100%;
max-width: 44rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#steps-2014 .cs-content {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#steps-2014 .cs-text {
max-width: 56.25rem;
}
#steps-2014 .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-2014 .cs-item {
text-align: left;
list-style: none;
width: 100%;
padding: clamp(1.5rem, 3.1vw, 2rem) clamp(1rem, 2.3vw, 2rem);
background-color: #fff;
border: 1px solid transparent;
border-radius: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
grid-column: span 12;
position: relative;
transition: border 0.3s;
}
#steps-2014 .cs-item:hover {
border: 1px solid var(--primary);
}
#steps-2014 .cs-item:hover .cs-h3 {
color: var(--primary);
}
#steps-2014 .cs-h3 {
font-size: clamp(1.25rem, 2vw, 1.5625rem);
line-height: 1.2em;
text-align: left;
width: 100%;
margin: 0 0 1rem 0;
color: var(--headerColor);
transition: color 0.3s;
}
#steps-2014 .cs-item-text {
font-size: 1rem;
line-height: 1.5em;
text-align: inherit;
margin: 0 0 1.5rem 0;
color: var(--bodyTextColor);
}
#steps-2014 .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-2014 .cs-number {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
}
#steps-2014 .cs-picture {
width: 100%;
height: 11.25rem;
display: block;
flex: none;
}
#steps-2014 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0.5rem;
}
#steps-2014 .cs-button-solid {
font-size: 1rem;
font-weight: 700;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-align: center;
text-decoration: none;
min-width: 9.375rem;
margin: 2rem 0 0 0;
box-sizing: border-box;
padding: 0 clamp(2rem, 4vw, 3rem);
background-color: var(--primary);
overflow: hidden;
color: #fff;
border: none;
border-radius: 0.5rem;
display: inline-block;
position: relative;
z-index: 1;
}
#steps-2014 .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #000;
opacity: 1;
border-radius: 0.25rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#steps-2014 .cs-button-solid:hover:before {
width: 100%;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#steps-2014 .cs-container {
max-width: 80rem;
}
#steps-2014 .cs-item {
grid-column: span 4;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 75rem) {
#steps-2014 .cs-container {
flex-direction: row;
align-items: flex-start;
}
#steps-2014 .cs-content {
text-align: left;
max-width: clamp(13.8125rem, 21vw, 19.0625rem);
align-items: flex-start;
}
}