Testimonials - 1

 
Screen Shot 2019-07-26 at 3.58.14 pm.png
 
  1. Add a code block to the page

 
 

2. Copy and paste the following to the Code Block

<div class="gc-testimonial-1" >
<svg style="position: absolute; top: -25px" width="50px" viewBox="0 0 106 106" version="1.1">
    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" stroke="#FFFFFF" stroke-width="5" fill="#F5F5F5" cx="53" cy="53" r="50"></circle>
        <path d="M66.8,53.9522184 C66.8,55.8816934 67.9399886,56.9067116 70.22,57.0273038 L73.82,57.2081911 C76.220012,57.3287833 78.3499907,58.4743919 80.21,60.6450512 C82.0700093,62.8157105 83,65.2878132 83,68.0614334 C83,71.4380146 81.800012,74.2718884 79.4,76.5631399 C76.999988,78.8543914 74.000018,80 70.4,80 C66.199979,80 62.7500135,78.3418823 60.05,75.0255973 C57.3499865,71.7093122 56,67.4585015 56,62.2730375 C56,52.6256628 59.7799622,42.737252 67.34,32.6075085 C70.1000138,28.8691508 72.4999898,27 74.54,27 C76.8200114,27 77.96,28.2059038 77.96,30.6177474 C77.96,31.5824849 77.3000066,32.908979 75.98,34.5972696 C72.7399838,38.6974039 70.0400108,43.5813141 67.88,49.2491468 C67.1599964,51.1786217 66.8,52.7462966 66.8,53.9522184 Z M33.62,53.9522184 C33.62,55.8816934 34.7599886,56.9067116 37.04,57.0273038 L40.64,57.2081911 C43.1600126,57.3287833 45.3499907,58.4743919 47.21,60.6450512 C49.0700093,62.8157105 50,65.2878132 50,68.0614334 C50,71.4380146 48.800012,74.2718884 46.4,76.5631399 C43.999988,78.8543914 41.000018,80 37.4,80 C33.199979,80 29.7500135,78.3418823 27.05,75.0255973 C24.3499865,71.7093122 23,67.4585015 23,62.2730375 C23,52.6256628 26.7799622,42.737252 34.34,32.6075085 C37.1000138,28.8691508 39.4999898,27 41.54,27 C43.8200114,27 44.96,28.2059038 44.96,30.6177474 C44.96,31.5824849 44.3000066,32.908979 42.98,34.5972696 C40.579988,37.6120742 38.4200096,41.1091951 36.5,45.0887372 C34.5799904,49.0682793 33.62,52.0227435 33.62,53.9522184 Z" id="“" fill-opacity="0.745164991" fill="#000000" fill-rule="nonzero"></path>
    </g>
</svg>
<table class="gc-table">
<tbody> <tr><td>Sam Benjamin</td><td style="text-align: right; width:80px"><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i></td></tr>
 <tr><td>Director | Seventh Street Ventures</td><td></td></tr>
</tbody></table>
<p style="font-size:14px">It was important to us that we had good communication with the company. We needed the job to be completed on time and a good response time for queries backwards and forwards. I’m probably one of their most demanding clients and I would rate them very highly for all three.
</p>
</div>
 

3. Add the following to your Custom CSS Section.

.gc-testimonial-1{transition: all .2s ease-in-out; background-color: #fff; padding: 40px 30px 40px; box-shadow: 5px 5px 10px rgba(57,73,76,.15);}
.gc-testimonial-1:hover{box-shadow: 5px 5px 15px rgba(57,73,76,.25) !important;}
table.gc-table { width:100%; font-size: 12px; color:#000; font-size:13px; font-weight:600; vertical-align: text-top;} 
 

4. Results

 
Sam Benjamin
Director | Seventh Street Ventures

It was important to us that we had good communication with the company. We needed the job to be completed on time and a good response time for queries backwards and forwards. I’m probably one of their most demanding clients and I would rate them very highly for all three.

 

TIPS

The current version with white background works best on grayish coloured backgrounds.

If you are planning to use it on a white coloured background, either play with “box-shadow” or “background-color” under “.gc-testimonial-1{ }” in CSS.


JaiComment