Login
Dashboard
Saved Stitches
Stitch Catalog
Demo
All
E-Commerce
All
(4)
Collections
(3)
Featured Products
(0)
Hero
(0)
Pop Up Modals
(0)
Promotional CTA
(1)
Store Products
(0)
Buttons
All
(1)
Non Standard
(0)
Squared
(1)
Navigation
All
(2)
+ Dropdown
(1)
+ Top Bar
(0)
Standard
(1)
Top Bar + Dropdown
(0)
Hero Section
All
(6)
Centered
(2)
Grid
(0)
Landing + Services
(3)
Left Aligned
(0)
Right Aligned
(1)
Services
All
(16)
3 Card
(4)
4 Card
(4)
5 Card
(1)
6 Card
(2)
8 Card
(1)
Combo
(2)
Side By Side
(2)
Content Flair
All
(3)
Button Boxes
(1)
Content Groups
(1)
Lists
(1)
Quotes
(0)
Stats
(0)
Toppers
(0)
Side By Side
All
(28)
Non Standard
(1)
Reverse
(8)
Reverse Pair
(5)
Reverse Triplet
(3)
Standard
(11)
Gallery
All
(7)
4 Images
(1)
5 Images
(1)
6 Images
(1)
8 Images
(2)
Full Width
(0)
Mosaic
(0)
Multi Gallery
(1)
Simple
(1)
Meet Our Team
All
(5)
2 Card
(0)
3 Card
(1)
4 Card
(2)
5 Card
(1)
6 Card
(0)
7 Card
(0)
8 Card
(1)
Combo
(0)
Steps
All
(4)
3 Steps
(2)
4 Steps
(2)
5 Steps
(0)
Stats
All
(5)
3 Stats
(0)
4 Stats
(3)
Combos
(1)
Timeline
(1)
Pricing
All
(7)
2 Card
(0)
3 Card
(3)
Menu's
(2)
w/ Toggles
(2)
FAQ
All
(4)
Multi FAQ's
(0)
Side By Side
(2)
Standard
(2)
Why Choose Us
All
(11)
3 Card
(1)
4 Card
(1)
6 Card
(0)
Side By Side
(9)
Quotes
All
(0)
Single Quotes
(0)
MISC
All
(4)
Careers
(0)
Content
(0)
Locations
(1)
Logos
(1)
Maps
(0)
Popups
(0)
Tables
(1)
Video
(1)
Reviews
All
(14)
2 Card
(4)
3 Card
(3)
4 Card
(0)
8 Card
(0)
Full Width
(0)
Single Review
(7)
Forms & Contact
All
(7)
Contact Forms
(7)
Contact Info
(0)
Subscribe
(0)
Events
All
(3)
3 Card
(1)
4 Card
(0)
Side By Side
(2)
Blog
All
(3)
Recent Posts
(3)
Call To Action
All
(4)
Combos
(1)
Contained
(0)
Full Width
(2)
Subscribe Forms
(1)
Footer
All
(6)
2 Column
(0)
3 Column
(1)
4 Column
(2)
5 Column
(1)
Combo
(0)
Simple
(2)
Dark Mode
All
(1)
Standard
(1)
Interior Pages
All
(3)
About Page
(0)
Contact Page
(0)
Content Page
(1)
FAQ Page
(1)
Menus
(0)
Page Banners
(1)
Single Review
HTML
CSS
Core Styles
Choose your preferred CSS
CSS
LESS
SCSS
CSS Dark
LESS Dark
SCSS Dark
Choose your preferred Core Styles CSS
CSS
LESS
SCSS
-
Dark Mode
+
Dark Mode
Copy
to Clipboard
<!-- ============================================ --> <!-- Review --> <!-- ============================================ --> <section id="reviews-1529"> <div class="cs-container"> <div class="cs-content"> <span class="cs-topper">Testimonials</span> <h2 class="cs-title">Happy Customer Feedback About Our Service</h2> <p class="cs-text"> We promise to take care of your child’s social, emotional, intellectual and physical needs with sensitive care and we also ensure you their security with our life. </p> </div> <div class="cs-review"> <div class="cs-image-group"> <picture class="cs-picture"> <source media="(max-width: 600px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/day-care-review.png"> <source media="(min-width: 601px)" srcset="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/day-care-review.png"> <img decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/People/day-care-review.png" alt="person" width="413" height="374" aria-hidden="true"> </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"> Stitch Day Care Center has been a game-changer for our family. Our child is thriving, and we're beyond grateful for their caring staff, stimulating curriculum, and strong focus on safety. Highly recommended! </p> <span class="cs-name">Jenny Wilson</span> <span class="cs-job">UI/UX Designer</span> </div> <div class="cs-blob-wrapper"> <!--Wrapper in a div so we dont need to set overflow hidden on the cs-review to clip them, which would clip the floating graphics as well. Instead we have a sacrifical div to clip the blobs inside of--> <!--Left Blob--> <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> <!--RIght blob--> <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> <!--Green Squiggles--> <img class="cs-graphic cs-graphic-one" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/day-care-team-graphic-four.svg" alt="graphic" loading="lazy" decoding="async" height="134" width="197"> <!--Rd Squiggle--> <img class="cs-graphic cs-graphic-two" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/day-care-team-graphic-three.svg" alt="graphic" loading="lazy" decoding="async" height="191" width="138"> </div> </div> </section>
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; } #reviews-1529 .cs-container { /* changes to 1280px at tablet */ max-width: 34.375rem; margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } #reviews-1529 .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: 39.375rem; display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } #reviews-1529 .cs-review { width: 100%; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; position: relative; z-index: 1; } #reviews-1529 .cs-review:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 1.15966387; } #reviews-1529 .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } #reviews-1529 .cs-picture img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-flex { max-width: 46rem; } #reviews-1529 .cs-quote { /* 14px - 20px */ font-size: clamp(0.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 1.5rem; color: #4e4b66; } #reviews-1529 .cs-name { font-size: 1.25rem; font-weight: 700; line-height: 1.2em; margin-bottom: 0.25rem; color: #1a1a1a; display: block; } #reviews-1529 .cs-job { font-size: 1rem; font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } #reviews-1529 .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; } #reviews-1529 .cs-mask path { transition: stroke 0.3s; } #reviews-1529 .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-blob { --blobColor: var(--secondary); } #reviews-1529 .cs-blob1 { width: 6.25rem; height: auto; opacity: 0.25; position: absolute; top: -0.3125rem; left: -1.875rem; } #reviews-1529 .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: -3.125rem; bottom: -0.9375rem; } #reviews-1529 .cs-graphic { position: absolute; z-index: 1; } #reviews-1529 .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: -1.25rem; right: -1.25rem; transform: rotate(104deg); } #reviews-1529 .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: -1.25rem; left: -2rem; } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 .cs-container { max-width: 80rem; } #reviews-1529 .cs-review { max-width: none; flex-direction: row; } #reviews-1529 .cs-image-group, #reviews-1529 .cs-flex { flex: 1 0 0; } #reviews-1529 .cs-image-group { max-width: 16.25rem; } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 .cs-picture { font-size: inherit; } #reviews-1529 .cs-blob1 { width: 10rem; left: 0; top: 0; } }
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; } #reviews-1529 .cs-container { /* changes to 1280px at tablet */ max-width: 34.375rem; margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } #reviews-1529 .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: 39.375rem; display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } #reviews-1529 .cs-review { width: 100%; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; position: relative; z-index: 1; } #reviews-1529 .cs-review:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 1.15966387; } #reviews-1529 .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; } #reviews-1529 .cs-picture img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-flex { max-width: 46rem; } #reviews-1529 .cs-quote { /* 14px - 20px */ font-size: clamp(0.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 1.5rem; color: #4e4b66; } #reviews-1529 .cs-name { font-size: 1.25rem; font-weight: 700; line-height: 1.2em; margin-bottom: 0.25rem; color: #1a1a1a; display: block; } #reviews-1529 .cs-job { font-size: 1rem; font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } #reviews-1529 .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; } #reviews-1529 .cs-mask path { transition: stroke 0.3s; } #reviews-1529 .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } #reviews-1529 .cs-blob { --blobColor: var(--secondary); } #reviews-1529 .cs-blob1 { width: 6.25rem; height: auto; opacity: 0.25; position: absolute; top: -0.3125rem; left: -1.875rem; } #reviews-1529 .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: -3.125rem; bottom: -0.9375rem; } #reviews-1529 .cs-graphic { position: absolute; z-index: 1; } #reviews-1529 .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: -1.25rem; right: -1.25rem; transform: rotate(104deg); } #reviews-1529 .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: -1.25rem; left: -2rem; } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 .cs-container { max-width: 80rem; } #reviews-1529 .cs-review { max-width: none; flex-direction: row; } #reviews-1529 .cs-image-group, #reviews-1529 .cs-flex { flex: 1 0 0; } #reviews-1529 .cs-image-group { max-width: 16.25rem; } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 .cs-picture { font-size: inherit; } #reviews-1529 .cs-blob1 { width: 10rem; left: 0; top: 0; } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode #reviews-1529 .cs-review:before { opacity: 1; background-color: #061a28; } body.dark-mode #reviews-1529 .cs-mask { --maskBorder: var(--accent); --maskBG: #061a28; } body.dark-mode #reviews-1529 .cs-title, body.dark-mode #reviews-1529 .cs-text, body.dark-mode #reviews-1529 .cs-name, body.dark-mode #reviews-1529 .cs-quote { color: var(--bodyTextColorWhite); } body.dark-mode #reviews-1529 .cs-text, body.dark-mode #reviews-1529 .cs-quote { opacity: 0.8; } }
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; .cs-container { /* changes to 1280px at tablet */ max-width: (550/16rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: (630/16rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-review { width: 100%; box-sizing: border-box; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: (24/16rem); position: relative; z-index: 1; &:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 276/238; } .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-flex { max-width: (736/16rem); } .cs-quote { /* 14px - 20px */ font-size: clamp(.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 (24/16rem); color: #4e4b66; } .cs-name { font-size: (20/16rem); font-weight: 700; line-height: 1.2em; margin-bottom: (4/16rem); color: #1a1a1a; display: block; } .cs-job { font-size: (16/16rem); font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; path { transition: stroke 0.3s; } } .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .cs-blob { --blobColor: var(--secondary); } .cs-blob1 { width: (100/16rem); height: auto; opacity: 0.25; position: absolute; top: (-5/16rem); left: (-30/16rem); } .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: (-50/16rem); bottom: (-15/16rem); } .cs-graphic { position: absolute; z-index: 1; } .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: (-20/16rem); right: (-20/16rem); transform: rotate(104deg); } .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: (-20/16rem); left: (-32/16rem); } } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 { .cs-container { max-width: (1280/16rem); } .cs-review { max-width: none; flex-direction: row; } .cs-image-group, .cs-flex { flex: 1 0 0; } .cs-image-group { max-width: (260/16rem); } } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 { .cs-picture { font-size: inherit; } .cs-blob1 { width: (160/16rem); left: 0; top: 0; } } }
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; .cs-container { /* changes to 1280px at tablet */ max-width: (550/16rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: (630/16rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-review { width: 100%; box-sizing: border-box; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: (24/16rem); position: relative; z-index: 1; &:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 276/238; } .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-flex { max-width: (736/16rem); } .cs-quote { /* 14px - 20px */ font-size: clamp(.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 (24/16rem); color: #4e4b66; } .cs-name { font-size: (20/16rem); font-weight: 700; line-height: 1.2em; margin-bottom: (4/16rem); color: #1a1a1a; display: block; } .cs-job { font-size: (16/16rem); font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; path { transition: stroke 0.3s; } } .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .cs-blob { --blobColor: var(--secondary); } .cs-blob1 { width: (100/16rem); height: auto; opacity: 0.25; position: absolute; top: (-5/16rem); left: (-30/16rem); } .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: (-50/16rem); bottom: (-15/16rem); } .cs-graphic { position: absolute; z-index: 1; } .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: (-20/16rem); right: (-20/16rem); transform: rotate(104deg); } .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: (-20/16rem); left: (-32/16rem); } } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 { .cs-container { max-width: (1280/16rem); } .cs-review { max-width: none; flex-direction: row; } .cs-image-group, .cs-flex { flex: 1 0 0; } .cs-image-group { max-width: (260/16rem); } } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 { .cs-picture { font-size: inherit; } .cs-blob1 { width: (160/16rem); left: 0; top: 0; } } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode { #reviews-1529 { .cs-review { &:before { opacity: 1; background-color: #061a28; } } .cs-mask { --maskBorder: var(--accent); --maskBG: #061a28; } .cs-title, .cs-text, .cs-name, .cs-quote { color: var(--bodyTextColorWhite); } .cs-text, .cs-quote { opacity: 0.8; } } } }
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; .cs-container { /* changes to 1280px at tablet */ max-width: calc(550 / 16 * 1rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: calc(630 / 16 * 1rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-review { width: 100%; box-sizing: border-box; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: calc(24 / 16 * 1rem); position: relative; z-index: 1; &:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 276/238; } .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-flex { max-width: calc(736 / 16 * 1rem); } .cs-quote { /* 14px - 20px */ font-size: clamp(.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 calc(24 / 16 * 1rem); color: #4e4b66; } .cs-name { font-size: calc(20 / 16 * 1rem); font-weight: 700; line-height: 1.2em; margin-bottom: calc(4 / 16 * 1rem); color: #1a1a1a; display: block; } .cs-job { font-size: calc(16 / 16 * 1rem); font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; path { transition: stroke 0.3s; } } .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .cs-blob { --blobColor: var(--secondary); } .cs-blob1 { width: calc(100 / 16 * 1rem); height: auto; opacity: 0.25; position: absolute; top: calc(-5 / 16 * 1rem); left: calc(-30 / 16 * 1rem); } .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: calc(-50 / 16 * 1rem); bottom: calc(-15 / 16 * 1rem); } .cs-graphic { position: absolute; z-index: 1; } .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: calc(-20 / 16 * 1rem); right: calc(-20 / 16 * 1rem); transform: rotate(104deg); } .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: calc(-20 / 16 * 1rem); left: calc(-32 / 16 * 1rem); } } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 { .cs-container { max-width: calc(1280 / 16 * 1rem); } .cs-review { max-width: none; flex-direction: row; } .cs-image-group, .cs-flex { flex: 1 0 0; } .cs-image-group { max-width: calc(260 / 16 * 1rem); } } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 { .cs-picture { font-size: inherit; } .cs-blob1 { width: calc(160 / 16 * 1rem); left: 0; top: 0; } } }
/*-- -------------------------- --> <--- CTA --> <--- -------------------------- -*/ /* Mobile - 360px */ @media only screen and (min-width: 0rem) { #reviews-1529 { padding: var(--sectionPadding); overflow: hidden; position: relative; z-index: 1; .cs-container { /* changes to 1280px at tablet */ max-width: calc(550 / 16 * 1rem); margin: auto; display: flex; flex-direction: column; align-items: center; /* 48px - 64px */ gap: clamp(3rem, 6.3vw, 4rem); } .cs-content { /* set text align to left if content needs to be left aligned */ text-align: center; width: 100%; max-width: calc(630 / 16 * 1rem); display: flex; flex-direction: column; /* centers content horizontally, set to flex-start to left align */ align-items: center; } .cs-review { width: 100%; box-sizing: border-box; /* 32px - 80px top & bottom, 24px to 110px sides*/ padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem); box-sizing: border-box; border: 1px solid var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); display: flex; flex-direction: column; align-items: center; gap: calc(24 / 16 * 1rem); position: relative; z-index: 1; &:before { /* background-color */ content: ""; width: 100%; height: 100%; background-color: var(--secondary); /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); opacity: 0.1; display: block; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-image-group { width: 100%; height: auto; margin: 0; position: relative; z-index: 1; aspect-ratio: 276/238; } .cs-picture { width: 100%; height: 100%; display: block; position: relative; overflow: hidden; img { width: 100%; height: auto; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; } } .cs-flex { max-width: calc(736 / 16 * 1rem); } .cs-quote { /* 14px - 20px */ font-size: clamp(.875rem, 2vw, 1.25rem); line-height: 1.5em; font-weight: 400; margin: 0 0 calc(24 / 16 * 1rem); color: #4e4b66; } .cs-name { font-size: calc(20 / 16 * 1rem); font-weight: 700; line-height: 1.2em; margin-bottom: calc(4 / 16 * 1rem); color: #1a1a1a; display: block; } .cs-job { font-size: calc(16 / 16 * 1rem); font-weight: 700; line-height: 1.2em; color: #ff6d41; display: block; } .cs-mask { /* SVG Colors */ --maskBorder: #ffffff; --maskBG: #fff0ec; width: 101%; height: 101%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; path { transition: stroke 0.3s; } } .cs-blob-wrapper { width: 100%; height: 100%; /* 32px - 100px */ border-radius: clamp(2rem, 5vw, 6.25rem); overflow: hidden; /* prevents the mouse from interacting with it */ pointer-events: none; position: absolute; top: 0; left: 0; z-index: -1; } .cs-blob { --blobColor: var(--secondary); } .cs-blob1 { width: calc(100 / 16 * 1rem); height: auto; opacity: 0.25; position: absolute; top: calc(-5 / 16 * 1rem); left: calc(-30 / 16 * 1rem); } .cs-blob2 { /* 239px - 461px */ width: clamp(14.9375rem, 40vw, 28.8125rem); height: auto; opacity: 0.25; position: absolute; right: calc(-50 / 16 * 1rem); bottom: calc(-15 / 16 * 1rem); } .cs-graphic { position: absolute; z-index: 1; } .cs-graphic-one { /* 48px - 138px */ width: clamp(3rem, 10vw, 8.625rem); height: auto; top: calc(-20 / 16 * 1rem); right: calc(-20 / 16 * 1rem); transform: rotate(104deg); } .cs-graphic-two { /* 88px - 197px */ width: clamp(5.5rem, 15vw, 12.3125rem); height: auto; bottom: calc(-20 / 16 * 1rem); left: calc(-32 / 16 * 1rem); } } } /* Tablet - 500px */ @media only screen and (min-width: 31.25rem) { #reviews-1529 { .cs-container { max-width: calc(1280 / 16 * 1rem); } .cs-review { max-width: none; flex-direction: row; } .cs-image-group, .cs-flex { flex: 1 0 0; } .cs-image-group { max-width: calc(260 / 16 * 1rem); } } } /* Larger Desktop - 1300px */ @media only screen and (min-width: 81.25rem) { #reviews-1529 { .cs-picture { font-size: inherit; } .cs-blob1 { width: calc(160 / 16 * 1rem); left: 0; top: 0; } } } /* Dark Mode */ @media only screen and (min-width: 0rem) { body.dark-mode { #reviews-1529 { .cs-review { &:before { opacity: 1; background-color: #061a28; } } .cs-mask { --maskBorder: var(--accent); --maskBG: #061a28; } .cs-title, .cs-text, .cs-name, .cs-quote { color: var(--bodyTextColorWhite); } .cs-text, .cs-quote { opacity: 0.8; } } } }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: 0.25rem; display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: 43.75rem; margin: 0 0 1rem 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: 40.625rem; margin: 0; color: var(--bodyTextColor); }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: (4/16rem); display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: (700/16rem); margin: 0 0 (16/16rem) 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: (650/16rem); margin: 0; color: var(--bodyTextColor); }
:root { /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */ --primary: #ff6a3e; --primaryLight: #ffba43; --secondary: #ffba43; --secondaryLight: #ffba43; --headerColor: #1a1a1a; --bodyTextColor: #4e4b66; --bodyTextColorWhite: #fafbfc; /* 13px - 16px */ --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem); /* 31px - 49px */ --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem); --bodyFontSize: 1rem; /* 60px - 100px top and bottom */ --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem; } body { margin: 0; padding: 0; } *, *:before, *:after { /* prevents padding from affecting height and width */ box-sizing: border-box; } .cs-topper { font-size: var(--topperFontSize); line-height: 1.2em; text-transform: uppercase; text-align: inherit; letter-spacing: .1em; font-weight: 700; color: var(--primary); margin-bottom: calc(4 / 16 * 1rem); display: block; } .cs-title { font-size: var(--headerFontSize); font-weight: 900; line-height: 1.2em; text-align: inherit; max-width: calc(700 / 16 * 1rem); margin: 0 0 calc(16 / 16 * 1rem) 0; color: var(--headerColor); position: relative; } .cs-text { font-size: var(--bodyFontSize); line-height: 1.5em; text-align: inherit; width: 100%; max-width: calc(650 / 16 * 1rem); margin: 0; color: var(--bodyTextColor); }
Lorem Ipsum
Undo