AltoCode
Gorgoglione 1 Recensione
HTML
<!-- ============================================ -->
<!-- Recensioni -->
<!-- ============================================ -->
<section id="reviews-1539">
<div class="cs-container">
<div class="cs-content">
<span class="cs-topper">Testimonianze</span>
<h2 class="cs-title">Il Feedback dei Nostri Clienti Soddisfatti</h2>
<p class="cs-text">
Promettiamo di prenderci cura dei bisogni sociali, emotivi, intellettuali e fisici di tuo figlio
con un’assistenza attenta e sensibile, garantendo allo stesso tempo la sua sicurezza.
</p>
</div>
<div class="cs-review">
<div class="cs-image-group">
<picture class="cs-picture">
<source media="(max-width: 600px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/day-care-review.jpg">
<source media="(min-width: 601px)" srcset="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/day-care-review.jpg">
<img decoding="async" src="https://csimages2.nyc3.digitaloceanspaces.com/Images/People/day-care-review.jpg" alt="cliente" width="413" height="374">
</picture>
<svg class="cs-mask" width="100%" height="100%" viewBox="0 0 264 288" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M266 0H0V288H266V0ZM22.47 277.06C-3.13 224.38 3.86 98.26 11.47 34.79C14.17 12.21 18.6 9.69 30.47 8.97C77.4 6.16 139.23 4.6 215.47 5C233.88 5.12 249.16 15.2 255.47 48.69C265.38 101.42 261.07 155.11 256.9 207.21C256.76 208.98 256.62 210.76 256.47 212.53C255.06 230.47 252.33 246.68 248.47 260.19C246.3 267.74 243.11 270.79 238.47 270.12C168.15 260.11 100.01 269.4 30.47 283.03C28.95 283.34 27.89 283.03 26.47 282.04C25.05 281.04 23.47 279.16 22.47 277.08V277.06Z"
fill="var(--maskBG)" />
<path
d="M11.4688 34.7899C3.85881 98.2599 -3.13119 224.37 22.4688 277.06C23.4688 279.14 25.0488 281.02 26.4688 282.02C27.8888 283.02 28.9488 283.32 30.4688 283.01C100.009 269.38 168.149 260.09 238.469 270.1C243.109 270.77 246.299 267.72 248.469 260.17C252.329 246.66 255.059 230.45 256.469 212.51C260.759 158.76 265.719 103.2 255.469 48.6799C249.159 15.1999 233.879 5.10993 215.469 4.98993C139.229 4.58993 77.3988 6.15993 30.4688 8.95993C18.5988 9.66993 14.1688 12.1999 11.4688 34.7799V34.7899Z"
stroke="var(--maskBorder)" stroke-width="8" />
</svg>
</div>
<div class="cs-flex">
<p class="cs-quote">
AltoCare è stato una vera svolta per la nostra famiglia.
Nostro figlio sta crescendo benissimo e siamo estremamente grati per il
personale premuroso, il programma educativo stimolante e la grande
attenzione alla sicurezza. Altamente consigliato!
</p>
<span class="cs-name">Mario Rossi</span>
<span class="cs-job">Interior Designer</span>
</div>
<div class="cs-blob-wrapper">
<svg class="cs-blob cs-blob1" width="162" height="128" viewBox="0 0 162 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.578 122.409C10.381 119.368 5.92643 114.978 3.60463 109.384C0.9885 103.088 0.175877 96.0886 -0.354449 89.3761C-0.866915 82.8575 -1.24072 75.777 -5.31557 70.3659C-9.67808 64.5668 -16.4216 63.1296 -23.3033 64.3291C-39.2035 67.104 -48.514 81.3615 -62.3523 88.2493C-76.8448 95.4647 -94.4631 94.1513 -109.354 89.1531C-116.966 86.597 -124.408 83.1835 -131.334 79.1082C-138.132 75.1098 -144.284 70.2008 -149.303 64.0714C-158.733 52.5594 -162.328 36.754 -160.217 22.0489C-158.195 7.94315 -150.61 -4.57519 -139.145 -12.908C-133.368 -17.1036 -127.101 -20.3408 -120.127 -21.8691C-111.542 -23.7487 -102.778 -23.0838 -94.1272 -21.816C-76.3173 -19.2024 -59.0408 -12.8899 -41.1498 -10.7076C-33.2319 -9.74094 -24.8931 -9.53953 -17.1478 -11.6585C-11.3315 -13.2476 -6.55438 -15.5318 -2.13146 -19.6277C2.49267 -23.9098 6.35041 -29.4307 9.8992 -34.6032C13.9864 -40.5641 18.343 -45.896 23.9319 -50.5745C35.2231 -60.0189 49.3056 -65.3874 63.9625 -65.4926C64.2181 -65.4958 64.7911 -65.5969 64.9625 -65.4906C72.1959 -65.4758 78.9861 -64.3591 85.9563 -62.4476C101.309 -58.2417 116.323 -49.9956 128.911 -40.3597C140.909 -31.1783 151.882 -20.4226 157.842 -6.30045C163.027 5.98506 163.158 20.3515 157.762 32.6995C155.234 38.4881 151.818 43.9003 146.731 47.6769C141.07 51.8764 132.65 55.09 125.721 52.634C118.883 50.211 116.075 41.9996 108.746 40.5992C102.216 39.3503 95.2099 43.0425 90.7313 47.5624C85.1368 53.2059 83.2703 60.9658 81.6883 68.5439C80.0954 76.1549 79.1905 84.1586 76.6413 91.5336C72.0829 104.72 63.2704 117.033 50.5759 123.48C39.6798 129.007 26.1617 128.597 15.578 122.409Z" fill="var(--blobColor)"/>
</svg>
<svg class="cs-blob cs-blob2" width="423" height="152" viewBox="0 0 423 152" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M446 185.996C437.652 209.276 424.317 227.375 409 226.996C398.568 226.732 389.048 219.154 380 211.996C346.92 185.812 321.111 207.237 285 219.996C244.784 234.202 223.038 185.716 189 168.996C142.612 146.21 105.611 185.367 58.9998 204.996C34.8473 215.167 10.0832 211.93 1.9998 169.996C-9.5339 110.121 40.5169 96.6287 61.9998 87.9963C77.3226 81.8377 93.2386 72.8434 107 56.9963C119.705 42.3661 131.527 7.18936 146 0.99633C152.671 -1.85625 158.896 2.75738 164 8.99633C171.922 18.6733 177.895 32.0744 187 38.9963C204.137 52.031 224.119 57.6817 244 49.9963C263.795 42.3397 279.796 18.2702 299 7.99633C309.489 2.383 321.457 2.19178 330 10.9963C344.858 26.3211 348.113 61.1321 363 76.9963C379.775 94.8809 403.952 94.1948 424 78.9963C429.052 75.168 433.775 70.4414 439 67.9963C455.161 60.443 463.429 84.0291 462 108.996C460.542 134.291 454.106 163.405 446 185.996Z" fill="var(--blobColor)" />
</svg>
</div>
<img class="cs-graphic"
src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/heart2.svg"
alt="grafica" loading="lazy" decoding="async" height="125" width="105">
</div>
</div>
</section>
CSS
/*-- -------------------------- -->
<--- Recensioni -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
#reviews-1539 {
padding: var(--sectionPadding);
overflow: hidden;
position: relative;
z-index: 1;
}
#reviews-1539 .cs-container {
max-width: 34.375rem;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(3rem, 6.3vw, 4rem);
}
#reviews-1539 .cs-content {
text-align: center;
width: 100%;
max-width: 39.375rem;
display: flex;
flex-direction: column;
align-items: center;
}
#reviews-1539 .cs-review {
width: 100%;
padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 4.375rem);
box-sizing: border-box;
border: 1px solid var(--secondary);
border-radius: clamp(2rem, 5vw, 6.25rem);
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(1.5rem, 6vw, 4rem);
position: relative;
z-index: 1;
}
#reviews-1539 .cs-review:before {
content: "";
width: 100%;
height: 100%;
background-color: var(--secondary);
border-radius: clamp(2rem, 5vw, 6.25rem);
opacity: 0.1;
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#reviews-1539 .cs-image-group {
width: 100%;
height: auto;
margin: 0;
position: relative;
z-index: 1;
aspect-ratio: 1.15966387;
}
#reviews-1539 .cs-picture {
width: 100%;
height: 100%;
display: block;
position: relative;
overflow: hidden;
}
#reviews-1539 .cs-picture img {
width: 100%;
height: auto;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#reviews-1539 .cs-flex {
max-width: 46rem;
}
#reviews-1539 .cs-quote {
font-size: clamp(0.875rem, 2vw, 1.25rem);
line-height: 1.5em;
font-weight: 400;
margin: 0 0 1.5rem;
color: #4e4b66;
}
#reviews-1539 .cs-name {
font-size: 1.25rem;
font-weight: 700;
line-height: 1.2em;
margin-bottom: 0.25rem;
color: #1a1a1a;
display: block;
}
#reviews-1539 .cs-job {
font-size: 1rem;
font-weight: 700;
line-height: 1.2em;
color: #ff6d41;
display: block;
}
#reviews-1539 .cs-mask {
--maskBorder: #ffffff;
--maskBG: #fff0ec;
width: 101%;
height: 101%;
position: absolute;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
}
#reviews-1539 .cs-mask path {
transition: stroke 0.3s;
}
#reviews-1539 .cs-blob-wrapper {
width: 100%;
height: 100%;
border-radius: clamp(2rem, 5vw, 6.25rem);
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#reviews-1539 .cs-blob {
--blobColor: var(--secondary);
}
#reviews-1539 .cs-blob1 {
width: 6.25rem;
height: auto;
opacity: 0.25;
position: absolute;
top: -0.3125rem;
left: -1.875rem;
}
#reviews-1539 .cs-blob2 {
width: clamp(14.9375rem, 40vw, 28.8125rem);
height: auto;
opacity: 0.25;
position: absolute;
right: -3.125rem;
bottom: -0.9375rem;
}
#reviews-1539 .cs-graphic {
width: clamp(4rem, 15vw, 6.5625rem);
height: auto;
position: absolute;
bottom: -1.25rem;
right: 0;
}
}
/* Tablet - 500px */
@media only screen and (min-width: 31.25rem) {
#reviews-1539 .cs-container {
max-width: 80rem;
}
#reviews-1539 .cs-review {
max-width: none;
flex-direction: row;
}
#reviews-1539 .cs-image-group,
#reviews-1539 .cs-flex {
flex: 1 0 0;
}
#reviews-1539 .cs-image-group {
max-width: 16.25rem;
}
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
#reviews-1539 .cs-container {
flex-direction: row;
justify-content: space-between;
}
#reviews-1539 .cs-content {
text-align: left;
width: 22.75rem;
align-items: flex-start;
flex: none;
order: 2;
}
#reviews-1539 .cs-picture {
font-size: inherit;
}
#reviews-1539 .cs-blob1 {
width: 10rem;
left: -1.25rem;
top: 0;
}
}