Testimonial Heading

"Butcher next level readymade narwhal. Whatever pork belly bicycle rights readymade, tumblr microdosing kickstarter.

Kitsch whatever portland pork belly meditation tumeric helvetica af tattooed mumblecore next level cold-pressed put a bird on it pinterest."

Max Conversion
SEO Expert

<section class="hero--split-hero columns" aria-labelledby="testimonial-heading">
  <div class="hero__image col">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/800x800?space" alt="" width="1800" height="600">
    </picture>
  </div>
  <div class="hero__content col">
    <div class="wrapper-sm text-color-white flow">
      <div class="icon-xxl icon-fill-primary">
        <svg width="45" height="41" viewBox="0 0 45 41" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.65 40.15C0.65 37.75 0.65 35.35 0.65 32.95C0.65 30.45 0.65 28 0.65 25.6C0.65 17.9 1.75 11.85 3.95 7.44999C6.15 3.05 10 0.749995 15.5 0.549992L18.35 6.4C15.25 6.69999 13.1 8.19999 11.9 10.9C10.8 13.5 10.25 17.65 10.25 23.35H18.2V40.15H0.65ZM27.05 40.15C27.05 37.75 27.05 35.35 27.05 32.95C27.05 30.45 27.05 28 27.05 25.6C27.05 17.9 28.15 11.85 30.35 7.44999C32.55 3.05 36.4 0.749995 41.9 0.549992L44.75 6.4C41.65 6.69999 39.5 8.19999 38.3 10.9C37.2 13.5 36.65 17.65 36.65 23.35H44.6V40.15H27.05Z"></path></svg>
      </div>
      <h1 id="testimonial-heading">Testimonial Heading</h1>
      <div class="flow">
        <p>"Butcher next level readymade narwhal. Whatever pork belly bicycle rights readymade, tumblr microdosing kickstarter.</p>
        <p>Kitsch whatever portland pork belly meditation tumeric helvetica af tattooed mumblecore next level cold-pressed put a bird on it pinterest."</p>
        <div>
          <span class="text-color-primary">Max Conversion</span><br>
          <span class="text-style-slub">SEO Expert</span>
        </div>
      </div>
    </div>
  </div>
</section>

.hero--split-hero {
  position: relative;
  height: 70vh; 
  max-height: 500px;
  overflow: hidden;
}

.hero--split-hero .hero__content {
  margin: auto 0;
}

.hero--split-hero .hero__image {
  position: relative;
}

.hero--split-hero .hero__image img {
  position: absolute;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--split-hero svg {
  position: absolute;
  top: 0;
  fill: $primary-color;
}

Testimonials

What Our Clients Are Saying

Testimonial Heading

"Roof party twee slow-carb brunch. Literally solarpunk 3 wolf moon, hammock ethical bruh four loko tacos air plant dreamcatcher readymade salvia."

Max Conversion
SEO Expert

Testimonial Heading

"Kickstarter trust fund bushwick ugh. Fingerstache sartorial ramps, beard cred organic fam DSA."

Max Conversion
SEO Expert

Testimonial Heading

"Sus 3 wolf moon small batch portland tumblr edison bulb art party. Seitan shoreditch chia cornhole stumptown vibecession next level PBR&B bodega boys neutra."

Max Conversion
SEO Expert

<section class="testimonial testimonial--cards block text-color-white" aria-labelledby="testimonial-heading">
  <div class="wrapper-lg text-align-center">
    <span class="text-style-slub">Testimonials</span>
    <h2 class="testimonial__heading" id="testimonial-heading">What Our Clients Are Saying</h2>
  </div>
  <div class="wrapper-lg columns gap-sm">
    <div class="testimonial__card col flex flex-column flex-justify-between flow bg-black-2">
      <div class="flow">
        <h3 class="h4" id="testimonial-heading">Testimonial Heading</h3>
        <p>"Roof party twee slow-carb brunch. Literally solarpunk 3 wolf moon, hammock ethical bruh four loko tacos air plant dreamcatcher readymade salvia."</p>
      </div>
      <div class="flex gap-sm">
        <div class="testimonial__card-image">
          <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
        </div>
        <div class="margin-block-auto">
          <span>Max Conversion</span><br>
          <span class="text-style-slub">SEO Expert</span>
        </div>
      </div>
    </div>
    <div class="testimonial__card col flex flex-column flex-justify-between flow bg-black-2">
      <div class="flow">
        <h3 class="h4" id="testimonial-heading">Testimonial Heading</h3>
        <p>"Kickstarter trust fund bushwick ugh. Fingerstache sartorial ramps, beard cred organic fam DSA."</p>
      </div>
      <div class="flex gap-sm">
        <div class="testimonial__card-image">
          <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
        </div>
        <div class="margin-block-auto">
          <span>Max Conversion</span><br>
          <span class="text-style-slub">SEO Expert</span>
        </div>
      </div>
    </div>
    <div class="testimonial__card col flex flex-column flex-justify-between flow bg-black-2">
      <div class="flow">
        <h3 class="h4" id="testimonial-heading">Testimonial Heading</h3>
        <p>"Sus 3 wolf moon small batch portland tumblr edison bulb art party. Seitan shoreditch chia cornhole stumptown vibecession next level PBR&B bodega boys neutra."</p>
      </div>
      <div class="flex gap-sm">
        <div class="testimonial__card-image">
          <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
        </div>
        <div class="margin-block-auto">
          <span>Max Conversion</span><br>
          <span class="text-style-slub">SEO Expert</span>
        </div>
      </div>
    </div>
  </div>
</section>

.testimonial__card {
    padding: $ic-300;
    border-radius: 10px;
    box-shadow: 0px 8px 16px rgba(0,0,0,.1);
}

.testimonial__card-image img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 5px solid $dark-black;
    border-radius: 50%;
}

"Mumblecore fashion axe flannel, meh mustache tumblr hexagon palo santo bitters. Food truck plaid heirloom chicharrones +1, cupping raclette tumeric kogi lomo beard. Man braid pickled selvage, butcher blue bottle paleo sus authentic DSA synth raw denim neutra vaporware heirloom mustache."

Max Conversion

SEO Expert

<div class="block bg-primary text-color-white">
  <div class="testimonial testimonial--full wrapper-md flow">
    <div class="testimonial__icon icon-xxl icon-fill-white">
      <svg width="45" height="41" viewBox="0 0 45 41" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.65 40.15C0.65 37.75 0.65 35.35 0.65 32.95C0.65 30.45 0.65 28 0.65 25.6C0.65 17.9 1.75 11.85 3.95 7.44999C6.15 3.05 10 0.749995 15.5 0.549992L18.35 6.4C15.25 6.69999 13.1 8.19999 11.9 10.9C10.8 13.5 10.25 17.65 10.25 23.35H18.2V40.15H0.65ZM27.05 40.15C27.05 37.75 27.05 35.35 27.05 32.95C27.05 30.45 27.05 28 27.05 25.6C27.05 17.9 28.15 11.85 30.35 7.44999C32.55 3.05 36.4 0.749995 41.9 0.549992L44.75 6.4C41.65 6.69999 39.5 8.19999 38.3 10.9C37.2 13.5 36.65 17.65 36.65 23.35H44.6V40.15H27.05Z"></path>
      </svg>
    </div>
    <div class="font-size-md text-align-center">"Mumblecore fashion axe flannel, meh mustache tumblr hexagon palo santo bitters. Food truck plaid heirloom chicharrones +1, cupping raclette tumeric kogi lomo beard. Man braid pickled selvage, butcher blue bottle paleo sus authentic DSA synth raw denim neutra vaporware heirloom mustache."</div>
    <div class="text-align-center">
      <div class="testimonial__image">
        <img src="https://source.unsplash.com/random/100x100?face" alt="" width="50" height="50">
      </div>
      <div class="fw-600">Max Conversion</div>
      <div class="text-style-slub">SEO Expert</div>
    </div>
  </div>
</div>

.testimonial--full .testimonial__icon {
    margin: 0 auto;
}

.testimonial--full .testimonial__image img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border: 5px solid $white;
    border-radius: 50%;
    margin: 0 auto;
}

Testimonials

What Our Clients Are Saying

Testimonial Heading

"Church-key gluten-free fixie cliche. Tilde taxidermy kitsch meditation bodega boys photo booth subway tile 3 wolf moon."

Max Conversion
SEO Expert

<section class="testimonial testimonial--single block text-color-white" aria-labelledby="testimonial-heading">
  <div class="wrapper-lg">
    <span class="text-style-slub">Testimonials</span>
    <h2 class="testimonial__heading" id="testimonial-heading">What Our Clients Are Saying</h2>
  </div>
  <div class="wrapper-lg bg-primary columns gap-xl">
      <div class="testimonial__content margin-block-auto col block flow">
          <h3 class="h4" id="testimonial-heading">Testimonial Heading</h3>
          <div class="flow">
            <p>"Church-key gluten-free fixie cliche. Tilde taxidermy kitsch meditation bodega boys photo booth subway tile 3 wolf moon."</p>
            <div>
              <span>Max Conversion</span><br>
              <span class="text-style-slub">SEO Expert</span>
            </div>
          </div>
      </div>
      <div class="testimonial__image col p-relative">
          <img src="https://source.unsplash.com/random/400x600?space" alt="" width="600" height="600">
      </div>
  </div>
</section>

.testimonial--single .testimonial__heading {
    max-width: 16ch;
}

.testimonial--single .testimonial__image img {
    max-width: 400px;
    margin-block: -75px;
    margin-inline: auto;
}

"Butcher next level readymade narwhal. Whatever pork belly mustache pork belly meditation bicycle rights readymade, tumblr microdosing mustache kickstarter."

Max Conversion
SEO Expert

<section class="testimonial--small-image wrapper-lg grid gap-lg" aria-labelledby="testimonial-heading">
  <div class="grid-12 grid-3-md">
    <picture>
      <source sizes="100vw" srcset="" type="image/avif">

      <source sizes="100vw" srcset="" type="image/webp">

      <source sizes="100vw" srcset="" type="image/jpg">

      <img src="https://source.unsplash.com/random/400x300?space" alt="" width="1800" height="600">
    </picture>
  </div>
  <div class="grid-12 grid-9-md text-color-white">
    <div class="flow">
      <img src="//localhost:1313/uploads/Insight-Logo-White.png" alt="Insight Creative, Inc. logo" class="testimonial--small-image__logo dim" width="200" height="100">
      <p>"Butcher next level readymade narwhal. Whatever pork belly mustache pork belly meditation bicycle rights readymade, tumblr microdosing mustache kickstarter."</p>
      <div>
        <span class="text-color-primary">Max Conversion</span><br>
        <span class="text-style-slub">SEO Expert</span>
      </div>
    </div>
  </div>
</section>

.hero--split-hero {
  position: relative;
  height: 70vh; 
  max-height: 500px;
  overflow: hidden;
}

.hero--split-hero .hero__content {
  margin: auto 0;
}

.hero--split-hero .hero__image {
  position: relative;
}

.hero--split-hero .hero__image img {
  position: absolute;
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero--split-hero svg {
  position: absolute;
  top: 0;
  fill: $primary-color;
}