We help

Building brands people can't live without is how our clients grow.

Hire Us

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>