Portfolio card

          
            <!-- Hero Section -->
            <div class="position-relative u-bg-light-blue-50 overflow-hidden">
              <div class="container position-relative u-space-4-top u-space-5-top--md u-space-4-bottom z-index-2">
                <div class="w-md-80 w-lg-60 text-center mx-auto">
                  <h1 class="display-4 font-size-48--md-down text-primary">Portfolio <span class="font-weight-bold">card</span></h1>
                  <p class="lead">Your portfolio should tell your story.</p>
                </div>
              </div>

              <!-- SVG Background Left Top Shape -->
              <figure class="w-100 w-md-75 w-lg-50 position-absolute-top-left-0 mx-auto">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                     viewBox="0 0 900 919" style="enable-background:new 0 0 900 919;" xml:space="preserve">
                  <linearGradient id="heroPathID1" gradientUnits="userSpaceOnUse" x1="0" y1="501" x2="599" y2="501">
                    <stop class="u-stop-color-midnightblue" offset="7.500810e-08"/>
                    <stop class="u-stop-color-primary" offset="1"/>
                  </linearGradient>
                  <path fill="url(#heroPathID1)" d="M599,83c0,0-552.6,361-597.8,836L0,486.3C0,486.3,232.6,170,599,83z"/>
                  <path class="u-fill-danger" d="M1,919c0,0,164.2-790,683-919H229.8C229.8,0,1,257,1,577V919z"/>
                  <linearGradient id="heroPathID2" gradientUnits="userSpaceOnUse" x1="0" y1="196.5" x2="900" y2="196.5">
                    <stop class="u-stop-color-midnightblue" offset="0"/>
                    <stop class="u-stop-color-primary" offset="1"/>
                  </linearGradient>
                  <path fill="url(#heroPathID2)" d="M197,393c0,0,254-343,703-393H0L197,393z"/>
                  <linearGradient id="heroPathID3" gradientUnits="userSpaceOnUse" x1="0.5" y1="310.75" x2="562.3972" y2="310.75">
                    <stop class="u-stop-color-midnightblue" offset="0"/>
                    <stop class="u-stop-color-primary" offset="1"/>
                  </linearGradient>
                  <path fill="url(#heroPathID3)" d="M0.5,0.5V621c0,0,190.7-441.2,561.9-620.5H0.5z"/>
                </svg>
              </figure>
              <!-- End SVG Background Left Top Shape -->

              <!-- SVG Background -->
              <figure class="position-absolute-bottom-0">
                <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="100%" height="140px" viewBox="20 -20 300 100" style="margin-bottom: -8px;" xml:space="preserve">
                  <path class="u-fill-primary" opacity=".075" d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729
              c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z" />
                  <path class="u-fill-primary" opacity=".075" d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729
              c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z" />
                  <path class="u-fill-primary" opacity="0" d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716
              H42.401L43.415,98.342z" />
                  <path class="u-fill-white" d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428
              c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z" />
                </svg>
              </figure>
              <!-- End SVG Background Section -->
            </div>
            <!-- End Hero Section -->