AltoCode
Valsinni 3 Recensioni
HTML
<!-- ============================================ -->
<!-- Recensioni -->
<!-- ============================================ -->
<section id="testimonials-2060">
<div class="cs-container">
<ul class="cs-card-group">
<li class="cs-content">
<span class="cs-topper">Testimonianze</span>
<h2 class="cs-title">Cosa Dicono i Nostri Clienti</h2>
<p class="cs-text">
Orci eu lobortis elementum nibh tellus. Vulputate eu scelerisque felis imperdiet proin fermentum leo vel. Luctus accumsan tortor.
</p>
</li>
<li class="cs-item cs-item-green">
<img class="cs-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/green-stars.png" alt="icona stelle" width="120" height="24">
<h3 class="cs-h3">99.99% Soddisfazione dei clienti</h3>
<p class="cs-green-text">
Basato su oltre 750 recensioni e 6.154 progetti completati
</p>
<img class="cs-graphic" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/dentitch-joined-graphic.svg" alt="" width="528" height="830" decoding="async">
</li>
<li class="cs-item cs-item-picture">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-1.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-1.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-1.jpg" alt="cliente profilo" width="630" height="877">
</picture>
</li>
<li class="cs-item">
<img class="cs-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/dental-stars.png" alt="icona stelle" width="120" height="24">
<h3 class="cs-h3">Mario Rossi</h3>
<span class="cs-job">Direttore Manager</span>
<p class="cs-quote">
"Dalle pulizie di routine alle procedure più complesse, il nostro team esperto è dedicato a garantire il tuo comfort e a ottenere i risultati che desideri."
</p>
</li>
<li class="cs-item cs-item-picture">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-2.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-2.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-2.jpg" alt="cliente profilo" width="630" height="877">
</picture>
</li>
<li class="cs-item">
<img class="cs-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/dental-stars.png" alt="icona stelle" width="120" height="24">
<h3 class="cs-h3">Mario Rossi</h3>
<span class="cs-job">Direttore Manager</span>
<p class="cs-quote">
"Dalle pulizie di routine alle procedure più complesse, il nostro team esperto è dedicato a garantire il tuo comfort e a ottenere i risultati che desideri."
</p>
</li>
<li class="cs-item cs-item-picture">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-3.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-3.jpg">
<img loading="lazy" decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/dental-testimonial-3.jpg" alt="cliente profilo" width="630" height="877">
</picture>
</li>
<li class="cs-item">
<img class="cs-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/dental-stars.png" alt="icona stelle" width="120" height="24">
<h3 class="cs-h3">Mario Rossi</h3>
<span class="cs-job">Direttore Manager</span>
<p class="cs-quote">
"Dalle pulizie di routine alle procedure più complesse, il nostro team esperto è dedicato a garantire il tuo comfort e a ottenere i risultati che desideri."
</p>
</li>
</ul>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Recensioni -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#testimonials-2060 {
padding: var(--sectionPadding);
bottom: -10.875rem;
left: -0.6875rem;
}
#testimonials-2060 .cs-container {
width: 100%;
max-width: 80rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6vw, 4rem);
}
#testimonials-2060 .cs-card-group {
list-style: none;
width: 100%;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: clamp(1rem, 2vw, 1.25rem);
}
#testimonials-2060 .cs-content {
text-align: left;
width: 100%;
margin: 0 0 1.75rem;
padding-right: 3rem;
display: flex;
flex-direction: column;
align-items: flex-start;
grid-column: span 12;
}
#testimonials-2060 .cs-title,
#testimonials-2060 .cs-text {
max-width: 100%;
}
#testimonials-2060 .cs-green-text {
font-size: clamp(1rem, 2vw, 1.25rem);
margin: 0 0 2rem 0;
}
#testimonials-2060 .cs-item {
text-align: center;
padding: 1rem;
overflow: hidden;
border-radius: 1rem;
display: flex;
flex-direction: column;
align-items: center;
grid-column: span 12;
position: relative;
}
#testimonials-2060 .cs-item-picture {
min-height: 25.375rem;
}
#testimonials-2060 .cs-picture {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#testimonials-2060 .cs-picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
#testimonials-2060 .cs-stars {
width: 6rem;
height: auto;
margin: clamp(1.5rem, 5vw, 3rem) 0 1rem;
}
#testimonials-2060 .cs-h3 {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2em;
text-align: inherit;
margin: 0 0 0.25rem;
color: var(--headerColor);
}
#testimonials-2060 .cs-job {
font-size: 1rem;
line-height: 1.5em;
text-align: inherit;
color: var(--Main-Paragraph, #4e4b66);
}
#testimonials-2060 .cs-quote {
font-size: 1.5625rem;
font-weight: 700;
line-height: 1.2em;
text-align: inherit;
margin: 2rem 0 0;
color: var(--headerColor);
}
#testimonials-2060 .cs-item-green {
text-align: left;
padding: 2.5rem;
padding-bottom: 10rem;
background-color: #f2fbf8;
align-items: flex-start;
}
#testimonials-2060 .cs-item-green .cs-stars {
width: 7.5rem;
margin: 0 0 2rem;
}
#testimonials-2060 .cs-item-green .cs-h3 {
margin: 0 0 0.5rem;
}
#testimonials-2060 .cs-item-green .cs-text {
margin: 0;
}
#testimonials-2060 .cs-graphic {
width: 20.3125rem;
height: 23.4375rem;
object-fit: contain;
opacity: 0.3;
position: absolute;
bottom: -12.9375rem;
left: 50%;
transform: translateX(-50%);
}
}
/* Tablet - 600px */
@media only screen and (min-width: 37.5rem) {
#testimonials-2060 .cs-content,
#testimonials-2060 .cs-item {
grid-column: span 6;
}
#testimonials-2060 .cs-content {
order: 1;
}
#testimonials-2060 .cs-item:nth-child(2) {
order: 3;
}
#testimonials-2060 .cs-item:nth-child(3) {
order: 2;
}
#testimonials-2060 .cs-item:nth-child(4) {
order: 4;
}
#testimonials-2060 .cs-item:nth-child(5) {
order: 7;
}
#testimonials-2060 .cs-item:nth-child(6) {
order: 5;
}
#testimonials-2060 .cs-item:nth-child(7) {
order: 6;
}
#testimonials-2060 .cs-item:nth-child(8) {
order: 8;
}
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#testimonials-2060 .cs-content,
#testimonials-2060 .cs-item {
grid-column: span 3;
}
#testimonials-2060 .cs-content {
padding: 0;
}
#testimonials-2060 .cs-item:nth-child(2) {
order: 5;
}
#testimonials-2060 .cs-item:nth-child(3) {
order: 2;
}
#testimonials-2060 .cs-item:nth-child(4) {
order: 3;
}
#testimonials-2060 .cs-item:nth-child(5) {
order: 7;
}
#testimonials-2060 .cs-item:nth-child(6) {
order: 6;
}
#testimonials-2060 .cs-item:nth-child(7) {
order: 4;
}
#testimonials-2060 .cs-item:nth-child(8) {
order: 8;
}
#testimonials-2060 .cs-stars {
margin-top: 1.25rem;
}
}