We help
Building brands people can't live without is how our clients grow.
HTML:
<!-- Hero Section -->
<div class="d-lg-flex align-items-lg-center u-gradient-half-primary-v1 min-height-100vh--lg">
<div class="d-none d-lg-block u-bg-img-hero position-absolute-top-0 min-height-100vh--lg" style="background-image: url(../../assets/img/bg-shapes/bg1.png);"></div>
<div class="container u-space-4-top u-space-3-bottom">
<div class="row align-items-md-center">
<div class="col-lg-6">
<!-- Title -->
<div class="mb-7">
<h1 class="text-white font-weight-normal">
We help<br>
<span class="text-warning">
<span class="u-text-animation u-text-animation--typing"></span>
</span>
</h1>
<p class="lead u-text-light">Building brands people can't live without is how our clients grow.</p>
</div>
<!-- End Title -->
<a class="btn u-btn-white u-btn-wide text-primary transition-3d-hover" href="../../html/pages/hire-us.html">Hire Us</a>
</div>
<div class="col-lg-6 d-none d-lg-inline-block">
<!-- SVG Shapes -->
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 135.5" style="enable-background:new 0 0 270 135.5;" xml:space="preserve">
<linearGradient id="graphicFiguresID1" gradientUnits="userSpaceOnUse" x1="104.849" y1="61.8361" x2="265" y2="61.8361">
<stop class="u-stop-color-white" stop-opacity="0" offset="5.908129e-07"/>
<stop class="u-stop-color-warning" offset="1"/>
</linearGradient>
<path class="u-fill-none" opacity="0.16" stroke="url(#graphicFiguresID1)" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"
d="M263.5,38c0,0-30.9,1-47.9,26S173,91,150.7,77s-25.9-17.9-44.3-12"/>
<linearGradient id="graphicFiguresID2" gradientUnits="userSpaceOnUse" x1="24.5" y1="66.5176" x2="270" y2="66.5176">
<stop class="u-stop-color-white" stop-opacity="0" offset="5.908129e-07"/>
<stop class="u-stop-color-danger" offset="1"/>
</linearGradient>
<path class="u-fill-none" stroke="url(#graphicFiguresID2)" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"
d="M26,128c10.1,2.1,20.6-1.1,30.5-3c8.7-1.7,17.6-2.5,26.5-3c11.6-0.6,23.2-0.1,34,4.5c0.3,0.1,0.6,0.3,0.9,0.4
c7.9,3.1,17.1,2.2,24.2-2.5c5.3-3.5,9.4-8.5,15.3-11.1c5.2-2.3,11-3,16.6-3.3c8.8-0.5,16.4,1.5,23,7.5c4.8,4.3,9,9.7,15.1,12.3
c5.7,2.4,12.2,2.2,17.9,0.2c3.9-1.4,7.2-4,9.9-7.2c10.8-12.9,12.7-33,13.8-49.1c0.7-9.9,1.3-19.9,0.3-29.8c-0.6-5.6-1-10.8,0-16.4
c1.8-10,7.1-19,14.4-26"/>
<linearGradient id="graphicFiguresID3" gradientUnits="userSpaceOnUse" x1="0" y1="83.4264" x2="265.5" y2="83.4264">
<stop class="u-stop-color-white" stop-opacity="0" offset="3.954259e-07"/>
<stop class="u-stop-color-warning" offset="1"/>
</linearGradient>
<path id="XMLID_1_" class="u-fill-none" stroke="url(#graphicFiguresID3)" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10"
d="M1.5,134c21.8-0.7,44.8-4.5,63.9-18.3c10.7-7.8,18.2-18.2,24.9-30.9c6.5-12.4,15.5-23,28-24.6
c18.8-2.5,33.5,15.5,51.9,16.8c1.9,0.1,3.7,0.1,5.6-0.1c5.2-0.5,10.1-2.3,14.4-5.3c4.1-2.8,7.3-6.9,10.1-11
c6.3-9.1,14.6-16.9,24.5-21.8c7.4-3.6,15.5-5.8,23.7-6.1c5.2-0.2,10.4,0.6,15.5,1.1"/>
<g>
<path class="u-fill-warning" opacity=".1" d="M235.5,83.5L235.5,83.5c-7.7,0-14-6.3-14-14v0c0-7.7,6.3-14,14-14h0c7.7,0,14,6.3,14,14v0C249.5,77.2,243.2,83.5,235.5,83.5z"/>
<g id="Page-1">
<g id="slack_cmyk">
<g id="Group-4" transform="translate(14.000000, 4.000000)">
<g id="Clip-2">
</g>
<defs>
<filter id="maskFilterID1" filterUnits="userSpaceOnUse" x="221.5" y="57.4" width="6.8" height="14.7">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="221.5" y="57.4" width="6.8" height="14.7" id="maskID1">
<g filter="url(#maskFilterID1)">
<polygon id="path-1_4_" class="u-fill-white" points="215.5,74.1 228.3,74.1 228.3,57.4 215.5,57.4"/>
</g>
</mask>
<path id="Fill-1" mask="url(#maskID1)" fill="#DFA22F"
d="M224.4,58.4c-0.3-0.8-1.1-1.2-1.9-1c-0.8,0.3-1.2,1.1-1,1.9l3.8,11.8c0.3,0.7,1.1,1.1,1.8,0.9c0.8-0.2,1.3-1.1,1-1.8C228.2,70.2,224.4,58.4,224.4,58.4"/>
<defs>
<filter id="maskFilterID2" filterUnits="userSpaceOnUse" x="215.5" y="59.3" width="6.8" height="14.7">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
</filter>
</defs>
<mask maskUnits="userSpaceOnUse" x="215.5" y="59.3" width="6.8" height="14.7" id="maskID2">
<polygon id="path-1_3_" class="u-fill-white" points="215.5,74.1 228.3,74.1 228.3,57.4 215.5,57.4"/>
</mask>
<path id="Fill-3" mask="url(#maskID2)" fill="#3CB187"
d="M218.4,60.4c-0.3-0.8-1.1-1.2-1.9-1c-0.8,0.3-1.2,1.1-1,1.9l3.8,11.8c0.3,0.7,1.1,1.1,1.8,0.9c0.8-0.2,1.3-1.1,1-1.8C222.3,72.2,218.4,60.4,218.4,60.4"/>
</g>
<path id="Fill-5" fill="#CE1E5B" d="M243.2,72.2c0.8-0.3,1.2-1.1,1-1.9c-0.3-0.8-1.1-1.2-1.9-1l-11.8,3.8c-0.7,0.3-1.1,1.1-0.9,1.8c0.2,0.8,1.1,1.3,1.8,1C231.4,76.1,243.2,72.2,243.2,72.2"/>
<path id="Fill-6" fill="#392538" d="M233,75.6c0.8-0.2,1.8-0.6,2.8-0.9c-0.2-0.8-0.6-1.8-0.9-2.8l-2.8,0.9L233,75.6"/>
<g id="Group-10" transform="translate(0.000000, 18.000000)">
<path id="Fill-7" fill="#BB242A" d="M238.9,55.6c1.1-0.3,2.1-0.7,2.8-0.9c-0.2-0.8-0.6-1.8-0.9-2.8l-2.8,0.9L238.9,55.6"/>
<path id="Fill-9" fill="#72C5CD" d="M241.3,48.3c0.8-0.3,1.2-1.1,1-1.9c-0.3-0.8-1.1-1.2-1.9-1l-11.8,3.8c-0.7,0.3-1.1,1.1-0.9,1.8c0.2,0.8,1.1,1.3,1.8,1C229.5,52.1,241.3,48.3,241.3,48.3"/>
</g>
<path id="Fill-11" fill="#238C73" d="M231,69.6c0.8-0.2,1.8-0.6,2.8-0.9c-0.3-1.1-0.7-2.1-0.9-2.8l-2.8,0.9L231,69.6"/>
<path id="Fill-12" fill="#62803A" d="M237,67.7c1.1-0.3,2.1-0.7,2.8-0.9c-0.3-1.1-0.7-2.1-0.9-2.8l-2.8,0.9L237,67.7"/>
</g>
</g>
</g>
<g>
<path class="u-fill-white" d="M11,127.5L11,127.5c-4.7,0-8.5-3.8-8.5-8.5v0c0-4.7,3.8-8.5,8.5-8.5h0c4.7,0,8.5,3.8,8.5,8.5v0
C19.5,123.7,15.7,127.5,11,127.5z"/>
<g>
<path id="arrow_1_" fill="#FF9900" d="M14.7,121c-1.1,0.5-2.4,0.7-3.5,0.7c-1.7,0-3.3-0.5-4.6-1.2c-0.1-0.1-0.2,0.1-0.1,0.1c1.2,1.1,2.8,1.7,4.6,1.7c1.3,0,2.7-0.4,3.7-1.1C15,121.2,14.8,121,14.7,121z"/>
<path id="arrow" fill="#FF9900" d="M14,120.6c-0.1,0.1-0.1,0.1,0,0.1c0.3,0,1.1-0.1,1.2,0c0.1,0.2-0.1,0.8-0.3,1.2c0,0.1,0,0.1,0.1,0.1c0.5-0.5,0.7-1.4,0.6-1.5C15.5,120.3,14.6,120.2,14,120.6z"/>
<path id="a_1_" fill="#221F1F" d="M11.6,117c-0.7,0.1-1.6,0.1-2.2,0.4c-0.7,0.3-1.2,1-1.2,1.9c0,1.2,0.8,1.8,1.8,1.8
c0.8,0,1.3-0.2,1.9-0.9c0.2,0.3,0.3,0.5,0.7,0.8c0.1,0,0.2,0,0.3,0l0,0c0.2-0.2,0.7-0.6,0.9-0.8c0.1-0.1,0.1-0.2,0-0.3
c-0.2-0.3-0.4-0.5-0.4-1.1v-1.8c0-0.8,0.1-1.5-0.5-2c-0.4-0.4-1.2-0.6-1.8-0.6c-1.1,0-2.4,0.4-2.6,1.8c0,0.1,0.1,0.2,0.2,0.2
l1.1,0.1c0.1,0,0.2-0.1,0.2-0.2c0.1-0.5,0.5-0.7,0.9-0.7c0.2,0,0.5,0.1,0.7,0.3c0.2,0.2,0.1,0.6,0.1,0.8L11.6,117L11.6,117z
M11.4,119.5c-0.2,0.3-0.5,0.5-0.8,0.5c-0.4,0-0.7-0.3-0.7-0.8c0-1,0.9-1.2,1.7-1.2v0.3C11.6,118.7,11.6,119.1,11.4,119.5z"/>
</g>
</g>
<g>
<defs>
<path id="clipPathID3" d="M56.3,86.5L56.3,86.5c-9.5,0-17.3-7.7-17.3-17.2v0C39,59.7,46.7,52,56.2,52h0c9.5,0,17.2,7.7,17.2,17.2v0
C73.5,78.8,65.8,86.5,56.3,86.5z"/>
</defs>
<clipPath id="clipPathID1">
<use xlink:href="#clipPathID3" style="overflow:visible;"/>
</clipPath>
<g transform="matrix(1 0 0 1 0 -3.814697e-06)" style="clip-path:url(#clipPathID1);">
<!-- Apply your (100px width to 100px height) image here -->
<image style="overflow:visible;" width="100" height="100" xlink:href="../../assets/img/100x100/img1.jpg" transform="matrix(0.3666 0 0 0.3666 37.9219 50.5935)"></image>
</g>
<use xlink:href="#clipPathID3" class="u-stroke-white" overflow="visible" fill="none" stroke-width="1.5" stroke-miterlimit="10"/>
</g>
<g>
<path class="u-fill-white" d="M159.5,62.5L159.5,62.5c-8.3,0-15-6.7-15-15v0c0-8.3,6.7-15,15-15h0c8.3,0,15,6.7,15,15v0C174.5,55.8,167.8,62.5,159.5,62.5z"/>
<path fill="#0061FF" d="M159.5,42.3l-5.3,3.4l5.3,3.4l-5.3,3.4l-5.3-3.4l5.3-3.4l-5.3-3.4l5.3-3.4L159.5,42.3z M154.2,53.6l5.3-3.4
l5.3,3.4l-5.3,3.4L154.2,53.6z M159.5,49l5.3-3.4l-5.3-3.4l5.3-3.4l5.3,3.4l-5.3,3.4l5.3,3.4l-5.3,3.4L159.5,49z"/>
</g>
<g>
<defs>
<path id="clipPathID5" d="M177.8,127.5L177.8,127.5c-8.7,0-15.8-7.1-15.8-15.7v0c0-8.7,7.1-15.7,15.7-15.7h0c8.7,0,15.7,7.1,15.7,15.7v0C193.5,120.4,186.4,127.5,177.8,127.5z"/>
</defs>
<clipPath id="clipPathID6">
<use xlink:href="#clipPathID5" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#clipPathID6);">
<!-- Apply your (100px width to 100px height) image here -->
<image style="overflow:visible;" width="100" height="100" xlink:href="../../assets/img/100x100/img2.jpg" transform="matrix(0.3347 0 0 0.3347 161.0156 95.0156)"></image>
</g>
<use xlink:href="#clipPathID5" class="u-stroke-white" overflow="visible" fill="none" stroke-width="1.5" stroke-miterlimit="10"/>
</g>
</svg>
</figure>
<!-- End SVG Shapes -->
</div>
</div>
</div>
</div>
<!-- End Hero Section -->
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/typed.js/lib/typed.min.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of text animation (typing)
var typed = new Typed(".u-text-animation-v2.u-text-animation-v2--typing", {
strings: ["building brands.", "dealing with complexity.", "win more business."],
typeSpeed: 60,
loop: true,
backDelay: 1500
});
});
</script>