[snippet_preview_vc code="{``settings``:{``resources``:`{``}`,``title``:``Simple CSS Waves | Mobile & Full width``},``code``:{``html``:``%3Cdiv%20class%3D%22header%22%3E%0A%0A%3C!--Content%20before%20waves--%3E%0A%3Cdiv%20class%3D%22inner-header%20flex%22%3E%0A%3C!--Just%20the%20logo..%20Don't%20mind%20this--%3E%0A%3Csvg%20version%3D%221.1%22%20class%3D%22logo%22%20baseProfile%3D%22tiny%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0Axmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20500%20500%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20fill%3D%22%23FFFFFF%22%20stroke%3D%22%23000000%22%20stroke-width%3D%2210%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M57%2C283%22%20%2F%3E%0A%3Cg%3E%3Cpath%20fill%3D%22%23fff%22%0Ad%3D%22M250.4%2C0.8C112.7%2C0.8%2C1%2C112.4%2C1%2C250.2c0%2C137.7%2C111.7%2C249.4%2C249.4%2C249.4c137.7%2C0%2C249.4-111.7%2C249.4-249.4%0AC499.8%2C112.4%2C388.1%2C0.8%2C250.4%2C0.8z%20M383.8%2C326.3c-62%2C0-101.4-14.1-117.6-46.3c-17.1-34.1-2.3-75.4%2C13.2-104.1%0Ac-22.4%2C3-38.4%2C9.2-47.8%2C18.3c-11.2%2C10.9-13.6%2C26.7-16.3%2C45c-3.1%2C20.8-6.6%2C44.4-25.3%2C62.4c-19.8%2C19.1-51.6%2C26.9-100.2%2C24.6l1.8-39.7%09%09c35.9%2C1.6%2C59.7-2.9%2C70.8-13.6c8.9-8.6%2C11.1-22.9%2C13.5-39.6c6.3-42%2C14.8-99.4%2C141.4-99.4h41L333%2C166c-12.6%2C16-45.4%2C68.2-31.2%2C96.2%09c9.2%2C18.3%2C41.5%2C25.6%2C91.2%2C24.2l1.1%2C39.8C390.5%2C326.2%2C387.1%2C326.3%2C383.8%2C326.3z%22%20%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A%3Ch1%3ESimple%20CSS%20Waves%3C%2Fh1%3E%0A%3C%2Fdiv%3E%0A%0A%3C!--Waves%20Container--%3E%0A%3Cdiv%3E%0A%3Csvg%20class%3D%22waves%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0AviewBox%3D%220%2024%20150%2028%22%20preserveAspectRatio%3D%22none%22%20shape-rendering%3D%22auto%22%3E%0A%3Cdefs%3E%0A%3Cpath%20id%3D%22gentle-wave%22%20d%3D%22M-160%2044c30%200%2058-18%2088-18s%2058%2018%2088%2018%2058-18%2088-18%2058%2018%2088%2018%20v44h-352z%22%20%2F%3E%0A%3C%2Fdefs%3E%0A%3Cg%20class%3D%22parallax%22%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23gentle-wave%22%20x%3D%2248%22%20y%3D%220%22%20fill%3D%22rgba(255%2C255%2C255%2C0.7%22%20%2F%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23gentle-wave%22%20x%3D%2248%22%20y%3D%223%22%20fill%3D%22rgba(255%2C255%2C255%2C0.5)%22%20%2F%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23gentle-wave%22%20x%3D%2248%22%20y%3D%225%22%20fill%3D%22rgba(255%2C255%2C255%2C0.3)%22%20%2F%3E%0A%3Cuse%20xlink%3Ahref%3D%22%23gentle-wave%22%20x%3D%2248%22%20y%3D%227%22%20fill%3D%22%23fff%22%20%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A%3C%2Fdiv%3E%0A%3C!--Waves%20end--%3E%0A%0A%3C%2Fdiv%3E%0A%3C!--Header%20ends--%3E%0A%0A%3C!--Content%20starts--%3E%0A%3Cdiv%20class%3D%22content%20flex%22%3E%0A%3Cp%3EBig%20Appli%20%7C%202021%3C%2Fp%3E%0A%3C%2Fdiv%3E%0A%3C!--Content%20ends--%3E``,``js``:````,``css``:``%40import%20url(%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLato%3A300%3A400)%3B%0A%0Abody%20%7B%0A%20%20margin%3A0%3B%0A%7D%0A%0Ah1%20%7B%0A%20%20font-family%3A%20'Lato'%2C%20sans-serif%3B%0A%20%20font-weight%3A300%3B%0A%20%20letter-spacing%3A%202px%3B%0A%20%20font-size%3A48px%3B%0A%7D%0Ap%20%7B%0A%20%20font-family%3A%20'Lato'%2C%20sans-serif%3B%0A%20%20letter-spacing%3A%201px%3B%0A%20%20font-size%3A14px%3B%0A%20%20color%3A%20%23333333%3B%0A%7D%0A%0A.header%20%7B%0A%20%20position%3Arelative%3B%0A%20%20text-align%3Acenter%3B%0A%20%20background%3A%20linear-gradient(60deg%2C%20rgba(84%2C58%2C183%2C1)%200%25%2C%20rgba(0%2C172%2C193%2C1)%20100%25)%3B%0A%20%20color%3Awhite%3B%0A%7D%0A.logo%20%7B%0A%20%20width%3A50px%3B%0A%20%20fill%3Awhite%3B%0A%20%20padding-right%3A15px%3B%0A%20%20display%3Ainline-block%3B%0A%20%20vertical-align%3A%20middle%3B%0A%7D%0A%0A.inner-header%20%7B%0A%20%20height%3A65vh%3B%0A%20%20width%3A100%25%3B%0A%20%20margin%3A%200%3B%0A%20%20padding%3A%200%3B%0A%7D%0A%0A.flex%20%7B%20%2F*Flexbox%20for%20containers*%2F%0A%20%20display%3A%20flex%3B%0A%20%20justify-content%3A%20center%3B%0A%20%20align-items%3A%20center%3B%0A%20%20text-align%3A%20center%3B%0A%7D%0A%0A.waves%20%7B%0A%20%20position%3Arelative%3B%0A%20%20width%3A%20100%25%3B%0A%20%20height%3A15vh%3B%0A%20%20margin-bottom%3A-7px%3B%20%2F*Fix%20for%20safari%20gap*%2F%0A%20%20min-height%3A100px%3B%0A%20%20max-height%3A150px%3B%0A%7D%0A%0A.content%20%7B%0A%20%20position%3Arelative%3B%0A%20%20height%3A20vh%3B%0A%20%20text-align%3Acenter%3B%0A%20%20background-color%3A%20white%3B%0A%7D%0A%0A%2F*%20Animation%20*%2F%0A%0A.parallax%20%3E%20use%20%7B%0A%20%20animation%3A%20move-forever%2025s%20cubic-bezier(.55%2C.5%2C.45%2C.5)%20%20%20%20%20infinite%3B%0A%7D%0A.parallax%20%3E%20use%3Anth-child(1)%20%7B%0A%20%20animation-delay%3A%20-2s%3B%0A%20%20animation-duration%3A%207s%3B%0A%7D%0A.parallax%20%3E%20use%3Anth-child(2)%20%7B%0A%20%20animation-delay%3A%20-3s%3B%0A%20%20animation-duration%3A%2010s%3B%0A%7D%0A.parallax%20%3E%20use%3Anth-child(3)%20%7B%0A%20%20animation-delay%3A%20-4s%3B%0A%20%20animation-duration%3A%2013s%3B%0A%7D%0A.parallax%20%3E%20use%3Anth-child(4)%20%7B%0A%20%20animation-delay%3A%20-5s%3B%0A%20%20animation-duration%3A%2020s%3B%0A%7D%0A%40keyframes%20move-forever%20%7B%0A%20%200%25%20%7B%0A%20%20%20transform%3A%20translate3d(-90px%2C0%2C0)%3B%0A%20%20%7D%0A%20%20100%25%20%7B%20%0A%20%20%20%20transform%3A%20translate3d(85px%2C0%2C0)%3B%0A%20%20%7D%0A%7D%0A%2F*Shrinking%20for%20mobile*%2F%0A%40media%20(max-width%3A%20768px)%20%7B%0A%20%20.waves%20%7B%0A%20%20%20%20height%3A40px%3B%0A%20%20%20%20min-height%3A40px%3B%0A%20%20%7D%0A%20%20.content%20%7B%0A%20%20%20%20height%3A30vh%3B%0A%20%20%7D%0A%20%20h1%20%7B%0A%20%20%20%20font-size%3A24px%3B%0A%20%20%7D%0A%7D``}}"]