AltoCode
Morigerati 5 Steps
HTML
<!-- ============================================ -->
<!-- Steps -->
<!-- ============================================ -->
<section id="steps-1376">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Il nostro processo</span>
<h2 class="cs-title">Ci impegniamo a mantenere uno standard di lavoro elevato</h2>
</div>
<div class="cs-card-group">
<div class="cs-group1">
<div class="cs-item">
<picture class="cs-picture">
<img class="cs-icon" loading="lazy" decoding="async"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/step1.svg" alt="icona grafica" width="48" height="48"/>
</picture>
<h3 class="cs-h3">Analisi</h3>
<p class="cs-item-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, et?
</p>
</div>
<div class="cs-item">
<picture class="cs-picture">
<img class="cs-icon" loading="lazy" decoding="async"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/step2.svg" alt="icona grafica" width="32" height="32"/>
</picture>
<h3 class="cs-h3">Strategia</h3>
<p class="cs-item-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, et?
</p>
</div>
<div class="cs-item">
<picture class="cs-picture">
<img class="cs-icon" loading="lazy" decoding="async"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/step3.svg" alt="icona grafica" width="32" height="32"/>
</picture>
<h3 class="cs-h3">Progettazione</h3>
<p class="cs-item-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, et?
</p>
</div>
</div>
<div class="cs-group2">
<div class="cs-item">
<picture class="cs-picture">
<img class="cs-icon" loading="lazy" decoding="async"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/step4.svg" alt="icona grafica" width="32" height="32"/>
</picture>
<h3 class="cs-h3">Sviluppo</h3>
<p class="cs-item-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, et?
</p>
</div>
<div class="cs-item">
<picture class="cs-picture">
<img class="cs-icon" loading="lazy" decoding="async"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/step3.svg" alt="icona grafica" width="32" height="32"/>
</picture>
<h3 class="cs-h3">Test e lancio</h3>
<p class="cs-item-text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium, et?
</p>
</div>
</div>
<picture class="cs-waves">
<source media="(max-width: 1023px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/wave-tablet.svg">
<source media="(min-width: 1024px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/wave-desktop.svg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/wave-desktop.svg" alt="" width="1280" height="568">
</picture>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Steps -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#steps-1376 {
padding: var(--sectionPadding);
background-color: #f7f7f7;
overflow: hidden;
}
#steps-1376 .cs-container {
width: 100%;
max-width: 90rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#steps-1376 .cs-content {
text-align: center;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
#steps-1376 .cs-topper {
color: #767676;
}
#steps-1376 .cs-title {
max-width: 25ch;
margin: 0;
}
#steps-1376 .cs-group1,
#steps-1376 .cs-group2 {
display: contents;
}
#steps-1376 .cs-card-group {
width: 100%;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: clamp(1rem, 2.3vw, 1.25rem);
position: relative;
}
#steps-1376 .cs-group1 {
display: contents;
}
#steps-1376 .cs-group1 .cs-item:nth-of-type(1) {
order: 1;
}
#steps-1376 .cs-group1 .cs-item:nth-of-type(2) {
order: 3;
}
#steps-1376 .cs-group1 .cs-item:nth-of-type(3) {
order: 5;
}
#steps-1376 .cs-group2 {
display: contents;
}
#steps-1376 .cs-group2 .cs-item:nth-of-type(1) {
order: 2;
}
#steps-1376 .cs-group2 .cs-item:nth-of-type(2) {
order: 4;
}
#steps-1376 .cs-item {
text-align: center;
list-style: none;
width: 100%;
max-width: 15rem;
height: 15rem;
margin: 0;
box-sizing: border-box;
padding: 1.5rem;
background-color: #f4f4f4;
overflow: hidden;
border: 1px solid #e8e8e8;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
transition: background-color 0.3s, border-color 0.3s;
}
#steps-1376 .cs-item:before {
content: "";
width: 9.25rem;
height: 9.25rem;
background: #fff;
opacity: 0;
border-radius: 50%;
display: block;
position: absolute;
bottom: 0;
left: -7.25rem;
transform: translateY(6.25rem);
transition: left 0.3s, transform 0.3s, opacity 0.3s;
}
#steps-1376 .cs-item:hover {
background-color: var(--primary);
border-color: var(--primary);
}
#steps-1376 .cs-item:hover:before {
opacity: 0.2;
left: -1rem;
transform: translateY(0);
}
#steps-1376 .cs-item:hover .cs-icon {
filter: grayscale(1) brightness(1000%);
}
#steps-1376 .cs-item:hover .cs-h3,
#steps-1376 .cs-item:hover .cs-item-text {
color: var(--bodyTextColorWhite);
}
#steps-1376 .cs-item:hover .cs-text {
opacity: 0.8;
}
#steps-1376 .cs-picture {
width: 6.25rem;
height: auto;
margin: 0 0 0.5rem 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex: none;
}
#steps-1376 .cs-icon {
width: 2rem;
height: auto;
}
#steps-1376 .cs-h3 {
font-size: 1.25rem;
font-weight: bold;
line-height: 1.2em;
text-align: inherit;
margin: 0 0 0.75rem 0;
color: var(--headerColor);
transition: color 0.3s;
}
#steps-1376 .cs-item-text {
font-size: 0.875rem;
line-height: 1.5em;
max-width: 28.125rem;
margin: 0;
padding: 0;
color: var(--bodyTextColor);
transition: color 0.3s, opacity 0.3s;
}
#steps-1376 .cs-waves {
display: none;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#steps-1376 .cs-card-group {
justify-content: center;
align-items: center;
gap: 2.5rem;
}
#steps-1376 .cs-group1 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
#steps-1376 .cs-group2 {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
gap: 3rem;
}
#steps-1376 .cs-item {
flex: none;
}
#steps-1376 .cs-waves {
width: 4.4375rem;
height: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#steps-1376 .cs-waves img {
width: 100%;
height: auto;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#steps-1376 .cs-card-group {
flex-direction: column;
}
#steps-1376 .cs-group1 {
width: 100%;
margin-bottom: calc(clamp(.5rem, 2vw, 1.875rem)*-1);
flex-direction: row;
}
#steps-1376 .cs-group2 {
width: 100%;
margin-top: calc(clamp(.5rem, 2vw, 1.875rem)*-1);
flex-direction: row;
}
#steps-1376 .cs-waves {
width: 110vw;
max-width: 120rem;
height: auto;
}
#steps-1376 .cs-waves:before {
content: "";
width: 50vw;
height: 4px;
background: #e8e8e8;
opacity: 1;
display: block;
position: absolute;
top: 5.25rem;
right: 100%;
}
#steps-1376 .cs-waves:after {
content: "";
width: 50vw;
height: 4px;
background: #e8e8e8;
opacity: 1;
display: block;
position: absolute;
top: 5.25rem;
left: 100%;
}
}