Got a project for us?

We help brands and platforms turn big ideas into beautiful digital products and experiences.

HTML:

          
            <!-- Hire Us Title Section -->
            <div class="position-relative u-gradient-half-primary-v1 z-index-2">
              <div class="container u-space-4-top u-space-5-top--md u-space-3-bottom u-space-5-bottom--lg">
                <div class="w-md-80 w-lg-50 text-center mx-auto">
                  <h1 class="text-white">Got a <span class="font-weight-bold">project</span> for us?</h1>
                  <p class="lead u-text-light">We help brands and platforms turn big ideas into beautiful digital products and experiences.</p>
                </div>
              </div>

              <!-- SVG Background Shapes -->
              <figure class="w-100 w-sm-75 w-md-50 u-content-centered-y z-index-minus-1 ml-9">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 849.4 419.7" style="enable-background:new 0 0 849.4 419.7;" xml:space="preserve">
                  <g>
                    <linearGradient id="hireUsBgShape1" gradientUnits="userSpaceOnUse" x1="0.644" y1="109.4822" x2="84.356" y2="109.4822">
                      <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                      <stop class="u-stop-color-danger" offset="1"/>
                    </linearGradient>
                    <path fill="url(#hireUsBgShape1)" d="M77.6,157.5L77.6,157.5c-7.3,5.4-17.7,3.7-23.1-3.6L3.8,84.5c-5.4-7.3-3.7-17.7,3.6-23.1l0,0
                      c7.3-5.4,17.7-3.7,23.1,3.6l50.7,69.4C86.5,141.8,84.9,152.2,77.6,157.5z"/>
                  </g>
                  <g>
                    <linearGradient id="hireUsBgShape2" gradientUnits="userSpaceOnUse" x1="366.1731" y1="39.5945" x2="430.9116" y2="39.5945">
                      <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                      <stop class="u-stop-color-info" offset="1"/>
                    </linearGradient>
                    <path fill="url(#hireUsBgShape2)" d="M425.7,76.7L425.7,76.7c-5.7,4.1-13.7,2.9-17.8-2.8l-39.2-53.7c-4.1-5.7-2.9-13.7,2.8-17.8l0,0
                      c5.7-4.1,13.7-2.9,17.8,2.8l39.2,53.7C432.6,64.6,431.4,72.6,425.7,76.7z"/>
                  </g>
                  <linearGradient id="hireUsBgShape3" gradientUnits="userSpaceOnUse" x1="716" y1="109.4822" x2="739" y2="109.4822">
                    <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                    <stop class="u-stop-color-info" offset="1"/>
                  </linearGradient>
                  <circle fill="url(#hireUsBgShape3)" cx="727.5" cy="109.5" r="11.5"/>
                  <linearGradient id="hireUsBgShape4" gradientUnits="userSpaceOnUse" x1="0" y1="317.4822" x2="29" y2="317.4822">
                    <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                    <stop class="u-stop-color-danger" offset="1"/>
                  </linearGradient>
                  <circle fill="url(#hireUsBgShape4)" cx="14.5" cy="317.5" r="14.5"/>
                  <g>
                    <linearGradient id="hireUsBgShape5" gradientUnits="userSpaceOnUse" x1="139.1731" y1="371.5945" x2="203.9116" y2="371.5945">
                      <stop class="u-stop-color-primary" offset="7.500810e-08"/>
                      <stop class="u-stop-color-info" offset="1"/>
                    </linearGradient>
                    <path fill="url(#hireUsBgShape5)" d="M198.7,408.7L198.7,408.7c-5.7,4.1-13.7,2.9-17.8-2.8l-39.2-53.7c-4.1-5.7-2.9-13.7,2.8-17.8l0,0
                      c5.7-4.1,13.7-2.9,17.8,2.8l39.2,53.7C205.6,396.6,204.4,404.6,198.7,408.7z"/>
                  </g>
                  <g>
                    <linearGradient id="hireUsBgShape6" gradientUnits="userSpaceOnUse" x1="765.644" y1="368.4822" x2="849.356" y2="368.4822">
                      <stop class="u-stop-color-warning" offset="7.500810e-08"/>
                      <stop class="u-stop-color-danger" offset="1"/>
                    </linearGradient>
                    <path fill="url(#hireUsBgShape6)" d="M842.6,416.5L842.6,416.5c-7.3,5.4-17.7,3.7-23.1-3.6l-50.7-69.4c-5.4-7.3-3.7-17.7,3.6-23.1v0
                      c7.3-5.4,17.7-3.7,23.1,3.6l50.7,69.4C851.5,400.8,849.9,411.2,842.6,416.5z"/>
                  </g>
                </svg>
              </figure>
              <!-- End SVG Background Shapes -->

              <!-- SVG Bottom Shape -->
              <figure class="position-absolute-bottom-0">
                <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 1920 347.1" style="margin-bottom: -8px; enable-background:new 0 0 1920 347.1;" xml:space="preserve">
                  <linearGradient id="hireUsBottomShape" gradientUnits="userSpaceOnUse" x1="960" y1="347.082" x2="960" y2="50.6077">
                    <stop class="u-stop-color-primary" offset="1.500162e-07" stop-opacity="0.3"/>
                    <stop class="u-stop-color-white" offset="1" stop-opacity="0.3"/>
                  </linearGradient>
                  <path fill="url(#hireUsBottomShape)" d="M0,233c0,0,311.2-97,706.6-35.5c152.8,23.8,304.3,73.9,459.2,81.8c69.2,3.5,138.2-4.1,205.7-19.6
                    c43.2-9.9,85.8-22.8,127.7-37.3c74.1-25.6,144.2-61.1,210-103.5c62.4-40.2,134.7-74.7,210.9-67.3c0,0,0,295.5,0,295.5H0.5L0,233z"/>
                  <path class="u-fill-white" d="M0,326.1c0,0,321-226.7,960.5-76.4S1920,0,1920,0v347H0L0,326.1z"/>
                </svg>
              </figure>
              <!-- End SVG Bottom Shape -->
            </div>
            <!-- End Hire Us Title Section -->