AltoCode
Noasca 8 Card
HTML
<!-- ============================================ -->
<!-- Servizi -->
<!-- ============================================ -->
<section id="services-1304">
<div class="cs-container">
<div class="cs-content">
<div class="cs-flex-group">
<span class="cs-topper">Servizi</span>
<h2 class="cs-title">Servizi Professionali di Consulenza Fiscale e Contabile</h2>
</div>
<p class="cs-text">
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Velit officia consequat duis enim velit mollit. Amet minim mollit non
deserunt ullamco est sit aliqua dolor do amet sint.
Velit officia consequat duis enim velit mollit.
</p>
</div>
<ul class="cs-card-group">
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/brain.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Soluzioni Creative</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/users.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Team Professionale</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/Layer.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Approccio Diversificato</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/Layer.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Approccio Diversificato</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/brain.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Soluzioni Creative</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/users.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Team Professionale</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/Layer.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Approccio Diversificato</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
<li class="cs-item">
<a href="" class="cs-link">
<img class="cs-icon" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Icons/Layer.svg" loading="lazy" decoding="async" alt="icona grafica" width="40" height="40">
<h3 class="cs-h3">Approccio Diversificato</h3>
<p class="cs-item-text">
Ci spingiamo sempre oltre per garantire il benessere dei nostri clienti, offrendo orari di lavoro flessibili e un supporto attento fin dal primo contatto.
</p>
</a>
</li>
</ul>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Servizi -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#services-1304 {
padding: var(--sectionPadding);
position: relative;
z-index: 10;
}
#services-1304 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: clamp(3rem, 6vw, 4rem);
}
#services-1304 .cs-content {
text-align: left;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#services-1304 .cs-title {
max-width: 20ch;
}
#services-1304 .cs-card-group {
width: 100%;
max-width: 80rem;
margin: 0;
padding: 0 1rem;
background-color: #fff;
box-shadow: 0px 4px 35px 0px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(12, 1fr);
position: relative;
z-index: 15;
}
#services-1304 .cs-item {
text-align: left;
list-style: none;
width: 100%;
border-bottom: 1px solid #e8e8e8;
box-sizing: border-box;
grid-column: span 12;
transition:
background-color 0.3s,
border-color 0.3s;
}
#services-1304 .cs-item:last-of-type {
border-bottom: none;
}
#services-1304 .cs-link {
text-decoration: none;
padding: clamp(1.5rem, 5.3vw, 3.75rem) clamp(1rem, 2.7vw, 2.5rem);
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
#services-1304 .cs-icon {
height: clamp(2rem, 4vw, 2.5rem);
width: auto;
margin: 0 0 1rem 0;
}
#services-1304 .cs-h3 {
font-size: clamp(1.25rem, 2vw, 1.5625rem);
font-weight: 700;
text-align: inherit;
line-height: 1.2em;
margin: 0 0 0.75rem 0;
color: var(--headerColor);
transition: color 0.3s;
}
#services-1304 .cs-item-text {
font-size: clamp(0.875rem, 1.5vw, 1rem);
text-align: inherit;
line-height: 1.5em;
margin: 0;
color: var(--bodyTextColor);
transition:
color 0.3s,
opacity 0.3s;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#services-1304 .cs-content {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 3rem;
}
#services-1304 .cs-title {
margin: 0;
}
#services-1304 .cs-flex-group {
width: 50%;
flex: none;
}
#services-1304 .cs-item {
grid-column: span 6;
}
#services-1304 .cs-item:nth-of-type(4),
#services-1304 .cs-item:nth-of-type(8) {
border-right: none;
}
#services-1304 .cs-item:nth-of-type(7),
#services-1304 .cs-item:nth-of-type(8) {
border-bottom: none;
}
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#services-1304 .cs-card-group {
padding: 0;
}
#services-1304 .cs-item {
grid-column: span 3;
border-right: 1px solid #e8e8e8;
}
#services-1304 .cs-item:hover {
background-color: #1a1a1a;
border-color: #1a1a1a;
}
#services-1304 .cs-item:hover .cs-h3,
#services-1304 .cs-item:hover .cs-item-text {
color: var(--bodyTextColorWhite);
}
#services-1304 .cs-item:hover .cs-item-text {
opacity: 0.8;
}
#services-1304 .cs-item:nth-of-type(5),
#services-1304 .cs-item:nth-of-type(6),
#services-1304 .cs-item:nth-of-type(7),
#services-1304 .cs-item:nth-of-type(8) {
border-bottom: none;
}
}