Dawn theme footer wave

[MatasMo]

Hello,

How do I make fotter wave effect like in this store? https://www.freshiris.lt/

[topnewyork]

1. Go to Online Store -> Theme -> Customize --> Footer --> Add section --> Custom liquid --> Paste the below code

<div id="shopify-section-sections--21054432969036__ss_wave_2_GFW84c" class="shopify-section shopify-section-group-footer-group">
<style data-shopify="">.section-sections--21054432969036__ss_wave_2_GFW84c {
    border-top: solid #000000 0px;
    border-bottom: solid #000000 0px;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .section-sections--21054432969036__ss_wave_2_GFW84c-settings {
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .wave-item-sections--21054432969036__ss_wave_2_GFW84c svg {
    color: #121212;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    max-height: 62px;
  }
  .wave-parallax2-sections--21054432969036__ss_wave_2_GFW84c > use {
    opacity: .4;
  }
  .wave-parallax3-sections--21054432969036__ss_wave_2_GFW84c > use {
    opacity: .3;
  }
  .wave-parallax4-sections--21054432969036__ss_wave_2_GFW84c > use {
    opacity: .2;
  }
  @media(min-width: 1024px) {
    .section-sections--21054432969036__ss_wave_2_GFW84c {
      margin-top: 0px;
      margin-bottom: 0px;
    }
    .section-sections--21054432969036__ss_wave_2_GFW84c-settings {
      padding: 0 5rem;
      padding-top: 0px;
      padding-bottom: 0px;
      padding-left: 0rem;
      padding-right: 0rem;
    }
    .wave-item-sections--21054432969036__ss_wave_2_GFW84c svg {
      max-height: 120px;
    }
  }</style>
  <style>
    .wave-parallax1-sections--21054432969036__ss_wave_2_GFW84c > use {
      animation: move-forever1sections--21054432969036__ss_wave_2_GFW84c 10s linear infinite;
    }
    .wave-parallax2-sections--21054432969036__ss_wave_2_GFW84c > use {
      animation: move-forever2sections--21054432969036__ss_wave_2_GFW84c 10s linear infinite;
    }
    .wave-parallax3-sections--21054432969036__ss_wave_2_GFW84c > use {
      animation: move-forever3sections--21054432969036__ss_wave_2_GFW84c 10s linear infinite;
    }
    .wave-parallax3-sections--21054432969036__ss_wave_2_GFW84c > use {
      animation: move-forever4sections--21054432969036__ss_wave_2_GFW84c 10s linear infinite;
    }
    @keyframes move-forever1sections--21054432969036__ss_wave_2_GFW84c {
      0% {
          transform: translate(85px);
      }
      100% {
          transform: translate(-90px);
      }
    }
    @keyframes move-forever2sections--21054432969036__ss_wave_2_GFW84c {
      0% {
          transform: translate(-90px);
      }
      100% {
          transform: translate(85px);
      }
    }
    @keyframes move-forever3sections--21054432969036__ss_wave_2_GFW84c {
      0% {
          transform: translate(85px);
      }
      100% {
          transform: translate(-90px);
      }
    }
    @keyframes move-forever4sections--21054432969036__ss_wave_2_GFW84c {
      0% {
          transform: translate(-90px);
      }
      100% {
          transform: translate(85px);
      }
    }
  </style>
<div class="section-sections--21054432969036__ss_wave_2_GFW84c wave-sections--21054432969036__ss_wave_2_GFW84c" style="background-color:#FFFFFF; background-image: ;">
    <div class="section-sections--21054432969036__ss_wave_2_GFW84c-settings">
      <div class="wave-item-sections--21054432969036__ss_wave_2_GFW84c">
        <svg class="waves-animated-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none">
          <defs>
            <path id="gentle-wave" d="M-160 44c30 0
              58-18 88-18s
              58 18 88 18
              58-18 88-18
              58 18 88 18
              v44h-352z"></path>
          </defs>
          <g class="wave-parallax1-sections--21054432969036__ss_wave_2_GFW84c">
            <use xlink:href="#gentle-wave" x="50" y="3" fill="currentColor"></use>
          </g>
          <g class="wave-parallax2-sections--21054432969036__ss_wave_2_GFW84c">
            <use xlink:href="#gentle-wave" x="50" y="0" fill="currentColor"></use>
          </g>
          <g class="wave-parallax3-sections--21054432969036__ss_wave_2_GFW84c">
            <use xlink:href="#gentle-wave" x="50" y="9" fill="currentColor"></use>
          </g>
          <g class="wave-parallax4-sections--21054432969036__ss_wave_2_GFW84c">
            <use xlink:href="#gentle-wave" x="50" y="6" fill="currentColor"></use>
          </g>
        </svg>
      </div>
    </div>
</div>
</div>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[MatasMo]

Thank you! I have added the code, but it's above the footer not like in the example website. 

[topnewyork]

Please kindly mark this as an accepted solution and like it. 

I am giving you the solution. 

Thanks!

[topnewyork]

Kindly provide me your store URL. 

[topnewyork]

Moreover, kindly go to online store -> theme -> customize --> Footer --> Color Scheme --> Select Scheme 4 which is black.

[MatasMo · Accepted solution]

It worker! Thank you. Now I just have this white line separating the wave from footer. I have my margins and paddings set to 0. 

[topnewyork]

Glad it worked, kindly mark my as an accepted solution above. 

Thanks!