AltoCode
Sambuco 4 Card
HTML
<!-- ============================================ -->
<!-- Servizi -->
<!-- ============================================ -->
<section id="services-1667">
<div class="cs-container">
<div class="cs-image-group">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people-standing.jpeg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people-standing.jpeg">
<img loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/people-standing.jpeg" alt="persone che camminano" width="605" height="690">
</picture>
<img class="cs-floater" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/white-swirl.svg" alt="" loading="lazy" decoding="async" height="710" width="690">
</div>
<div class="cs-content">
<span class="cs-topper">I Nostri Corsi</span>
<h2 class="cs-title">Per la Formazione sulla Sicurezza dei Processi</h2>
<p class="cs-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum accusantium fuga
dolore nulla provident inventore possimus, incidunt, tenetur voluptate laudantium
consequuntur commodi. In perferendis quod, non ad veniam similique assumenda
deleniti nobis quaerat ipsum cum! Velit provident eligendi cumque excepturi!
</p>
<ul class="cs-faq-group">
<li class="cs-faq-item active">
<button class="cs-button">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/computer-gold.svg" alt="icona" width="32" height="32">
<span class="cs-button-text">
Formazione E-Learning on Demand
</span>
<span class="cs-indicator" aria-hidden="true"></span>
</button>
<p class="cs-item-p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente
placeat enim molestias quam, illum ullam ipsa repellat, necessitatibus
quis cumque voluptatum nesciunt. Quia possimus est in recusandae saepe nostrum.
</p>
</li>
<li class="cs-faq-item">
<button class="cs-button">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/calendar-gold.svg" alt="icona" width="32" height="32">
<span class="cs-button-text">
Formazione E-Learning Ibrida
</span>
<span class="cs-indicator" aria-hidden="true"></span>
</button>
<p class="cs-item-p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente
placeat enim molestias quam, illum ullam ipsa repellat, necessitatibus
quis cumque voluptatum nesciunt. Quia possimus est in recusandae saepe nostrum.
</p>
</li>
<li class="cs-faq-item">
<button class="cs-button">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/map-pin-gold.svg" alt="icona" width="32" height="32">
<span class="cs-button-text">
Formazione con Istruttore dal Vivo
</span>
<span class="cs-indicator" aria-hidden="true"></span>
</button>
<p class="cs-item-p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente
placeat enim molestias quam, illum ullam ipsa repellat, necessitatibus
quis cumque voluptatum nesciunt. Quia possimus est in recusandae saepe nostrum.
</p>
</li>
<li class="cs-faq-item">
<button class="cs-button">
<img class="cs-icon" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/map-pin-gold-2.svg" alt="icona" width="32" height="32">
<span class="cs-button-text">
Formazione in Aula in Sede
</span>
<span class="cs-indicator" aria-hidden="true"></span>
</button>
<p class="cs-item-p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente
placeat enim molestias quam, illum ullam ipsa repellat, necessitatibus
quis cumque voluptatum nesciunt. Quia possimus est in recusandae saepe nostrum.
</p>
</li>
</ul>
<a href="" class="cs-button-solid">Scopri di Più</a>
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Servizi -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#services-1667 {
padding: var(--sectionPadding);
background-color: #f7f7f7;
position: relative;
overflow: hidden;
z-index: 1;
}
#services-1667 .cs-container {
width: 100%;
max-width: 36.5rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(2.5rem, 3.9vw, 4rem);
}
#services-1667 .cs-image-group {
width: 100%;
height: auto;
margin: 0;
position: relative;
}
#services-1667 .cs-picture {
width: 100%;
min-height: 20.5rem;
display: block;
position: relative;
}
#services-1667 .cs-picture img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
#services-1667 .cs-floater {
width: clamp(20.125rem, 40vw, 28.1875rem);
height: clamp(20.1875rem, 40vw, 28.25rem);
position: absolute;
bottom: 0rem;
z-index: 1;
mix-blend-mode: soft-light;
}
#services-1667 .cs-content {
text-align: left;
width: 100%;
max-width: 40.625rem;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
flex: none;
}
#services-1667 .cs-title {
margin: 0 0 clamp(1rem, 1.96vw, 1.5rem) 0;
}
#services-1667 .cs-text {
margin: 0 0 clamp(1rem, 1.96vw, 1.5rem) 0;
}
#services-1667 .cs-faq-group {
width: 100%;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: clamp(1rem, 2.4vw, 1.25rem);
}
#services-1667 .cs-faq-item {
list-style: none;
width: 100%;
background-color: transparent;
border: 1px solid #e8e8e8;
padding: 0;
box-sizing: border-box;
transition: border-bottom 0.3s;
}
#services-1667 .cs-faq-item.active .cs-indicator:before {
transform: translate(-50%, -50%) rotate(360deg);
}
#services-1667 .cs-faq-item.active .cs-indicator:after {
transform: translate(-50%, -50%) rotate(0deg);
}
#services-1667 .cs-faq-item.active .cs-item-p {
height: auto;
padding-top: 1rem;
opacity: 1;
transform: scaleY(1);
}
#services-1667 .cs-faq-item:hover {
cursor: pointer;
}
#services-1667 .cs-button {
font-size: clamp(1rem, 2vw, 1.25rem);
line-height: 1.2em;
text-align: left;
font-weight: bold;
width: 100%;
padding: 1rem 1rem 0 1rem;
border: none;
background: transparent;
color: var(--headerColor);
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
gap: clamp(1rem, 2.5vw, 1.5rem);
position: relative;
transition: background-color 0.3s, color 0.3s;
}
#services-1667 .cs-button:hover {
cursor: pointer;
}
#services-1667 .cs-indicator {
width: 1.5rem;
height: 1.5rem;
position: relative;
z-index: 1;
}
#services-1667 .cs-indicator:before {
content: '';
width: 1rem;
height: 0.125rem;
background-color: #767676;
opacity: 1;
border-radius: 2px;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: transform .5s;
}
#services-1667 .cs-indicator:after {
content: '';
width: 1rem;
height: 0.125rem;
background-color: #767676;
opacity: 1;
border-radius: 2px;
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
transition: transform .5s;
}
#services-1667 .cs-button-text {
width: 90%;
padding: 0;
display: block;
}
#services-1667 .cs-item-p {
font-size: 0.875rem;
line-height: 1.5em;
width: 100%;
max-width: none;
height: 0;
margin: 0;
padding: 0 1rem 1rem 1rem;
box-sizing: border-box;
opacity: 0;
color: var(--bodyTextColor);
overflow: hidden;
position: relative;
transition: opacity 0.3s, padding-bottom 0.3s, padding-top 0.3s;
}
#services-1667 .cs-icon {
width: 2rem;
height: 2rem;
display: block;
}
#services-1667 .cs-button-solid {
font-size: 1rem;
font-weight: 700;
line-height: clamp(2.875rem, 5.5vw, 3.5rem);
text-align: center;
text-decoration: none;
width: clamp(11.625rem, 23vw, 13.625rem);
margin: clamp(1.75rem, 3.9vw, 2.5rem) 0 0 0;
box-sizing: border-box;
padding: 0 1.5rem;
color: #fff;
background-color: var(--primary);
display: inline-block;
position: relative;
z-index: 1;
}
#services-1667 .cs-button-solid:before {
content: "";
width: 0%;
height: 100%;
background: #000;
opacity: 1;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: width 0.3s;
}
#services-1667 .cs-button-solid:hover:before {
width: 100%;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#services-1667 .cs-picture {
height: 100%;
min-width: 36.5rem;
width: 48vw;
right: 0;
top: 0;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#services-1667 .cs-container {
max-width: 80rem;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
#services-1667 .cs-content {
width: 55%;
}
#services-1667 .cs-image-group {
width: 100%;
max-width: 33.875rem;
order: 2;
}
#services-1667 .cs-picture {
width: 100%;
min-width: 100%;
}
#services-1667 .cs-floater {
width: 28.1875rem;
left: clamp(50%, 18vw, 75%);
bottom: -6.25rem;
}
}
JAVASCRIPT
const faqItems = Array.from(document.querySelectorAll('.cs-faq-item'));
for (const item of faqItems) {
const onClick = () => {
item.classList.toggle('active')
}
item.addEventListener('click', onClick)
}