AltoCode
Aliano 3 Recensioni
HTML
<!-- ============================================ -->
<!-- Recensioni -->
<!-- ============================================ -->
<section id="reviews-1673">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Testimonianze</span>
<h2 class="cs-title">Le Recensioni dei Nostri Clienti</h2>
</div>
<ul class="cs-card-group">
<li class="cs-item">
<div class="cs-flex-group">
<picture class="cs-picture">
<img class="cs-profile" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/ecomm-headshot1.jpeg" decoding="async" alt="profilo cliente" width="50" height="50" loading="lazy">
</picture>
<span class="cs-name">
Mario Rossi
<span class="cs-job">Studente</span>
</span>
</div>
<div class="wrapper">
<img class="cs-item-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/yellow-stars.svg" alt="icona stelle" width="96" height="16">
<p class="cs-review">
AltoConsulting ha trasformato la nostra strategia aziendale. I loro consulenti esperti hanno fornito
intuizioni geniali che ci hanno spinto verso il successo. La loro dedizione e le soluzioni innovative sono davvero encomiabili.
</p>
</div>
<img class="cs-quote" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gray-quote.svg" decoding="async" alt="icona citazione" width="120" height="99" loading="lazy">
</li>
<li class="cs-item">
<div class="cs-flex-group">
<picture class="cs-picture">
<img class="cs-profile" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/review2.jpg" decoding="async" alt="profilo cliente" width="50" height="50" loading="lazy">
</picture>
<span class="cs-name">
Marco Rossi
<span class="cs-job">Studente</span>
</span>
</div>
<div class="wrapper">
<img class="cs-item-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/yellow-stars.svg" alt="icona stelle" width="96" height="16">
<p class="cs-review">
AltoConsulting ha trasformato la nostra strategia aziendale. I loro consulenti esperti hanno fornito
intuizioni geniali che ci hanno spinto verso il successo. La loro dedizione e le soluzioni innovative sono davvero encomiabili.
</p>
</div>
<img class="cs-quote" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gray-quote.svg" decoding="async" alt="icona citazione" width="120" height="99" loading="lazy">
</li>
<li class="cs-item">
<div class="cs-flex-group">
<picture class="cs-picture">
<img class="cs-profile" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/MISC/ecomm-headshot2.jpeg" decoding="async" alt="profilo cliente" width="50" height="50" loading="lazy">
</picture>
<span class="cs-name">
Alfio Rossi
<span class="cs-job">Studente</span>
</span>
</div>
<div class="wrapper">
<img class="cs-item-stars" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/yellow-stars.svg" alt="icona stelle" width="96" height="16">
<p class="cs-review">
AltoConsulting ha trasformato la nostra strategia aziendale. I loro consulenti esperti hanno fornito
intuizioni geniali che ci hanno spinto verso il successo. La loro dedizione e le soluzioni innovative sono davvero encomiabili.
</p>
</div>
<img class="cs-quote" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/gray-quote.svg" decoding="async" alt="icona citazione" width="120" height="99" loading="lazy">
</li>
</ul>
</div>
<picture class="cs-background">
<source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/business-meeting.jpeg">
<source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/business-meeting.jpeg">
<img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/business-meeting.jpeg" alt="incontro lavorativo" width="886" height="842" loading="lazy">
</picture>
</section>
CSS
/*-- -------------------------- -->
<--- Recensioni -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#reviews-1673 {
padding: var(--sectionPadding);
position: relative;
z-index: 1;
}
#reviews-1673 .cs-container {
width: 100%;
max-width: 36.5rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(2.5rem, 4.5vw, 4rem);
}
#reviews-1673 .cs-content {
text-align: left;
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
#reviews-1673 .cs-title {
margin: 0rem;
}
#reviews-1673 .cs-card-group {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: clamp(1rem, 2.5vw, 1.25rem);
}
#reviews-1673 .cs-item {
list-style: none;
width: 100%;
max-width: 39.375rem;
padding: clamp(1.25rem, 3.15vw, 2.5rem) clamp(1.25rem, 3.15vw, 2.5rem);
background-color: #f7f7f7;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
position: relative;
gap: clamp(1.5rem, 4vw, 3rem);
}
#reviews-1673 .cs-flex-group {
margin-top: auto;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
#reviews-1673 .cs-profile {
width: 3.25rem;
height: 3.25rem;
border-radius: 50%;
position: relative;
display: block;
}
#reviews-1673 .cs-profile img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
#reviews-1673 .cs-name {
font-size: 1.25rem;
line-height: 1.2em;
font-weight: 700;
margin: 0;
margin-top: auto;
color: var(--headerColor);
display: block;
}
#reviews-1673 .cs-job {
font-size: 1rem;
line-height: 1.5em;
font-weight: 400;
margin: 0;
color: var(--bodyTextColor);
display: block;
}
#reviews-1673 .wrapper {
display: flex;
flex-direction: column;
gap: 1rem;
}
#reviews-1673 .cs-item-stars {
width: 6.75rem;
height: auto;
}
#reviews-1673 .cs-review {
font-size: clamp(0.875rem, 1.6vw, 1.25rem);
line-height: 1.5em;
margin: 0;
color: var(--bodyTextColor);
z-index: 1;
}
#reviews-1673 .cs-quote {
width: 5.375rem;
height: auto;
position: absolute;
right: 0rem;
bottom: 0rem;
z-index: 0;
}
#reviews-1673 .cs-background {
display: none;
position: absolute;
left: 50%;
right: 1rem;
top: 2.5rem;
bottom: 2.5rem;
z-index: -1;
}
#reviews-1673 .cs-background img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
object-fit: cover;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#reviews-1673 .cs-container {
max-width: 80rem;
}
#reviews-1673 .cs-card-group {
flex-direction: row;
justify-content: space-between;
align-items: stretch;
}
#reviews-1673 .cs-background {
display: block;
}
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#reviews-1673 .cs-background {
right: 2.5rem;
}
}